From 19d0813f02ea3cc24009a2300077c90dcfe11562 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 26 May 2026 01:57:05 +0700
Subject: [PATCH] webapp: login signup improvements + Google SSO (#1567)

## Login & Signup improvements + Google sign-in

- **Refreshed login & signup pages** - cleaner two-panel design with a
looping
Seedance 2.0 showcase video alongside the form, the ArtCraft logo, and a
back
button. Tidied up the related password-reset and welcome screens to
match.
- **Sign in with Google** - added a "Continue with Google" button to
both the
  login and signup pages.
- **Set a password after Google sign-up** - first-time Google users are
guided to
create a password (so they can also sign in on the desktop app), then
continue
  to the welcome/pricing page. Returning users go straight in.
- **Account settings** - the password option now says "Set" for accounts
that
don't have a password yet (and skips asking for a current one), and
"Change"
  otherwise.
---
 .../public/images/artcraft-icon.png           | Bin 0 -> 2428 bytes
 frontend/apps/artcraft-webapp/src/app/app.tsx |  13 +-
 .../src/components/auth/GoogleLoginButton.tsx |   8 +-
 .../src/components/auth/auth-layout.tsx       | 109 +++++++++
 .../src/components/auth/auth-showcase.tsx     |  45 ++++
 .../src/components/auth/index.ts              |   2 +
 .../src/components/auth/signup-form.tsx       |  73 +++---
 .../settings-modal/AccountSection.tsx         | 115 +++++----
 .../settings-modal/SettingsModal.tsx          |   4 +-
 .../src/components/topbar/topbar.tsx          |   4 +-
 .../src/components/ui/use-media-query.ts      |  18 ++
 .../apps/artcraft-webapp/src/lib/session.ts   |  12 +-
 .../pages/forgot-password/forgot-password.tsx |  10 +-
 .../pages/forgot-password/verify-reset.tsx    |  14 +-
 .../artcraft-webapp/src/pages/login/login.tsx | 230 ++++++++----------
 .../src/pages/set-password/index.ts           |   2 +
 .../src/pages/set-password/set-password.tsx   | 194 +++++++++++++++
 .../src/pages/signup/signup.tsx               |  51 ++--
 .../src/pages/welcome/welcome.tsx             |   7 +-
 frontend/libs/api/src/lib/UsersApi.ts         |   8 +-
 20 files changed, 659 insertions(+), 260 deletions(-)
 create mode 100644 frontend/apps/artcraft-webapp/public/images/artcraft-icon.png
 create mode 100644 frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
 create mode 100644 frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
 create mode 100644 frontend/apps/artcraft-webapp/src/components/ui/use-media-query.ts
 create mode 100644 frontend/apps/artcraft-webapp/src/pages/set-password/index.ts
 create mode 100644 frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx

diff --git a/frontend/apps/artcraft-webapp/public/images/artcraft-icon.png b/frontend/apps/artcraft-webapp/public/images/artcraft-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ded60e7ef4deb53397c523888fea8585c27bca51
GIT binary patch
literal 2428
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

literal 0
HcmV?d00001

diff --git a/frontend/apps/artcraft-webapp/src/app/app.tsx b/frontend/apps/artcraft-webapp/src/app/app.tsx
index d2651c9390..78c016a82d 100644
--- a/frontend/apps/artcraft-webapp/src/app/app.tsx
+++ b/frontend/apps/artcraft-webapp/src/app/app.tsx
@@ -20,6 +20,8 @@ import Pricing from "../pages/pricing";
 import Support from "../pages/support/support";
 import Login from "../pages/login";
 import Signup from "../pages/signup";
+import SetPassword from "../pages/set-password";
+import { AuthLayout } from "../components/auth";
 import ForgotPassword, { VerifyReset } from "../pages/forgot-password";
 import Welcome from "../pages/welcome";
 import Onboarding from "../pages/onboarding";
@@ -118,9 +120,14 @@ export function App() {
     <>
       <ScrollToTop />
       <Routes>
-        {/* Public — no chrome, no auth gate */}
-        <Route path="/login" element={<Login />} />
-        <Route path="/signup" element={<Signup />} />
+        {/* Public — no chrome, no auth gate. login/signup share a layout route
+            so the showcase pane (and its video) stays mounted when toggling
+            between them. */}
+        <Route element={<AuthLayout />}>
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<Signup />} />
+        </Route>
+        <Route path="/set-password" element={<SetPassword />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/forgot-password/verify" element={<VerifyReset />} />
 
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx b/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx
index ae0586573e..d54b1fbe25 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/GoogleLoginButton.tsx
@@ -57,9 +57,11 @@ export function GoogleLoginButton({
   };
 
   return (
-    <div className={`relative w-full h-12 ${className}`}>
+    <div
+      className={`group relative w-full h-10 transition-transform duration-150 active:scale-95 ${className}`}
+    >
       {/* Custom visual button - shown behind */}
-      <div className="absolute inset-0 w-full h-full flex items-center justify-center gap-3 bg-white text-black rounded-lg font-medium border border-gray-200 hover:bg-gray-50 transition-colors">
+      <div className="absolute inset-0 w-full h-full flex items-center justify-center gap-3 bg-white text-black rounded-full font-medium border border-gray-200 group-hover:border-white/80 group-hover:bg-white/80 transition-colors">
         {isLoading ? (
           <FontAwesomeIcon
             icon={faSpinnerThird}
@@ -68,7 +70,7 @@ export function GoogleLoginButton({
         ) : (
           <>
             <GoogleIcon />
-            <span>Continue with Google</span>
+            <span className="text-sm font-semibold">Continue with Google</span>
           </>
         )}
       </div>
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
new file mode 100644
index 0000000000..65de77fda7
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
@@ -0,0 +1,109 @@
+import { ReactNode } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { TruchetPattern } from "@storyteller/ui-vfx";
+import { AuthShowcase } from "./auth-showcase";
+import { useMediaQuery } from "../ui/use-media-query";
+
+/**
+ * Persistent shell for the auth pages. Rendered as a layout route so the
+ * showcase pane (and its video) stays mounted while the form pane swaps
+ * between login and signup via <Outlet> — toggling between the two no longer
+ * reloads the showcase video from the start. Each page renders its own header
+ * (AuthHeader) and footer (AuthFooter) into the outlet.
+ */
+export const AuthLayout = () => {
+  // Only mount the showcase on wide screens (matches the `lg` breakpoint) so
+  // mobile never downloads the demo videos.
+  const showShowcase = useMediaQuery("(min-width: 1024px)");
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate("/");
+  };
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#101014] p-4 text-white">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          maskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 40%, black 25%, transparent 80%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse 70% 60% at 50% 40%, black 25%, transparent 80%)",
+        }}
+      >
+        <TruchetPattern
+          intensity={0.5}
+          className="absolute inset-0 h-full w-full"
+        />
+      </div>
+
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          background:
+            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
+        }}
+      />
+
+      <div className="relative z-10 flex w-full max-w-5xl overflow-hidden rounded-3xl border border-white/[4%] bg-[#1C1C20] shadow-2xl lg:min-h-[640px]">
+        {/* Form pane — only the inner content swaps per route (via Outlet), so
+            this pane and the showcase beside it stay mounted across the
+            login/signup toggle. */}
+        <div className="relative flex w-full flex-col lg:w-1/2">
+          <button
+            type="button"
+            onClick={handleBack}
+            aria-label="Go back"
+            className="absolute left-5 top-5 z-20 flex h-9 w-9 items-center justify-center rounded-full text-white/60 transition-colors hover:bg-white/10 hover:text-white"
+          >
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </button>
+
+          <div className="flex flex-1 flex-col justify-center px-8 py-10 sm:px-10">
+            <div className="mx-auto w-full max-w-sm">
+              <Outlet />
+            </div>
+          </div>
+
+          <div className="px-8 pb-8 text-center text-xs text-white/20">
+            &copy; {new Date().getFullYear()} ArtCraft. All rights reserved.
+          </div>
+        </div>
+
+        {/* Showcase pane (desktop only) */}
+        {showShowcase && (
+          <div className="relative lg:w-1/2">
+            <AuthShowcase />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface AuthHeaderProps {
+  title: string;
+  subtitle: string;
+}
+
+export const AuthHeader = ({ title, subtitle }: AuthHeaderProps) => (
+  <div className="mb-8 text-center">
+    <img
+      src="/images/artcraft-icon.png"
+      alt="ArtCraft"
+      className="mx-auto mb-6 h-12 w-auto select-none pointer-events-none"
+      draggable={false}
+    />
+    <h1 className="mb-2 text-2xl font-semibold">{title}</h1>
+    <p className="text-sm text-white/60">{subtitle}</p>
+  </div>
+);
+
+export const AuthFooter = ({ children }: { children: ReactNode }) => (
+  <div className="mt-8 text-center text-sm text-white/60">{children}</div>
+);
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
new file mode 100644
index 0000000000..9335fe28ed
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
@@ -0,0 +1,45 @@
+const FEATURED_VIDEO_URL =
+  "https://player.vimeo.com/video/1169289718?background=1&autoplay=1&loop=1&muted=1";
+
+export const AuthShowcase = () => {
+  return (
+    <div
+      className="absolute inset-2 overflow-hidden bg-black rounded-2xl"
+      style={{ containerType: "size" }}
+    >
+      {/* Vimeo background embed (no controls) scaled to cover the pane. The
+          iframe is forced to 16:9 and sized to the larger cover dimension via
+          container-query units, then centered so the overflow crops evenly. */}
+      <iframe
+        src={FEATURED_VIDEO_URL}
+        title="Cheap Seedance 2.0"
+        allow="autoplay; fullscreen; picture-in-picture"
+        allowFullScreen
+        className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+        style={{
+          width: "max(100cqw, calc(100cqh * 16 / 9))",
+          height: "max(100cqh, calc(100cqw * 9 / 16))",
+        }}
+      />
+
+      {/* Legibility gradient behind the caption */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/10 to-black/25"
+      />
+
+      {/* Caption */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 p-8">
+        <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-300">
+          One of the cheapest
+        </p>
+        <h2 className="text-2xl font-bold leading-tight">
+          Seedance 2.0 Video Generation
+        </h2>
+        <p className="mt-1 max-w-sm text-sm text-white/70">
+          Generate jaw-dropping AI videos with Seedance 2.0.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/index.ts b/frontend/apps/artcraft-webapp/src/components/auth/index.ts
index 1b970188c8..fbe2826eb6 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/index.ts
+++ b/frontend/apps/artcraft-webapp/src/components/auth/index.ts
@@ -1,2 +1,4 @@
 export * from "./signup-form";
 export * from "./GoogleLoginButton";
+export * from "./auth-layout";
+export * from "./auth-showcase";
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx b/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
index f529ae7aed..830f844ea8 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { UsersApi } from "@storyteller/api";
 import {
   getLandingUrl,
@@ -14,6 +15,8 @@ import {
   getReferralUsername,
   getReferrer,
 } from "@storyteller/common";
+import { refreshSession, useSessionStore } from "../../lib/session";
+import { GoogleLoginButton } from "./GoogleLoginButton";
 
 interface SignupFormProps {
   onSuccess: (isNewUser?: boolean) => void;
@@ -28,6 +31,7 @@ export const SignupForm = ({
   className = "",
   autoFocus = false,
 }: SignupFormProps) => {
+  const navigate = useNavigate();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
@@ -81,36 +85,24 @@ export const SignupForm = ({
     }
   };
 
-  //const handleGoogleSuccess = (isNewUser: boolean) => {
-  //  onSuccess(isNewUser);
-  //};
+  const handleGoogleSuccess = async () => {
+    // Refresh so the session reflects the new cookie (and whether the account
+    // still needs a password), then route accordingly. New SSO users with no
+    // password go set one; everyone else goes home.
+    await refreshSession(true);
+    if (useSessionStore.getState().passwordNotSet) {
+      navigate("/set-password");
+    } else {
+      navigate("/");
+    }
+  };
 
-  //const handleGoogleError = (errorMessage: string) => {
-  //  setError(errorMessage);
-  //};
+  const handleGoogleError = (message: string) => {
+    setError(message);
+  };
 
   return (
     <div className={`space-y-4 ${className}`}>
-      {/* {showGoogleButton && (
-        <>
-          <GoogleLoginButton
-            mode="signup"
-            onSuccess={handleGoogleSuccess}
-            onError={handleGoogleError}
-          />
-
-          <div className="relative flex items-center justify-center py-2">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-white/10"></div>
-            </div>
-            <span className="relative bg-[#1C1C20] px-4 text-xs text-white/40 uppercase tracking-widest">
-              or
-            </span>
-          </div>
-        </>
-      )}
-      */}
-
       <form
         className="space-y-4"
         onSubmit={(e) => {
@@ -134,21 +126,23 @@ export const SignupForm = ({
             onChange={(e) => setEmail(e.target.value)}
             placeholder="you@example.com"
             autoFocus={autoFocus}
-            inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+            inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
           />
         </div>
 
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-white/70 ml-1">
-            Password
-          </label>
+          <div className="flex justify-between items-center ml-1">
+            <label className="text-xs font-semibold text-white/70">
+              Password
+            </label>
+          </div>
           <div className="relative">
             <Input
               type={showPassword ? "text" : "password"}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="Min. 8 characters"
-              inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+              inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
             />
             <button
               type="button"
@@ -170,11 +164,26 @@ export const SignupForm = ({
             {isLoading ? (
               <FontAwesomeIcon icon={faSpinnerThird} className="animate-spin" />
             ) : (
-              "Create Account"
+              "Create account"
             )}
           </Button>
         </div>
       </form>
+
+      <div className="relative flex items-center justify-center py-2">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-white/10" />
+        </div>
+        <span className="relative bg-[#1C1C20] px-4 text-xs uppercase tracking-widest text-white/40">
+          or
+        </span>
+      </div>
+
+      <GoogleLoginButton
+        mode="signup"
+        onSuccess={handleGoogleSuccess}
+        onError={handleGoogleError}
+      />
     </div>
   );
 };
diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
index f954fcec37..c3196bda08 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
@@ -18,9 +18,10 @@ type EditingSection = "username" | "email" | "password" | null;
 
 interface AccountSectionProps {
   user: UserInfo;
+  passwordNotSet: boolean;
 }
 
-export function AccountSection({ user }: AccountSectionProps) {
+export function AccountSection({ user, passwordNotSet }: AccountSectionProps) {
   const [editing, setEditing] = useState<EditingSection>(null);
 
   const requestOpen = (section: EditingSection) => setEditing(section);
@@ -44,6 +45,7 @@ export function AccountSection({ user }: AccountSectionProps) {
       <hr className="border-ui-panel-border" />
       <PasswordForm
         user={user}
+        passwordNotSet={passwordNotSet}
         isEditing={editing === "password"}
         onOpen={() => requestOpen("password")}
         onClose={close}
@@ -130,7 +132,9 @@ function UsernameForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
       await refreshSession(true);
       onClose();
     } else {
-      setError(humanizeError(response.errorMessage, "Could not update username."));
+      setError(
+        humanizeError(response.errorMessage, "Could not update username."),
+      );
     }
   };
 
@@ -280,15 +284,22 @@ function EmailForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
   );
 }
 
-function PasswordForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
+function PasswordForm({
+  user,
+  passwordNotSet,
+  isEditing,
+  onOpen,
+  onClose,
+}: SectionFormProps & { passwordNotSet: boolean }) {
   const [oldPassword, setOldPassword] = useState("");
   const [password, setPassword] = useState("");
   const [confirm, setConfirm] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
-  const canSubmit =
-    oldPassword.length > 0 && password.length > 0 && confirm.length > 0;
+  const canSubmit = passwordNotSet
+    ? password.length > 0 && confirm.length > 0
+    : oldPassword.length > 0 && password.length > 0 && confirm.length > 0;
 
   const reset = () => {
     setOldPassword("");
@@ -311,32 +322,32 @@ function PasswordForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
     e.preventDefault();
     setError(null);
 
-    if (oldPassword.length === 0) {
-      setError("Enter your current password.");
-      return;
-    }
     const reason = validatePassword(password, confirm);
     if (reason) {
       setError(reason);
       return;
     }
-    if (oldPassword === password) {
-      setError("New password must be different from the current password.");
-      return;
-    }
 
     setSubmitting(true);
     const usersApi = new UsersApi();
 
-    const verify = await usersApi.Login({
-      usernameOrEmail: user.username,
-      password: oldPassword,
-    });
-
-    if (!verify.success) {
-      setSubmitting(false);
-      setError("Current password is incorrect.");
-      return;
+    // When the account already has a password, confirm the current one before
+    // changing it. A new SSO account with no password set skips this step.
+    if (!passwordNotSet) {
+      if (oldPassword === password) {
+        setSubmitting(false);
+        setError("New password must be different from the current password.");
+        return;
+      }
+      const verify = await usersApi.Login({
+        usernameOrEmail: user.username,
+        password: oldPassword,
+      });
+      if (!verify.success) {
+        setSubmitting(false);
+        setError("Current password is incorrect.");
+        return;
+      }
     }
 
     const response = await usersApi.ChangePassword({
@@ -346,46 +357,59 @@ function PasswordForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
     setSubmitting(false);
 
     if (response.success) {
-      toast.success("Password updated.");
+      toast.success(passwordNotSet ? "Password set." : "Password updated.");
+      await refreshSession(true);
       handleClose();
     } else {
-      setError(humanizeError(response.errorMessage, "Could not update password."));
+      setError(
+        humanizeError(response.errorMessage, "Could not update password."),
+      );
     }
   };
 
   return (
     <SectionShell
       title="Password"
-      collapsedDescription="Used to sign in to your account."
-      editingDescription={`Choose a new password of at least ${PASSWORD_MIN} characters.`}
+      collapsedDescription={
+        passwordNotSet
+          ? "Set a password so you can also sign into the desktop app."
+          : "Used to sign in to your account."
+      }
+      editingDescription={`Choose a password of at least ${PASSWORD_MIN} characters.`}
+      actionLabel={passwordNotSet ? "Set" : "Change"}
       isEditing={isEditing}
       onOpen={handleOpen}
     >
       <form onSubmit={handleSubmit} className="flex flex-col gap-2">
-        <Input
-          type="password"
-          value={oldPassword}
-          onChange={(e) => setOldPassword(e.target.value)}
-          placeholder="Current password"
-          autoComplete="current-password"
-          autoFocus
-          inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
-        />
+        {!passwordNotSet && (
+          <Input
+            type="password"
+            value={oldPassword}
+            onChange={(e) => setOldPassword(e.target.value)}
+            placeholder="Current password"
+            autoComplete="current-password"
+            autoFocus
+            inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
+          />
+        )}
         <div className="grid grid-cols-2 gap-2">
           <Input
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            placeholder="New password"
+            placeholder={passwordNotSet ? "Password" : "New password"}
             minLength={PASSWORD_MIN}
             autoComplete="new-password"
+            autoFocus={passwordNotSet}
             inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
           />
           <Input
             type="password"
             value={confirm}
             onChange={(e) => setConfirm(e.target.value)}
-            placeholder="Confirm new password"
+            placeholder={
+              passwordNotSet ? "Confirm password" : "Confirm new password"
+            }
             minLength={PASSWORD_MIN}
             autoComplete="new-password"
             inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 outline-none"
@@ -408,6 +432,7 @@ function SectionShell({
   editingDescription,
   currentLabel,
   currentValue,
+  actionLabel = "Change",
   isEditing,
   onOpen,
   children,
@@ -417,6 +442,7 @@ function SectionShell({
   editingDescription: string;
   currentLabel?: string;
   currentValue?: string;
+  actionLabel?: string;
   isEditing: boolean;
   onOpen: () => void;
   children: React.ReactNode;
@@ -437,7 +463,7 @@ function SectionShell({
             className="h-9 px-3 shrink-0"
             onClick={onOpen}
           >
-            Change
+            {actionLabel}
           </Button>
         )}
       </div>
@@ -500,15 +526,15 @@ function FormActions({
 }
 
 function FormError({ message }: { message: string }) {
-  return (
-    <p className="text-xs text-red-400 leading-tight">{message}</p>
-  );
+  return <p className="text-xs text-red-400 leading-tight">{message}</p>;
 }
 
 function validateUsername(username: string): string | null {
   if (username.length === 0) return "Username cannot be empty.";
-  if (username.length < USERNAME_MIN) return `Username must be at least ${USERNAME_MIN} characters.`;
-  if (username.length > USERNAME_MAX) return `Username must be at most ${USERNAME_MAX} characters.`;
+  if (username.length < USERNAME_MIN)
+    return `Username must be at least ${USERNAME_MIN} characters.`;
+  if (username.length > USERNAME_MAX)
+    return `Username must be at most ${USERNAME_MAX} characters.`;
   if (!USERNAME_REGEX.test(username)) {
     return "Username may only contain letters, numbers, underscores, and hyphens.";
   }
@@ -523,7 +549,8 @@ function validateEmail(email: string): string | null {
 }
 
 function validatePassword(password: string, confirm: string): string | null {
-  if (password.length < PASSWORD_MIN) return `Password must be at least ${PASSWORD_MIN} characters.`;
+  if (password.length < PASSWORD_MIN)
+    return `Password must be at least ${PASSWORD_MIN} characters.`;
   if (password !== confirm) return "Passwords do not match.";
   return null;
 }
diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
index 89f10f8417..96a8b31033 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
@@ -94,7 +94,7 @@ function GeneralPanel() {
 }
 
 function AccountPanel() {
-  const { user, authChecked } = useSession();
+  const { user, authChecked, passwordNotSet } = useSession();
 
   if (!authChecked) {
     return (
@@ -112,7 +112,7 @@ function AccountPanel() {
 
   return (
     <div className="pt-3">
-      <AccountSection user={user} />
+      <AccountSection user={user} passwordNotSet={passwordNotSet} />
     </div>
   );
 }
diff --git a/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx b/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx
index e977ebf595..8be728cb45 100644
--- a/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/topbar/topbar.tsx
@@ -8,11 +8,11 @@ export function TopBar() {
   const showTopbarLogo = isMobile || state === "collapsed";
 
   return (
-    <header className="sticky top-0 z-20 relative flex items-center gap-3 border-b border-white/[0.06] bg-[#121212]/80 backdrop-blur-md px-3 pb-4 pt-3 sm:pt-6">
+    <header className="sticky top-0 z-20 flex items-center gap-3 border-b border-white/[0.06] bg-[#121212]/80 backdrop-blur-md px-3 pb-4 pt-3 sm:pt-6">
       {/* Left: sidebar trigger (mobile only) + logo (when sidebar closed) + breadcrumbs */}
       <div className="flex items-center gap-2 min-w-0 shrink-0">
         <SidebarTrigger className="md:hidden" />
-        <div className="flex gap-6">
+        <div className="flex gap-6 h-8">
           {showTopbarLogo && (
             <Link to="/" className="flex items-center shrink-0">
               <img
diff --git a/frontend/apps/artcraft-webapp/src/components/ui/use-media-query.ts b/frontend/apps/artcraft-webapp/src/components/ui/use-media-query.ts
new file mode 100644
index 0000000000..534853b0b5
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/components/ui/use-media-query.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);
+    setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+}
diff --git a/frontend/apps/artcraft-webapp/src/lib/session.ts b/frontend/apps/artcraft-webapp/src/lib/session.ts
index eb7b1075ba..cf28a8cab4 100644
--- a/frontend/apps/artcraft-webapp/src/lib/session.ts
+++ b/frontend/apps/artcraft-webapp/src/lib/session.ts
@@ -6,6 +6,9 @@ interface SessionState {
   user: UserInfo | undefined;
   loggedIn: boolean;
   authChecked: boolean;
+  // True when the signed-in user has no password yet (e.g. signed up via
+  // Google SSO and hasn't set one). Drives the set-password flow.
+  passwordNotSet: boolean;
   setSession: (next: Partial<Omit<SessionState, "setSession">>) => void;
 }
 
@@ -13,6 +16,7 @@ export const useSessionStore = create<SessionState>((set) => ({
   user: undefined,
   loggedIn: false,
   authChecked: false,
+  passwordNotSet: false,
   setSession: (next) => set(next),
 }));
 
@@ -36,6 +40,9 @@ async function fetchAndStoreSession(): Promise<void> {
       user: loggedIn ? response.data!.user : undefined,
       loggedIn,
       authChecked: true,
+      passwordNotSet: loggedIn
+        ? !!response.data!.onboarding?.password_not_set
+        : false,
     });
   } catch {
     // Backend unreachable or timed out — clear cache so next call retries.
@@ -45,6 +52,7 @@ async function fetchAndStoreSession(): Promise<void> {
       user: undefined,
       loggedIn: false,
       authChecked: true,
+      passwordNotSet: false,
     });
   }
 }
@@ -92,6 +100,7 @@ export interface UseSessionResult {
   user: UserInfo | undefined;
   loggedIn: boolean;
   authChecked: boolean;
+  passwordNotSet: boolean;
 }
 
 /** Subscribe to session state. The first caller per page-load triggers the fetch. */
@@ -99,6 +108,7 @@ export function useSession(): UseSessionResult {
   const user = useSessionStore((s) => s.user);
   const loggedIn = useSessionStore((s) => s.loggedIn);
   const authChecked = useSessionStore((s) => s.authChecked);
+  const passwordNotSet = useSessionStore((s) => s.passwordNotSet);
 
   useEffect(() => {
     ensureAuthChangeListener();
@@ -108,7 +118,7 @@ export function useSession(): UseSessionResult {
     }
   }, []);
 
-  return { user, loggedIn, authChecked };
+  return { user, loggedIn, authChecked, passwordNotSet };
 }
 
 // Backwards-compatible response shape for legacy `await getSession()` callers.
diff --git a/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx b/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx
index 755abd890b..9050949c86 100644
--- a/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/forgot-password/forgot-password.tsx
@@ -61,10 +61,16 @@ const ForgotPassword = () => {
       />
 
       <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/10 rounded-2xl p-6 py-8 shadow-2xl">
+        <div className="w-full max-w-md bg-[#1C1C20] border border-white/[4%] rounded-2xl p-6 py-8 shadow-2xl">
           {!submitted ? (
             <>
               <div className="text-center mb-8">
+                <img
+                  src="/images/artcraft-icon.png"
+                  alt="ArtCraft"
+                  className="mx-auto mb-6 h-12 w-auto select-none pointer-events-none"
+                  draggable={false}
+                />
                 <h1 className="text-2xl font-semibold mb-2">Reset Password</h1>
                 <p className="text-white/60 text-sm">
                   Enter your email to receive reset instructions
@@ -94,7 +100,7 @@ const ForgotPassword = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="you@example.com"
-                    inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                    inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                   />
                 </div>
 
diff --git a/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx b/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx
index 776bda658c..a84cecb66e 100644
--- a/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/forgot-password/verify-reset.tsx
@@ -117,10 +117,16 @@ const VerifyReset = () => {
       />
 
       <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/10 rounded-2xl p-6 py-8 shadow-2xl">
+        <div className="w-full max-w-md bg-[#1C1C20] border border-white/[4%] rounded-2xl p-6 py-8 shadow-2xl">
           {!success ? (
             <>
               <div className="text-center mb-8">
+                <img
+                  src="/images/artcraft-icon.png"
+                  alt="ArtCraft"
+                  className="mx-auto mb-6 h-12 w-auto select-none pointer-events-none"
+                  draggable={false}
+                />
                 <h1 className="text-2xl font-semibold mb-2">
                   Password Reset Verification
                 </h1>
@@ -154,7 +160,7 @@ const VerifyReset = () => {
                     onChange={(e) => setVerificationCode(e.target.value)}
                     placeholder="Enter verification code"
                     isError={!!fieldErrors.verificationCode}
-                    inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+                    inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
                   />
                   {fieldErrors.verificationCode && (
                     <p className="text-red-400 text-xs ml-1">
@@ -176,7 +182,7 @@ const VerifyReset = () => {
                       onChange={(e) => setNewPassword(e.target.value)}
                       placeholder="Enter new password"
                       isError={!!fieldErrors.newPassword}
-                      inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                      inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
                     />
                     <button
                       type="button"
@@ -208,7 +214,7 @@ const VerifyReset = () => {
                       onChange={(e) => setConfirmPassword(e.target.value)}
                       placeholder="Enter new password again"
                       isError={!!fieldErrors.confirmPassword}
-                      inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                      inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
                     />
                     <button
                       type="button"
diff --git a/frontend/apps/artcraft-webapp/src/pages/login/login.tsx b/frontend/apps/artcraft-webapp/src/pages/login/login.tsx
index 1fd920171e..f6e7791949 100644
--- a/frontend/apps/artcraft-webapp/src/pages/login/login.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/login/login.tsx
@@ -9,8 +9,9 @@ import { Input } from "@storyteller/ui-input";
 import { useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { UsersApi } from "@storyteller/api";
+import { AuthHeader, AuthFooter, GoogleLoginButton } from "../../components/auth";
 import Seo from "../../components/seo";
-import { refreshSession } from "../../lib/session";
+import { refreshSession, useSessionStore } from "../../lib/session";
 
 const Login = () => {
   const navigate = useNavigate();
@@ -47,148 +48,125 @@ const Login = () => {
     }
   };
 
-  //const handleGoogleSuccess = (isNewUser: boolean) => {
-  //  if (isNewUser) {
-  //    // Optionally redirect to set username for new users
-  //    navigate("/welcome");
-  //  } else {
-  //    navigate("/");
-  //  }
-  //};
+  const handleGoogleSuccess = async () => {
+    // Refresh so the session store reflects the new cookie (and whether the
+    // account still needs a password) before deciding where to send them.
+    await refreshSession(true);
+    if (useSessionStore.getState().passwordNotSet) {
+      navigate("/set-password");
+    } else {
+      navigate(redirectTo);
+    }
+  };
 
-  //const handleGoogleError = (errorMessage: string) => {
-  //  setError(errorMessage);
-  //};
+  const handleGoogleError = (message: string) => {
+    setError(message);
+  };
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white overflow-hidden flex flex-col">
+    <>
       <Seo
         title="Login - ArtCraft"
         description="Login to your ArtCraft account."
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
+      <AuthHeader title="Welcome Back" subtitle="Log in to your account" />
+
+      <form
+        className="space-y-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleLogin();
         }}
-      />
-
-      <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/10 rounded-2xl p-6 py-8 shadow-2xl">
-          <div className="text-center mb-8">
-            <h1 className="text-2xl font-semibold mb-2">Welcome Back</h1>
-            <p className="text-white/60 text-sm">Log in to your account</p>
+      >
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+            {error}
           </div>
+        )}
 
-          <div className="space-y-4">
-            {/*<GoogleLoginButton
-              mode="login"
-              onSuccess={handleGoogleSuccess}
-              onError={handleGoogleError}
-            />
-
-            <div className="relative flex items-center justify-center py-2">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-white/10"></div>
-              </div>
-              <span className="relative bg-[#1C1C20] px-4 text-xs text-white/40 uppercase tracking-widest">
-                or
-              </span>
-            </div>
-            */}
-
-            <form
-              className="space-y-4"
-              onSubmit={(e) => {
-                e.preventDefault();
-                handleLogin();
-              }}
-            >
-              {error && (
-                <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
-                  {error}
-                </div>
-              )}
-
-              <div className="space-y-2">
-                <label className="text-xs font-semibold text-white/70 ml-1">
-                  Email or Username
-                </label>
-                <Input
-                  type="text"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="you@example.com or username"
-                  inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
-                />
-              </div>
-              <div className="space-y-2">
-                <div className="flex justify-between items-center ml-1">
-                  <label className="text-xs font-semibold text-white/70">
-                    Password
-                  </label>
-                  <Link
-                    to="/forgot-password"
-                    className="text-xs text-primary hover:text-primary-400 transition-colors"
-                  >
-                    Forgot password?
-                  </Link>
-                </div>
-                <div className="relative">
-                  <Input
-                    type={showPassword ? "text" : "password"}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    placeholder="Min. 8 characters"
-                    inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
-                  >
-                    <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
-                  </button>
-                </div>
-              </div>
-
-              <div className="pt-2">
-                <Button
-                  className="w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
-                  type="submit"
-                  disabled={isLoading}
-                >
-                  {isLoading ? (
-                    <FontAwesomeIcon
-                      icon={faSpinnerThird}
-                      className="animate-spin"
-                    />
-                  ) : (
-                    "Log in"
-                  )}
-                </Button>
-              </div>
-            </form>
-          </div>
-
-          <div className="mt-8 text-center text-sm text-white/60">
-            Don't have an account?{" "}
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-white/70 ml-1">
+            Email or Username
+          </label>
+          <Input
+            type="text"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com or username"
+            inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors"
+          />
+        </div>
+        <div className="space-y-2">
+          <div className="flex justify-between items-center ml-1">
+            <label className="text-xs font-semibold text-white/70">
+              Password
+            </label>
             <Link
-              to="/signup"
-              className="text-primary hover:text-primary-400 font-semibold transition-colors"
+              to="/forgot-password"
+              className="text-xs text-primary hover:text-primary-400 transition-colors"
             >
-              Sign up
+              Forgot password?
             </Link>
           </div>
+          <div className="relative">
+            <Input
+              type={showPassword ? "text" : "password"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Min. 8 characters"
+              inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
+              tabIndex={-1}
+            >
+              <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
+            </button>
+          </div>
         </div>
-      </main>
 
-      <div className="relative z-10 py-6 text-center text-white/20 text-xs">
-        &copy; {new Date().getFullYear()} ArtCraft. All rights reserved.
+        <div className="pt-2">
+          <Button
+            className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+            type="submit"
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <FontAwesomeIcon icon={faSpinnerThird} className="animate-spin" />
+            ) : (
+              "Log in"
+            )}
+          </Button>
+        </div>
+      </form>
+
+      <div className="relative my-6 flex items-center justify-center">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-white/10" />
+        </div>
+        <span className="relative bg-[#1C1C20] px-4 text-xs uppercase tracking-widest text-white/40">
+          or
+        </span>
       </div>
-    </div>
+
+      <GoogleLoginButton
+        mode="login"
+        onSuccess={handleGoogleSuccess}
+        onError={handleGoogleError}
+      />
+
+      <AuthFooter>
+        Don't have an account?{" "}
+        <Link
+          to="/signup"
+          className="font-semibold text-primary transition-colors hover:text-primary-400"
+        >
+          Sign up
+        </Link>
+      </AuthFooter>
+    </>
   );
 };
 
diff --git a/frontend/apps/artcraft-webapp/src/pages/set-password/index.ts b/frontend/apps/artcraft-webapp/src/pages/set-password/index.ts
new file mode 100644
index 0000000000..234535e54c
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/pages/set-password/index.ts
@@ -0,0 +1,2 @@
+import SetPassword from "./set-password";
+export default SetPassword;
diff --git a/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx b/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx
new file mode 100644
index 0000000000..6c2b97a17b
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/pages/set-password/set-password.tsx
@@ -0,0 +1,194 @@
+import {
+  faEye,
+  faEyeSlash,
+  faSpinnerThird,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button } from "@storyteller/ui-button";
+import { Input } from "@storyteller/ui-input";
+import { useState } from "react";
+import { useNavigate, Navigate } from "react-router-dom";
+import { UsersApi } from "@storyteller/api";
+import { useSession, refreshSession } from "../../lib/session";
+import Seo from "../../components/seo";
+import { toast } from "../../components/toast/toast";
+
+const SetPassword = () => {
+  const navigate = useNavigate();
+  const { loggedIn, authChecked, passwordNotSet } = useSession();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Only meant for a signed-in user who has no password yet (the Google SSO
+  // sign-up case). Wait for the session check, then send everyone else home —
+  // this covers direct navigation and stops an existing user (who already has
+  // a password) from being misrouted here.
+  if (!authChecked) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[#101014]">
+        <FontAwesomeIcon
+          icon={faSpinnerThird}
+          className="animate-spin text-4xl text-primary/80"
+        />
+      </div>
+    );
+  }
+  if (!loggedIn || !passwordNotSet) {
+    return <Navigate to="/" replace />;
+  }
+
+  const handleSetPassword = async () => {
+    setError(null);
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setIsLoading(true);
+
+    const api = new UsersApi();
+    const response = await api.ChangePassword({
+      password,
+      passwordConfirmation: confirmPassword,
+    });
+
+    setIsLoading(false);
+
+    if (response.success) {
+      toast.success("Password has been set");
+      await refreshSession(true);
+      navigate("/welcome");
+    } else {
+      setError(response.errorMessage || "Failed to set password");
+    }
+  };
+
+  return (
+    <div className="relative min-h-screen bg-[#101014] text-white overflow-hidden flex flex-col">
+      <Seo
+        title="Set Password - ArtCraft"
+        description="Set a password for your ArtCraft account."
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0"
+        style={{
+          background:
+            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
+        }}
+      />
+
+      <main className="relative z-10 flex-1 flex items-center justify-center p-4">
+        <div className="w-full max-w-md bg-[#1C1C20] border border-white/[4%] rounded-2xl p-6 py-8 shadow-2xl">
+          <div className="text-center mb-8">
+            <img
+              src="/images/artcraft-icon.png"
+              alt="ArtCraft"
+              className="mx-auto mb-6 h-12 w-auto select-none pointer-events-none"
+              draggable={false}
+            />
+            <h1 className="text-2xl font-semibold mb-2">Set a password</h1>
+            <p className="text-white/60 text-sm">
+              Create a password so you can also log into the desktop app
+            </p>
+          </div>
+
+          <form
+            className="space-y-4"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSetPassword();
+            }}
+          >
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl text-sm text-center">
+                {error}
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                Password
+              </label>
+              <div className="relative">
+                <Input
+                  type={showPassword ? "text" : "password"}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Min. 8 characters"
+                  autoFocus
+                  inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
+                  tabIndex={-1}
+                >
+                  <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
+                </button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-bold text-white/60 uppercase tracking-wide ml-1">
+                Confirm password
+              </label>
+              <div className="relative">
+                <Input
+                  type={showConfirmPassword ? "text" : "password"}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="Re-enter your password"
+                  inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
+                  tabIndex={-1}
+                >
+                  <FontAwesomeIcon
+                    icon={showConfirmPassword ? faEyeSlash : faEye}
+                  />
+                </button>
+              </div>
+            </div>
+
+            <div className="pt-2">
+              <Button
+                className="rounded-full w-full bg-primary hover:bg-primary-600 text-white border-none justify-center font-bold h-10"
+                type="submit"
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <FontAwesomeIcon
+                    icon={faSpinnerThird}
+                    className="animate-spin"
+                  />
+                ) : (
+                  "Set password"
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </main>
+
+      <div className="relative z-10 py-6 text-center text-white/20 text-xs">
+        &copy; {new Date().getFullYear()} ArtCraft. All rights reserved.
+      </div>
+    </div>
+  );
+};
+
+export default SetPassword;
diff --git a/frontend/apps/artcraft-webapp/src/pages/signup/signup.tsx b/frontend/apps/artcraft-webapp/src/pages/signup/signup.tsx
index effacf5e69..03a13b714a 100644
--- a/frontend/apps/artcraft-webapp/src/pages/signup/signup.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/signup/signup.tsx
@@ -1,53 +1,30 @@
 import { Link, useNavigate } from "react-router-dom";
-import { SignupForm } from "../../components/auth";
+import { AuthHeader, AuthFooter, SignupForm } from "../../components/auth";
 import Seo from "../../components/seo";
 
 const Signup = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="relative min-h-screen bg-[#101014] text-white overflow-hidden flex flex-col">
+    <>
       <Seo
         title="Sign Up - ArtCraft"
         description="Create your ArtCraft account."
       />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 top-0 h-[700px] z-0"
-        style={{
-          background:
-            "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45,129,255,0.18) 0%, transparent 70%)",
-        }}
-      />
+      <AuthHeader title="Create an Account" subtitle="Join thousands of creators" />
 
-      <main className="relative z-10 flex-1 flex items-center justify-center p-4">
-        <div className="w-full max-w-md bg-[#1C1C20] border border-white/10 rounded-2xl p-6 py-8 shadow-2xl">
-          <div className="text-center mb-8">
-            <h1 className="text-2xl font-semibold mb-2">Create an Account</h1>
-            <p className="text-white/60 text-sm">Join thousands of creators</p>
-          </div>
+      <SignupForm onSuccess={() => navigate("/welcome")} signupSource="artcraft" />
 
-          <SignupForm
-            onSuccess={() => navigate("/welcome")}
-            signupSource="artcraft"
-          />
-
-          <div className="mt-8 text-center text-sm text-white/60">
-            Already have an account?{" "}
-            <Link
-              to="/login"
-              className="text-primary hover:text-primary-400 font-semibold transition-colors"
-            >
-              Log in
-            </Link>
-          </div>
-        </div>
-      </main>
-
-      <div className="relative z-10 py-6 text-center text-white/20 text-xs">
-        &copy; {new Date().getFullYear()} ArtCraft. All rights reserved.
-      </div>
-    </div>
+      <AuthFooter>
+        Already have an account?{" "}
+        <Link
+          to="/login"
+          className="font-semibold text-primary transition-colors hover:text-primary-400"
+        >
+          Log in
+        </Link>
+      </AuthFooter>
+    </>
   );
 };
 
diff --git a/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx b/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx
index 1db4d139d4..765d04d29a 100644
--- a/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/welcome/welcome.tsx
@@ -32,7 +32,7 @@ const Welcome = () => {
         <div className="w-[900px] h-[900px] rounded-full bg-gradient-to-br from-primary/40 via-purple-600/30 to-blue-500/20 opacity-30 blur-[120px]"></div>
       </div>
 
-      <main className="relative z-10 pt-28 pb-20 px-4 sm:px-6 lg:px-8">
+      <main className="relative z-10 pt-12 pb-20 px-4 sm:px-6 lg:px-8">
         {/* Success Header */}
         <div className="text-center mb-12">
           <div className="inline-flex items-center gap-3 bg-primary/10 border border-primary/30 rounded-full px-6 py-3 mb-6">
@@ -48,8 +48,9 @@ const Welcome = () => {
           <h1 className="text-4xl sm:text-5xl md:text-6xl font-medium mb-4 tracking-tight">
             Welcome to <span className="text-primary">ArtCraft</span>
           </h1>
-          <p className="text-xl text-white/70 max-w-2xl mx-auto">
+          <p className="text-lg sm:text-xl text-white/70 max-w-2xl mx-auto px-2.5">
             Support open-source development and unlock premium AI art features.
+            <br className="hidden sm:block" />
             Your subscription keeps ArtCraft free for everyone.
           </p>
         </div>
@@ -163,7 +164,7 @@ const Welcome = () => {
                     <Button
                       as="link"
                       href={downloadUrl}
-                      className="rounded-full bg-white text-black hover:bg-gray-100 dark:bg-white dark:text-black dark:hover:bg-gray-200 px-6 py-2.5 text-sm font-bold rounded-xl"
+                      className="rounded-full bg-white text-black hover:bg-gray-100 dark:bg-white dark:text-black dark:hover:bg-gray-200 px-6 py-2.5 text-sm font-bold"
                     >
                       <FontAwesomeIcon icon={faDownload} className="mr-2" />
                       Download for {isMacOs ? "Mac" : "Windows"}
diff --git a/frontend/libs/api/src/lib/UsersApi.ts b/frontend/libs/api/src/lib/UsersApi.ts
index 615511868e..4373386007 100644
--- a/frontend/libs/api/src/lib/UsersApi.ts
+++ b/frontend/libs/api/src/lib/UsersApi.ts
@@ -319,7 +319,13 @@ export class UsersApi extends ApiManager {
 
     try {
       const response = await this.authFetch<
-        { google_credential: string },
+        {
+          google_credential: string;
+          maybe_referral_url?: string;
+          maybe_landing_url?: string;
+          maybe_referral_username?: string;
+          maybe_referral_code?: string;
+        },
         {
           success: boolean;
           username_not_yet_customized?: boolean;