diff --git a/packages/git-ui/README.md b/packages/git-ui/README.md
index 98483f2..f96886a 100644
--- a/packages/git-ui/README.md
+++ b/packages/git-ui/README.md
@@ -197,8 +197,12 @@ servers, one repository, and the records to read.
 
 ## Reviewing from the page
 
-The header holds the visitor's session: sign in with a handle or DID, on
-whichever server holds the account, beside the site owner's identity. The app
+The header holds the visitor's session: who they are and the way out, or a
+button that opens a dialog asking for a handle or DID. Signing in is the one
+thing on the page that leaves it, so the dialog has room to say where the
+visitor is going, what their words are written to, and what failed when
+something does. The header had room for none of that: a form there widened the
+bar as it opened and left an error to be read from a tooltip. The app
 is an atproto OAuth client with no backend, PKCE for the code and DPoP for
 the token, the same client shape `@pdsjs/spaces-ui` uses. The scope asks for
 exactly the two collections a participant writes, reviews and pull requests.
diff --git a/packages/git-ui/src/components/molecules/session-controls.jsx b/packages/git-ui/src/components/molecules/session-controls.jsx
index 9d10868..40fe1bb 100644
--- a/packages/git-ui/src/components/molecules/session-controls.jsx
+++ b/packages/git-ui/src/components/molecules/session-controls.jsx
@@ -1,17 +1,25 @@
+import { Dialog } from '@base-ui/react/dialog';
 import { useState } from 'react';
-import { Button } from '#/components/atoms/button.jsx';
+import { Button, buttonVariants } from '#/components/atoms/button.jsx';
 import { Handle } from '#/components/molecules/handle.jsx';
+import { account } from '#/lib/git.js';
 import { beginSignIn } from '#/lib/oauth.js';
 import { useSession } from '#/lib/session.jsx';
+import { cn } from '#/lib/utils.js';
 
 /**
  * The visitor's session, in the header: a sign-in affordance, or who they
  * are and the way out.
  *
  * The site's own account sits beside this and stays what it is, the identity
- * being browsed. This is the identity doing the browsing, on whichever
- * server holds it; signing in navigates to that server's consent page and
- * back.
+ * being browsed. This is the identity doing the browsing, on whichever server
+ * holds it; signing in navigates to that server's consent page and back.
+ *
+ * The form asks in a dialog rather than in the header. Signing in is the one
+ * thing on this page that leaves it, so it is worth a moment's attention and
+ * room to say where the visitor is going and what fails when it does. The
+ * header has room for neither: a form there widened the bar as it opened and
+ * left an error to be read from a tooltip.
  */
 export function SessionControls() {
   const { session, endSession } = useSession();
@@ -36,14 +44,6 @@ export function SessionControls() {
     );
   }
 
-  if (!open) {
-    return (
-      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
-        Sign in
-      </Button>
-    );
-  }
-
   const submit = async (event) => {
     event.preventDefault();
     setBusy(true);
@@ -57,38 +57,88 @@ export function SessionControls() {
   };
 
   return (
-    <form onSubmit={submit} className="flex items-center gap-1.5">
-      <input
-        value={identifier}
-        onChange={(event) => setIdentifier(event.target.value)}
-        placeholder="your handle or DID"
-        title={error || undefined}
-        aria-invalid={error ? true : undefined}
-        className="h-8 w-48 rounded-lg border border-input bg-background px-2.5 text-[12.5px] text-foreground placeholder:text-faint focus:outline-none focus:ring-1 focus:ring-key aria-invalid:border-destructive"
-        disabled={busy}
-      />
-      <Button type="submit" size="sm" disabled={busy || !identifier.trim()}>
-        Continue
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={() => {
-          setOpen(false);
+    <Dialog.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        // A dialog closed part way through is reopened from the start, not
+        // from whatever it was left saying.
+        if (!next) {
           setError('');
-        }}
+          setBusy(false);
+        }
+      }}
+    >
+      {/* The classes rather than the Button, the way a Link that should read
+          as one takes them: the trigger is base-ui's own element and wants its
+          own props on it. */}
+      <Dialog.Trigger
+        className={cn(
+          buttonVariants({ variant: 'outline', size: 'sm' }),
+          'cursor-pointer',
+        )}
       >
-        Cancel
-      </Button>
-      {error && (
-        <span
-          className="max-w-56 truncate text-[12px] text-destructive"
-          title={error}
+        Sign in
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-50 bg-background/70 backdrop-blur-[1px]" />
+        <Dialog.Popup
+          className={cn(
+            '-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50',
+            'w-[min(26rem,calc(100vw-2rem))] rounded-2xl border border-border bg-card p-5 shadow-lg outline-none',
+          )}
         >
-          {error}
-        </span>
-      )}
-    </form>
+          <Dialog.Title className="font-semibold text-[15px]">
+            Sign in
+          </Dialog.Title>
+          <Dialog.Description className="mt-1.5 text-[12.5px] text-muted-foreground">
+            With your own atproto account, wherever it lives. Your server asks
+            you to consent and sends you back here.
+          </Dialog.Description>
+
+          <form onSubmit={submit} className="mt-4 flex flex-col gap-2.5">
+            <input
+              // The dialog opens on this, so a visitor who came to sign in
+              // types without reaching for the mouse.
+              // biome-ignore lint/a11y/noAutofocus: a dialog opened to ask one thing
+              autoFocus
+              value={identifier}
+              onChange={(event) => setIdentifier(event.target.value)}
+              placeholder="your handle or DID"
+              autoComplete="username"
+              aria-label="Handle or DID"
+              aria-invalid={error ? true : undefined}
+              className="h-9 w-full rounded-lg border border-input bg-background px-3 text-[13px] text-foreground placeholder:text-faint focus:outline-none focus:ring-1 focus:ring-key aria-invalid:border-destructive"
+              disabled={busy}
+            />
+            {error && <p className="text-[12.5px] text-destructive">{error}</p>}
+            <div className="mt-1 flex items-center justify-end gap-2">
+              <Dialog.Close
+                className={cn(
+                  buttonVariants({ variant: 'ghost', size: 'sm' }),
+                  'cursor-pointer',
+                )}
+              >
+                Cancel
+              </Dialog.Close>
+              <Button
+                type="submit"
+                size="sm"
+                disabled={busy || !identifier.trim()}
+              >
+                {busy ? 'Taking you there…' : 'Continue'}
+              </Button>
+            </div>
+          </form>
+
+          {/* What signing in is for here, which is not obvious from a header
+              button on somebody else's repository. */}
+          <p className="mt-4 border-border border-t pt-3 text-[12px] text-faint">
+            Your words are written to your own repo, never to {account.handle}
+            's. This repository decides whose it shows.
+          </p>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }