diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 34b41cb5..2dc44083 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.12.0",
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.15",
-        "@radix-ui/react-alert-dialog": "^1.1.14",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.19",
         "@radix-ui/react-popover": "^1.1.18",
@@ -2136,33 +2135,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-alert-dialog": {
-      "version": "1.1.23",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.23.tgz",
-      "integrity": "sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.5",
-        "@radix-ui/react-context": "1.2.2",
-        "@radix-ui/react-dialog": "1.1.23",
-        "@radix-ui/react-primitive": "2.1.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.15.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f16ffa5d..80c580fa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.15",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.19",
     "@radix-ui/react-popover": "^1.1.18",
diff --git a/frontend/src/components/ActivitiesPanel/ActivitiesPanel.test.tsx b/frontend/src/components/ActivitiesPanel/ActivitiesPanel.test.tsx
index 99bfd72f..d7f49d77 100644
--- a/frontend/src/components/ActivitiesPanel/ActivitiesPanel.test.tsx
+++ b/frontend/src/components/ActivitiesPanel/ActivitiesPanel.test.tsx
@@ -1,15 +1,23 @@
 import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import { TooltipProvider } from "../Tooltip/Tooltip";
 import ActivitiesPanel from "./ActivitiesPanel";
+import tamaguiConfig from "../../../tamagui.config";
 
+// ActivitiesPanel renders Modal via PlayerItemList (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's Dialog.Root, it isn't usable
+// standalone. The app root (src/main.tsx) provides this in production;
+// tests need their own.
 function renderActivitiesPanel() {
   return render(
-    <TooltipProvider>
-      <ActivitiesPanel />
-    </TooltipProvider>
+    <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+      <TooltipProvider>
+        <ActivitiesPanel />
+      </TooltipProvider>
+    </TamaguiProvider>
   );
 }
 
diff --git a/frontend/src/components/ActivityInput/ActivityInput.test.tsx b/frontend/src/components/ActivityInput/ActivityInput.test.tsx
index a449e0a7..ddfe8a5f 100644
--- a/frontend/src/components/ActivityInput/ActivityInput.test.tsx
+++ b/frontend/src/components/ActivityInput/ActivityInput.test.tsx
@@ -1,8 +1,26 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render as rtlRender, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { TamaguiProvider } from 'tamagui';
 
 import ActivityInput from './ActivityInput';
+import tamaguiConfig from '../../../tamagui.config';
+
+// ActivityInput renders AlertDialog (#582), which needs a TamaguiProvider
+// ancestor - unlike Radix's AlertDialog.Root, it isn't usable standalone.
+// The app root (src/main.tsx) provides this in production; tests need
+// their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseGame = vi.fn();
 const mockUseSupportFlow = vi.fn();
diff --git a/frontend/src/components/AlertDialog/AlertDialog.stories.tsx b/frontend/src/components/AlertDialog/AlertDialog.stories.tsx
index 87559782..2f2e0c09 100644
--- a/frontend/src/components/AlertDialog/AlertDialog.stories.tsx
+++ b/frontend/src/components/AlertDialog/AlertDialog.stories.tsx
@@ -4,15 +4,15 @@ import AlertDialog from './AlertDialog';
 
 /**
  * `AlertDialog` interrupts the user with a confirm/destructive prompt that
- * requires an explicit decision before continuing (Radix `AlertDialog`
- * under the hood). Use it in place of `window.confirm`. For non-blocking
- * informational overlays, use `Modal`.
+ * requires an explicit decision before continuing (Tamagui `AlertDialog`
+ * under the hood, #582). Use it in place of `window.confirm`. For
+ * non-blocking informational overlays, use `Modal`.
  */
 const meta: Meta<typeof AlertDialog> = {
   title: 'Shared/AlertDialog',
   component: AlertDialog,
   tags: ['autodocs'],
-  // AlertDialog renders via a Radix Portal into document.body. With inline
+  // AlertDialog renders via a Tamagui Portal into document.body. With inline
   // docs rendering that portal escapes the story canvas and covers the whole
   // docs page, so render each story in its own iframe instead.
   parameters: {
@@ -40,7 +40,7 @@ export const Destructive: Story = {
     confirmLabel: 'Delete',
   },
   play: async ({ canvasElement }) => {
-    // AlertDialog renders via a Radix Portal into document.body, outside the canvas.
+    // AlertDialog renders via a Tamagui Portal into document.body, outside the canvas.
     const body = within(canvasElement.ownerDocument.body);
     const dialog = await body.findByRole('alertdialog', { name: 'Delete this activity?' });
     await expect(dialog).toBeVisible();
diff --git a/frontend/src/components/AlertDialog/AlertDialog.test.tsx b/frontend/src/components/AlertDialog/AlertDialog.test.tsx
index e237b11d..081557f4 100644
--- a/frontend/src/components/AlertDialog/AlertDialog.test.tsx
+++ b/frontend/src/components/AlertDialog/AlertDialog.test.tsx
@@ -1,7 +1,22 @@
+import { useState } from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TamaguiProvider } from 'tamagui';
 import AlertDialog from './AlertDialog';
+import tamaguiConfig from '../../../tamagui.config';
+
+// AlertDialog's underlying Tamagui `AlertDialog` (#582) needs a
+// TamaguiProvider ancestor - unlike Radix's AlertDialog.Root, it isn't
+// usable standalone. The app root (src/main.tsx) provides this in
+// production; tests need their own.
+function renderWithProvider(ui: React.ReactElement) {
+  return render(
+    <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+      {ui}
+    </TamaguiProvider>
+  );
+}
 
 function renderDialog(overrides: Partial<React.ComponentProps<typeof AlertDialog>> = {}) {
   const props = {
@@ -12,7 +27,7 @@ function renderDialog(overrides: Partial<React.ComponentProps<typeof AlertDialog
     onCancel: vi.fn(),
     ...overrides,
   };
-  render(<AlertDialog {...props} />);
+  renderWithProvider(<AlertDialog {...props} />);
   return props;
 }
 
@@ -57,4 +72,72 @@ describe('AlertDialog', () => {
     expect(descId).toBeTruthy();
     expect(document.getElementById(descId!)).toHaveTextContent('Are you sure you want to proceed?');
   });
+
+  it('focuses the Cancel button when opened, not the confirm action', async () => {
+    renderDialog({ confirmLabel: 'Delete', variant: 'destructive' });
+    await vi.waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Cancel' })).toHaveFocus();
+    });
+  });
+
+  it('does not close when clicking outside the dialog', async () => {
+    // The modal dismissable layer disables pointer events on the rest of
+    // the page while open (real browser behaviour, not a test artefact) -
+    // skip userEvent's pointer-events guard so the click still dispatches,
+    // to assert it's a no-op rather than that it's unreachable.
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    const onCancel = vi.fn();
+
+    function Harness() {
+      return (
+        <>
+          <button>Outside</button>
+          <AlertDialog
+            open
+            title="Confirm action"
+            description="Are you sure you want to proceed?"
+            onConfirm={() => {}}
+            onCancel={onCancel}
+          />
+        </>
+      );
+    }
+
+    renderWithProvider(<Harness />);
+    await user.click(screen.getByRole('button', { name: 'Outside' }));
+
+    expect(onCancel).not.toHaveBeenCalled();
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+  });
+
+  it('restores focus to the previously focused element on close', async () => {
+    const user = userEvent.setup();
+
+    function Harness() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>Open</button>
+          <AlertDialog
+            open={open}
+            title="Confirm action"
+            description="Are you sure you want to proceed?"
+            onConfirm={() => setOpen(false)}
+            onCancel={() => setOpen(false)}
+          />
+        </>
+      );
+    }
+
+    renderWithProvider(<Harness />);
+
+    const openButton = screen.getByRole('button', { name: 'Open' });
+    openButton.focus();
+    await user.click(openButton);
+
+    const cancelButton = await screen.findByRole('button', { name: 'Cancel' });
+    await user.click(cancelButton);
+
+    expect(openButton).toHaveFocus();
+  });
 });
diff --git a/frontend/src/components/AlertDialog/AlertDialog.tsx b/frontend/src/components/AlertDialog/AlertDialog.tsx
index d5413777..0a05b09d 100644
--- a/frontend/src/components/AlertDialog/AlertDialog.tsx
+++ b/frontend/src/components/AlertDialog/AlertDialog.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { AlertDialog as AlertDialogPrimitive } from 'tamagui';
 import styles from './AlertDialog.module.scss';
 import Button from '../Button/Button';
+import { useReturnFocusOnClose } from '../Overlay/useReturnFocusOnClose';
+
+// Tamagui's AlertDialog.Cancel default-focuses itself on open via an
+// internal `cancelRef`, which `Cancel asChild` composes onto its child - but
+// that only works if the child forwards refs. Our app-wide `Button` is a
+// plain function component (no forwardRef), so that ref chain silently
+// stays null. Focusing by id below sidesteps it entirely.
+const CANCEL_BUTTON_ID = 'alert-dialog-cancel-button';
 
 interface AlertDialogProps {
   open: boolean;
@@ -28,11 +36,29 @@ export default function AlertDialog({
   onCancel,
   variant = 'default',
 }: AlertDialogProps) {
+  const onCloseAutoFocus = useReturnFocusOnClose(open);
+
   return (
-    <AlertDialogPrimitive.Root open={open} onOpenChange={(o) => { if (!o) onCancel(); }}>
-      <AlertDialogPrimitive.Portal>
-        <AlertDialogPrimitive.Overlay className={styles.overlay} />
-        <AlertDialogPrimitive.Content className={styles.content}>
+    <AlertDialogPrimitive open={open} onOpenChange={(o: boolean) => { if (!o) onCancel(); }}>
+      {/*
+        role="presentation" strips the implicit ARIA `dialog` role the
+        browser assigns to Portal's underlying <dialog> HTML tag - without
+        it, this wrapper and Content below (which sets the real
+        `role="alertdialog"`, wired to the actual title/description) both
+        expose as dialog-family landmarks, so `getByRole('alertdialog')`/
+        assistive tech see two nested dialogs for what's semantically one.
+      */}
+      <AlertDialogPrimitive.Portal role="presentation">
+        <AlertDialogPrimitive.Overlay unstyled className={styles.overlay} />
+        <AlertDialogPrimitive.Content
+          unstyled
+          className={styles.content}
+          onCloseAutoFocus={onCloseAutoFocus}
+          onOpenAutoFocus={(event: Event) => {
+            event.preventDefault();
+            document.getElementById(CANCEL_BUTTON_ID)?.focus();
+          }}
+        >
           <AlertDialogPrimitive.Title className={styles.title}>
             {title}
           </AlertDialogPrimitive.Title>
@@ -40,22 +66,27 @@ export default function AlertDialog({
             {description}
           </AlertDialogPrimitive.Description>
           <div className={styles.actions}>
-            <AlertDialogPrimitive.Cancel asChild>
-              <Button variant="secondary">
-                {cancelLabel}
-              </Button>
-            </AlertDialogPrimitive.Cancel>
-            <AlertDialogPrimitive.Action asChild>
-              <Button
-                variant={variant === 'destructive' ? 'danger' : 'primary'}
-                onClick={onConfirm}
-              >
-                {confirmLabel}
-              </Button>
-            </AlertDialogPrimitive.Action>
+            {/*
+              Plain Buttons with explicit onClick handlers, not
+              `AlertDialog.Cancel`/`.Action` asChild - both compose their
+              click behaviour onto Tamagui's `onPress` prop, which our
+              app-wide `Button` (a plain function component, not RN-style)
+              never receives as a real DOM `onClick`, so it silently
+              wouldn't fire through asChild. `onOpenChange`/Escape/outside
+              -click still route through the Root's own onOpenChange above.
+            */}
+            <Button id={CANCEL_BUTTON_ID} variant="secondary" onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={variant === 'destructive' ? 'danger' : 'primary'}
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </Button>
           </div>
         </AlertDialogPrimitive.Content>
       </AlertDialogPrimitive.Portal>
-    </AlertDialogPrimitive.Root>
+    </AlertDialogPrimitive>
   );
 }
diff --git a/frontend/src/components/CategoriesPanel/CategoriesPanel.test.tsx b/frontend/src/components/CategoriesPanel/CategoriesPanel.test.tsx
index bad828fe..302c016e 100644
--- a/frontend/src/components/CategoriesPanel/CategoriesPanel.test.tsx
+++ b/frontend/src/components/CategoriesPanel/CategoriesPanel.test.tsx
@@ -1,8 +1,26 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { render as rtlRender, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import CategoriesPanel from "./CategoriesPanel";
+import tamaguiConfig from "../../../tamagui.config";
+
+// CategoriesPanel renders Modal via PlayerItemList (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's Dialog.Root, it isn't usable
+// standalone. The app root (src/main.tsx) provides this in production;
+// tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseCategories = vi.fn();
 const mockUseCreateCategory = vi.fn();
diff --git a/frontend/src/components/LogOfflineActivityModal/LogOfflineActivityModal.test.tsx b/frontend/src/components/LogOfflineActivityModal/LogOfflineActivityModal.test.tsx
index b8e3763b..ddbff6e3 100644
--- a/frontend/src/components/LogOfflineActivityModal/LogOfflineActivityModal.test.tsx
+++ b/frontend/src/components/LogOfflineActivityModal/LogOfflineActivityModal.test.tsx
@@ -1,9 +1,11 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import { TooltipProvider } from "../Tooltip/Tooltip";
 import LogOfflineActivityModal from "./LogOfflineActivityModal";
+import tamaguiConfig from "../../../tamagui.config";
 
 const logMutate = vi.fn();
 const fetchPlayerAndCharacter = vi.fn();
@@ -37,11 +39,17 @@ vi.mock("../EntitySearchInput/EntitySearchInput", () => ({
   ),
 }));
 
+// LogOfflineActivityModal renders Modal (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's Dialog.Root, it isn't usable
+// standalone. The app root (src/main.tsx) provides this in production;
+// tests need their own.
 function renderModal(onClose = vi.fn()) {
   return render(
-    <TooltipProvider>
-      <LogOfflineActivityModal onClose={onClose} />
-    </TooltipProvider>
+    <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+      <TooltipProvider>
+        <LogOfflineActivityModal onClose={onClose} />
+      </TooltipProvider>
+    </TamaguiProvider>
   );
 }
 
diff --git a/frontend/src/components/Modal/Modal.stories.tsx b/frontend/src/components/Modal/Modal.stories.tsx
index 385cc7a6..e11df371 100644
--- a/frontend/src/components/Modal/Modal.stories.tsx
+++ b/frontend/src/components/Modal/Modal.stories.tsx
@@ -4,10 +4,10 @@ import Modal from './Modal';
 import Button from '../Button/Button';
 
 /**
- * `Modal` is an always-open Radix `Dialog` intended to be conditionally
- * mounted by the parent (mount when shown, unmount on `onClose`). Use it for
- * informational overlays; for confirm/destructive prompts use `AlertDialog`
- * instead.
+ * `Modal` is an always-open Tamagui `Dialog` (#582) intended to be
+ * conditionally mounted by the parent (mount when shown, unmount on
+ * `onClose`). Use it for informational overlays; for confirm/destructive
+ * prompts use `AlertDialog` instead.
  */
 const meta: Meta<typeof Modal> = {
   title: 'Shared/Modal',
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof Modal>;
 
 export const Default: Story = {
   play: async ({ canvasElement }) => {
-    // Modal renders via a Radix Portal into document.body, outside the canvas.
+    // Modal renders via a Tamagui Portal into document.body, outside the canvas.
     const body = within(canvasElement.ownerDocument.body);
     const dialog = await body.findByRole('dialog', { name: 'Modal title' });
     await expect(dialog).toBeVisible();
diff --git a/frontend/src/components/Modal/Modal.test.tsx b/frontend/src/components/Modal/Modal.test.tsx
index f9889767..9be2cd11 100644
--- a/frontend/src/components/Modal/Modal.test.tsx
+++ b/frontend/src/components/Modal/Modal.test.tsx
@@ -1,11 +1,25 @@
+import { useState } from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TamaguiProvider } from 'tamagui';
 import Modal from './Modal';
+import tamaguiConfig from '../../../tamagui.config';
+
+// Modal's underlying Tamagui `Dialog` (#582) needs a TamaguiProvider
+// ancestor - unlike Radix's Dialog.Root, it isn't usable standalone. The
+// app root (src/main.tsx) provides this in production; tests need their own.
+function renderModal(ui: React.ReactElement) {
+  return render(
+    <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+      {ui}
+    </TamaguiProvider>
+  );
+}
 
 describe('Modal', () => {
   it('renders modal with title and children', () => {
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={() => {}}>
         <p>Modal content</p>
       </Modal>
@@ -16,7 +30,7 @@ describe('Modal', () => {
   });
 
   it('renders close button with correct aria-label', () => {
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={() => {}}>
         <p>Content</p>
       </Modal>
@@ -30,7 +44,7 @@ describe('Modal', () => {
     const user = userEvent.setup();
     const handleClose = vi.fn();
 
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={handleClose}>
         <p>Content</p>
       </Modal>
@@ -46,7 +60,7 @@ describe('Modal', () => {
     const user = userEvent.setup();
     const handleClose = vi.fn();
 
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={handleClose}>
         <p>Content</p>
       </Modal>
@@ -61,7 +75,7 @@ describe('Modal', () => {
     const user = userEvent.setup();
     const handleClose = vi.fn();
 
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={handleClose}>
         <p>Content</p>
       </Modal>
@@ -77,7 +91,7 @@ describe('Modal', () => {
     const user = userEvent.setup();
     const handleClose = vi.fn();
 
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={handleClose}>
         <p>Content</p>
       </Modal>
@@ -92,7 +106,7 @@ describe('Modal', () => {
   it('works when onClose is not provided', async () => {
     const user = userEvent.setup();
 
-    render(
+    renderModal(
       <Modal title="Test Modal">
         <p>Content</p>
       </Modal>
@@ -104,7 +118,7 @@ describe('Modal', () => {
   });
 
   it('renders multiple children correctly', () => {
-    render(
+    renderModal(
       <Modal title="Test Modal" onClose={() => {}}>
         <p>First paragraph</p>
         <p>Second paragraph</p>
@@ -116,4 +130,33 @@ describe('Modal', () => {
     expect(screen.getByText('Second paragraph')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument();
   });
+
+  it('restores focus to the previously focused element on close', async () => {
+    const user = userEvent.setup();
+
+    function Harness() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>Open</button>
+          {open && (
+            <Modal title="Test Modal" onClose={() => setOpen(false)}>
+              <p>Content</p>
+            </Modal>
+          )}
+        </>
+      );
+    }
+
+    renderModal(<Harness />);
+
+    const openButton = screen.getByRole('button', { name: 'Open' });
+    openButton.focus();
+    await user.click(openButton);
+
+    const closeButton = await screen.findByLabelText('Close modal');
+    await user.click(closeButton);
+
+    expect(openButton).toHaveFocus();
+  });
 });
diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx
index a0bf0c00..c29e145e 100644
--- a/frontend/src/components/Modal/Modal.tsx
+++ b/frontend/src/components/Modal/Modal.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dialog } from "tamagui";
 import styles from "./Modal.module.scss";
 import Button from "../Button/Button";
+import { useReturnFocusOnClose } from "../Overlay/useReturnFocusOnClose";
 
 interface ModalProps {
   title?: string;
@@ -28,14 +29,29 @@ export default function Modal({
   className,
   style,
 }: ModalProps) {
+  // Modal is always-open by design (the consumer mounts/unmounts it) rather
+  // than exposing an `open` prop, so `open` is always true here - the return
+  // point for this hook is simply "whatever had focus when Modal mounted".
+  const onCloseAutoFocus = useReturnFocusOnClose(true);
+
   return (
-    <DialogPrimitive.Root open onOpenChange={(open) => { if (!open) onClose?.(); }}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className={styles.modalBackdrop} data-testid="modal-overlay" />
-        <DialogPrimitive.Content
+    <Dialog open onOpenChange={(open: boolean) => { if (!open) onClose?.(); }}>
+      {/*
+        role="presentation" strips the implicit ARIA `dialog` role the
+        browser assigns to Portal's underlying <dialog> HTML tag - without
+        it, this wrapper and Content below (which sets the real
+        `role="dialog"`, wired to the actual title/description) both expose
+        as "dialog" landmarks, so `getByRole('dialog')`/assistive tech see
+        two nested dialogs for what's semantically one.
+      */}
+      <Dialog.Portal role="presentation">
+        <Dialog.Overlay unstyled className={styles.modalBackdrop} data-testid="modal-overlay" />
+        <Dialog.Content
+          unstyled
           id={id}
           className={[styles.modal, size ? styles[size] : '', className || ''].join(' ').trim()}
           style={style}
+          onCloseAutoFocus={onCloseAutoFocus}
         >
           <div className={styles.modalHeader}>
             {onBack ? (
@@ -47,17 +63,29 @@ export default function Modal({
                 ← {backLabel}
               </Button>
             ) : null}
-            <DialogPrimitive.Title asChild>
+            {/* asChild wraps our own literal <h2> (needed for the
+                `.modalHeader h2` selector) rather than letting Title render
+                its own tag - `unstyled` is dropped here since it has no
+                variant to cancel on DialogTitleFrame and, under asChild,
+                leaks through as a literal (invalid) DOM attribute instead
+                of being consumed. */}
+            <Dialog.Title asChild>
               <h2>{title}</h2>
-            </DialogPrimitive.Title>
-            <DialogPrimitive.Close asChild>
-              <Button
-                ariaLabel="Close modal"
-                className={styles.closeButton}
-              >
-                &times;
-              </Button>
-            </DialogPrimitive.Close>
+            </Dialog.Title>
+            {/*
+              Plain Button with an explicit onClick, not `Dialog.Close
+              asChild` - Close composes its auto-close via Tamagui's `onPress`
+              prop, which our app-wide `Button` (a plain function component,
+              not RN-style) never receives as a real DOM `onClick`, so the
+              close-on-click behaviour silently wouldn't fire through asChild.
+            */}
+            <Button
+              onClick={onClose}
+              ariaLabel="Close modal"
+              className={styles.closeButton}
+            >
+              &times;
+            </Button>
           </div>
           <div className={styles.modalContent}>
             {children}
@@ -67,8 +95,8 @@ export default function Modal({
               {footer}
             </div>
           )}
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
   );
 }
diff --git a/frontend/src/components/NotesPanel/NotesPanel.test.tsx b/frontend/src/components/NotesPanel/NotesPanel.test.tsx
index 3e068266..715faaab 100644
--- a/frontend/src/components/NotesPanel/NotesPanel.test.tsx
+++ b/frontend/src/components/NotesPanel/NotesPanel.test.tsx
@@ -1,8 +1,25 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { render as rtlRender, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import NotesPanel from "./NotesPanel";
+import tamaguiConfig from "../../../tamagui.config";
+
+// NotesPanel renders Modal (#582), which needs a TamaguiProvider ancestor -
+// unlike Radix's Dialog.Root, it isn't usable standalone. The app root
+// (src/main.tsx) provides this in production; tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseNotes = vi.fn();
 const mockUseCreateNote = vi.fn();
diff --git a/frontend/src/components/Overlay/useReturnFocusOnClose.ts b/frontend/src/components/Overlay/useReturnFocusOnClose.ts
new file mode 100644
index 00000000..3231ad8a
--- /dev/null
+++ b/frontend/src/components/Overlay/useReturnFocusOnClose.ts
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+/**
+ * Tamagui's Dialog/AlertDialog restore focus to a `Trigger` element when the
+ * overlay closes - but Modal and AlertDialog have no `Trigger` in their tree
+ * (they're driven by mount and by a controlled `open` prop instead, see
+ * #582), so `context.triggerRef` is always empty and Tamagui's own restore
+ * silently no-ops.
+ *
+ * This captures whatever had focus right before the overlay opened, and
+ * returns an `onCloseAutoFocus` handler that restores it there instead.
+ * Captured via the "adjust state during render" pattern (react.dev's
+ * documented way to derive state from a changing prop), not a ref mutation
+ * or an effect - it needs to run before FocusScope's own mount-time
+ * auto-focus (a descendant effect that would otherwise steal focus first),
+ * and effects run children-before-parents, so an effect here would already
+ * be too late.
+ */
+export function useReturnFocusOnClose(open: boolean) {
+  const [wasOpen, setWasOpen] = useState(false);
+  const [returnFocusTarget, setReturnFocusTarget] = useState<HTMLElement | null>(null);
+
+  if (open && !wasOpen) {
+    setWasOpen(true);
+    setReturnFocusTarget((document.activeElement as HTMLElement | null) ?? null);
+  } else if (!open && wasOpen) {
+    setWasOpen(false);
+  }
+
+  return function onCloseAutoFocus(event: Event) {
+    event.preventDefault();
+    returnFocusTarget?.focus?.();
+  };
+}
diff --git a/frontend/src/components/PlayerItemList/PlayerItemList.test.tsx b/frontend/src/components/PlayerItemList/PlayerItemList.test.tsx
index 6142c2df..41dc824b 100644
--- a/frontend/src/components/PlayerItemList/PlayerItemList.test.tsx
+++ b/frontend/src/components/PlayerItemList/PlayerItemList.test.tsx
@@ -1,8 +1,25 @@
-import { render, screen, within } from "@testing-library/react";
+import { render as rtlRender, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import PlayerItemList from "./PlayerItemList";
+import tamaguiConfig from "../../../tamagui.config";
+
+// PlayerItemList renders Modal (#582), which needs a TamaguiProvider
+// ancestor - unlike Radix's Dialog.Root, it isn't usable standalone. The
+// app root (src/main.tsx) provides this in production; tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 describe("PlayerItemList", () => {
   const items = [
diff --git a/frontend/src/components/ProjectsPanel/ProjectsPanel.test.tsx b/frontend/src/components/ProjectsPanel/ProjectsPanel.test.tsx
index be0a916f..7b598e9c 100644
--- a/frontend/src/components/ProjectsPanel/ProjectsPanel.test.tsx
+++ b/frontend/src/components/ProjectsPanel/ProjectsPanel.test.tsx
@@ -1,8 +1,26 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { render as rtlRender, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import ProjectsPanel from "./ProjectsPanel";
+import tamaguiConfig from "../../../tamagui.config";
+
+// ProjectsPanel renders Modal via PlayerItemList (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's Dialog.Root, it isn't usable
+// standalone. The app root (src/main.tsx) provides this in production;
+// tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseProjects = vi.fn();
 const mockUseCreateProject = vi.fn();
diff --git a/frontend/src/components/SkillsPanel/SkillsPanel.test.tsx b/frontend/src/components/SkillsPanel/SkillsPanel.test.tsx
index a927c541..51a5a455 100644
--- a/frontend/src/components/SkillsPanel/SkillsPanel.test.tsx
+++ b/frontend/src/components/SkillsPanel/SkillsPanel.test.tsx
@@ -1,8 +1,26 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { render as rtlRender, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import SkillsPanel from "./SkillsPanel";
+import tamaguiConfig from "../../../tamagui.config";
+
+// SkillsPanel renders Modal via PlayerItemList (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's Dialog.Root, it isn't usable
+// standalone. The app root (src/main.tsx) provides this in production;
+// tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseSkills = vi.fn();
 const mockUseCreateSkill = vi.fn();
diff --git a/frontend/src/components/SupportFlow/SupportFlowModal.test.tsx b/frontend/src/components/SupportFlow/SupportFlowModal.test.tsx
index 7651e19a..e894b0d1 100644
--- a/frontend/src/components/SupportFlow/SupportFlowModal.test.tsx
+++ b/frontend/src/components/SupportFlow/SupportFlowModal.test.tsx
@@ -1,12 +1,29 @@
 // SupportFlow/SupportFlowModal.test.tsx
 import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render as rtlRender, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useReducer } from "react";
 import type { Dispatch } from "react";
+import { TamaguiProvider } from "tamagui";
 import SupportFlowModal from "./SupportFlowModal";
 import type { FlowState } from "./SupportFlowModal";
 import { supportFlowReducer } from "./supportFlowReducer";
+import tamaguiConfig from "../../../tamagui.config";
+
+// SupportFlowModal renders Modal (#582), which needs a TamaguiProvider
+// ancestor - unlike Radix's Dialog.Root, it isn't usable standalone. The
+// app root (src/main.tsx) provides this in production; tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseGame = vi.fn();
 
@@ -61,14 +78,16 @@ function Fixture({
 describe("SupportFlowModal", () => {
   it("renders nothing when modal is closed", () => {
     const state: FlowState = { isOpen: false };
-    const { container } = render(
+    render(
       <SupportFlowModal
         state={state}
         dispatch={() => {}}
         onConfirmActivity={() => {}}
       />
     );
-    expect(container.firstChild).toBeNull();
+    // Not container.firstChild - the TamaguiProvider test wrapper always
+    // renders its own wrapping element, closed or not.
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
   it("opens welcome message screen", async () => {
diff --git a/frontend/src/components/TasksPanel/TasksPanel.test.tsx b/frontend/src/components/TasksPanel/TasksPanel.test.tsx
index a503b5cf..8b6e1358 100644
--- a/frontend/src/components/TasksPanel/TasksPanel.test.tsx
+++ b/frontend/src/components/TasksPanel/TasksPanel.test.tsx
@@ -2,15 +2,23 @@ import type { ComponentProps } from "react";
 import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TamaguiProvider } from "tamagui";
 
 import { TooltipProvider } from "../Tooltip/Tooltip";
 import TasksPanel from "./TasksPanel";
+import tamaguiConfig from "../../../tamagui.config";
 
+// TasksPanel renders Modal via PlayerItemList (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's Dialog.Root, it isn't usable
+// standalone. The app root (src/main.tsx) provides this in production;
+// tests need their own.
 function renderTasksPanel(props: ComponentProps<typeof TasksPanel> = {}) {
   return render(
-    <TooltipProvider>
-      <TasksPanel {...props} />
-    </TooltipProvider>
+    <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+      <TooltipProvider>
+        <TasksPanel {...props} />
+      </TooltipProvider>
+    </TamaguiProvider>
   );
 }
 
@@ -403,9 +411,11 @@ describe("TasksPanel", () => {
         data: [parentTask, newSubtask],
       });
       rerender(
-        <TooltipProvider>
-          <TasksPanel />
-        </TooltipProvider>,
+        <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+          <TooltipProvider>
+            <TasksPanel />
+          </TooltipProvider>
+        </TamaguiProvider>,
       );
 
       const reopenedDialog = await screen.findByRole("dialog");
diff --git a/frontend/src/components/TutorialModal/TutorialModal.test.tsx b/frontend/src/components/TutorialModal/TutorialModal.test.tsx
index e9b4fb6d..0ec5cd9a 100644
--- a/frontend/src/components/TutorialModal/TutorialModal.test.tsx
+++ b/frontend/src/components/TutorialModal/TutorialModal.test.tsx
@@ -1,6 +1,23 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render as rtlRender, screen, fireEvent, waitFor } from '@testing-library/react';
+import { TamaguiProvider } from 'tamagui';
 import TutorialModal from './TutorialModal';
+import tamaguiConfig from '../../../tamagui.config';
+
+// TutorialModal renders Modal (#582), which needs a TamaguiProvider
+// ancestor - unlike Radix's Dialog.Root, it isn't usable standalone. The
+// app root (src/main.tsx) provides this in production; tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseTutorialSteps = vi.fn();
 const mockApiFetch = vi.fn();
diff --git a/frontend/src/components/UnifiedTimerHome/UnifiedTimerHome.test.tsx b/frontend/src/components/UnifiedTimerHome/UnifiedTimerHome.test.tsx
index b13dc507..3003f4b4 100644
--- a/frontend/src/components/UnifiedTimerHome/UnifiedTimerHome.test.tsx
+++ b/frontend/src/components/UnifiedTimerHome/UnifiedTimerHome.test.tsx
@@ -1,9 +1,27 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { TamaguiProvider } from 'tamagui';
 
 import UnifiedTimerHome from './UnifiedTimerHome';
+import tamaguiConfig from '../../../tamagui.config';
+
+// UnifiedTimerHome renders AlertDialog (#582), which needs a
+// TamaguiProvider ancestor - unlike Radix's AlertDialog.Root, it isn't
+// usable standalone. The app root (src/main.tsx) provides this in
+// production; tests need their own.
+function render(...args: Parameters<typeof rtlRender>) {
+  const [ui, options] = args;
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+        {children}
+      </TamaguiProvider>
+    ),
+    ...options,
+  });
+}
 
 const mockUseGame = vi.fn();
 const mockUseSupportFlow = vi.fn();