diff --git a/desktop/src-tauri/src/commands/pairing.rs b/desktop/src-tauri/src/commands/pairing.rs
index 639ae16da..fc874a015 100644
--- a/desktop/src-tauri/src/commands/pairing.rs
+++ b/desktop/src-tauri/src/commands/pairing.rs
@@ -1,3 +1,4 @@
+use std::sync::atomic::{AtomicU64, Ordering};
 use std::sync::Arc;
 use std::time::Duration;
 
@@ -35,6 +36,7 @@ struct PairingErrorPayload {
 /// Managed Tauri state for an active pairing session.
 pub struct PairingHandle {
     session: Arc<tokio::sync::Mutex<Option<PairingSession>>>,
+    generation: Arc<AtomicU64>,
     cancel: std::sync::Mutex<Option<CancellationToken>>,
     /// Send JSON-serialized events to the background WS task for relay publication.
     outbound_tx: std::sync::Mutex<Option<mpsc::Sender<String>>>,
@@ -47,6 +49,7 @@ impl PairingHandle {
     pub fn new() -> Self {
         Self {
             session: Arc::new(tokio::sync::Mutex::new(None)),
+            generation: Arc::new(AtomicU64::new(0)),
             cancel: std::sync::Mutex::new(None),
             outbound_tx: std::sync::Mutex::new(None),
             payload: std::sync::Mutex::new(None),
@@ -71,10 +74,18 @@ pub async fn start_pairing(
     state: State<'_, AppState>,
     pairing: State<'_, PairingHandle>,
 ) -> Result<String, String> {
+    let task_generation = pairing
+        .generation
+        .fetch_add(1, Ordering::SeqCst)
+        .wrapping_add(1);
     if let Some(token) = pairing.cancel.lock().map_err(|e| e.to_string())?.take() {
         token.cancel();
     }
     pairing.clear();
+    {
+        let mut session = pairing.session.lock().await;
+        *session = None;
+    }
 
     let keys = state.signing_keys()?;
     let nsec = keys
@@ -117,9 +128,12 @@ pub async fn start_pairing(
     *pairing.cancel.lock().map_err(|e| e.to_string())? = Some(cancel.clone());
 
     let session_arc = Arc::clone(&pairing.session);
+    let generation = Arc::clone(&pairing.generation);
     tauri::async_runtime::spawn(pairing_ws_task(
         pairing_relay_url,
         session_arc,
+        generation,
+        task_generation,
         cancel,
         outbound_rx,
         app,
@@ -199,6 +213,8 @@ pub async fn cancel_pairing(pairing: State<'_, PairingHandle>) -> Result<(), Str
         }
     }
 
+    pairing.generation.fetch_add(1, Ordering::SeqCst);
+
     if let Some(token) = pairing.cancel.lock().map_err(|e| e.to_string())?.take() {
         token.cancel();
     }
@@ -215,22 +231,35 @@ pub async fn cancel_pairing(pairing: State<'_, PairingHandle>) -> Result<(), Str
 async fn pairing_ws_task(
     relay_url: String,
     session: Arc<tokio::sync::Mutex<Option<PairingSession>>>,
+    generation: Arc<AtomicU64>,
+    task_generation: u64,
     cancel: CancellationToken,
     mut outbound_rx: mpsc::Receiver<String>,
     app: AppHandle,
 ) {
-    if let Err(e) =
-        pairing_ws_task_inner(&relay_url, &session, &cancel, &mut outbound_rx, &app).await
+    if let Err(e) = pairing_ws_task_inner(
+        &relay_url,
+        &session,
+        &generation,
+        task_generation,
+        &cancel,
+        &mut outbound_rx,
+        &app,
+    )
+    .await
     {
-        let _ = app.emit("pairing-error", PairingErrorPayload { message: e });
+        if pairing_task_is_current(&generation, task_generation) {
+            let _ = app.emit("pairing-error", PairingErrorPayload { message: e });
+        }
     }
-    let mut s = session.lock().await;
-    *s = None;
+    clear_pairing_session_if_current(&session, &generation, task_generation).await;
 }
 
 async fn pairing_ws_task_inner(
     relay_url: &str,
     session: &Arc<tokio::sync::Mutex<Option<PairingSession>>>,
+    generation: &AtomicU64,
+    task_generation: u64,
     cancel: &CancellationToken,
     outbound_rx: &mut mpsc::Receiver<String>,
     app: &AppHandle,
@@ -261,12 +290,18 @@ async fn pairing_ws_task_inner(
     tokio::pin!(hard_timeout);
 
     loop {
+        if !pairing_task_is_current(generation, task_generation) {
+            break;
+        }
+
         tokio::select! {
             _ = cancel.cancelled() => break,
             _ = &mut hard_timeout => {
-                let _ = app.emit("pairing-error", PairingErrorPayload {
-                    message: "Session timed out".into(),
-                });
+                if pairing_task_is_current(generation, task_generation) {
+                    let _ = app.emit("pairing-error", PairingErrorPayload {
+                        message: "Session timed out".into(),
+                    });
+                }
                 break;
             }
             Some(json_msg) = outbound_rx.recv() => {
@@ -282,30 +317,42 @@ async fn pairing_ws_task_inner(
                 let Message::Text(text) = msg else { continue };
 
                 if let Some(event) = parse_relay_event(text.as_str(), "pair") {
+                    if !pairing_task_is_current(generation, task_generation) {
+                        break;
+                    }
+
                     let mut guard = session.lock().await;
                     let Some(s) = guard.as_mut() else { break };
 
                     if let Ok(reason) = s.handle_abort(&event) {
-                        let _ = app.emit("pairing-aborted", PairingAbortedPayload {
-                            reason: format!("{reason:?}"),
-                        });
+                        if pairing_task_is_current(generation, task_generation) {
+                            let _ = app.emit("pairing-aborted", PairingAbortedPayload {
+                                reason: format!("{reason:?}"),
+                            });
+                        }
                         break;
                     }
 
                     if let Ok(sas) = s.handle_offer(&event) {
-                        let _ = app.emit("pairing-sas-received", PairingSasPayload { sas });
+                        if pairing_task_is_current(generation, task_generation) {
+                            let _ = app.emit("pairing-sas-received", PairingSasPayload { sas });
+                        }
                         continue;
                     }
 
                     match s.handle_complete(&event) {
                         Ok(()) => {
-                            let _ = app.emit("pairing-complete", serde_json::json!({}));
+                            if pairing_task_is_current(generation, task_generation) {
+                                let _ = app.emit("pairing-complete", serde_json::json!({}));
+                            }
                             break;
                         }
                         Err(ref e) if format!("{e}").contains("success=false") => {
-                            let _ = app.emit("pairing-error", PairingErrorPayload {
-                                message: "Mobile device reported failure importing credentials".into(),
-                            });
+                            if pairing_task_is_current(generation, task_generation) {
+                                let _ = app.emit("pairing-error", PairingErrorPayload {
+                                    message: "Mobile device reported failure importing credentials".into(),
+                                });
+                            }
                             break;
                         }
                         Err(_) => {}
@@ -318,6 +365,21 @@ async fn pairing_ws_task_inner(
     Ok(())
 }
 
+fn pairing_task_is_current(generation: &AtomicU64, task_generation: u64) -> bool {
+    generation.load(Ordering::SeqCst) == task_generation
+}
+
+async fn clear_pairing_session_if_current(
+    session: &Arc<tokio::sync::Mutex<Option<PairingSession>>>,
+    generation: &AtomicU64,
+    task_generation: u64,
+) {
+    let mut session = session.lock().await;
+    if pairing_task_is_current(generation, task_generation) {
+        *session = None;
+    }
+}
+
 async fn handle_nip42_auth<R, W>(
     read: &mut R,
     write: &mut W,
@@ -527,6 +589,40 @@ where
     .map_err(|_| "timeout waiting for EOSE".to_string())?
 }
 
+#[cfg(test)]
+mod pairing_generation_tests {
+    use std::sync::atomic::{AtomicU64, Ordering};
+    use std::sync::Arc;
+
+    use super::{clear_pairing_session_if_current, PairingSession};
+
+    #[tokio::test]
+    async fn stale_task_does_not_clear_replacement_session() {
+        let (initial, _) = PairingSession::new_source("ws://initial.example".to_string());
+        let session = Arc::new(tokio::sync::Mutex::new(Some(initial)));
+        let generation = AtomicU64::new(1);
+
+        generation.store(2, Ordering::SeqCst);
+        let (replacement, _) = PairingSession::new_source("ws://replacement.example".to_string());
+        *session.lock().await = Some(replacement);
+
+        clear_pairing_session_if_current(&session, &generation, 1).await;
+
+        assert!(session.lock().await.is_some());
+    }
+
+    #[tokio::test]
+    async fn current_task_clears_its_session() {
+        let (active, _) = PairingSession::new_source("ws://active.example".to_string());
+        let session = Arc::new(tokio::sync::Mutex::new(Some(active)));
+        let generation = AtomicU64::new(3);
+
+        clear_pairing_session_if_current(&session, &generation, 3).await;
+
+        assert!(session.lock().await.is_none());
+    }
+}
+
 #[cfg(test)]
 mod pairing_relay_tests {
     use super::{
diff --git a/desktop/src/app/RelayConnectionOverlay.tsx b/desktop/src/app/RelayConnectionOverlay.tsx
index faf28ee51..07c6933d0 100644
--- a/desktop/src/app/RelayConnectionOverlay.tsx
+++ b/desktop/src/app/RelayConnectionOverlay.tsx
@@ -60,7 +60,7 @@ export function RelayConnectionOverlay({
           animate={{ opacity: 1, y: 0 }}
           className={cn(
             "pointer-events-none fixed z-50 w-[284px]",
-            hasCommunityRail ? "left-[60px]" : "left-3",
+            hasCommunityRail ? "left-[68px]" : "left-3",
             isHuddleDrawerOpen
               ? "bottom-[calc(var(--buzz-huddle-drawer-height,0px)+12px)]"
               : "bottom-3",
@@ -86,7 +86,7 @@ export function RelayConnectionOverlay({
           animate={{ opacity: 1, y: 0 }}
           className={cn(
             "pointer-events-none fixed z-50 w-[284px]",
-            hasCommunityRail ? "left-[60px]" : "left-3",
+            hasCommunityRail ? "left-[68px]" : "left-3",
             isHuddleDrawerOpen
               ? "bottom-[calc(var(--buzz-huddle-drawer-height,0px)+12px)]"
               : "bottom-3",
diff --git a/desktop/src/features/settings/ui/MobilePairingCard.tsx b/desktop/src/features/settings/ui/MobilePairingCard.tsx
index 2013d17de..e15f54316 100644
--- a/desktop/src/features/settings/ui/MobilePairingCard.tsx
+++ b/desktop/src/features/settings/ui/MobilePairingCard.tsx
@@ -2,16 +2,15 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Check,
   Copy,
+  LoaderCircle,
+  RefreshCw,
   ShieldCheck,
-  Smartphone,
   TriangleAlert,
   X,
 } from "lucide-react";
 import { listen } from "@tauri-apps/api/event";
 import { toast } from "sonner";
 
-import { Spinner } from "@/shared/ui/spinner";
-
 import {
   cancelPairing,
   confirmPairingSas,
@@ -31,206 +30,74 @@ import { SettingsSectionHeader } from "./SettingsSectionHeader";
 import { writeTextToClipboard } from "@/shared/lib/clipboard";
 
 type PairingStep =
+  | "idle"
   | "generating"
   | "qr"
+  | "expired"
   | "sas"
   | "transferring"
   | "done"
   | "error";
 
-function PairingDialog({
-  open,
-  onOpenChange,
+function pairingErrorMessage(error: unknown) {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === "string"
+        ? error
+        : "";
+
+  if (message.toLowerCase().includes("timeout waiting for eose")) {
+    return "Pairing took too long. Try again.";
+  }
+
+  return message || "We couldn't start pairing. Try again.";
+}
+
+function isPairingSessionTimeout(message: string) {
+  return message.toLowerCase().includes("session timed out");
+}
+
+function PairingStatusDialog({
+  onClose,
+  onConfirm,
+  onDeny,
+  sasCode,
+  step,
 }: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
+  onConfirm: () => void;
+  onDeny: () => void;
+  sasCode: string | null;
+  step: PairingStep;
 }) {
-  const [step, setStep] = useState<PairingStep>("generating");
-  const [qrUri, setQrUri] = useState<string | null>(null);
-  const [sasCode, setSasCode] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const stepRef = useRef(step);
-  stepRef.current = step;
-
-  // Start pairing when dialog opens.
-  useEffect(() => {
-    if (!open) return;
-
-    setStep("generating");
-    setQrUri(null);
-    setSasCode(null);
-    setError(null);
-    let cancelled = false;
-
-    startPairing().then(
-      (uri) => {
-        if (!cancelled) {
-          setQrUri(uri);
-          setStep("qr");
-        }
-      },
-      (err) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error
-              ? err.message
-              : "Failed to start pairing session",
-          );
-          setStep("error");
-        }
-      },
-    );
-
-    return () => {
-      cancelled = true;
-    };
-  }, [open]);
-
-  // Listen for Tauri events from the pairing backend.
-  useEffect(() => {
-    if (!open) return;
-
-    let cancelled = false;
-    const unlisteners: (() => void)[] = [];
-
-    listen<{ sas: string }>("pairing-sas-received", (event) => {
-      if (!cancelled) {
-        setSasCode(event.payload.sas);
-        setStep("sas");
-      }
-    }).then((fn) => {
-      if (cancelled) fn();
-      else unlisteners.push(fn);
-    });
-
-    listen("pairing-complete", () => {
-      if (!cancelled) {
-        setStep("done");
-      }
-    }).then((fn) => {
-      if (cancelled) fn();
-      else unlisteners.push(fn);
-    });
-
-    listen<{ reason: string }>("pairing-aborted", (event) => {
-      if (!cancelled) {
-        setError(`Pairing aborted: ${event.payload.reason}`);
-        setStep("error");
-      }
-    }).then((fn) => {
-      if (cancelled) fn();
-      else unlisteners.push(fn);
-    });
-
-    listen<{ message: string }>("pairing-error", (event) => {
-      if (!cancelled) {
-        setError(event.payload.message);
-        setStep("error");
-      }
-    }).then((fn) => {
-      if (cancelled) fn();
-      else unlisteners.push(fn);
-    });
-
-    return () => {
-      cancelled = true;
-      for (const fn of unlisteners) fn();
-    };
-  }, [open]);
-
-  // Cancel pairing when dialog closes before completion.
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (!nextOpen && stepRef.current !== "done") {
-        cancelPairing().catch(() => {});
-      }
-      onOpenChange(nextOpen);
-    },
-    [onOpenChange],
-  );
-
-  async function handleConfirmSas() {
-    setStep("transferring");
-    try {
-      await confirmPairingSas();
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to send credentials",
-      );
-      setStep("error");
-    }
-  }
-
-  function handleDenySas() {
-    cancelPairing().catch(() => {});
-    setError("SAS code mismatch — pairing cancelled for security.");
-    setStep("error");
-  }
-
-  async function handleCopy() {
-    if (!qrUri) return;
-    await writeTextToClipboard(qrUri);
-    toast.success("Copied to clipboard");
-  }
+  const open = step === "sas" || step === "transferring" || step === "done";
 
   return (
-    <Dialog onOpenChange={handleOpenChange} open={open}>
+    <Dialog
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      open={open}
+    >
       <DialogContent
         className="max-w-md gap-0 overflow-hidden border-0 px-6 pb-6 pt-6"
         data-testid="mobile-pairing-dialog"
       >
         <div className="flex max-h-[85vh] flex-col">
           <DialogHeader className="shrink-0 pb-5 pr-8">
-            <DialogTitle>Pair Mobile Device</DialogTitle>
+            <DialogTitle>Pair mobile device</DialogTitle>
             <DialogDescription>
               {step === "sas"
                 ? "Verify the security code matches your mobile device."
                 : step === "done"
                   ? "Your mobile device is now paired."
-                  : "Scan this QR code with the Buzz mobile app to securely pair."}
+                  : "Securely sending your identity to the mobile app."}
             </DialogDescription>
           </DialogHeader>
 
           <div className="min-h-0 flex-1 overflow-y-auto pt-4">
-            {step === "error" && error ? (
-              <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-                <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" />
-                <span>{error}</span>
-              </div>
-            ) : step === "generating" ? (
-              <div className="flex flex-col items-center justify-center gap-3 py-8">
-                <Spinner className="h-6 w-6 text-muted-foreground" />
-                <p className="text-sm text-muted-foreground">
-                  Preparing secure pairing session...
-                </p>
-              </div>
-            ) : step === "qr" && qrUri ? (
-              <div className="mx-auto grid w-fit gap-4">
-                <div
-                  className="rounded-lg border border-border/70 bg-white p-3"
-                  data-testid="mobile-pairing-qr-container"
-                >
-                  <StyledQrCode
-                    centerImageSrc="/app-icon@2x.png"
-                    data-testid="mobile-pairing-qr"
-                    size={240}
-                    title="Mobile pairing QR code"
-                    value={qrUri}
-                  />
-                </div>
-
-                <Button
-                  className="w-full"
-                  data-testid="copy-pairing-code"
-                  onClick={handleCopy}
-                  type="button"
-                  variant="outline"
-                >
-                  <Copy className="mr-1.5 h-4 w-4" />
-                  Copy pairing code
-                </Button>
-              </div>
-            ) : step === "sas" && sasCode ? (
+            {step === "sas" && sasCode ? (
               <div className="space-y-4">
                 <div className="flex flex-col items-center gap-3 py-4">
                   <ShieldCheck className="h-10 w-10 text-primary" />
@@ -255,7 +122,7 @@ function PairingDialog({
                   <Button
                     className="flex-1"
                     data-testid="deny-sas"
-                    onClick={handleDenySas}
+                    onClick={onDeny}
                     variant="outline"
                   >
                     <X className="mr-1.5 h-4 w-4" />
@@ -264,28 +131,32 @@ function PairingDialog({
                   <Button
                     className="flex-1"
                     data-testid="confirm-sas"
-                    onClick={handleConfirmSas}
+                    onClick={onConfirm}
                   >
                     <Check className="mr-1.5 h-4 w-4" />
-                    Codes Match
+                    Codes match
                   </Button>
                 </div>
               </div>
             ) : step === "transferring" ? (
               <div className="flex flex-col items-center justify-center gap-3 py-8">
-                <Spinner className="h-6 w-6 text-muted-foreground" />
+                <LoaderCircle
+                  aria-hidden="true"
+                  className="h-6 w-6 animate-spin text-muted-foreground"
+                />
                 <p className="text-sm text-muted-foreground">
                   Sending identity to mobile device...
                 </p>
               </div>
             ) : step === "done" ? (
-              <div className="flex flex-col items-center justify-center gap-3 py-8">
+              <div
+                className="flex flex-col items-center justify-center gap-3 py-8"
+                data-testid="mobile-pairing-done"
+              >
                 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
                   <Check className="h-6 w-6 text-green-600 dark:text-green-400" />
                 </div>
-                <p className="text-sm font-medium">
-                  Mobile device paired successfully
-                </p>
+                <p className="text-sm font-medium">Mobile device paired</p>
                 <p className="text-center text-xs text-muted-foreground">
                   Your mobile app is now connected to this relay.
                 </p>
@@ -303,7 +174,158 @@ export function MobilePairingCard({
 }: {
   currentPubkey?: string;
 }) {
-  const [dialogOpen, setDialogOpen] = useState(false);
+  const [step, setStep] = useState<PairingStep>("idle");
+  const [qrUri, setQrUri] = useState<string | null>(null);
+  const [sasCode, setSasCode] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const requestIdRef = useRef(0);
+  const pairingActiveRef = useRef(false);
+  const stepRef = useRef(step);
+  stepRef.current = step;
+
+  const beginPairing = useCallback(() => {
+    const requestId = ++requestIdRef.current;
+    pairingActiveRef.current = true;
+    setStep("generating");
+    setQrUri(null);
+    setSasCode(null);
+    setError(null);
+
+    startPairing().then(
+      (uri) => {
+        if (requestId === requestIdRef.current) {
+          setQrUri(uri);
+          setStep("qr");
+        }
+      },
+      (err) => {
+        if (requestId === requestIdRef.current) {
+          pairingActiveRef.current = false;
+          setError(pairingErrorMessage(err));
+          setStep("error");
+        }
+      },
+    );
+  }, []);
+
+  useEffect(() => {
+    ++requestIdRef.current;
+    pairingActiveRef.current = false;
+    setStep("idle");
+    setQrUri(null);
+    setSasCode(null);
+    setError(null);
+
+    if (!currentPubkey) {
+      return;
+    }
+
+    let cancelled = false;
+    const unlisteners: (() => void)[] = [];
+
+    listen<{ sas: string }>("pairing-sas-received", (event) => {
+      if (!cancelled && pairingActiveRef.current) {
+        setSasCode(event.payload.sas);
+        setStep("sas");
+      }
+    }).then((fn) => {
+      if (cancelled) fn();
+      else unlisteners.push(fn);
+    });
+
+    listen("pairing-complete", () => {
+      if (!cancelled && pairingActiveRef.current) {
+        pairingActiveRef.current = false;
+        setStep("done");
+      }
+    }).then((fn) => {
+      if (cancelled) fn();
+      else unlisteners.push(fn);
+    });
+
+    listen<{ reason: string }>("pairing-aborted", (event) => {
+      if (!cancelled && pairingActiveRef.current) {
+        pairingActiveRef.current = false;
+        setError(`Pairing stopped: ${event.payload.reason}`);
+        setStep("error");
+      }
+    }).then((fn) => {
+      if (cancelled) fn();
+      else unlisteners.push(fn);
+    });
+
+    listen<{ message: string }>("pairing-error", (event) => {
+      if (!cancelled && pairingActiveRef.current) {
+        pairingActiveRef.current = false;
+        if (isPairingSessionTimeout(event.payload.message)) {
+          setQrUri(null);
+          setSasCode(null);
+          setError(null);
+          setStep("expired");
+          return;
+        }
+
+        setError(pairingErrorMessage(event.payload.message));
+        setStep("error");
+      }
+    }).then((fn) => {
+      if (cancelled) fn();
+      else unlisteners.push(fn);
+    });
+
+    return () => {
+      cancelled = true;
+      ++requestIdRef.current;
+      pairingActiveRef.current = false;
+      for (const fn of unlisteners) fn();
+      if (stepRef.current !== "idle" && stepRef.current !== "done") {
+        cancelPairing().catch(() => {});
+      }
+    };
+  }, [currentPubkey]);
+
+  async function handleCopy() {
+    if (!qrUri) return;
+    await writeTextToClipboard(qrUri);
+    toast.success("Copied to clipboard");
+  }
+
+  async function handleConfirmSas() {
+    setStep("transferring");
+    try {
+      await confirmPairingSas();
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "We couldn't send your identity. Try again.",
+      );
+      pairingActiveRef.current = false;
+      setStep("error");
+    }
+  }
+
+  function handleDenySas() {
+    pairingActiveRef.current = false;
+    cancelPairing().catch(() => {});
+    setError("The codes didn't match. Pairing was canceled.");
+    setStep("error");
+  }
+
+  function handleStatusDialogClose() {
+    pairingActiveRef.current = false;
+    if (stepRef.current === "done") {
+      setStep("idle");
+      setQrUri(null);
+      setSasCode(null);
+      setError(null);
+      return;
+    }
+
+    cancelPairing().catch(() => {});
+    setError("Pairing was canceled.");
+    setStep("error");
+  }
 
   return (
     <section className="min-w-0" data-testid="settings-mobile">
@@ -318,29 +340,106 @@ export function MobilePairingCard({
         }
       />
 
-      <SettingsOptionGroup>
-        <SettingsOptionRow className="gap-3">
-          <Smartphone className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium">Pair Mobile Device</p>
-            <p className="text-sm font-normal text-muted-foreground">
-              Securely transfer your identity via NIP-AB protocol
-            </p>
-          </div>
-          <Button
-            data-testid="pair-mobile-button"
-            disabled={!currentPubkey}
-            onClick={() => setDialogOpen(true)}
-            size="sm"
+      <SettingsOptionGroup
+        className="mx-auto w-fit max-w-full"
+        data-testid="mobile-pairing-card"
+      >
+        <SettingsOptionRow className="flex-col items-stretch justify-start gap-3 p-4">
+          <div
+            className="flex min-h-[266px] w-[266px] shrink-0 items-center justify-center rounded-lg border border-border/70 bg-white p-3"
+            data-testid="mobile-pairing-qr-container"
           >
-            Pair
-          </Button>
+            {step === "qr" && qrUri ? (
+              <StyledQrCode
+                animate
+                centerImageSrc="/app-icon@2x.png"
+                data-testid="mobile-pairing-qr"
+                size={240}
+                title="Mobile pairing QR code"
+                value={qrUri}
+              />
+            ) : step === "expired" ? (
+              <div className="flex max-w-52 origin-center animate-in flex-col items-center gap-3 text-center fade-in-0 zoom-in-95 duration-[250ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:animate-none">
+                <p className="text-sm text-muted-foreground">
+                  Pairing code expired.
+                </p>
+                <Button
+                  data-testid="regenerate-pairing-button"
+                  onClick={beginPairing}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  <RefreshCw className="mr-1.5 h-4 w-4" />
+                  Generate new pairing code
+                </Button>
+              </div>
+            ) : step === "error" ? (
+              <div className="flex max-w-52 flex-col items-center gap-3 text-center">
+                <TriangleAlert className="h-6 w-6 text-destructive" />
+                <p className="text-sm text-destructive">
+                  {error ?? "Pairing session ended."}
+                </p>
+                <Button
+                  data-testid="retry-pairing-button"
+                  onClick={beginPairing}
+                  size="sm"
+                  variant="outline"
+                >
+                  Try again
+                </Button>
+              </div>
+            ) : step === "idle" ? (
+              currentPubkey ? (
+                <Button
+                  data-testid="start-pairing-button"
+                  onClick={beginPairing}
+                  type="button"
+                >
+                  Start pairing
+                </Button>
+              ) : (
+                <p className="max-w-44 text-center text-sm text-muted-foreground">
+                  Sign in to generate a mobile pairing code.
+                </p>
+              )
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-3">
+                <LoaderCircle
+                  aria-hidden="true"
+                  className="h-6 w-6 animate-spin text-muted-foreground"
+                  data-testid="pairing-loading-spinner"
+                />
+                <p className="text-sm text-muted-foreground">
+                  Starting pairing...
+                </p>
+              </div>
+            )}
+          </div>
+
+          {step === "qr" && qrUri ? (
+            <Button
+              className="w-full origin-top animate-in fade-in-0 zoom-in-95 duration-[250ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:animate-none"
+              data-testid="copy-pairing-code"
+              onClick={handleCopy}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <Copy className="mr-1.5 h-4 w-4" />
+              Copy pairing code
+            </Button>
+          ) : null}
         </SettingsOptionRow>
       </SettingsOptionGroup>
 
-      {currentPubkey && (
-        <PairingDialog onOpenChange={setDialogOpen} open={dialogOpen} />
-      )}
+      <PairingStatusDialog
+        onClose={handleStatusDialogClose}
+        onConfirm={() => void handleConfirmSas()}
+        onDeny={handleDenySas}
+        sasCode={sasCode}
+        step={step}
+      />
     </section>
   );
 }
diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index b40f56b04..55f467f21 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -562,7 +562,9 @@ export function AppSidebar({
       variant="sidebar"
     >
       <div
-        className="relative flex min-h-0 flex-1 flex-col overflow-hidden"
+        className={`relative flex min-h-0 flex-1 flex-col overflow-hidden ${
+          communities.length > 1 ? "md:-ml-[11px] md:w-[calc(100%+11px)]" : ""
+        }`}
         data-sidebar-background
         data-testid="app-sidebar-scroll-anchor"
       >
diff --git a/desktop/src/features/sidebar/ui/CommunityRail.tsx b/desktop/src/features/sidebar/ui/CommunityRail.tsx
index 86d632398..b15e0bab7 100644
--- a/desktop/src/features/sidebar/ui/CommunityRail.tsx
+++ b/desktop/src/features/sidebar/ui/CommunityRail.tsx
@@ -37,8 +37,6 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import { cn } from "@/shared/lib/cn";
 import { getInitials } from "@/shared/lib/initials";
-import { isMacPlatform } from "@/shared/lib/platform";
-import { useIsFullscreen } from "@/shared/lib/useIsFullscreen";
 import { writeTextToClipboard } from "@/shared/lib/clipboard";
 
 type CommunityRailProps = {
@@ -315,7 +313,6 @@ export function CommunityRail({
     activeCommunityId,
   );
   const iconsByCommunity = useCommunityIcons(communities);
-  const isFullscreen = useIsFullscreen();
   const { markAllChannelsRead, onOpenSettings } = useAppShell();
   const myMembershipQuery = useMyRelayMembershipLookupQuery();
   const activeRole = myMembershipQuery.data?.membership?.role;
@@ -370,19 +367,10 @@ export function CommunityRail({
     });
   };
 
-  // macOS traffic lights overlay the top-left, so start buttons below them (they hide in fullscreen).
-  const topPaddingClass =
-    isMacPlatform() && !isFullscreen
-      ? "pt-(--buzz-top-chrome-height,40px)"
-      : "pt-3";
-
   return (
     <nav
       aria-label="Communities"
-      className={cn(
-        "flex w-12 shrink-0 flex-col items-center gap-2 overflow-y-auto bg-sidebar pb-3",
-        topPaddingClass,
-      )}
+      className="relative z-20 mb-2 mt-[calc(var(--buzz-top-chrome-height,40px)+1px)] flex w-14 shrink-0 flex-col items-center gap-2 overflow-y-auto bg-sidebar px-2.5 pb-3 pt-1.5"
       data-testid="community-rail"
     >
       <DndContext
diff --git a/desktop/src/shared/api/relayClientSession.ts b/desktop/src/shared/api/relayClientSession.ts
index b8c861af9..84ee10b68 100644
--- a/desktop/src/shared/api/relayClientSession.ts
+++ b/desktop/src/shared/api/relayClientSession.ts
@@ -20,14 +20,12 @@ import {
   type RelaySubscriptionFilter,
 } from "@/shared/api/relayClientShared";
 import {
-  AUX_BACKFILL_CHUNK_SIZE,
   buildChannelAuxDeletionFilter,
   buildChannelFilter,
   buildChannelHistoryFilter,
   buildChannelMentionFilter,
   buildGlobalStreamFilter,
 } from "@/shared/api/relayChannelFilters";
-import { collectWithConcurrency } from "@/shared/api/concurrency";
 import {
   clearClosedRetry,
   handleRelayClosed,
@@ -40,7 +38,11 @@ import {
   parseRateLimitHint,
   waitForRateLimit,
 } from "@/shared/api/relayRateLimitGate";
-import { requestHistoryGated } from "@/shared/api/relayGateBoundary";
+import {
+  fetchChunkedHistory,
+  requestFirstEventGated,
+  requestHistoryGated,
+} from "@/shared/api/relayGateBoundary";
 import { RelayConnectionStateEmitter } from "@/shared/api/relayConnectionStateEmitter";
 import {
   isServiceRestartClose,
@@ -53,8 +55,7 @@ import { closeWebSocket } from "@/shared/api/relayWebSocketClose";
 import { buildThreadReferenceTags } from "@/features/messages/lib/threading";
 const RECONNECT_BASE_DELAY_MS = 1_000,
   RECONNECT_MAX_DELAY_MS = 30_000,
-  EVENT_BATCH_MS = 16,
-  AUX_BACKFILL_CONCURRENCY = 4;
+  EVENT_BATCH_MS = 16;
 
 /**
  * Op-level timeout constants. Raised from 8 s to 25 s to survive degraded
@@ -176,7 +177,7 @@ export class RelayClient {
     }
 
     for (const [subId, sub] of this.subscriptions) {
-      if (sub.mode === "history") {
+      if (sub.mode !== "live") {
         window.clearTimeout(sub.timeout);
         sub.reject(error);
       } else {
@@ -224,10 +225,10 @@ export class RelayClient {
       eventIds: string[],
     ) => RelaySubscriptionFilter,
   ) {
-    return this.fetchChunkedAuxEvents(
-      channelId,
+    return fetchChunkedHistory(
       referencedEventIds,
-      buildFilter,
+      (eventIds) => buildFilter(channelId, eventIds),
+      (filter) => this.fetchHistory(filter),
     );
   }
 
@@ -235,10 +236,10 @@ export class RelayClient {
     channelId: string,
     auxEventIds: string[],
   ): Promise<RelayEvent[]> {
-    return this.fetchChunkedAuxEvents(
-      channelId,
+    return fetchChunkedHistory(
       auxEventIds,
-      buildChannelAuxDeletionFilter,
+      (eventIds) => buildChannelAuxDeletionFilter(channelId, eventIds),
+      (filter) => this.fetchHistory(filter),
     );
   }
 
@@ -246,32 +247,21 @@ export class RelayClient {
     return this.fetchHistory(filter);
   }
 
-  private async fetchChunkedAuxEvents(
-    channelId: string,
-    eventIds: string[],
-    buildFilter: (
-      channelId: string,
-      eventIds: string[],
-    ) => RelaySubscriptionFilter,
-  ): Promise<RelayEvent[]> {
-    if (eventIds.length === 0) {
-      return [];
-    }
-
+  /**
+   * Return the first event matching `filter` as soon as it arrives, without
+   * waiting for EOSE. Resolves to `null` when EOSE arrives before any event.
+   */
+  async fetchFirstEvent(
+    filter: RelaySubscriptionFilter,
+  ): Promise<RelayEvent | null> {
     await this.ensureConnected();
-
-    const chunks: string[][] = [];
-    for (let i = 0; i < eventIds.length; i += AUX_BACKFILL_CHUNK_SIZE) {
-      chunks.push(eventIds.slice(i, i + AUX_BACKFILL_CHUNK_SIZE));
-    }
-
-    const batches = await collectWithConcurrency(
-      chunks,
-      AUX_BACKFILL_CONCURRENCY,
-      (ids) => this.requestHistory(buildFilter(channelId, ids)),
+    return requestFirstEventGated(
+      this.subscriptions,
+      (payload) => this.sendRaw(payload),
+      (subId) => this.closeSubscription(subId),
+      filter,
+      HISTORY_TIMEOUT_MS,
     );
-
-    return batches.flat();
   }
 
   private async fetchHistory(filter: RelaySubscriptionFilter) {
@@ -877,6 +867,11 @@ export class RelayClient {
       return;
     }
 
+    if (subscription.mode === "first") {
+      subscription.onEvent(event);
+      return;
+    }
+
     if (!prepareSubscriptionEvent(subscription, event)) return;
     this.eventBuffer.push({ subId, event });
     this.flushTimeout ??= window.setTimeout(
@@ -1068,7 +1063,7 @@ export class RelayClient {
     }
 
     for (const [subId, subscription] of this.subscriptions) {
-      if (subscription.mode === "history") {
+      if (subscription.mode !== "live") {
         window.clearTimeout(subscription.timeout);
         subscription.reject(error);
         this.subscriptions.delete(subId);
diff --git a/desktop/src/shared/api/relayClientShared.ts b/desktop/src/shared/api/relayClientShared.ts
index 596bdde34..9108f7b6d 100644
--- a/desktop/src/shared/api/relayClientShared.ts
+++ b/desktop/src/shared/api/relayClientShared.ts
@@ -46,6 +46,14 @@ type HistorySubscription = {
   timeout: number;
 };
 
+type FirstEventSubscription = {
+  mode: "first";
+  onEvent: (event: RelayEvent) => void;
+  resolve: (event: RelayEvent | null) => void;
+  reject: (error: Error) => void;
+  timeout: number;
+};
+
 type LiveSubscription = {
   mode: "live";
   filter: RelaySubscriptionFilter;
@@ -63,7 +71,10 @@ export type PendingEvent = {
   timeout: number;
 };
 
-export type RelaySubscription = HistorySubscription | LiveSubscription;
+export type RelaySubscription =
+  | HistorySubscription
+  | FirstEventSubscription
+  | LiveSubscription;
 
 export function sortEvents(events: RelayEvent[]) {
   return [...events].sort((left, right) => {
diff --git a/desktop/src/shared/api/relayClosedRecovery.test.mjs b/desktop/src/shared/api/relayClosedRecovery.test.mjs
index 90acd6cb2..c1f7bd98c 100644
--- a/desktop/src/shared/api/relayClosedRecovery.test.mjs
+++ b/desktop/src/shared/api/relayClosedRecovery.test.mjs
@@ -1,8 +1,14 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 
-import { handleRelayClosed } from "./relayClosedRecovery.ts";
-import { requestHistoryGated } from "./relayGateBoundary.ts";
+import {
+  handleRelayClosed,
+  handleSubscriptionEose,
+} from "./relayClosedRecovery.ts";
+import {
+  requestFirstEventGated,
+  requestHistoryGated,
+} from "./relayGateBoundary.ts";
 
 // ── Fake-timer setup ──────────────────────────────────────────────────────────
 // The rate-limit gate and closed-retry logic use window.setTimeout/clearTimeout.
@@ -227,6 +233,33 @@ test("gate armed by rate-limited history CLOSED defers the next REQ until expiry
   assert.ok(sentAt[0] >= 5_001, "REQ must fire only after gate expiry");
 });
 
+test("first-event request resolves null when EOSE arrives without an event", async () => {
+  resetAll(0);
+  const subscriptions = new Map();
+  let requestedSubId = "";
+  const firstEventPromise = requestFirstEventGated(
+    subscriptions,
+    async (payload) => {
+      requestedSubId = payload[1];
+    },
+    async () => {},
+    { kinds: [13_534], limit: 1 },
+    25_000,
+  );
+
+  await Promise.resolve();
+  assert.match(requestedSubId, /^first-/);
+
+  handleSubscriptionEose({
+    subscriptions,
+    subId: requestedSubId,
+    closeSubscription: async () => {},
+  });
+
+  assert.equal(await firstEventPromise, null);
+  assert.equal(subscriptions.has(requestedSubId), false);
+});
+
 test("production CLOSED handler removes terminal live subscriptions", () => {
   let readyCalls = 0;
   const subscriptions = new Map([
diff --git a/desktop/src/shared/api/relayClosedRecovery.ts b/desktop/src/shared/api/relayClosedRecovery.ts
index 7206014ee..fd366671f 100644
--- a/desktop/src/shared/api/relayClosedRecovery.ts
+++ b/desktop/src/shared/api/relayClosedRecovery.ts
@@ -35,7 +35,7 @@ export function handleRelayClosed({
 }) {
   const subscription = subscriptions.get(subId);
   if (!subscription) return;
-  if (subscription.mode === "history") {
+  if (subscription.mode !== "live") {
     // Classify before rejecting so a `rate-limited:` history CLOSED arms the
     // gate for concurrent ops. A history sub can't be retried (the caller holds
     // the promise), so we still reject immediately after arming.
@@ -133,6 +133,9 @@ export function prepareSubscriptionEvent(
     subscription.events.push(event);
     return false;
   }
+  if (subscription.mode === "first") {
+    return false;
+  }
   subscription.closedRetryAttempt = 0;
   clearClosedRetry(subscription);
   subscription.lastSeenCreatedAt = Math.max(
@@ -163,5 +166,9 @@ export function handleSubscriptionEose({
   window.clearTimeout(subscription.timeout);
   subscriptions.delete(subId);
   void closeSubscription(subId);
-  subscription.resolve(sortEvents(subscription.events));
+  if (subscription.mode === "first") {
+    subscription.resolve(null);
+  } else {
+    subscription.resolve(sortEvents(subscription.events));
+  }
 }
diff --git a/desktop/src/shared/api/relayGateBoundary.ts b/desktop/src/shared/api/relayGateBoundary.ts
index 99782358f..6cb9c189a 100644
--- a/desktop/src/shared/api/relayGateBoundary.ts
+++ b/desktop/src/shared/api/relayGateBoundary.ts
@@ -5,6 +5,8 @@
  * the gate-await + op-timeout pattern lives in one place and the op timeout
  * budget starts only after the rate-limit window has cleared.
  */
+import { collectWithConcurrency } from "@/shared/api/concurrency";
+import { AUX_BACKFILL_CHUNK_SIZE } from "@/shared/api/relayChannelFilters";
 import { waitForRateLimit } from "@/shared/api/relayRateLimitGate";
 import type {
   RelaySubscription,
@@ -12,6 +14,8 @@ import type {
 } from "@/shared/api/relayClientShared";
 import type { RelayEvent } from "@/shared/api/types";
 
+const AUX_BACKFILL_CONCURRENCY = 4;
+
 /**
  * Issue a history REQ on `filter`, waiting for any active rate-limit gate
  * before starting the subscription so the op timeout begins only after
@@ -54,3 +58,75 @@ export async function requestHistoryGated(
     });
   });
 }
+
+/**
+ * Issue a REQ that resolves as soon as its first matching event arrives.
+ *
+ * This keeps single-event lookups from waiting for EOSE while still resolving
+ * `null` when the relay completes an empty result set.
+ */
+export async function requestFirstEventGated(
+  subscriptions: Map<string, RelaySubscription>,
+  sendRaw: (payload: unknown[]) => Promise<void>,
+  closeSubscription: (subId: string) => Promise<void>,
+  filter: RelaySubscriptionFilter,
+  historyTimeoutMs: number,
+): Promise<RelayEvent | null> {
+  await waitForRateLimit();
+
+  return new Promise<RelayEvent | null>((resolve, reject) => {
+    const subId = `first-${crypto.randomUUID()}`;
+    const timeout = window.setTimeout(() => {
+      subscriptions.delete(subId);
+      void closeSubscription(subId);
+      reject(new Error("Timed out while loading relay event."));
+    }, historyTimeoutMs);
+
+    subscriptions.set(subId, {
+      mode: "first",
+      onEvent: (event) => {
+        window.clearTimeout(timeout);
+        subscriptions.delete(subId);
+        void closeSubscription(subId);
+        resolve(event);
+      },
+      resolve,
+      reject,
+      timeout,
+    });
+
+    void sendRaw(["REQ", subId, filter]).catch((error) => {
+      window.clearTimeout(timeout);
+      subscriptions.delete(subId);
+      reject(
+        error instanceof Error
+          ? error
+          : new Error("Failed to request relay event."),
+      );
+    });
+  });
+}
+
+/**
+ * Fetch relay history for event IDs in bounded, concurrent chunks and flatten
+ * the responses into one list. Returns an empty list without issuing a request
+ * when `eventIds` is empty.
+ */
+export async function fetchChunkedHistory(
+  eventIds: string[],
+  buildFilter: (eventIds: string[]) => RelaySubscriptionFilter,
+  fetchHistory: (filter: RelaySubscriptionFilter) => Promise<RelayEvent[]>,
+): Promise<RelayEvent[]> {
+  if (eventIds.length === 0) return [];
+
+  const chunks: string[][] = [];
+  for (let i = 0; i < eventIds.length; i += AUX_BACKFILL_CHUNK_SIZE) {
+    chunks.push(eventIds.slice(i, i + AUX_BACKFILL_CHUNK_SIZE));
+  }
+  const batches = await collectWithConcurrency(
+    chunks,
+    AUX_BACKFILL_CONCURRENCY,
+    (ids) => fetchHistory(buildFilter(ids)),
+  );
+  return batches.flat();
+}
diff --git a/desktop/src/shared/api/relayMembers.ts b/desktop/src/shared/api/relayMembers.ts
index e88d84488..62cae9005 100644
--- a/desktop/src/shared/api/relayMembers.ts
+++ b/desktop/src/shared/api/relayMembers.ts
@@ -104,12 +104,10 @@ export function relayMembershipLookupFromEvent(
 }
 
 async function fetchMembershipListEvent(): Promise<RelayEvent | null> {
-  const events = await relayClient.fetchEvents({
+  return relayClient.fetchFirstEvent({
     kinds: [KIND_NIP43_MEMBERSHIP_LIST],
     limit: 1,
   });
-
-  return events[events.length - 1] ?? null;
 }
 
 /** Loads the NIP-43 snapshot only when the relay advertises membership support. */
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index 918993dac..59a5c9b4b 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -2,6 +2,69 @@
   animation: sprout-arc-spinner-spin 500ms linear infinite;
 }
 
+@keyframes buzz-qr-cell-reveal {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  27% {
+    opacity: 0.27;
+    transform: scale(0);
+  }
+
+  30% {
+    opacity: 0.3;
+    transform: scale(0.043);
+  }
+
+  35% {
+    opacity: 0.35;
+    transform: scale(0.167);
+  }
+
+  40% {
+    opacity: 0.4;
+    transform: scale(0.358);
+  }
+
+  45% {
+    opacity: 0.45;
+    transform: scale(0.632);
+  }
+
+  49% {
+    opacity: 0.49;
+    transform: scale(0.918);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.buzz-qr-cell-reveal {
+  opacity: 0;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: buzz-qr-cell-reveal 58ms linear var(--buzz-qr-reveal-delay, 0ms)
+    forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .buzz-qr-cell-reveal {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}
+
 @keyframes sprout-arc-spinner-spin {
   to {
     transform: rotate(360deg);
diff --git a/desktop/src/shared/ui/styled-qr-code.test.mjs b/desktop/src/shared/ui/styled-qr-code.test.mjs
index 9eb84d10c..c78243621 100644
--- a/desktop/src/shared/ui/styled-qr-code.test.mjs
+++ b/desktop/src/shared/ui/styled-qr-code.test.mjs
@@ -37,3 +37,18 @@ test("uses a deterministic lower-density matrix for the same payload", () => {
 
   assert.equal(first, second);
 });
+
+test("adds the row-based reveal motion when requested", () => {
+  const html = renderToStaticMarkup(
+    React.createElement(StyledQrCode, {
+      animate: true,
+      value: TEST_PAIRING_URI,
+    }),
+  );
+
+  assert.match(html, /class="buzz-qr-cell-reveal"/);
+  assert.match(html, /data-qr-cell-row="0"/);
+  assert.match(html, /--buzz-qr-reveal-delay:0ms/);
+  assert.match(html, /data-qr-cell-row="56"/);
+  assert.match(html, /--buzz-qr-reveal-delay:189ms/);
+});
diff --git a/desktop/src/shared/ui/styled-qr-code.tsx b/desktop/src/shared/ui/styled-qr-code.tsx
index f2e1c60bb..57c5d6692 100644
--- a/desktop/src/shared/ui/styled-qr-code.tsx
+++ b/desktop/src/shared/ui/styled-qr-code.tsx
@@ -1,4 +1,10 @@
-import { useId, useMemo, type ReactNode, type SVGProps } from "react";
+import {
+  useId,
+  useMemo,
+  type CSSProperties,
+  type ReactNode,
+  type SVGProps,
+} from "react";
 import { create } from "qrcode";
 
 const CELL_SPACING_RATIO = 0.2;
@@ -6,11 +12,16 @@ const FINDER_PATTERN_SIZE = 7;
 const QUIET_ZONE_SIZE = 4;
 const MAX_CENTER_OBSCURED_RATIO = 0.1;
 const CENTER_ICON_SIZE_RATIO = 0.8;
+const QR_REVEAL_DURATION_MS = 250;
+const QR_REVEAL_WAVE_SPREAD = 0.3;
+const QR_REVEAL_ROW_TRAVEL_MS =
+  QR_REVEAL_DURATION_MS / (1 + QR_REVEAL_WAVE_SPREAD);
 
 type StyledQrCodeProps = Omit<
   SVGProps<SVGSVGElement>,
   "children" | "height" | "title" | "width"
 > & {
+  animate?: boolean;
   backgroundColor?: string;
   centerImageSrc?: string;
   foregroundColor?: string;
@@ -76,6 +87,7 @@ function FinderPattern({
 }
 
 export function StyledQrCode({
+  animate = false,
   backgroundColor = "#ffffff",
   centerImageSrc,
   foregroundColor = "#000000",
@@ -118,11 +130,22 @@ export function StyledQrCode({
 
       cells.push(
         <circle
+          className={animate ? "buzz-qr-cell-reveal" : undefined}
           cx={column + 0.5}
           cy={row + 0.5}
+          data-qr-cell-row={row}
           fill={foregroundColor}
           key={`${row}-${column}`}
           r={dataCellRadius}
+          style={
+            animate
+              ? ({
+                  "--buzz-qr-reveal-delay": `${Math.round(
+                    (row / Math.max(matrix.size, 1)) * QR_REVEAL_ROW_TRAVEL_MS,
+                  )}ms`,
+                } as CSSProperties)
+              : undefined
+          }
         />,
       );
     }
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index da398ca4b..ebf6b1f42 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -284,6 +284,8 @@ type E2eConfig = {
     oaOwnerIsMe?: boolean;
     /** Whether the mock relay advertises NIP-43 membership support. Defaults to false. */
     relayRequiresMembership?: boolean;
+    /** Delay EOSE for membership snapshots after delivering the event. */
+    relayMembershipEoseDelayMs?: number;
     relayRole?: "owner" | "admin" | "member" | null;
     // Descriptors returned by the mocked `pick_and_upload_media` /
     // `upload_media_bytes` commands. Lets a spec drive the attachment flow
@@ -296,6 +298,8 @@ type E2eConfig = {
     /** Delay (ms) applied to `get_relay_self` so E2E tests can prove the
      *  fail-closed race: DMs are withheld while classification is unresolved. */
     relaySelfDelayMs?: number;
+    /** Delay (ms) applied to `start_pairing` so pairing loading UI is observable. */
+    pairingStartDelayMs?: number;
     /**
      * Sequenced results for `confirm_team_snapshot_import`. String = throw
      * with that message; null = succeed. Call N uses results[N]; last entry
@@ -8746,7 +8750,15 @@ function sendToMockSocket(args: {
         subId,
         createMockRelayMembershipEvent(),
       ]);
-      sendWsText(socket.handler, ["EOSE", subId]);
+      const eoseDelayMs = getConfig()?.mock?.relayMembershipEoseDelayMs ?? 0;
+      if (eoseDelayMs > 0) {
+        window.setTimeout(
+          () => sendWsText(socket.handler, ["EOSE", subId]),
+          eoseDelayMs,
+        );
+      } else {
+        sendWsText(socket.handler, ["EOSE", subId]);
+      }
       return;
     }
 
@@ -10902,8 +10914,13 @@ export function maybeInstallE2eTauriMocks() {
       case "plugin:event|listen":
         // Tauri event system (pairing, huddle) — no-op in e2e, return unlisten fn ID
         return Math.floor(Math.random() * 1_000_000);
-      case "start_pairing":
+      case "start_pairing": {
+        const delayMs = activeConfig?.mock?.pairingStartDelayMs ?? 0;
+        if (delayMs > 0) {
+          await new Promise((resolve) => window.setTimeout(resolve, delayMs));
+        }
         return "nostrpair://8f4b8db31967ce14fef970a1ff1e8eecf19a430aa1c83875e2f5be68dcac0f1a?relay=wss%3A%2F%2Frelay.example.com&secret=87d5a8cfd5807a0cb44f728b67d88d6dcb8daf99be137c158f21a50c1e913c0a&v=1";
+      }
       case "cancel_pairing":
       case "confirm_pairing_sas":
         return null;
diff --git a/desktop/tests/e2e/community-rail.spec.ts b/desktop/tests/e2e/community-rail.spec.ts
index 0d54efb09..68c12f69d 100644
--- a/desktop/tests/e2e/community-rail.spec.ts
+++ b/desktop/tests/e2e/community-rail.spec.ts
@@ -182,6 +182,7 @@ test.describe("community rail", () => {
     await installMockBridge(
       page,
       {
+        relayMembershipEoseDelayMs: 30_000,
         relayRequiresMembership: true,
         relayRole: "admin",
       },
@@ -215,7 +216,7 @@ test.describe("community rail", () => {
     ).not.toBeFocused();
     await expect(
       menu.getByRole("menuitem", { name: "Invite to community" }),
-    ).toBeVisible();
+    ).toBeVisible({ timeout: 1_000 });
     await expect(
       menu.getByRole("menuitem", { name: "Community settings" }),
     ).toBeVisible();
@@ -658,9 +659,32 @@ test.describe("community rail", () => {
       `community-rail-button-${COMMUNITY_A.id}`,
     );
     await expect(firstButton).toBeVisible();
-    const box = await firstButton.boundingBox();
-    expect(box).not.toBeNull();
-    expect(box?.y ?? 0).toBeGreaterThanOrEqual(32);
+    const buttonBox = await firstButton.boundingBox();
+    const railBox = await page.getByTestId("community-rail").boundingBox();
+    const searchBox = await page.getByTestId("open-search").boundingBox();
+    const contentBox = await page
+      .locator("[data-buzz-content-surface]")
+      .first()
+      .boundingBox();
+    expect(buttonBox).not.toBeNull();
+    expect(railBox).not.toBeNull();
+    expect(searchBox).not.toBeNull();
+    expect(contentBox).not.toBeNull();
+    expect(buttonBox?.y ?? 0).toBeGreaterThanOrEqual(32);
+    expect(Math.abs((railBox?.y ?? 0) - (contentBox?.y ?? 0))).toBeLessThan(
+      0.5,
+    );
+
+    const leftInset = (buttonBox?.x ?? 0) - (railBox?.x ?? 0);
+    const rightInset =
+      (railBox?.x ?? 0) +
+      (railBox?.width ?? 0) -
+      ((buttonBox?.x ?? 0) + (buttonBox?.width ?? 0));
+    expect(Math.abs(leftInset - 10)).toBeLessThan(0.5);
+    expect(Math.abs(leftInset - rightInset)).toBeLessThan(0.5);
+    const visibleRightGap =
+      (searchBox?.x ?? 0) - ((buttonBox?.x ?? 0) + (buttonBox?.width ?? 0));
+    expect(Math.abs(leftInset - visibleRightGap)).toBeLessThan(0.5);
 
     // With the rail visible, the top-chrome controls (sidebar toggle, back/
     // forward) sit just past the traffic lights near the rail edge — not
diff --git a/desktop/tests/e2e/mobile-pairing-qr.spec.ts b/desktop/tests/e2e/mobile-pairing-qr.spec.ts
index 710dbcec2..606777545 100644
--- a/desktop/tests/e2e/mobile-pairing-qr.spec.ts
+++ b/desktop/tests/e2e/mobile-pairing-qr.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test, type Page } from "@playwright/test";
 import { mkdirSync } from "node:fs";
 
 import { installMockBridge } from "../helpers/bridge";
@@ -7,52 +7,179 @@ import { waitForAnimations } from "../helpers/animations";
 const SCREENSHOT_DIR = "test-results/mobile-pairing-qr";
 
 test.beforeEach(async ({ page }) => {
-  await installMockBridge(page);
+  await installMockBridge(page, { pairingStartDelayMs: 300 });
 });
 
-test("mobile pairing uses the local Wallet-style QR renderer", async ({
+async function emitPairingEvent(page: Page, event: string, payload?: unknown) {
+  await page.evaluate(
+    async ({ eventName, eventPayload }) => {
+      const internals = (
+        window as Window & {
+          __TAURI_INTERNALS__?: {
+            invoke?: (
+              command: string,
+              args: Record<string, unknown>,
+            ) => Promise<unknown>;
+          };
+        }
+      ).__TAURI_INTERNALS__;
+      if (!internals?.invoke) {
+        throw new Error("Tauri E2E event bridge is unavailable");
+      }
+      await internals.invoke("plugin:event|emit", {
+        event: eventName,
+        payload: eventPayload,
+      });
+    },
+    { eventName: event, eventPayload: payload },
+  );
+}
+
+test("mobile pairing starts on demand and reveals the QR code", async ({
   page,
 }) => {
   await page.goto("/");
   await page.getByTestId("open-settings").click();
   await page.getByTestId("profile-popover-settings").click();
   await page.getByTestId("settings-nav-mobile").click();
-  await page.getByTestId("pair-mobile-button").click();
 
-  const dialog = page.getByTestId("mobile-pairing-dialog");
-  const qrCode = page.getByTestId("mobile-pairing-qr");
+  mkdirSync(SCREENSHOT_DIR, { recursive: true });
+
+  const section = page.getByTestId("settings-mobile");
+  const card = page.getByTestId("mobile-pairing-card");
   const qrContainer = page.getByTestId("mobile-pairing-qr-container");
-  const copyButton = dialog.getByTestId("copy-pairing-code");
-  await expect(dialog).toBeVisible();
+  const startButton = card.getByTestId("start-pairing-button");
+  await expect(card).toBeVisible();
+  await expect(startButton).toHaveText("Start pairing");
+  await expect(page.getByTestId("mobile-pairing-qr")).toHaveCount(0);
+  await expect(page.getByTestId("copy-pairing-code")).toHaveCount(0);
+  expect(
+    await page.evaluate(
+      () =>
+        (window.__BUZZ_E2E_COMMAND_LOG__ ?? []).filter(
+          (entry) => entry.command === "start_pairing",
+        ).length,
+    ),
+  ).toBe(0);
+
+  const sectionBox = await section.boundingBox();
+  const cardBox = await card.boundingBox();
+  expect(sectionBox).not.toBeNull();
+  expect(cardBox).not.toBeNull();
+  const sectionCenter = (sectionBox?.x ?? 0) + (sectionBox?.width ?? 0) / 2;
+  const cardCenter = (cardBox?.x ?? 0) + (cardBox?.width ?? 0) / 2;
+  expect(Math.abs(sectionCenter - cardCenter)).toBeLessThan(0.5);
+  await waitForAnimations(page);
+  await card.screenshot({ path: `${SCREENSHOT_DIR}/pairing-start.png` });
+
+  await startButton.click();
+
+  const loadingSpinner = card.getByTestId("pairing-loading-spinner");
+  await expect(loadingSpinner).toBeVisible();
+  await expect(loadingSpinner).toHaveCSS("animation-name", "spin");
+
+  const qrCode = page.getByTestId("mobile-pairing-qr");
+  const copyButton = card.getByTestId("copy-pairing-code");
   await expect(qrCode).toBeVisible();
   await expect(copyButton).toHaveText("Copy pairing code");
-  await expect(dialog).toHaveCSS("border-radius", "16px");
-  await expect(dialog).toHaveCSS("border-left-width", "0px");
-  await expect(dialog).toHaveCSS("padding-left", "24px");
-  await expect(dialog).toHaveCSS("padding-right", "24px");
-  await expect(dialog).toHaveCSS("padding-top", "24px");
-  await expect(dialog.getByTestId("mobile-pairing-done")).toHaveCount(0);
+  await expect(startButton).toHaveCount(0);
+  await expect(card.getByText("Pair mobile device")).toHaveCount(0);
+  await expect(page.getByTestId("mobile-pairing-dialog")).toHaveCount(0);
   await expect(
-    dialog.getByRole("button", { name: "Close", exact: true }),
-  ).toHaveCount(1);
-  await expect(
-    dialog.getByText("Waiting for mobile device to scan..."),
+    page.getByText("Securely transfer your identity via NIP-AB protocol"),
   ).toHaveCount(0);
-  await expect(dialog.locator("code")).toHaveCount(0);
   await expect(qrCode).toHaveAttribute("data-qr-matrix-size", "57");
   await expect(qrCode.locator("[data-qr-finder-pattern]")).toHaveCount(3);
   expect(await qrCode.locator("circle").count()).toBeGreaterThan(100);
+  expect(await qrCode.locator(".buzz-qr-cell-reveal").count()).toBeGreaterThan(
+    100,
+  );
+  await expect(qrCode.locator(".buzz-qr-cell-reveal").first()).toHaveCSS(
+    "animation-name",
+    "buzz-qr-cell-reveal",
+  );
+  await expect(qrCode.locator(".buzz-qr-cell-reveal").first()).toHaveCSS(
+    "animation-duration",
+    "0.058s",
+  );
+  await expect(qrCode.locator(".buzz-qr-cell-reveal").first()).toHaveCSS(
+    "animation-timing-function",
+    "linear",
+  );
+  await expect(
+    qrCode.locator('[data-qr-cell-row="56"].buzz-qr-cell-reveal').first(),
+  ).toHaveCSS("animation-delay", "0.189s");
+  await expect(copyButton).toHaveCSS("animation-name", "enter");
+  await expect(copyButton).toHaveCSS("animation-duration", "0.25s");
   await expect(qrCode.locator("image")).toHaveAttribute(
     "href",
     "/app-icon@2x.png",
   );
   await waitForAnimations(page);
-  const qrContainerWidth = await qrContainer.evaluate(
-    (element) => getComputedStyle(element).width,
+  const qrBox = await qrContainer.boundingBox();
+  const copyBox = await copyButton.boundingBox();
+  expect(qrBox).not.toBeNull();
+  expect(copyBox).not.toBeNull();
+  expect(copyBox?.y ?? 0).toBeGreaterThan(
+    (qrBox?.y ?? 0) + (qrBox?.height ?? 0),
+  );
+  expect(Math.abs((copyBox?.x ?? 0) - (qrBox?.x ?? 0))).toBeLessThan(0.5);
+  expect(Math.abs((copyBox?.width ?? 0) - (qrBox?.width ?? 0))).toBeLessThan(
+    0.5,
   );
-  await expect(copyButton).toHaveCSS("width", qrContainerWidth);
 
-  mkdirSync(SCREENSHOT_DIR, { recursive: true });
-  await dialog.screenshot({ path: `${SCREENSHOT_DIR}/pairing-dialog.png` });
+  await emitPairingEvent(page, "pairing-error", {
+    message: "Session timed out",
+  });
+
+  await expect(qrCode).toHaveCount(0);
+  await expect(copyButton).toHaveCount(0);
+  await expect(card.getByText("Pairing code expired.")).toBeVisible();
+
+  const regenerateButton = card.getByTestId("regenerate-pairing-button");
+  await expect(regenerateButton).toHaveText("Generate new pairing code");
+  await waitForAnimations(page);
+  await card.screenshot({ path: `${SCREENSHOT_DIR}/pairing-expired.png` });
+  await regenerateButton.click();
+  await expect(loadingSpinner).toBeVisible();
+  await expect(qrCode).toBeVisible();
+  await expect(copyButton).toBeVisible();
+  expect(
+    await page.evaluate(
+      () =>
+        (window.__BUZZ_E2E_COMMAND_LOG__ ?? []).filter(
+          (entry) => entry.command === "start_pairing",
+        ).length,
+    ),
+  ).toBe(2);
+
+  await waitForAnimations(page);
+  await card.screenshot({ path: `${SCREENSHOT_DIR}/pairing-card.png` });
   await qrCode.screenshot({ path: `${SCREENSHOT_DIR}/pairing-qr.png` });
 });
+
+test("late pairing events are ignored after canceling", async ({ page }) => {
+  await page.goto("/");
+  await page.getByTestId("open-settings").click();
+  await page.getByTestId("profile-popover-settings").click();
+  await page.getByTestId("settings-nav-mobile").click();
+
+  const card = page.getByTestId("mobile-pairing-card");
+  await card.getByTestId("start-pairing-button").click();
+  await expect(page.getByTestId("mobile-pairing-qr")).toBeVisible();
+
+  await emitPairingEvent(page, "pairing-sas-received", { sas: "123456" });
+  const dialog = page.getByTestId("mobile-pairing-dialog");
+  await expect(dialog).toBeVisible();
+  await dialog.getByRole("button", { name: "Close" }).click();
+
+  await expect(dialog).toHaveCount(0);
+  await expect(card.getByText("Pairing was canceled.")).toBeVisible();
+
+  await emitPairingEvent(page, "pairing-complete");
+  await emitPairingEvent(page, "pairing-sas-received", { sas: "654321" });
+
+  await expect(dialog).toHaveCount(0);
+  await expect(page.getByTestId("mobile-pairing-done")).toHaveCount(0);
+  await expect(card.getByText("Pairing was canceled.")).toBeVisible();
+});
diff --git a/desktop/tests/helpers/bridge.ts b/desktop/tests/helpers/bridge.ts
index 41fdeae6f..2b9bd79f8 100644
--- a/desktop/tests/helpers/bridge.ts
+++ b/desktop/tests/helpers/bridge.ts
@@ -301,6 +301,8 @@ type MockBridgeOptions = {
   oaOwnerIsMe?: boolean;
   /** Whether the mock relay advertises NIP-43 membership support. Defaults to false. */
   relayRequiresMembership?: boolean;
+  /** Delay EOSE for membership snapshots after delivering the event. */
+  relayMembershipEoseDelayMs?: number;
   /**
    * Active identity's role in the seeded `mockRelayMembers`. `null` removes
    * the active identity from the membership list entirely (admin-path branch
@@ -320,6 +322,8 @@ type MockBridgeOptions = {
   /** Delay (ms) applied to `get_relay_self` so E2E tests can prove the
    *  fail-closed race: DMs are withheld while classification is unresolved. */
   relaySelfDelayMs?: number;
+  /** Delay (ms) applied to `start_pairing` so pairing loading UI is observable. */
+  pairingStartDelayMs?: number;
   /**
    * Sequenced results for `confirm_team_snapshot_import`. String = throw
    * with that message; null = succeed. Call N uses results[N]; last entry