diff --git a/app/frontend/package.json b/app/frontend/package.json
index 044bd90..3b55a81 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -22,6 +22,9 @@
     "vite": "8.3.0"
   },
   "dependencies": {
-    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.3.0/project-graphite-ui-0.3.0.tgz"
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/material": "9.5.0",
+    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v1.0.0/project-graphite-ui-1.0.0.tgz"
   }
 }
diff --git a/app/frontend/src/components/Attribution.tsx b/app/frontend/src/components/Attribution.tsx
index fbe9d09..d803e79 100644
--- a/app/frontend/src/components/Attribution.tsx
+++ b/app/frontend/src/components/Attribution.tsx
@@ -1,3 +1,4 @@
+import MuiLink from '@mui/material/Link';
 import type { Attribution as SourceAttribution } from '../catalog';
 
 export function Attribution({ source }: { source: SourceAttribution }) {
@@ -5,9 +6,9 @@ export function Attribution({ source }: { source: SourceAttribution }) {
     <span className="mono-sm text-faint">
       Data:{' '}
       {source.attributionUrl ? (
-        <a className="rule-link" href={source.attributionUrl} rel="noreferrer" target="_blank">
+        <MuiLink href={source.attributionUrl} rel="noreferrer" target="_blank" underline="always">
           {source.attribution}
-        </a>
+        </MuiLink>
       ) : (
         source.attribution
       )}
diff --git a/app/frontend/src/components/CatalogCard.tsx b/app/frontend/src/components/CatalogCard.tsx
index ae21d29..65c27ee 100644
--- a/app/frontend/src/components/CatalogCard.tsx
+++ b/app/frontend/src/components/CatalogCard.tsx
@@ -1,6 +1,17 @@
+import Alert from '@mui/material/Alert';
 import { useState, type FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router';
-import { actionSkeletonClass, Dialog, errorMessage, Skeleton, useSnackbar } from '@project-graphite/ui';
+import {
+  actionSkeletonClass,
+  Button,
+  Checkbox,
+  Dialog,
+  errorMessage,
+  Select,
+  Skeleton,
+  useSnackbar,
+  type ButtonVariant,
+} from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
 import { useAuth } from '../auth';
 import { catalogRef, titleHref, type CatalogCandidate } from '../catalog';
@@ -57,35 +68,25 @@ function AddToListDialog({
   return (
     <Dialog eyebrow="Add to list" onClose={onClose} title={item.title}>
       <form className="mt-6 grid gap-5" onSubmit={(event) => void add(event)}>
-        <label className="field-label">
-          List
-          <select
-            onChange={(event) => setState(event.target.value as LibraryState)}
-            value={state}
-          >
-            {libraryStates.map((value) => (
-              <option key={value} value={value}>
-                {stateLabel(item.category, value)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <label className="flex items-center gap-2 text-sm text-muted">
-          <input
-            checked={isPrivate}
-            onChange={(event) => setIsPrivate(event.target.checked)}
-            type="checkbox"
-          />
-          Hide from my profile
-        </label>
-        {error && <p className="error-message">{error}</p>}
+        <Select
+          label="List"
+          onChange={(value) => setState(value)}
+          options={libraryStates.map((value) => ({ value, label: stateLabel(item.category, value) }))}
+          value={state}
+        />
+        <Checkbox
+          checked={isPrivate}
+          label="Hide from my profile"
+          onChange={(event) => setIsPrivate(event.target.checked)}
+        />
+        {error && <Alert severity="error">{error}</Alert>}
         <div className="flex justify-end gap-3">
-          <button className="secondary-button" disabled={busy} onClick={onClose} type="button">
+          <Button disabled={busy} onClick={onClose}>
             Cancel
-          </button>
-          <button className="primary-button" disabled={busy} type="submit">
+          </Button>
+          <Button disabled={busy} type="submit" variant="primary">
             {busy ? 'Adding…' : 'Add to list'}
-          </button>
+          </Button>
         </div>
       </form>
     </Dialog>
@@ -93,17 +94,19 @@ function AddToListDialog({
 }
 
 export function AddToListButton({
-  className = 'secondary-button w-full px-3 py-2 text-sm',
   entry,
   item,
   libraryReady,
   onAdded,
+  size = 'small',
+  variant = 'secondary',
 }: {
-  className?: string;
   entry: LibraryEntry | null;
   item: CatalogCandidate;
   libraryReady: boolean;
   onAdded: (entry: LibraryEntry) => void;
+  size?: 'small' | 'medium';
+  variant?: ButtonVariant;
 }) {
   const auth = useAuth();
   const navigate = useNavigate();
@@ -123,13 +126,14 @@ export function AddToListButton({
 
   return (
     <>
-      <button
-        className={className}
+      <Button
+        className="w-full"
         onClick={() => (auth.user ? setOpen(true) : navigate('/login'))}
-        type="button"
+        size={size}
+        variant={variant}
       >
         Add to list
-      </button>
+      </Button>
       {open && <AddToListDialog item={item} onAdded={onAdded} onClose={() => setOpen(false)} />}
     </>
   );
@@ -187,7 +191,7 @@ export function CatalogGrid({
   const library = useLibraryStates(items);
   return (
     <>
-      {library.error && <p className="error-message mb-5">{library.error}</p>}
+      {library.error && <Alert className="mb-5" severity="error">{library.error}</Alert>}
       <div className={posterGridClass}>
         {items.map((item) => (
           <CatalogCard
diff --git a/app/frontend/src/components/CatalogRow.tsx b/app/frontend/src/components/CatalogRow.tsx
index d2fe494..92bbcf8 100644
--- a/app/frontend/src/components/CatalogRow.tsx
+++ b/app/frontend/src/components/CatalogRow.tsx
@@ -1,5 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Link } from 'react-router';
+import { IconButton } from '@project-graphite/ui';
 import { catalogRef, type CatalogCandidate } from '../catalog';
 import { useLibraryStates } from '../useLibraryStates';
 import { CatalogCard } from './CatalogCard';
@@ -18,22 +21,12 @@ function ScrollButton({
   onClick: () => void;
 }) {
   return (
-    <button
-      aria-label={label}
+    <IconButton
       className={`${scrollButtonClass} ${direction < 0 ? '-left-3' : '-right-3'}`}
+      icon={direction < 0 ? 'chevron-left' : 'chevron-right'}
+      label={label}
       onClick={onClick}
-      type="button"
-    >
-      <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20">
-        <path
-          d={direction < 0 ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'}
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-        />
-      </svg>
-    </button>
+    />
   );
 }
 
@@ -87,13 +80,13 @@ export function CatalogRow({
           <h2 className="mt-2 mb-0 text-2xl font-medium">{title}</h2>
         </div>
         {link && (
-          <Link className="rule-link mono-sm" to={link.href}>
+          <MuiLink className="mono-sm" component={Link} to={link.href} underline="always">
             {link.label}
-          </Link>
+          </MuiLink>
         )}
       </div>
       {error || library.error ? (
-        <p className="error-message mt-5">{error || library.error}</p>
+        <Alert className="mt-5" severity="error">{error || library.error}</Alert>
       ) : !items ? (
         <div className="mt-5">
           <PosterRowSkeleton label={`Loading ${title}`} />
diff --git a/app/frontend/src/components/LibraryCard.tsx b/app/frontend/src/components/LibraryCard.tsx
index 89fa4d1..58d8dbd 100644
--- a/app/frontend/src/components/LibraryCard.tsx
+++ b/app/frontend/src/components/LibraryCard.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { Dialog } from '@project-graphite/ui';
+import { Button, Dialog } from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
 import { categoryLabels } from '../catalog';
 import {
@@ -44,13 +44,9 @@ export function LibraryCard({
     entry.item.title
   );
   const editButton = (
-    <button
-      className={`secondary-button px-3 py-2 text-sm ${layout === 'grid' ? 'w-full' : ''}`}
-      onClick={() => setEditing(true)}
-      type="button"
-    >
+    <Button className={layout === 'grid' ? 'w-full' : undefined} onClick={() => setEditing(true)} size="small">
       Edit
-    </button>
+    </Button>
   );
 
   return (
diff --git a/app/frontend/src/components/LibraryEntryEditor.tsx b/app/frontend/src/components/LibraryEntryEditor.tsx
index 2964aed..47f61ba 100644
--- a/app/frontend/src/components/LibraryEntryEditor.tsx
+++ b/app/frontend/src/components/LibraryEntryEditor.tsx
@@ -1,13 +1,15 @@
-import { useId, useState } from 'react';
+import Alert from '@mui/material/Alert';
+import FormLabel from '@mui/material/FormLabel';
+import MuiLink from '@mui/material/Link';
+import { useState } from 'react';
 import { Link } from 'react-router';
-import { ConfirmDialog, errorMessage, useSnackbar } from '@project-graphite/ui';
+import { Button, Checkbox, ConfirmDialog, errorMessage, Select, TextField, useSnackbar } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { categoryLabels } from '../catalog';
 import {
   libraryStates,
   stateLabel,
   type LibraryEntry,
-  type LibraryState,
 } from '../library';
 import type { NotificationPreferences } from '../notifications';
 import { useResource } from '../useResource';
@@ -38,36 +40,27 @@ function NumberField({
   onCommit: (update: EntryUpdate) => void;
   value: number | null;
 }) {
-  const id = useId();
   const [error, setError] = useState('');
   return (
-    <label className="field-label">
-      {label}
-      <input
-        aria-describedby={error ? `${id}-error` : undefined}
-        aria-invalid={error ? true : undefined}
-        defaultValue={value ?? ''}
-        inputMode={decimals ? 'decimal' : 'numeric'}
-        key={`${name}:${value}`}
-        onBlur={(event) => {
-          const text = event.target.value.trim().replace(',', '.');
-          const problem = text === '' ? '' : progressProblem(text, label, max, decimals);
-          setError(problem);
-          if (problem) return;
-          const next = text === '' ? null : Number(text);
-          if (next !== value) onCommit({ [name]: next });
-        }}
-        onInput={() => setError('')}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') event.currentTarget.blur();
-        }}
-      />
-      {error && (
-        <span className="field-error" id={`${id}-error`}>
-          {error}
-        </span>
-      )}
-    </label>
+    <TextField
+      defaultValue={value ?? ''}
+      error={error}
+      inputMode={decimals ? 'decimal' : 'numeric'}
+      key={`${name}:${value}`}
+      label={label}
+      onBlur={(event) => {
+        const text = event.target.value.trim().replace(',', '.');
+        const problem = text === '' ? '' : progressProblem(text, label, max, decimals);
+        setError(problem);
+        if (problem) return;
+        const next = text === '' ? null : Number(text);
+        if (next !== value) onCommit({ [name]: next });
+      }}
+      onInput={() => setError('')}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') event.currentTarget.blur();
+      }}
+    />
   );
 }
 
@@ -105,24 +98,22 @@ function ProgressFields({
       )}
       {units.includes('hours') && (
         <fieldset className="m-0 border-0 p-0 @sm:col-span-2">
-          <legend className="field-label">Platforms you play on</legend>
+          <FormLabel component="legend">Platforms you play on</FormLabel>
           <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
             {platforms.map((platform) => (
-              <label className="flex items-center gap-2 text-sm text-muted" key={platform}>
-                <input
-                  checked={entry.progress.platforms.includes(platform)}
-                  disabled={busy}
-                  onChange={(event) =>
-                    onUpdate({
-                      platforms: event.target.checked
-                        ? [...entry.progress.platforms, platform]
-                        : entry.progress.platforms.filter((item) => item !== platform),
-                    })
-                  }
-                  type="checkbox"
-                />
-                {platform}
-              </label>
+              <Checkbox
+                checked={entry.progress.platforms.includes(platform)}
+                disabled={busy}
+                key={platform}
+                label={platform}
+                onChange={(event) =>
+                  onUpdate({
+                    platforms: event.target.checked
+                      ? [...entry.progress.platforms, platform]
+                      : entry.progress.platforms.filter((item) => item !== platform),
+                  })
+                }
+              />
             ))}
             {platforms.length === 0 && (
               <span className="text-sm text-faint">No platform data available.</span>
@@ -202,36 +193,28 @@ export function LibraryEntryEditor({
   return (
     <div className="@container grid gap-5">
       <div className="grid gap-4 @sm:grid-cols-2">
-        <label className="field-label">
-          List
-          <select
-            disabled={busy}
-            onChange={(event) => update({ state: event.target.value as LibraryState })}
-            value={entry.state}
-          >
-            {libraryStates.map((state) => (
-              <option key={state} value={state}>
-                {stateLabel(entry.item.category, state)}
-              </option>
-            ))}
-          </select>
-        </label>
+        <Select
+          disabled={busy}
+          label="List"
+          onChange={(state) => update({ state })}
+          options={libraryStates.map((state) => ({ value: state, label: stateLabel(entry.item.category, state) }))}
+          value={entry.state}
+        />
         {entry.item.sources.length > 1 && (
-          <label className="field-label">
-            Preferred source
-            <select
-              disabled={busy}
-              onChange={(event) => update({ preferredSource: event.target.value || null })}
-              value={entry.preferredSource ?? ''}
-            >
-              <option value="">Automatic</option>
-              {entry.item.sources.map((source) => (
-                <option disabled={!source.active} key={source.key} value={source.key}>
-                  {source.active ? source.name : `${source.name} (unavailable)`}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            disabled={busy}
+            label="Preferred source"
+            onChange={(value) => update({ preferredSource: value || null })}
+            options={[
+              { value: '', label: 'Automatic' },
+              ...entry.item.sources.map((source) => ({
+                disabled: !source.active,
+                value: source.key,
+                label: source.active ? source.name : `${source.name} (unavailable)`,
+              })),
+            ]}
+            value={entry.preferredSource ?? ''}
+          />
         )}
         <ProgressFields busy={busy} entry={entry} onUpdate={update} />
       </div>
@@ -242,27 +225,21 @@ export function LibraryEntryEditor({
         </p>
       )}
       <div>
-        <label className="flex items-center gap-2 text-sm text-muted">
-          <input
-            checked={entry.isPrivate}
-            disabled={busy}
-            onChange={(event) => update({ isPrivate: event.target.checked })}
-            type="checkbox"
-          />
-          Hide from my profile
-        </label>
+        <Checkbox
+          checked={entry.isPrivate}
+          disabled={busy}
+          label="Hide from my profile"
+          onChange={(event) => update({ isPrivate: event.target.checked })}
+        />
       </div>
       {(entry.item.releasing || entry.notificationsEnabled) && (
         <div>
-          <label className="flex items-center gap-2 text-sm text-muted">
-            <input
-              checked={entry.notificationsEnabled}
-              disabled={busy || finished || needsPlatform}
-              onChange={(event) => update({ notificationsEnabled: event.target.checked })}
-              type="checkbox"
-            />
-            Release notifications
-          </label>
+          <Checkbox
+            checked={entry.notificationsEnabled}
+            disabled={busy || finished || needsPlatform}
+            label="Release notifications"
+            onChange={(event) => update({ notificationsEnabled: event.target.checked })}
+          />
           {!entry.item.releasing ? (
             <p className="mono-sm mt-1 mb-0 text-faint">
               This title has finished coming out, so there is nothing new to announce.
@@ -283,38 +260,39 @@ export function LibraryEntryEditor({
           {entry.notificationsEnabled && emailsOff && (
             <p className="mono-sm mt-1 mb-0 text-faint">
               Emails for {categoryLabels[entry.item.category].toLowerCase()} are off in{' '}
-              <Link className="rule-link" to="/settings/notifications">notification settings</Link>.
+              <MuiLink component={Link} to="/settings/notifications" underline="always">notification settings</MuiLink>.
             </p>
           )}
         </div>
       )}
       {entry.importedSources.length > 0 && (
         <div>
-          <p className="field-label m-0">Imported sources</p>
+          <FormLabel component="p">Imported sources</FormLabel>
           <ul className="m-0 mt-2 grid gap-2 p-0">
             {entry.importedSources.map((source) => (
               <li className="flex list-none items-baseline justify-between gap-3 text-sm" key={source.id}>
                 <span className="min-w-0 text-muted">
                   {source.name} <span className="mono-sm text-faint">· not supported, never checked</span>
                 </span>
-                <button
-                  className="text-button mono-sm"
+                <Button
+                  className="mono-sm"
                   disabled={busy}
                   onClick={() => removeImportedSource(source.id)}
-                  type="button"
+                  size="small"
+                  variant="text"
                 >
                   remove
-                </button>
+                </Button>
               </li>
             ))}
           </ul>
         </div>
       )}
-      {error && <p className="error-message m-0">{error}</p>}
+      {error && <Alert severity="error">{error}</Alert>}
       <div className="border-t border-line pt-4">
-        <button className="text-button text-sm" disabled={busy} onClick={() => setRemoving(true)} type="button">
+        <Button disabled={busy} onClick={() => setRemoving(true)} size="small" variant="text">
           Remove from library
-        </button>
+        </Button>
       </div>
       {removing && (
         <ConfirmDialog
diff --git a/app/frontend/src/components/NotificationBell.tsx b/app/frontend/src/components/NotificationBell.tsx
index e2cdd37..5888a97 100644
--- a/app/frontend/src/components/NotificationBell.tsx
+++ b/app/frontend/src/components/NotificationBell.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import Badge from '@mui/material/Badge';
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { errorMessage, Icon, ListSkeleton, Popover } from '@project-graphite/ui';
+import { Button, errorMessage, Icon, ListSkeleton, Popover } from '@project-graphite/ui';
 import type { Page } from '../api';
 import { useInbox, type InboxNotification } from '../inbox';
 import { useResource } from '../useResource';
@@ -26,19 +28,19 @@ function NotificationPanel({ close }: { close: () => void }) {
       <div className="flex items-center justify-between gap-3 border-b border-line px-4 py-3">
         <h2 className="m-0 text-base font-medium">Notifications</h2>
         {inbox.unread > 0 && (
-          <button className="text-button mono-sm" onClick={() => void markAllRead()} type="button">
+          <Button className="mono-sm" onClick={() => void markAllRead()} size="small" variant="text">
             mark all read
-          </button>
+          </Button>
         )}
       </div>
-      <div className="popover-list-body">
+      <div className="max-h-[min(26rem,60dvh)] overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
         {(error || inbox.checkFailed) && (
-          <p className="error-message m-3">
+          <Alert className="m-3" severity="error">
             {error || 'Could not check for new notifications. Trying again in a minute.'}
-          </p>
+          </Alert>
         )}
         {recent.error ? (
-          <p className="error-message m-3">{recent.error}</p>
+          <Alert className="m-3" severity="error">{recent.error}</Alert>
         ) : !recent.data ? (
           <div className="px-4">
             <ListSkeleton label="Loading notifications" rows={3} />
@@ -69,10 +71,9 @@ export function NotificationBell() {
     <Popover
       label="Notifications"
       trigger={
-        <>
+        <Badge badgeContent={inbox.unread} color="primary" max={9}>
           <Icon name="bell" />
-          {inbox.unread > 0 && <span className="count-badge">{inbox.unread > 9 ? '9+' : inbox.unread}</span>}
-        </>
+        </Badge>
       }
       triggerLabel={inbox.unread ? `Notifications, ${inbox.unread} unread` : 'Notifications'}
     >
diff --git a/app/frontend/src/components/NotificationList.tsx b/app/frontend/src/components/NotificationList.tsx
index 5d79a47..d3d7fa3 100644
--- a/app/frontend/src/components/NotificationList.tsx
+++ b/app/frontend/src/components/NotificationList.tsx
@@ -1,3 +1,6 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import { Link } from 'react-router';
 import { timeAgo, useSnackbar } from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
@@ -33,8 +36,9 @@ function NotificationRow({
     </>
   );
   return href ? (
-    <Link
-      className="popover-row"
+    <ListItemButton
+      className="gap-3.5 px-4 py-3"
+      component={Link}
       onClick={() => {
         onOpen?.();
         void inbox
@@ -44,9 +48,9 @@ function NotificationRow({
       to={href}
     >
       {content}
-    </Link>
+    </ListItemButton>
   ) : (
-    <div className="popover-row">{content}</div>
+    <div className="flex w-full items-center gap-3.5 px-4 py-3">{content}</div>
   );
 }
 
@@ -58,12 +62,12 @@ export function NotificationList({
   onOpen?: () => void;
 }) {
   return (
-    <ul className="m-0 p-0">
+    <List disablePadding>
       {notifications.map((notification) => (
-        <li className="list-none" key={notification.id}>
+        <ListItem className="last:border-b-0" disablePadding divider key={notification.id}>
           <NotificationRow notification={notification} onOpen={onOpen} />
-        </li>
+        </ListItem>
       ))}
-    </ul>
+    </List>
   );
 }
diff --git a/app/frontend/src/components/PasswordDialog.tsx b/app/frontend/src/components/PasswordDialog.tsx
index a18c5f1..a2246fa 100644
--- a/app/frontend/src/components/PasswordDialog.tsx
+++ b/app/frontend/src/components/PasswordDialog.tsx
@@ -1,5 +1,6 @@
+import Alert from '@mui/material/Alert';
 import { useState, type FormEvent, type ReactNode } from 'react';
-import { Dialog, errorMessage, TextField } from '@project-graphite/ui';
+import { Button, Dialog, errorMessage, TextField } from '@project-graphite/ui';
 
 export function PasswordDialog({
   children,
@@ -51,14 +52,14 @@ export function PasswordDialog({
           onInput={() => setMissing(false)}
           type="password"
         />
-        {error && <p className="error-message m-0">{error}</p>}
+        {error && <Alert severity="error">{error}</Alert>}
         <div className="flex justify-end gap-3">
-          <button className="secondary-button" disabled={busy} onClick={onClose} type="button">
+          <Button disabled={busy} onClick={onClose}>
             Cancel
-          </button>
-          <button className="primary-button" disabled={busy} type="submit">
+          </Button>
+          <Button disabled={busy} type="submit" variant="primary">
             {busy ? 'Saving…' : confirmLabel}
-          </button>
+          </Button>
         </div>
       </form>
     </Dialog>
diff --git a/app/frontend/src/components/ResendVerification.tsx b/app/frontend/src/components/ResendVerification.tsx
index 36a341b..25d006a 100644
--- a/app/frontend/src/components/ResendVerification.tsx
+++ b/app/frontend/src/components/ResendVerification.tsx
@@ -1,5 +1,6 @@
+import Alert from '@mui/material/Alert';
 import { useState } from 'react';
-import { errorMessage } from '@project-graphite/ui';
+import { Button, errorMessage } from '@project-graphite/ui';
 import { apiRequest } from '../api';
 
 export function ResendVerification({ email }: { email: string }) {
@@ -28,17 +29,17 @@ export function ResendVerification({ email }: { email: string }) {
       ) : (
         <p className="m-0">
           Nothing arrived?{' '}
-          <button
-            className="text-button"
+          <Button
             disabled={state === 'sending'}
             onClick={() => void resend()}
-            type="button"
+            size="small"
+            variant="text"
           >
             Send the link again
-          </button>
+          </Button>
         </p>
       )}
-      {error && <p className="error-message mt-2 mb-0">{error}</p>}
+      {error && <Alert className="mt-2" severity="error">{error}</Alert>}
     </div>
   );
 }
diff --git a/app/frontend/src/components/ReviewCard.tsx b/app/frontend/src/components/ReviewCard.tsx
index cf8c724..ba98d6e 100644
--- a/app/frontend/src/components/ReviewCard.tsx
+++ b/app/frontend/src/components/ReviewCard.tsx
@@ -1,6 +1,9 @@
+import Alert from '@mui/material/Alert';
+import FormLabel from '@mui/material/FormLabel';
+import MuiLink from '@mui/material/Link';
 import { useState, type FormEvent } from 'react';
 import { Link } from 'react-router';
-import { Dialog, errorMessage } from '@project-graphite/ui';
+import { Button, Dialog, errorMessage, Radio } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { itemHref, reportReasons, type ItemSummary, type PublicReview } from '../reviews';
 
@@ -33,34 +36,32 @@ function ReportDialog({ onClose, review }: { onClose: () => void; review: Public
       {sent ? (
         <div className="mt-6 grid gap-5">
           <p className="m-0 text-muted">Thanks. A moderator will look at this review.</p>
-          <button className="primary-button justify-self-end" onClick={onClose} type="button">
+          <Button className="justify-self-end" onClick={onClose} variant="primary">
             Done
-          </button>
+          </Button>
         </div>
       ) : (
         <form className="mt-6 grid gap-5" onSubmit={(event) => void report(event)}>
           <fieldset className="m-0 grid gap-2 border-0 p-0">
-            <legend className="field-label mb-2">What is wrong with it?</legend>
+            <FormLabel className="mb-2" component="legend">What is wrong with it?</FormLabel>
             {Object.entries(reportReasons).map(([value, label]) => (
-              <label className="flex items-center gap-2 text-sm text-muted" key={value}>
-                <input
-                  checked={reason === value}
-                  name="reason"
-                  onChange={() => setReason(value as keyof typeof reportReasons)}
-                  type="radio"
-                />
-                {label}
-              </label>
+              <Radio
+                checked={reason === value}
+                key={value}
+                label={label}
+                name="reason"
+                onChange={() => setReason(value as keyof typeof reportReasons)}
+              />
             ))}
           </fieldset>
-          {error && <p className="error-message m-0">{error}</p>}
+          {error && <Alert severity="error">{error}</Alert>}
           <div className="flex justify-end gap-3">
-            <button className="secondary-button" disabled={busy} onClick={onClose} type="button">
+            <Button disabled={busy} onClick={onClose}>
               Cancel
-            </button>
-            <button className="primary-button" disabled={busy} type="submit">
+            </Button>
+            <Button disabled={busy} type="submit" variant="primary">
               {busy ? 'Sending…' : 'Send report'}
-            </button>
+            </Button>
           </div>
         </form>
       )}
@@ -80,9 +81,9 @@ export function ReviewCard({ item, review }: { item?: ItemSummary; review: Publi
     <article className="border-b border-line-soft py-5">
       <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
         <p className="m-0 text-sm">
-          <Link className="rule-link" to={`/users/${review.author.handle}`}>
+          <MuiLink component={Link} to={`/users/${review.author.handle}`} underline="always">
             {review.author.displayName}
-          </Link>{' '}
+          </MuiLink>{' '}
           <span className="mono-sm text-faint">
             {[
               review.rating !== null && `${review.rating}/10`,
@@ -94,14 +95,14 @@ export function ReviewCard({ item, review }: { item?: ItemSummary; review: Publi
           </span>
         </p>
         {reportable && (
-          <button className="text-button mono-sm" onClick={() => setReporting(true)} type="button">
+          <Button className="mono-sm" onClick={() => setReporting(true)} size="small" variant="text">
             report
-          </button>
+          </Button>
         )}
       </div>
       {item && (
         <p className="mono-sm mt-1 mb-0 text-faint">
-          on {href ? <Link className="rule-link" to={href}>{item.title}</Link> : item.title}
+          on {href ? <MuiLink component={Link} to={href} underline="always">{item.title}</MuiLink> : item.title}
         </p>
       )}
       {revealed ? (
@@ -112,16 +113,17 @@ export function ReviewCard({ item, review }: { item?: ItemSummary; review: Publi
           )}
         </>
       ) : (
-        <div className="notice mt-3 flex flex-wrap items-center justify-between gap-3">
-          <span>This review contains spoilers.</span>
-          <button
-            className="secondary-button px-3 py-1.5 text-sm"
-            onClick={() => setRevealed(true)}
-            type="button"
-          >
-            Show review
-          </button>
-        </div>
+        <Alert
+          action={
+            <Button onClick={() => setRevealed(true)} size="small">
+              Show review
+            </Button>
+          }
+          className="mt-3"
+          severity="info"
+        >
+          This review contains spoilers.
+        </Alert>
       )}
       {reporting && <ReportDialog onClose={() => setReporting(false)} review={review} />}
     </article>
diff --git a/app/frontend/src/components/ReviewEditor.tsx b/app/frontend/src/components/ReviewEditor.tsx
index b4adbb6..2ef1ca4 100644
--- a/app/frontend/src/components/ReviewEditor.tsx
+++ b/app/frontend/src/components/ReviewEditor.tsx
@@ -1,5 +1,9 @@
+import Alert from '@mui/material/Alert';
+import FormLabel from '@mui/material/FormLabel';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { useState, type FormEvent } from 'react';
-import { ConfirmDialog, errorMessage, Toggle } from '@project-graphite/ui';
+import { Button, Checkbox, ConfirmDialog, errorMessage, TextAreaField, TextField, Toggle } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { reviewBodyLimit, type OwnReview } from '../reviews';
 import { ReviewCard } from './ReviewCard';
@@ -54,61 +58,48 @@ export function ReviewEditor({
   return (
     <form className="grid gap-5" noValidate onSubmit={save}>
       <fieldset className="m-0 border-0 p-0">
-        <legend className="field-label mb-2">Rating</legend>
+        <FormLabel className="mb-2" component="legend">Rating</FormLabel>
         <div className="flex flex-wrap items-center gap-1.5">
-          {Array.from({ length: 10 }, (_, index) => index + 1).map((value) => (
-            <label key={value}>
-              <input
-                checked={rating === value}
-                className="peer sr-only"
-                name="rating"
-                onChange={() => setRating(value)}
-                type="radio"
-              />
-              <span className="mono-sm flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-line text-muted transition-colors peer-checked:border-ink peer-checked:bg-ink peer-checked:text-paper peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ink hover:border-muted">
+          <ToggleButtonGroup aria-label="Rating" className="flex-wrap" exclusive onChange={(_, value: number | null) => setRating(value)} size="small" value={rating}>
+            {Array.from({ length: 10 }, (_, index) => index + 1).map((value) => (
+              <ToggleButton className="mono-sm w-9" key={value} value={value}>
                 {value}
-              </span>
-            </label>
-          ))}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
           {rating !== null && (
-            <button className="text-button mono-sm ml-2" onClick={() => setRating(null)} type="button">
+            <Button className="mono-sm ml-2" onClick={() => setRating(null)} size="small" variant="text">
               clear
-            </button>
+            </Button>
           )}
         </div>
       </fieldset>
-      <label className="field-label">
-        Review title
-        <input maxLength={200} onChange={(event) => setTitle(event.target.value)} value={title} />
-      </label>
-      <label className="field-label">
-        Review
-        <textarea
-          maxLength={reviewBodyLimit}
-          onChange={(event) => setBody(event.target.value)}
-          rows={7}
-          value={body}
-        />
-        {body.length >= 8_000 && (
-          <span aria-live="polite" className="mono-sm text-faint">
-            {body.length.toLocaleString()} / {reviewBodyLimit.toLocaleString()} characters
-          </span>
-        )}
-      </label>
+      <TextField label="Review title" maxLength={200} onChange={(event) => setTitle(event.target.value)} value={title} />
+      <TextAreaField
+        hint={
+          body.length >= 8_000 && (
+            <span aria-live="polite" className="mono-sm text-faint">
+              {body.length.toLocaleString()} / {reviewBodyLimit.toLocaleString()} characters
+            </span>
+          )
+        }
+        label="Review"
+        maxLength={reviewBodyLimit}
+        onChange={(event) => setBody(event.target.value)}
+        rows={7}
+        value={body}
+      />
       <div className="grid items-center gap-4 sm:grid-cols-2">
         <Toggle
           checked={visibility === 'private'}
           label="Private"
           onChange={(checked) => setVisibility(checked ? 'private' : 'public')}
         />
-        <label className="flex items-center gap-2 text-sm text-muted">
-          <input
-            checked={containsSpoilers}
-            onChange={(event) => setContainsSpoilers(event.target.checked)}
-            type="checkbox"
-          />
-          Contains spoilers
-        </label>
+        <Checkbox
+          checked={containsSpoilers}
+          label="Contains spoilers"
+          onChange={(event) => setContainsSpoilers(event.target.checked)}
+        />
       </div>
       <p className="mono-sm m-0 text-faint">
         Ratings count toward the site average. Public reviews appear on this title for everyone.
@@ -130,26 +121,21 @@ export function ReviewEditor({
           />
         </div>
       )}
-      {error && <p className="error-message m-0">{error}</p>}
+      {error && <Alert severity="error">{error}</Alert>}
       <div className="flex flex-wrap items-center gap-3">
-        <button className="primary-button" disabled={busy} type="submit">
+        <Button disabled={busy} type="submit" variant="primary">
           {busy ? 'Saving…' : 'Save'}
-        </button>
-        <button
-          aria-pressed={preview}
-          className="secondary-button"
-          onClick={() => setPreview((current) => !current)}
-          type="button"
-        >
+        </Button>
+        <Button aria-pressed={preview} onClick={() => setPreview((current) => !current)}>
           {preview ? 'Hide preview' : 'Preview'}
-        </button>
-        <button className="text-button text-sm" disabled={busy} onClick={onClose} type="button">
+        </Button>
+        <Button disabled={busy} onClick={onClose} size="small" variant="text">
           Cancel
-        </button>
+        </Button>
         {review && !review.hidden && (
-          <button className="text-button ml-auto text-sm" disabled={busy} onClick={() => setDeleting(true)} type="button">
+          <Button className="ml-auto" disabled={busy} onClick={() => setDeleting(true)} size="small" variant="text">
             Delete review
-          </button>
+          </Button>
         )}
       </div>
       {deleting && (
diff --git a/app/frontend/src/components/Shell.tsx b/app/frontend/src/components/Shell.tsx
index 87f78c3..67cb39f 100644
--- a/app/frontend/src/components/Shell.tsx
+++ b/app/frontend/src/components/Shell.tsx
@@ -1,7 +1,10 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useEffect, useState } from 'react';
 import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router';
 import {
   AppShell,
+  Button,
   errorMessage,
   OutageGate,
   Skeleton,
@@ -32,9 +35,9 @@ function SiteFooter() {
         <div className="fade-in mb-6 flex flex-wrap items-baseline gap-x-5 gap-y-2 border-b border-line-soft pb-6">
           <Attribution source={source} />
           {source.links?.map((link) => (
-            <a className="rule-link" href={link.url} key={link.url} rel="noreferrer" target="_blank">
+            <MuiLink href={link.url} key={link.url} rel="noreferrer" target="_blank" underline="always">
               {link.label}
-            </a>
+            </MuiLink>
           ))}
         </div>
       )}
@@ -148,17 +151,17 @@ export function Shell() {
                   <NavLink className={(state) => `${navClass(state)} mono-sm px-2`} to="/login">
                     sign in
                   </NavLink>
-                  <Link className="primary-button hidden px-3 py-2 text-sm sm:inline-flex" to="/register">
+                  <Button className="hidden sm:inline-flex" href="/register" size="small" variant="primary">
                     Create account
-                  </Link>
+                  </Button>
                 </>
               )
             }
             alert={
               error && (
-                <p className="shell error-message mb-3" role="alert">
+                <Alert className="shell mb-3" severity="error">
                   {error}
-                </p>
+                </Alert>
               )
             }
             brand={{ href: '/', mark: <GraphiteMark />, name: 'Graphite Tracker' }}
diff --git a/app/frontend/src/components/TitleReviews.tsx b/app/frontend/src/components/TitleReviews.tsx
index 7d9e3b5..00906ff 100644
--- a/app/frontend/src/components/TitleReviews.tsx
+++ b/app/frontend/src/components/TitleReviews.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { LinesSkeleton, ListSkeleton, Skeleton } from '@project-graphite/ui';
+import { Button, LinesSkeleton, ListSkeleton, Skeleton } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { countLabel, type CatalogDetails } from '../catalog';
 import type { LibraryEntry } from '../library';
@@ -26,7 +28,7 @@ function YourReview({
   const [editing, setEditing] = useState(false);
   const eligible = entry?.state === 'completed' || entry?.state === 'dropped';
 
-  if (own.error) return <p className="error-message">{own.error}</p>;
+  if (own.error) return <Alert severity="error">{own.error}</Alert>;
   if (review === undefined) {
     return <LinesSkeleton className="max-w-sm" label="Loading your review" lines={1} />;
   }
@@ -65,13 +67,9 @@ function YourReview({
       ) : (
         <p className="m-0 text-sm text-muted">You have not rated this title yet.</p>
       )}
-      <button
-        className="secondary-button px-3 py-2 text-sm"
-        onClick={() => setEditing(true)}
-        type="button"
-      >
+      <Button onClick={() => setEditing(true)} size="small">
         {review ? 'Edit' : 'Rate or review'}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -112,7 +110,7 @@ export function TitleReviews({
           <LinesSkeleton className="max-w-sm" label="Loading your review" lines={1} />
         ) : !auth.user ? (
           <p className="m-0 text-sm text-muted">
-            <Link className="rule-link" to="/login">Sign in</Link> to rate and review.
+            <MuiLink component={Link} to="/login" underline="always">Sign in</MuiLink> to rate and review.
           </p>
         ) : itemId && entry !== undefined ? (
           <YourReview entry={entry} itemId={itemId} onSaved={reviews.reload} />
@@ -125,7 +123,7 @@ export function TitleReviews({
           <ListSkeleton label="Loading reviews" rows={2} />
         </div>
       )}
-      {reviews.error && <p className="error-message mt-5">{reviews.error}</p>}
+      {reviews.error && <Alert className="mt-5" severity="error">{reviews.error}</Alert>}
       {reviews.data && reviews.data.results.length === 0 && (
         <p className="mt-6 text-muted">No public reviews yet.</p>
       )}
@@ -136,20 +134,19 @@ export function TitleReviews({
           ))}
           {reviews.data.totalPages > 1 && (
             <div className="mt-5 flex items-center gap-4">
-              <button className="secondary-button px-3 py-2 text-sm" disabled={page <= 1} onClick={() => setPage(page - 1)} type="button">
+              <Button disabled={page <= 1} onClick={() => setPage(page - 1)} size="small">
                 Newer
-              </button>
+              </Button>
               <span className="mono-sm text-faint">
                 Page {page} of {reviews.data.totalPages}
               </span>
-              <button
-                className="secondary-button px-3 py-2 text-sm"
+              <Button
                 disabled={page >= reviews.data.totalPages}
                 onClick={() => setPage(page + 1)}
-                type="button"
+                size="small"
               >
                 Older
-              </button>
+              </Button>
             </div>
           )}
         </div>
diff --git a/app/frontend/src/pages/AccountSettingsPage.tsx b/app/frontend/src/pages/AccountSettingsPage.tsx
index 5729927..1336795 100644
--- a/app/frontend/src/pages/AccountSettingsPage.tsx
+++ b/app/frontend/src/pages/AccountSettingsPage.tsx
@@ -1,6 +1,7 @@
+import Alert from '@mui/material/Alert';
 import { useState, type ReactNode } from 'react';
 import { useNavigate } from 'react-router';
-import { ConfirmDialog, errorMessage, FormSkeleton, TextField } from '@project-graphite/ui';
+import { Button, ConfirmDialog, errorMessage, FormSkeleton, Select, TextField } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { useResource } from '../useResource';
 import { emailAddress, password as newPassword, required, useFormErrors } from '../validation';
@@ -36,9 +37,7 @@ function useAction() {
     }
   }
 
-  const status = (error || done) && (
-    <p className={error ? 'error-message m-0' : 'mono-sm m-0 text-faint'}>{error || done}</p>
-  );
+  const status = error ? <Alert severity="error">{error}</Alert> : done && <p className="mono-sm m-0 text-faint">{done}</p>;
   return { busy, run, status };
 }
 
@@ -65,7 +64,7 @@ export function AccountSettingsPage() {
     }, 'Could not save the time zone');
   }
 
-  if (me.error) return <p className="error-message">{me.error}</p>;
+  if (me.error) return <Alert severity="error">{me.error}</Alert>;
   if (!me.data) return <FormSkeleton fields={2} />;
   const current = me.data;
   const zones = [...new Set([current.timeZone, ...Intl.supportedValuesOf('timeZone')])];
@@ -114,9 +113,9 @@ export function AccountSettingsPage() {
             {...emailForm.field('password')}
           />
           <div className="flex flex-wrap items-center gap-4 sm:col-span-2">
-            <button className="primary-button" disabled={email.busy} type="submit">
+            <Button disabled={email.busy} type="submit" variant="primary">
               Change email
-            </button>
+            </Button>
             {email.status}
           </div>
         </form>
@@ -159,46 +158,34 @@ export function AccountSettingsPage() {
             {...passwordForm.field('newPassword')}
           />
           <div className="flex flex-wrap items-center gap-4 sm:col-span-2">
-            <button className="primary-button" disabled={password.busy} type="submit">
+            <Button disabled={password.busy} type="submit" variant="primary">
               Change password
-            </button>
+            </Button>
             {password.status}
           </div>
         </form>
       </Section>
       <Section description="Email digests arrive in the morning of this time zone." title="Time zone">
         <div className="mt-5 flex flex-wrap items-end gap-4">
-          <label className="field-label min-w-64">
-            Time zone
-            <select
-              disabled={timeZone.busy}
-              onChange={(event) => void saveTimeZone(event.target.value)}
-              value={current.timeZone}
-            >
-              {zones.map((zone) => (
-                <option key={zone} value={zone}>
-                  {zone.replaceAll('_', ' ')}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            className="min-w-64"
+            disabled={timeZone.busy}
+            label="Time zone"
+            onChange={(value) => void saveTimeZone(value)}
+            options={zones.map((zone) => ({ value: zone, label: zone.replaceAll('_', ' ') }))}
+            value={current.timeZone}
+          />
           {deviceTimeZone && deviceTimeZone !== current.timeZone && (
-            <button
-              className="secondary-button"
-              disabled={timeZone.busy}
-              onClick={() => void saveTimeZone(deviceTimeZone)}
-              type="button"
-            >
+            <Button disabled={timeZone.busy} onClick={() => void saveTimeZone(deviceTimeZone)}>
               Use {deviceTimeZone.replaceAll('_', ' ')}
-            </button>
+            </Button>
           )}
           {timeZone.status}
         </div>
       </Section>
       <Section description="Your account, library, progress, ratings, reviews, reports and activity as a JSON file." title="Your data">
         <div className="mt-5 flex flex-wrap items-center gap-4">
-          <button
-            className="secondary-button"
+          <Button
             disabled={data.busy}
             onClick={() =>
               void data.run(async () => {
@@ -213,10 +200,9 @@ export function AccountSettingsPage() {
                 return 'Downloaded.';
               }, 'Could not export your data')
             }
-            type="button"
           >
             Download my data
-          </button>
+          </Button>
           {data.status}
         </div>
       </Section>
@@ -241,9 +227,9 @@ export function AccountSettingsPage() {
             type="password"
             {...removalForm.field('password')}
           />
-          <button className="secondary-button mt-6" type="submit">
+          <Button className="mt-6" type="submit">
             Delete account
-          </button>
+          </Button>
         </form>
         {removingWith !== undefined && (
           <ConfirmDialog
diff --git a/app/frontend/src/pages/AdminPage.tsx b/app/frontend/src/pages/AdminPage.tsx
index c3a51ea..a76c2bc 100644
--- a/app/frontend/src/pages/AdminPage.tsx
+++ b/app/frontend/src/pages/AdminPage.tsx
@@ -1,11 +1,17 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
+import MuiTextField from '@mui/material/TextField';
 import { useState, type FormEvent, type ReactNode } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router';
 import {
+  Button,
   EmptyState,
   errorMessage,
   LinesSkeleton,
   ListSkeleton,
   Pagination,
+  Select,
+  Tabs,
   Toggle,
 } from '@project-graphite/ui';
 import type { Page } from '../api';
@@ -82,10 +88,10 @@ function ReviewBlock({ review }: { review: ModeratedReview }) {
   return (
     <div className="grid gap-2">
       <p className="mono-sm m-0 text-faint">
-        <Link className="rule-link" to={`/users/${review.author.handle}`}>
+        <MuiLink component={Link} to={`/users/${review.author.handle}`} underline="always">
           {review.author.displayName}
-        </Link>{' '}
-        on {href ? <Link className="rule-link" to={href}>{review.item.title}</Link> : review.item.title}
+        </MuiLink>{' '}
+        on {href ? <MuiLink component={Link} to={href} underline="always">{review.item.title}</MuiLink> : review.item.title}
         {review.rating !== null && ` · ${review.rating}/10`}
         {review.visibility === 'private' && ' · private'}
         {review.containsSpoilers && ' · marked as spoilers'}
@@ -143,7 +149,7 @@ function SitePanel() {
   const [confirming, setConfirming] = useState<boolean>();
   const [sourceError, setSourceError] = useState('');
 
-  if (site.error) return <p className="error-message">{site.error}</p>;
+  if (site.error) return <Alert severity="error">{site.error}</Alert>;
   if (!site.data) return <LinesSkeleton className="max-w-3xl" label="Loading site settings" lines={2} />;
   const { defaultSources } = site.data;
   const available = sources.data?.sources.filter((source) => source.available) ?? [];
@@ -196,26 +202,22 @@ function SitePanel() {
           Used wherever a reader hasn't chosen a source themselves, including the home page and
           imports.
         </p>
-        {sourceError && <p className="error-message mt-4">{sourceError}</p>}
-        {sources.error && <p className="error-message mt-4">{sources.error}</p>}
+        {sourceError && <Alert className="mt-4" severity="error">{sourceError}</Alert>}
+        {sources.error && <Alert className="mt-4" severity="error">{sources.error}</Alert>}
         {sources.data && (
           <div className="mt-5 grid gap-4 sm:grid-cols-2">
             {catalogCategories.map((category) => {
               const options = available.filter((source) => source.categories.includes(category));
               return (
                 options.length > 0 && (
-                  <label className="field-label" key={category}>
-                    {categoryLabels[category]}
-                    <select
-                      disabled={options.length === 1}
-                      onChange={(event) => void chooseDefault(category, event.target.value)}
-                      value={defaultSources[category] ?? ''}
-                    >
-                      {options.map((source) => (
-                        <option key={source.key} value={source.key}>{source.displayName}</option>
-                      ))}
-                    </select>
-                  </label>
+                  <Select
+                    disabled={options.length === 1}
+                    key={category}
+                    label={categoryLabels[category]}
+                    onChange={(value) => void chooseDefault(category, value)}
+                    options={options.map((source) => ({ value: source.key, label: source.displayName }))}
+                    value={defaultSources[category] ?? ''}
+                  />
                 )
               );
             })}
@@ -235,7 +237,7 @@ function Listing<T>({
   resource: Resource<Page<T>>;
   pageHref: (page: number) => string;
 }) {
-  if (resource.error) return <p className="error-message">{resource.error}</p>;
+  if (resource.error) return <Alert severity="error">{resource.error}</Alert>;
   if (!resource.data) return <ListSkeleton label="Loading" />;
   return resource.data.results.length === 0 ? (
     <EmptyState title="Nothing to show" />
@@ -316,19 +318,13 @@ export function AdminPage() {
     <div className="page-enter">
       <p className="eyebrow">Moderation</p>
       <h1 className="page-title">Admin</h1>
-      <nav aria-label="Admin sections" className="scroll-x mt-7 mb-6 flex gap-2 border-b border-line">
-        {visibleTabs.map((key) => (
-          <Link
-            aria-current={key === tab ? 'page' : undefined}
-            className="tab-link"
-            key={key}
-            to={`/admin?tab=${key}`}
-          >
-            {tabs[key]}
-          </Link>
-        ))}
-      </nav>
-      {error && <p className="error-message mb-5">{error}</p>}
+      <div className="mt-7 mb-6">
+        <Tabs
+          items={visibleTabs.map((key) => ({ active: key === tab, href: `/admin?tab=${key}`, label: tabs[key] }))}
+          label="Admin sections"
+        />
+      </div>
+      {error && <Alert className="mb-5" severity="error">{error}</Alert>}
       {tab === 'reports' && (
         <>
           <Filter options={['open', 'resolved']} tab={tab} value={status} />
@@ -345,20 +341,19 @@ export function AdminPage() {
                   <ReviewBlock review={report.review} />
                   {!report.resolution && (
                     <div className="flex gap-3">
-                      <button
-                        className="primary-button px-3 py-2 text-sm"
+                      <Button
                         onClick={() => void act(`/admin/reports/${report.id}`, { resolution: 'hidden' }, reports.reload)}
-                        type="button"
+                        size="small"
+                        variant="primary"
                       >
                         Hide review
-                      </button>
-                      <button
-                        className="secondary-button px-3 py-2 text-sm"
+                      </Button>
+                      <Button
                         onClick={() => void act(`/admin/reports/${report.id}`, { resolution: 'dismissed' }, reports.reload)}
-                        type="button"
+                        size="small"
                       >
                         Dismiss report
-                      </button>
+                      </Button>
                     </div>
                   )}
                 </li>
@@ -376,13 +371,12 @@ export function AdminPage() {
                 <li className="grid list-none gap-3 border-b border-line-soft py-5" key={review.id}>
                   <ReviewBlock review={review} />
                   <div className="flex flex-wrap items-center gap-3">
-                    <button
-                      className="secondary-button px-3 py-2 text-sm"
+                    <Button
                       onClick={() => void act(`/admin/reviews/${review.id}`, { hidden: !review.hidden }, reviews.reload)}
-                      type="button"
+                      size="small"
                     >
                       {review.hidden ? 'Restore review' : 'Hide review'}
-                    </button>
+                    </Button>
                     {review.openReports > 0 && (
                       <span className="mono-sm text-faint">{review.openReports} open reports</span>
                     )}
@@ -396,19 +390,26 @@ export function AdminPage() {
       {tab === 'users' && (
         <>
           <form className="mb-6 grid max-w-xl gap-3 sm:grid-cols-[1fr_auto]" key={query} onSubmit={search} role="search">
-            <input aria-label="Find accounts" defaultValue={query} name="query" placeholder="Email, handle or name" type="search" />
-            <button className="secondary-button" type="submit">
+            <MuiTextField
+              defaultValue={query}
+              name="query"
+              placeholder="Email, handle or name"
+              size="small"
+              slotProps={{ htmlInput: { 'aria-label': 'Find accounts' } }}
+              type="search"
+            />
+            <Button type="submit">
               Find
-            </button>
+            </Button>
           </form>
           <Listing pageHref={pageHref} resource={users}>
             {(results) =>
               results.map((account) => (
                 <li className="flex list-none flex-wrap items-center justify-between gap-3 border-b border-line-soft py-4" key={account.id}>
                   <span className="min-w-0">
-                    <Link className="rule-link" to={`/users/${account.handle}`}>
+                    <MuiLink component={Link} to={`/users/${account.handle}`} underline="always">
                       {account.displayName}
-                    </Link>{' '}
+                    </MuiLink>{' '}
                     <span className="mono-sm text-faint">
                       @{account.handle} · {account.email} ·{' '}
                       {[
@@ -424,22 +425,20 @@ export function AdminPage() {
                     {auth.user?.role === 'system_manager' &&
                       account.role !== 'system_manager' &&
                       (account.role === 'admin' || (account.verifiedAt && account.isActive)) && (
-                        <button
-                          className="secondary-button px-3 py-2 text-sm"
+                        <Button
                           onClick={() => setChangingRole(account)}
-                          type="button"
+                          size="small"
                         >
                           {account.role === 'admin' ? 'Remove administrator' : 'Make administrator'}
-                        </button>
+                        </Button>
                       )}
                     {account.role === 'member' && (
-                      <button
-                        className="secondary-button px-3 py-2 text-sm"
+                      <Button
                         onClick={() => void act(`/admin/users/${account.id}`, { active: !account.isActive }, users.reload)}
-                        type="button"
+                        size="small"
                       >
                         {account.isActive ? 'Deactivate' : 'Reactivate'}
-                      </button>
+                      </Button>
                     )}
                   </span>
                 </li>
@@ -468,7 +467,7 @@ export function AdminPage() {
                 return (
                   <li className="grid list-none gap-1 border-b border-line-soft py-4" key={event.id}>
                     <p className="m-0 text-sm">
-                      {href ? <Link className="rule-link" to={href}>{event.item.title}</Link> : event.item.title} ·{' '}
+                      {href ? <MuiLink component={Link} to={href} underline="always">{event.item.title}</MuiLink> : event.item.title} ·{' '}
                       {event.release}
                     </p>
                     <p className="mono-sm m-0 text-faint">
diff --git a/app/frontend/src/pages/DiscoverPage.tsx b/app/frontend/src/pages/DiscoverPage.tsx
index 0097f94..df638e2 100644
--- a/app/frontend/src/pages/DiscoverPage.tsx
+++ b/app/frontend/src/pages/DiscoverPage.tsx
@@ -1,6 +1,9 @@
+import Alert from '@mui/material/Alert';
+import Badge from '@mui/material/Badge';
+import MuiTextField from '@mui/material/TextField';
 import { useState, type FormEvent } from 'react';
-import { Link, NavLink, useNavigate, useSearchParams } from 'react-router';
-import { EmptyState, Icon, Pagination, Skeleton } from '@project-graphite/ui';
+import { useNavigate, useSearchParams } from 'react-router';
+import { Button, EmptyState, Pagination, Select, Skeleton, Tabs } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import {
   categoryLabels,
@@ -205,67 +208,76 @@ export function DiscoverPage({
           role="search"
         >
           <div className="flex gap-2">
-            <input
-              aria-describedby={searchError || search.error ? 'discover-search-error' : undefined}
-              aria-invalid={Boolean(searchError || search.error)}
-              aria-label={`Search ${categoryLabels[category]}`}
+            <MuiTextField
               defaultValue={query}
+              fullWidth
               name="q"
               placeholder={`Search ${categoryLabels[category]} or paste a link`}
+              size="small"
+              slotProps={{
+                htmlInput: {
+                  'aria-describedby': searchError || search.error ? 'discover-search-error' : undefined,
+                  'aria-invalid': Boolean(searchError || search.error),
+                  'aria-label': `Search ${categoryLabels[category]}`,
+                },
+              }}
               type="search"
             />
-            <button className="primary-button shrink-0" disabled={search.opening} type="submit">
+            <Button className="shrink-0" disabled={search.opening} type="submit" variant="primary">
               {search.opening ? 'Opening…' : 'Search'}
-            </button>
+            </Button>
           </div>
           {(searchError || search.error) && (
-            <p className="error-message m-0" id="discover-search-error">
+            <Alert id="discover-search-error" severity="error">
               {searchError || search.error}
-            </p>
+            </Alert>
           )}
         </form>
       </div>
       <nav aria-label="Media categories" className="chip-row mt-7">
         {discoverCategories.map((item) => (
-          <NavLink
-            className={({ isActive }) =>
-              `secondary-button px-3 py-2 text-sm whitespace-nowrap ${isActive ? 'border-ink' : ''}`
-            }
-            key={item}
-            to={
+          <Button
+            aria-current={item === category ? 'page' : undefined}
+            className={`whitespace-nowrap ${item === category ? 'border-ink' : ''}`}
+            href={
               section === 'search' && query
                 ? `/discover/${item}/search?q=${encodeURIComponent(query)}`
                 : `/discover/${item}/${section}`
             }
+            key={item}
+            size="small"
           >
             {categoryLabels[item]}
-          </NavLink>
+          </Button>
         ))}
       </nav>
       <div className="mt-5 flex items-center gap-2 border-b border-line">
-        <nav aria-label="Discovery section" className="flex min-w-0 items-end gap-2 self-end">
-          {sections.map(({ id, label }) => (
-            <NavLink className="tab-link -mb-px" key={id} to={`/discover/${category}/${id}`}>
-              {label}
-            </NavLink>
-          ))}
-          {section === 'search' && query && (
-            <span aria-current="page" className="tab-link active -mb-px min-w-0 truncate">
-              “{query}”
-            </span>
-          )}
-        </nav>
-        <button
-          aria-controls="discover-filters"
-          aria-expanded={filtersOpen}
-          className="secondary-button ml-auto inline-flex shrink-0 gap-2 px-3 py-1.5 text-sm sm:hidden"
-          onClick={() => setFiltersOpen((current) => !current)}
-          type="button"
-        >
-          <Icon name="filter" size={16} />
-          {filtersOpen ? 'Hide filters' : 'Filters'}
-          {activeFilters > 0 && <span className="count-badge static border-0">{activeFilters}</span>}
-        </button>
+        <div className="-mb-px min-w-0 self-end">
+          <Tabs
+            items={[
+              ...sections.map(({ id, label }) => ({
+                active: id === section,
+                href: `/discover/${category}/${id}`,
+                label,
+              })),
+              ...(section === 'search' && query
+                ? [{ active: true, href: `/discover/${category}/search?q=${encodeURIComponent(query)}`, label: `“${query}”` }]
+                : []),
+            ]}
+            label="Discovery section"
+          />
+        </div>
+        <Badge badgeContent={activeFilters} className="ml-auto shrink-0 sm:hidden" color="primary">
+          <Button
+            aria-controls="discover-filters"
+            aria-expanded={filtersOpen}
+            icon="filter"
+            onClick={() => setFiltersOpen((current) => !current)}
+            size="small"
+          >
+            {filtersOpen ? 'Hide filters' : 'Filters'}
+          </Button>
+        </Badge>
       </div>
       <form
         className={`mt-5 grid-cols-2 gap-3 sm:mt-6 sm:grid lg:grid-cols-6 ${filtersOpen ? 'grid' : 'hidden'}`}
@@ -274,69 +286,70 @@ export function DiscoverPage({
         onSubmit={apply}
       >
         {genres.loading ? (
-          <div className="field-label">
-            <span>Genre</span>
+          <div>
             <input name="genre" type="hidden" value={searchParams.get('genre') ?? ''} />
-            <Skeleton className="h-[3.1rem] rounded-lg" />
+            <Skeleton className="h-14 rounded-lg" />
           </div>
         ) : (genres.data?.length ?? 0) > 0 && (
-          <label className="field-label">
-            Genre
-            <select defaultValue={searchParams.get('genre') ?? ''} name="genre">
-              <option value="">Any genre</option>
-              {genres.data?.map((genre) => (
-                <option key={genre} value={genre}>{genre}</option>
-              ))}
-            </select>
-          </label>
+          <Select
+            defaultValue={searchParams.get('genre') ?? ''}
+            label="Genre"
+            name="genre"
+            options={[
+              { value: '', label: 'Any genre' },
+              ...(genres.data ?? []).map((genre) => ({ value: genre, label: genre })),
+            ]}
+          />
         )}
         <YearPicker defaultValue={searchParams.get('year') ?? ''} label="Year" name="year" />
         {statuses.length > 0 && (
-          <label className="field-label">
-            Status
-            <select defaultValue={searchParams.get('status') ?? ''} name="status">
-              <option value="">Any status</option>
-              {statuses.map(([value, label]) => (
-                <option key={value} value={value}>{label}</option>
-              ))}
-            </select>
-          </label>
+          <Select
+            defaultValue={searchParams.get('status') ?? ''}
+            label="Status"
+            name="status"
+            options={[
+              { value: '', label: 'Any status' },
+              ...statuses.map(([value, label]) => ({ value, label })),
+            ]}
+          />
         )}
-        <label className="field-label">
-          Sort
-          <select defaultValue={searchParams.get('sort') ?? ''} name="sort">
-            <option value="">{section === 'search' ? 'Relevance' : 'Default'}</option>
-            {sortOptions(category, section, activeSource).map(([value, label]) => (
-              <option key={value} value={value}>{label}</option>
-            ))}
-          </select>
-        </label>
+        <Select
+          defaultValue={searchParams.get('sort') ?? ''}
+          label="Sort"
+          name="sort"
+          options={[
+            { value: '', label: section === 'search' ? 'Relevance' : 'Default' },
+            ...sortOptions(category, section, activeSource).map(([value, label]) => ({ value, label })),
+          ]}
+        />
         {sources.length > 1 && (
-          <label className="field-label">
-            Source
-            <select defaultValue={source} name="source">
-              <option value="">Default</option>
-              {sources.map((item) => (
-                <option key={item.key} value={item.key}>{item.displayName}</option>
-              ))}
-            </select>
-          </label>
+          <Select
+            defaultValue={source}
+            label="Source"
+            name="source"
+            options={[
+              { value: '', label: 'Default' },
+              ...sources.map((item) => ({ value: item.key, label: item.displayName })),
+            ]}
+          />
         )}
         <div className="col-span-2 flex items-end gap-3 lg:col-span-1">
-          <button className="primary-button flex-1" type="submit">
+          <Button className="flex-1" type="submit" variant="primary">
             {section === 'search' ? 'Search' : 'Apply'}
-          </button>
+          </Button>
           {hasFilters && (
-            <Link
-              className="text-button mono-sm py-3"
-              to={`/discover/${category}/${section}${query ? `?q=${encodeURIComponent(query)}` : ''}`}
+            <Button
+              className="mono-sm py-3"
+              href={`/discover/${category}/${section}${query ? `?q=${encodeURIComponent(query)}` : ''}`}
+              size="small"
+              variant="text"
             >
               Clear
-            </Link>
+            </Button>
           )}
         </div>
       </form>
-      {error && <p className="error-message mt-6 max-w-3xl">{error}</p>}
+      {error && <Alert className="mt-6 max-w-3xl" severity="error">{error}</Alert>}
       {section === 'search' && query.length < 2 ? (
         <div className="mt-10">
           <EmptyState title={`Search ${categoryLabels[category]}`}>
@@ -356,9 +369,9 @@ export function DiscoverPage({
         results.data && (
           <section className="fade-in mt-10">
             {results.data.stale && (
-              <p className="notice mb-5">
+              <Alert className="mb-5" severity="info">
                 The source is temporarily unavailable. Showing the most recent cached result.
-              </p>
+              </Alert>
             )}
             <div className="mb-6 flex flex-wrap items-baseline justify-between gap-3 border-b border-line pb-4">
               <h2 className="m-0 text-xl font-medium">
diff --git a/app/frontend/src/pages/HomePage.tsx b/app/frontend/src/pages/HomePage.tsx
index 6c54144..9079ccc 100644
--- a/app/frontend/src/pages/HomePage.tsx
+++ b/app/frontend/src/pages/HomePage.tsx
@@ -1,4 +1,7 @@
+import Alert from '@mui/material/Alert';
+import MuiTextField from '@mui/material/TextField';
 import type { FormEvent } from 'react';
+import { Button } from '@project-graphite/ui';
 import {
   categoryLabels,
   discoverCategories,
@@ -44,22 +47,27 @@ export function HomePage() {
           Movies, TV, anime, manga, manhwa and games in one library, with your progress in each.
         </p>
         <form className="mt-8 grid max-w-3xl gap-3 sm:grid-cols-[1fr_auto]" noValidate onSubmit={submit} role="search">
-          <input
-            aria-describedby={form.errors.query ? 'search-error' : undefined}
-            aria-invalid={form.errors.query ? true : undefined}
-            aria-label="Title"
+          <MuiTextField
             name="query"
-            onInput={form.field('query').onInput}
             placeholder="Search every medium"
+            size="small"
+            slotProps={{
+              htmlInput: {
+                'aria-describedby': form.errors.query ? 'search-error' : undefined,
+                'aria-invalid': form.errors.query ? true : undefined,
+                'aria-label': 'Title',
+                onInput: form.field('query').onInput,
+              },
+            }}
             type="search"
           />
-          <button className="primary-button" disabled={search.opening} type="submit">
+          <Button disabled={search.opening} type="submit" variant="primary">
             {search.opening ? 'Opening…' : 'Search'}
-          </button>
+          </Button>
           {(form.errors.query || search.error) && (
-            <p className="error-message m-0 sm:col-span-2" id="search-error">
+            <Alert className="sm:col-span-2" id="search-error" severity="error">
               {form.errors.query || search.error}
-            </p>
+            </Alert>
           )}
         </form>
       </section>
diff --git a/app/frontend/src/pages/ImportBatchPage.tsx b/app/frontend/src/pages/ImportBatchPage.tsx
index 0afcc6a..70d15d7 100644
--- a/app/frontend/src/pages/ImportBatchPage.tsx
+++ b/app/frontend/src/pages/ImportBatchPage.tsx
@@ -1,12 +1,19 @@
+import Alert from '@mui/material/Alert';
+import FormLabel from '@mui/material/FormLabel';
+import MuiLink from '@mui/material/Link';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
 import {
+  Button,
   ConfirmDialog,
   EmptyState,
   errorMessage,
   ListSkeleton,
   PageSkeleton,
   Pagination,
+  Radio,
 } from '@project-graphite/ui';
 import type { Page } from '../api';
 import { useAdultBlur } from '../adultContent';
@@ -86,12 +93,11 @@ function CandidateRow({
             <legend className="sr-only">Matching title for {candidate.title}</legend>
             {candidate.options.map((option, index) => (
               <label className="flex items-center gap-3 text-sm" key={`${option.source}:${option.externalId}`}>
-                <input
+                <Radio
                   checked={candidate.choice === index}
                   disabled={!reviewable}
                   name={`choice-${candidate.id}`}
                   onChange={() => onDecide('accept', index)}
-                  type="radio"
                 />
                 <span className="min-w-0">
                   <span className="text-ink">{option.title}</span>{' '}
@@ -116,22 +122,22 @@ function CandidateRow({
         <div className="mt-3 flex flex-wrap items-center gap-3">
           {reviewable && (
             <>
-              <button
+              <Button
                 aria-pressed={candidate.decision === 'accept'}
-                className={`secondary-button px-3 py-1.5 text-sm ${candidate.decision === 'accept' ? 'border-ink' : ''}`}
+                className={candidate.decision === 'accept' ? 'border-ink' : undefined}
                 onClick={() => onDecide('accept')}
-                type="button"
+                size="small"
               >
                 Import
-              </button>
-              <button
+              </Button>
+              <Button
                 aria-pressed={candidate.decision === 'skip'}
-                className={`secondary-button px-3 py-1.5 text-sm ${candidate.decision === 'skip' ? 'border-ink' : ''}`}
+                className={candidate.decision === 'skip' ? 'border-ink' : undefined}
                 onClick={() => onDecide('skip')}
-                type="button"
+                size="small"
               >
                 Skip
-              </button>
+              </Button>
             </>
           )}
           {candidate.outcome && <span className="mono-sm text-faint">{outcomes[candidate.outcome]}</span>}
@@ -190,7 +196,7 @@ export function ImportBatchPage() {
   }
 
 
-  if (batch.error) return <p className="error-message">{batch.error}</p>;
+  if (batch.error) return <Alert severity="error">{batch.error}</Alert>;
   if (!batch.data) {
     return (
       <PageSkeleton label="Loading import">
@@ -204,21 +210,21 @@ export function ImportBatchPage() {
 
   return (
     <div className="page-enter">
-      <Link className="rule-link mono-sm" to="/import">
+      <MuiLink className="mono-sm" component={Link} to="/import" underline="always">
         All imports
-      </Link>
+      </MuiLink>
       <p className="eyebrow mt-8">
         {detail.sourceApp ? `${importApps[detail.sourceApp]} backup` : 'Backup'} ·{' '}
         {importStateLabels[detail.state].toLowerCase()}
       </p>
       <h1 className="page-title">Review import</h1>
       {detail.previouslyAppliedAt && (
-        <p className="notice mt-6 max-w-3xl">
+        <Alert className="mt-6 max-w-3xl" severity="info">
           You applied this same backup on {new Date(detail.previouslyAppliedAt).toLocaleString()}.
           Titles already in your library are left as they are unless you keep the greater progress.
-        </p>
+        </Alert>
       )}
-      {(error || detail.error) && <p className="error-message mt-6 max-w-3xl">{error || detail.error}</p>}
+      {(error || detail.error) && <Alert className="mt-6 max-w-3xl" severity="error">{error || detail.error}</Alert>}
       {detail.state === 'parsing' && <p className="mt-8 text-muted">Reading the backup…</p>}
       {detail.state === 'matching' && (
         <p className="mt-8 text-muted">
@@ -237,33 +243,36 @@ export function ImportBatchPage() {
               <span className="mono-sm text-faint">{label.toLowerCase()}</span>
             </p>
           ))}
-          <Link className="primary-button inline-flex" to="/library">
+          <Button href="/library" variant="primary">
             Open library
-          </Link>
+          </Button>
         </section>
       )}
       {detail.state === 'ready' && (
         <section className="mt-8 grid max-w-3xl gap-5 rounded-xl border border-line bg-surface p-5">
           <fieldset className="m-0 grid gap-2 border-0 p-0">
-            <legend className="field-label mb-2">When a title is already in your library</legend>
+            <FormLabel className="mb-2" component="legend">When a title is already in your library</FormLabel>
             {(
               [
                 ['add_missing', 'Leave it unchanged and only add missing titles'],
                 ['keep_greater_progress', 'Raise its progress when the backup is further along'],
               ] as const
             ).map(([value, label]) => (
-              <label className="flex items-center gap-2 text-sm text-muted" key={value}>
-                <input checked={policy === value} name="policy" onChange={() => setPolicy(value)} type="radio" />
-                {label}
-              </label>
+              <Radio
+                checked={policy === value}
+                className="text-sm text-muted"
+                key={value}
+                label={label}
+                name="policy"
+                onChange={() => setPolicy(value)}
+              />
             ))}
             <p className="mono-sm m-0 mt-1 text-faint">
               Completed and dropped titles, ratings, reviews and notification settings are never changed.
             </p>
           </fieldset>
           <div className="flex flex-wrap items-center gap-3">
-            <button
-              className="primary-button"
+            <Button
               disabled={busy || detail.undecided > 0}
               onClick={() =>
                 void send(
@@ -272,26 +281,25 @@ export function ImportBatchPage() {
                   'Could not apply the import',
                 )
               }
-              type="button"
+              variant="primary"
             >
               Apply import
-            </button>
+            </Button>
             {detail.undecided > 0 && (
               <>
                 <span className="text-sm text-muted">
                   {detail.undecided.toLocaleString()} suggested{' '}
                   {detail.undecided === 1 ? 'match needs' : 'matches need'} a decision.
                 </span>
-                <button
-                  className="secondary-button px-3 py-2 text-sm"
+                <Button
                   disabled={busy}
                   onClick={() =>
                     void send(`/imports/${id}/accept-suggestions`, { method: 'POST' }, 'Could not accept suggestions')
                   }
-                  type="button"
+                  size="small"
                 >
                   Import all top suggestions
-                </button>
+                </Button>
               </>
             )}
           </div>
@@ -299,24 +307,25 @@ export function ImportBatchPage() {
       )}
       {(detail.state === 'ready' || detail.state === 'applied') && (
         <>
-          <nav aria-label="Import entries" className="scroll-x mt-10 flex gap-2 border-b border-line">
+          <ToggleButtonGroup
+            aria-label="Import entries"
+            className="scroll-x mt-10"
+            exclusive
+            onChange={(_, next: ImportMatch | 'conflict' | null) => next && setSearchParams({ match: next })}
+            size="small"
+            value={match}
+          >
             {tabs.filter((tab) => tab.match !== 'conflict' || detail.state === 'ready').map((tab) => (
-              <button
-                aria-current={match === tab.match ? 'page' : undefined}
-                className="tab-link border-x-0 border-t-0 bg-transparent"
-                key={tab.match}
-                onClick={() => setSearchParams({ match: tab.match })}
-                type="button"
-              >
+              <ToggleButton key={tab.match} value={tab.match}>
                 {tab.label}{' '}
                 <span className="mono-sm text-faint">
                   {tab.match === 'conflict' ? detail.conflicts : (detail.matches[tab.match] ?? 0)}
                 </span>
-              </button>
+              </ToggleButton>
             ))}
-          </nav>
+          </ToggleButtonGroup>
           {candidates.loading && <ListSkeleton label="Loading entries" />}
-          {candidates.error && <p className="error-message mt-6">{candidates.error}</p>}
+          {candidates.error && <Alert className="mt-6" severity="error">{candidates.error}</Alert>}
           {candidates.data &&
             (candidates.data.results.length === 0 ? (
               <div className="mt-6">
@@ -351,9 +360,9 @@ export function ImportBatchPage() {
         </>
       )}
       {!working && (
-        <button className="text-button mt-10 text-sm" onClick={() => setDeleting(true)} type="button">
+        <Button className="mt-10" onClick={() => setDeleting(true)} size="small" variant="text">
           Delete this import review
-        </button>
+        </Button>
       )}
       {deleting && (
         <ConfirmDialog
diff --git a/app/frontend/src/pages/ImportPage.tsx b/app/frontend/src/pages/ImportPage.tsx
index 0baca8b..4d117ae 100644
--- a/app/frontend/src/pages/ImportPage.tsx
+++ b/app/frontend/src/pages/ImportPage.tsx
@@ -1,6 +1,11 @@
+import Alert from '@mui/material/Alert';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormLabel from '@mui/material/FormLabel';
+import MuiLink from '@mui/material/Link';
 import { useState, type FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router';
-import { errorMessage, ListSkeleton } from '@project-graphite/ui';
+import { Button, errorMessage, ListSkeleton } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { importApps, importStateLabels, type ImportDetail, type ImportSummary } from '../imports';
 import { useResource } from '../useResource';
@@ -41,9 +46,9 @@ export function ImportPage() {
 
   return (
     <div className="page-enter">
-      <Link className="rule-link mono-sm" to="/library">
+      <MuiLink className="mono-sm" component={Link} to="/library" underline="always">
         Back to library
-      </Link>
+      </MuiLink>
       <p className="eyebrow mt-8">Library import</p>
       <h1 className="page-title">Import from Mihon or AniYomi</h1>
       <div className="mt-5 grid max-w-3xl gap-3 text-muted">
@@ -63,41 +68,40 @@ export function ImportPage() {
         noValidate
         onSubmit={(event) => void upload(event)}
       >
-        <div className="field-label">
-          <span id="backup-label">Backup file</span>
-          <label className="file-picker" aria-invalid={fileError ? true : undefined}>
-            <input
-              accept=".tachibk,.gz,application/gzip"
-              aria-describedby={fileError ? 'backup-error' : undefined}
-              aria-labelledby="backup-label"
-              className="sr-only"
-              name="file"
-              onChange={(event) => {
-                setFile(event.target.files?.[0]);
-                setFileError('');
-              }}
-              type="file"
-            />
-            <span className="secondary-button shrink-0 px-3 py-2 text-sm">Choose file</span>
+        <FormControl error={Boolean(fileError)}>
+          <FormLabel id="backup-label">Backup file</FormLabel>
+          <div className="mt-2 flex min-w-0 items-center gap-3">
+            <Button className="w-fit shrink-0" component="label" icon="upload" size="small">
+              Choose file
+              <input
+                accept=".tachibk,.gz,application/gzip"
+                aria-describedby={fileError ? 'backup-error' : undefined}
+                aria-invalid={fileError ? true : undefined}
+                aria-labelledby="backup-label"
+                className="sr-only"
+                name="file"
+                onChange={(event) => {
+                  setFile(event.target.files?.[0]);
+                  setFileError('');
+                }}
+                type="file"
+              />
+            </Button>
             <span className={`min-w-0 truncate text-sm ${file ? 'text-ink' : 'text-faint'}`}>
               {file?.name ?? 'No file chosen'}
             </span>
-          </label>
-          {fileError && (
-            <span className="field-error" id="backup-error">
-              {fileError}
-            </span>
-          )}
-        </div>
-        <button className="primary-button sm:mt-6" disabled={busy} type="submit">
+          </div>
+          {fileError && <FormHelperText id="backup-error">{fileError}</FormHelperText>}
+        </FormControl>
+        <Button className="sm:mt-6" disabled={busy} type="submit" variant="primary">
           {busy ? 'Uploading…' : 'Upload'}
-        </button>
-        {error && <p className="error-message m-0 sm:col-span-2">{error}</p>}
+        </Button>
+        {error && <Alert className="sm:col-span-2" severity="error">{error}</Alert>}
       </form>
       <section className="mt-14 max-w-3xl">
         <h2 className="m-0 border-b border-line pb-4 text-xl font-medium">Recent imports</h2>
         {history.error ? (
-          <p className="error-message mt-5">{history.error}</p>
+          <Alert className="mt-5" severity="error">{history.error}</Alert>
         ) : !history.data ? (
           <ListSkeleton label="Loading imports" rows={3} />
         ) : history.data.length === 0 ? (
@@ -106,10 +110,10 @@ export function ImportPage() {
           <ul className="fade-in m-0 p-0">
             {history.data.map((batch) => (
               <li className="flex list-none flex-wrap items-baseline justify-between gap-3 border-b border-line-soft py-3" key={batch.id}>
-                <Link className="rule-link" to={`/import/${batch.id}`}>
+                <MuiLink component={Link} to={`/import/${batch.id}`} underline="always">
                   {batch.sourceApp ? `${importApps[batch.sourceApp]} backup` : 'Backup'} ·{' '}
                   {new Date(batch.createdAt).toLocaleString()}
-                </Link>
+                </MuiLink>
                 <span className="mono-sm text-faint">{importStateLabels[batch.state]}</span>
               </li>
             ))}
diff --git a/app/frontend/src/pages/LegalPages.tsx b/app/frontend/src/pages/LegalPages.tsx
index c58eded..e6dcf8d 100644
--- a/app/frontend/src/pages/LegalPages.tsx
+++ b/app/frontend/src/pages/LegalPages.tsx
@@ -1,3 +1,4 @@
+import MuiLink from '@mui/material/Link';
 import type { ReactNode } from 'react';
 import { Link } from 'react-router';
 
@@ -17,9 +18,9 @@ function LegalPage({ children, title }: { children: ReactNode; title: string })
 
 function External({ children, href }: { children: ReactNode; href: string }) {
   return (
-    <a className="rule-link" href={href} rel="noreferrer" target="_blank">
+    <MuiLink href={href} rel="noreferrer" target="_blank" underline="always">
       {children}
-    </a>
+    </MuiLink>
   );
 }
 
@@ -38,7 +39,7 @@ export function PrivacyPage() {
         <p>
           Your email address receives verification links and password resets. Those links expire,
           and the server keeps only a hash of each. Release emails are sent only after you turn them
-          on in <Link className="rule-link" to="/settings/notifications">notification settings</Link>,
+          on in <MuiLink component={Link} to="/settings/notifications" underline="always">notification settings</MuiLink>,
           at most once a day, and each has a link that stops them without signing in. Records of sent
           release notifications are deleted after 90 days.
         </p>
@@ -51,7 +52,7 @@ export function PrivacyPage() {
         <h2>What is public</h2>
         <p>
           Nothing, until you choose. Profiles start private and show only your display name. You
-          decide in <Link className="rule-link" to="/settings">settings</Link> whether your profile
+          decide in <MuiLink component={Link} to="/settings" underline="always">settings</MuiLink> whether your profile
           and each of its sections are public, and every change applies to earlier activity too.
           A title you hide from your profile stays out of every profile section and count.
           A review you mark as public appears on its title with your display name and a link to
@@ -81,7 +82,7 @@ export function PrivacyPage() {
         <p>
           You can edit or remove any library entry, rating or review at any time, except that a review
           hidden by a moderator can be edited but not removed. In{' '}
-          <Link className="rule-link" to="/settings/account">account settings</Link> you can download
+          <MuiLink component={Link} to="/settings/account" underline="always">account settings</MuiLink> you can download
           everything stored about you as a file, and delete your account, which removes your library,
           ratings, reviews, reports and activity for good.
         </p>
@@ -120,7 +121,7 @@ export function TermsPage() {
         <h2>Catalogue data</h2>
         <p>
           Titles, descriptions, artwork and ratings belong to their sources and are shown under their
-          terms, listed in the <Link className="rule-link" to="/credits">credits</Link>. Graphite
+          terms, listed in the <MuiLink component={Link} to="/credits" underline="always">credits</MuiLink>. Graphite
           Tracker does not host, stream or link to copies of films, shows, comics or games.
         </p>
       </section>
diff --git a/app/frontend/src/pages/LibraryPage.tsx b/app/frontend/src/pages/LibraryPage.tsx
index 32b0b62..a6c13cf 100644
--- a/app/frontend/src/pages/LibraryPage.tsx
+++ b/app/frontend/src/pages/LibraryPage.tsx
@@ -1,6 +1,9 @@
+import Alert from '@mui/material/Alert';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import type { FormEvent } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router';
-import { EmptyState, ListSkeleton, Pagination, Skeleton } from '@project-graphite/ui';
+import { useNavigate, useSearchParams } from 'react-router';
+import { Button, EmptyState, ListSkeleton, Pagination, Select, Skeleton, TextField } from '@project-graphite/ui';
 import type { Page } from '../api';
 import { catalogCategories, categoryLabels, countLabel } from '../catalog';
 import { LibraryCard } from '../components/LibraryCard';
@@ -64,59 +67,58 @@ export function LibraryPage() {
           <h1 className="page-title">Library</h1>
         </div>
         <div className="flex flex-wrap items-center gap-2">
-          <Link className="secondary-button px-3 py-2 text-sm" to="/import">
+          <Button href="/import" size="small">
             Import backup
-          </Link>
-          <div aria-label="Layout" className="flex gap-2" role="group">
+          </Button>
+          <ToggleButtonGroup aria-label="Layout" exclusive size="small" value={layout}>
           {(['grid', 'list'] as const).map((option) => (
-            <button
-              aria-pressed={layout === option}
-              className={`secondary-button px-3 py-2 text-sm capitalize ${layout === option ? 'border-ink' : ''}`}
+            <ToggleButton
+              className="capitalize"
               key={option}
               onClick={() => go({ view: option === 'grid' ? '' : option, page: searchParams.get('page') ?? '' })}
-              type="button"
+              value={option}
             >
               {option}
-            </button>
+            </ToggleButton>
           ))}
-          </div>
+          </ToggleButtonGroup>
         </div>
       </div>
       <div className="mt-7 grid grid-cols-2 gap-3 lg:grid-cols-[2fr_1fr_1fr_1fr]">
         <form className="col-span-2 lg:col-span-1" onSubmit={search} role="search">
-          <label className="field-label">
-            Search
-            <input defaultValue={searchParams.get('query') ?? ''} key={searchParams.get('query')} name="query" placeholder="Title" type="search" />
-          </label>
+          <TextField defaultValue={searchParams.get('query') ?? ''} key={searchParams.get('query')} label="Search" name="query" placeholder="Title" type="search" />
         </form>
-        <label className="field-label">
-          Category
-          <select onChange={(event) => go({ category: event.target.value })} value={searchParams.get('category') ?? ''}>
-            <option value="">All categories</option>
-            {catalogCategories.map((category) => (
-              <option key={category} value={category}>{categoryLabels[category]}</option>
-            ))}
-          </select>
-        </label>
-        <label className="field-label">
-          List
-          <select onChange={(event) => go({ state: event.target.value })} value={searchParams.get('state') ?? ''}>
-            <option value="">All lists</option>
-            {libraryStates.map((state) => (
-              <option key={state} value={state}>{libraryStateLabels[state]}</option>
-            ))}
-          </select>
-        </label>
-        <label className="field-label col-span-2 lg:col-span-1">
-          Sort
-          <select onChange={(event) => go({ sort: event.target.value })} value={searchParams.get('sort') ?? ''}>
-            <option value="">Recently updated</option>
-            <option value="title">Title</option>
-            <option value="release">Release date</option>
-          </select>
-        </label>
+        <Select
+          label="Category"
+          onChange={(value) => go({ category: value })}
+          options={[
+            { value: '', label: 'All categories' },
+            ...catalogCategories.map((category) => ({ value: category, label: categoryLabels[category] })),
+          ]}
+          value={searchParams.get('category') ?? ''}
+        />
+        <Select
+          label="List"
+          onChange={(value) => go({ state: value })}
+          options={[
+            { value: '', label: 'All lists' },
+            ...libraryStates.map((state) => ({ value: state, label: libraryStateLabels[state] })),
+          ]}
+          value={searchParams.get('state') ?? ''}
+        />
+        <Select
+          className="col-span-2 lg:col-span-1"
+          label="Sort"
+          onChange={(value) => go({ sort: value })}
+          options={[
+            { value: '', label: 'Recently updated' },
+            { value: 'title', label: 'Title' },
+            { value: 'release', label: 'Release date' },
+          ]}
+          value={searchParams.get('sort') ?? ''}
+        />
       </div>
-      {library.error && <p className="error-message mt-6">{library.error}</p>}
+      {library.error && <Alert className="mt-6" severity="error">{library.error}</Alert>}
       {library.loading ? (
         <div className="mt-9">
           <Skeleton className="mb-5 h-3.5 w-20" />
@@ -136,9 +138,9 @@ export function LibraryPage() {
                   {filtered ? 'Try another search or list.' : 'Discover a title and add it to a list.'}
                 </p>
                 {!filtered && (
-                  <Link className="primary-button mt-3 inline-flex" to="/discover/movie/recent">
+                  <Button className="mt-3" href="/discover/movie/recent" variant="primary">
                     Discover titles
-                  </Link>
+                  </Button>
                 )}
               </EmptyState>
             ) : (
diff --git a/app/frontend/src/pages/LoginPage.tsx b/app/frontend/src/pages/LoginPage.tsx
index 8cee4c6..8b4aec6 100644
--- a/app/frontend/src/pages/LoginPage.tsx
+++ b/app/frontend/src/pages/LoginPage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState, type FormEvent } from 'react';
 import { Link } from 'react-router';
-import { errorMessage, TextField } from '@project-graphite/ui';
+import { Button, errorMessage, TextField } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { ResendVerification } from '../components/ResendVerification';
 import { emailAddress, required, useFormErrors } from '../validation';
@@ -44,17 +46,17 @@ export function LoginPage() {
       <form className="mt-8 grid gap-5" noValidate onSubmit={submit}>
         <TextField autoComplete="email" inputMode="email" label="Email" type="email" {...form.field('email')} />
         <TextField autoComplete="current-password" label="Password" type="password" {...form.field('password')} />
-        {error && <p className="error-message">{error}</p>}
-        <button className="primary-button" disabled={busy} type="submit">
+        {error && <Alert severity="error">{error}</Alert>}
+        <Button disabled={busy} type="submit" variant="primary">
           {busy ? 'Signing in…' : 'Sign in'}
-        </button>
+        </Button>
       </form>
       {error === unverified && <ResendVerification email={email} key={email} />}
       <p className="mt-6 text-sm text-muted">
-        <Link className="rule-link" to="/forgot-password">Forgot your password?</Link>
+        <MuiLink component={Link} to="/forgot-password" underline="always">Forgot your password?</MuiLink>
       </p>
       <p className="mt-2 text-sm text-muted">
-        New here? <Link className="rule-link" to="/register">Create an account</Link>
+        New here? <MuiLink component={Link} to="/register" underline="always">Create an account</MuiLink>
       </p>
     </section>
   );
diff --git a/app/frontend/src/pages/NotFoundPage.tsx b/app/frontend/src/pages/NotFoundPage.tsx
index f89bedd..18049f2 100644
--- a/app/frontend/src/pages/NotFoundPage.tsx
+++ b/app/frontend/src/pages/NotFoundPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router';
+import { Button } from '@project-graphite/ui';
 
 export function NotFoundPage() {
   return (
@@ -9,12 +9,12 @@ export function NotFoundPage() {
         There is nothing at this address. The link may be wrong, or the page may have moved.
       </p>
       <div className="mt-8 flex flex-wrap justify-center gap-3">
-        <Link className="primary-button inline-flex" to="/">
+        <Button href="/" variant="primary">
           Go home
-        </Link>
-        <Link className="secondary-button inline-flex" to="/discover/movie/recent">
+        </Button>
+        <Button href="/discover/movie/recent">
           Discover titles
-        </Link>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/frontend/src/pages/NotificationSettingsPage.tsx b/app/frontend/src/pages/NotificationSettingsPage.tsx
index 5f41891..c261766 100644
--- a/app/frontend/src/pages/NotificationSettingsPage.tsx
+++ b/app/frontend/src/pages/NotificationSettingsPage.tsx
@@ -1,6 +1,9 @@
+import Alert from '@mui/material/Alert';
+import FormLabel from '@mui/material/FormLabel';
+import MuiLink from '@mui/material/Link';
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { errorMessage, FormSkeleton } from '@project-graphite/ui';
+import { Checkbox, errorMessage, FormSkeleton, Radio } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { catalogCategories, categoryLabels } from '../catalog';
 import type { NotificationPreferences } from '../notifications';
@@ -28,40 +31,39 @@ export function NotificationSettingsPage() {
     }
   }
 
-  if (preferences.error) return <p className="error-message">{preferences.error}</p>;
+  if (preferences.error) return <Alert severity="error">{preferences.error}</Alert>;
   if (!preferences.data) return <FormSkeleton fields={1} />;
   const { cadence, categories, enabled, suspended } = preferences.data;
 
   return (
     <div className="fade-in grid max-w-3xl gap-12">
-      {error && <p className="error-message m-0">{error}</p>}
+      {error && <Alert severity="error">{error}</Alert>}
       {suspended && (
-        <p className="notice m-0">
+        <Alert severity="info">
           Emails stopped after the mail server rejected several digests to your address. Check the
-          address in <Link className="rule-link" to="/settings/account">account settings</Link>, then
+          address in <MuiLink component={Link} to="/settings/account" underline="always">account settings</MuiLink>, then
           turn emails back on.
-        </p>
+        </Alert>
       )}
       <section>
         <h2 className="m-0 text-xl font-medium">Release emails</h2>
         <p className="mt-2 text-sm text-muted">
           Titles you turn release notifications on for in your library always appear in your{' '}
-          <Link className="rule-link" to="/notifications">notifications</Link>, with a pop-up while you
+          <MuiLink component={Link} to="/notifications" underline="always">notifications</MuiLink>, with a pop-up while you
           are browsing. Emails are extra and optional.
         </p>
         <p className="mt-2 text-sm text-muted">
           One email collects new episodes, chapters and releases for the titles you turn
           notifications on for in your library, while they are planned or in progress. Digests arrive
-          after 08:00 in the <Link className="rule-link" to="/settings/account">time zone</Link> you
+          after 08:00 in the <MuiLink component={Link} to="/settings/account" underline="always">time zone</MuiLink> you
           chose.
         </p>
         <label className="mt-5 flex items-start gap-3 rounded-xl border border-line bg-surface p-4">
-          <input
+          <Checkbox
             checked={enabled && !suspended}
             className="mt-1"
             disabled={busy}
             onChange={(event) => void save({ enabled: event.target.checked })}
-            type="checkbox"
           />
           <span>
             <span className="block font-medium">Email me about new releases</span>
@@ -69,36 +71,39 @@ export function NotificationSettingsPage() {
           </span>
         </label>
         <fieldset className="m-0 mt-5 grid gap-2 border-0 p-0" disabled={busy || !enabled || suspended}>
-          <legend className="field-label mb-2">How often</legend>
+          <FormLabel className="mb-2" component="legend">How often</FormLabel>
           {(
             [
               ['daily', 'Daily digest'],
               ['weekly', 'Weekly digest, on Mondays'],
             ] as const
           ).map(([value, label]) => (
-            <label className={`flex items-center gap-2 text-sm text-muted ${enabled && !suspended ? '' : 'opacity-55'}`} key={value}>
-              <input checked={cadence === value} name="cadence" onChange={() => void save({ cadence: value })} type="radio" />
-              {label}
-            </label>
+            <Radio
+              checked={cadence === value}
+              className={`gap-2 text-sm text-muted ${enabled && !suspended ? '' : 'opacity-55'}`}
+              key={value}
+              label={label}
+              name="cadence"
+              onChange={() => void save({ cadence: value })}
+            />
           ))}
         </fieldset>
         <fieldset className="m-0 mt-5 grid gap-2 border-0 p-0 sm:grid-cols-3" disabled={busy || !enabled || suspended}>
-          <legend className="field-label mb-2">Categories</legend>
+          <FormLabel className="mb-2" component="legend">Categories</FormLabel>
           {catalogCategories.map((category) => (
-            <label className={`flex items-center gap-2 text-sm text-muted ${enabled && !suspended ? '' : 'opacity-55'}`} key={category}>
-              <input
-                checked={categories.includes(category)}
-                onChange={(event) =>
-                  void save({
-                    categories: event.target.checked
-                      ? [...categories, category]
-                      : categories.filter((item) => item !== category),
-                  })
-                }
-                type="checkbox"
-              />
-              {categoryLabels[category]}
-            </label>
+            <Checkbox
+              checked={categories.includes(category)}
+              className={`gap-2 text-sm text-muted ${enabled && !suspended ? '' : 'opacity-55'}`}
+              key={category}
+              label={categoryLabels[category]}
+              onChange={(event) =>
+                void save({
+                  categories: event.target.checked
+                    ? [...categories, category]
+                    : categories.filter((item) => item !== category),
+                })
+              }
+            />
           ))}
         </fieldset>
       </section>
diff --git a/app/frontend/src/pages/NotificationsPage.tsx b/app/frontend/src/pages/NotificationsPage.tsx
index 4b32e65..717f427 100644
--- a/app/frontend/src/pages/NotificationsPage.tsx
+++ b/app/frontend/src/pages/NotificationsPage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState } from 'react';
 import { Link, useSearchParams } from 'react-router';
-import { EmptyState, errorMessage, ListSkeleton, Pagination } from '@project-graphite/ui';
+import { Button, EmptyState, errorMessage, ListSkeleton, Pagination } from '@project-graphite/ui';
 import type { Page } from '../api';
 import { NotificationList } from '../components/NotificationList';
 import { useInbox, type InboxNotification } from '../inbox';
@@ -31,16 +33,16 @@ export function NotificationsPage() {
           <h1 className="page-title">Notifications</h1>
         </div>
         {inbox.unread > 0 && (
-          <button className="secondary-button px-3 py-2 text-sm" onClick={() => void markAllRead()} type="button">
+          <Button onClick={() => void markAllRead()} size="small">
             Mark all as read
-          </button>
+          </Button>
         )}
       </div>
       <p className="mt-4 text-muted">
         New episodes, chapters and releases for the titles you follow. Turn release notifications on
         or off in each title’s library entry.
       </p>
-      {(error || notifications.error) && <p className="error-message mt-6">{error || notifications.error}</p>}
+      {(error || notifications.error) && <Alert className="mt-6" severity="error">{error || notifications.error}</Alert>}
       {!notifications.data ? (
         !notifications.error && (
           <div className="mt-6">
@@ -51,7 +53,7 @@ export function NotificationsPage() {
         <div className="mt-8">
           <EmptyState title="No notifications yet">
             <p className="mt-2 mb-0 text-muted">
-              Open a title in your <Link className="rule-link" to="/library">library</Link> and turn on
+              Open a title in your <MuiLink component={Link} to="/library" underline="always">library</MuiLink> and turn on
               release notifications to hear about what comes out next.
             </p>
           </EmptyState>
diff --git a/app/frontend/src/pages/PasswordPages.tsx b/app/frontend/src/pages/PasswordPages.tsx
index f00e6c5..20536c7 100644
--- a/app/frontend/src/pages/PasswordPages.tsx
+++ b/app/frontend/src/pages/PasswordPages.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState, type FormEvent } from 'react';
 import { Link, useSearchParams } from 'react-router';
-import { errorMessage, TextField } from '@project-graphite/ui';
+import { Button, errorMessage, TextField } from '@project-graphite/ui';
 import { apiRequest } from '../api';
 import { emailAddress, password, required, useFormErrors } from '../validation';
 
@@ -42,14 +44,14 @@ export function ForgotPasswordPage() {
       ) : (
         <form className="mt-8 grid gap-5" noValidate onSubmit={submit}>
           <TextField autoComplete="email" inputMode="email" label="Email" type="email" {...form.field('email')} />
-          {error && <p className="error-message">{error}</p>}
-          <button className="primary-button" disabled={busy} type="submit">
+          {error && <Alert severity="error">{error}</Alert>}
+          <Button disabled={busy} type="submit" variant="primary">
             {busy ? 'Sending…' : 'Send reset link'}
-          </button>
+          </Button>
         </form>
       )}
       <p className="mt-6 text-sm text-muted">
-        <Link className="rule-link" to="/login">Back to sign in</Link>
+        <MuiLink component={Link} to="/login" underline="always">Back to sign in</MuiLink>
       </p>
     </section>
   );
@@ -89,7 +91,7 @@ export function ResetPasswordPage() {
         <p className="eyebrow">Password changed</p>
         <h1 className="page-title">Sign in with your new password.</h1>
         <p className="mt-5 text-muted">Every device that was signed in has been signed out.</p>
-        <Link className="primary-button mt-7 inline-flex" to="/login">Sign in</Link>
+        <Button className="mt-7" href="/login" variant="primary">Sign in</Button>
       </section>
     );
   }
@@ -107,13 +109,13 @@ export function ResetPasswordPage() {
           {...form.field('password')}
         />
         {error && (
-          <p className="error-message">
-            {error} <Link className="rule-link" to="/forgot-password">Request a new link</Link>
-          </p>
+          <Alert severity="error">
+            {error} <MuiLink component={Link} to="/forgot-password" underline="always">Request a new link</MuiLink>
+          </Alert>
         )}
-        <button className="primary-button" disabled={busy} type="submit">
+        <Button disabled={busy} type="submit" variant="primary">
           {busy ? 'Saving…' : 'Save password'}
-        </button>
+        </Button>
       </form>
     </section>
   );
diff --git a/app/frontend/src/pages/ProfilePage.tsx b/app/frontend/src/pages/ProfilePage.tsx
index a54b8fd..6f6ca97 100644
--- a/app/frontend/src/pages/ProfilePage.tsx
+++ b/app/frontend/src/pages/ProfilePage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import type { ReactNode } from 'react';
-import { Link, NavLink, useParams, useSearchParams } from 'react-router';
-import { EmptyState, ListSkeleton, Pagination } from '@project-graphite/ui';
+import { Link, useMatch, useParams, useSearchParams } from 'react-router';
+import { EmptyState, ListSkeleton, Pagination, Tabs } from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
 import type { Page } from '../api';
 import { useAuth } from '../auth';
@@ -61,15 +63,18 @@ interface Rating {
 }
 
 export function OwnerTabs({ handle }: { handle: string }) {
+  const profileHref = `/users/${handle}`;
+  const settingsHref = `/users/${handle}/settings`;
   return (
-    <nav aria-label="Your profile" className="mt-7 flex gap-2 border-b border-line">
-      <NavLink className="tab-link -mb-px" end to={`/users/${handle}`}>
-        Profile
-      </NavLink>
-      <NavLink className="tab-link -mb-px" to={`/users/${handle}/settings`}>
-        Settings
-      </NavLink>
-    </nav>
+    <div className="mt-7">
+      <Tabs
+        items={[
+          { active: Boolean(useMatch(profileHref)), href: profileHref, label: 'Profile' },
+          { active: Boolean(useMatch({ end: false, path: settingsHref })), href: settingsHref, label: 'Settings' },
+        ]}
+        label="Your profile"
+      />
+    </div>
   );
 }
 
@@ -112,7 +117,7 @@ function SectionPage<T>({
     Boolean(auth.user),
   );
 
-  if (list.error) return <p className="error-message mt-6">{list.error}</p>;
+  if (list.error) return <Alert className="mt-6" severity="error">{list.error}</Alert>;
   if (!list.data) return <div className="mt-6">{skeleton}</div>;
   return (
     <div className="fade-in">
@@ -307,7 +312,7 @@ export function ProfilePage() {
         <p className="mt-2 mb-0 text-muted">No account uses @{handle}.</p>
       </EmptyState>
     ) : (
-      <p className="error-message">{profile.error}</p>
+      <Alert severity="error">{profile.error}</Alert>
     );
   }
   if (!profile.data) return <ProfileSkeleton />;
@@ -325,20 +330,20 @@ export function ProfilePage() {
       {auth.user?.handle === data.handle && (
         <>
           <OwnerTabs handle={data.handle} />
-          <p className="notice mt-5 max-w-3xl">
+          <Alert className="mt-5 max-w-3xl" severity="info">
             This is how other people see your profile.{' '}
-            <Link className="rule-link" to={`/users/${data.handle}/settings`}>
+            <MuiLink component={Link} to={`/users/${data.handle}/settings`} underline="always">
               Change what is shown
-            </Link>
-          </p>
+            </MuiLink>
+          </Alert>
         </>
       )}
       {data.privateSections && (
-        <p className="notice mt-5 max-w-3xl">
+        <Alert className="mt-5 max-w-3xl" severity="info">
           {data.isPublic
             ? 'You see every section because you are an administrator. Sections marked private are hidden from everyone else.'
             : 'This profile is private. You see it because you are an administrator; everyone else sees only the display name.'}
-        </p>
+        </Alert>
       )}
       {!data.isPublic && !data.privateSections ? (
         <p className="mt-6 text-muted">This profile is private.</p>
@@ -353,21 +358,18 @@ export function ProfilePage() {
           )}
           {View ? (
             <>
-              <nav aria-label="Profile sections" className="scroll-x mt-10 mb-6 flex gap-2 border-b border-line">
-                {visible.map((section) => (
-                  <Link
-                    aria-current={section === tab ? 'page' : undefined}
-                    className="tab-link"
-                    key={section}
-                    to={`/users/${data.handle}?tab=${section}`}
-                  >
-                    {sectionLabels[section]}
-                    {data.privateSections?.includes(section) && (
-                      <span className="mono-sm font-normal text-faint"> · private</span>
-                    )}
-                  </Link>
-                ))}
-              </nav>
+              <div className="mt-10 mb-6">
+                <Tabs
+                  items={visible.map((section) => ({
+                    active: section === tab,
+                    href: `/users/${data.handle}?tab=${section}`,
+                    label: data.privateSections?.includes(section)
+                      ? `${sectionLabels[section]} · private`
+                      : sectionLabels[section],
+                  }))}
+                  label="Profile sections"
+                />
+              </div>
               <View handle={data.handle} />
             </>
           ) : (
diff --git a/app/frontend/src/pages/RegisterPage.tsx b/app/frontend/src/pages/RegisterPage.tsx
index b346110..12fbec7 100644
--- a/app/frontend/src/pages/RegisterPage.tsx
+++ b/app/frontend/src/pages/RegisterPage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState, type FormEvent } from 'react';
 import { Link } from 'react-router';
-import { errorMessage, TextField } from '@project-graphite/ui';
+import { Button, errorMessage, TextField } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { ResendVerification } from '../components/ResendVerification';
 import { atLeast, atMost, emailAddress, password, required, useFormErrors } from '../validation';
@@ -87,13 +89,13 @@ export function RegisterPage() {
           type="password"
           {...form.field('password')}
         />
-        {error && <p className="error-message">{error}</p>}
-        <button className="primary-button" disabled={busy} type="submit">
+        {error && <Alert severity="error">{error}</Alert>}
+        <Button disabled={busy} type="submit" variant="primary">
           {busy ? 'Creating…' : 'Create account'}
-        </button>
+        </Button>
       </form>
       <p className="mt-6 text-sm text-muted">
-        Already registered? <Link className="rule-link" to="/login">Sign in</Link>
+        Already registered? <MuiLink component={Link} to="/login" underline="always">Sign in</MuiLink>
       </p>
     </section>
   );
diff --git a/app/frontend/src/pages/SearchPage.tsx b/app/frontend/src/pages/SearchPage.tsx
index 9239978..35aa575 100644
--- a/app/frontend/src/pages/SearchPage.tsx
+++ b/app/frontend/src/pages/SearchPage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiTextField from '@mui/material/TextField';
 import { useEffect, useRef, useState, type FormEvent } from 'react';
 import { useSearchParams } from 'react-router';
-import { EmptyState, Skeleton } from '@project-graphite/ui';
+import { Button, EmptyState, Skeleton } from '@project-graphite/ui';
 import {
   catalogCategories,
   categoryLabels,
@@ -75,23 +77,28 @@ export function SearchPage() {
       <p className="eyebrow">Unified catalogue</p>
       <h1 className="page-title">{query.length >= 2 ? `Results for “${query}”` : 'Search'}</h1>
       <form className="mt-8 grid max-w-3xl gap-3 sm:grid-cols-[1fr_auto]" key={query} noValidate onSubmit={submit} role="search">
-        <input
-          aria-describedby={form.errors.query ? 'search-error' : undefined}
-          aria-invalid={form.errors.query ? true : undefined}
-          aria-label="Title"
+        <MuiTextField
           defaultValue={query}
           name="query"
-          onInput={form.field('query').onInput}
           placeholder="Search every medium"
+          size="small"
+          slotProps={{
+            htmlInput: {
+              'aria-describedby': form.errors.query ? 'search-error' : undefined,
+              'aria-invalid': form.errors.query ? true : undefined,
+              'aria-label': 'Title',
+              onInput: form.field('query').onInput,
+            },
+          }}
           type="search"
         />
-        <button className="primary-button" disabled={search.opening} type="submit">
+        <Button disabled={search.opening} type="submit" variant="primary">
           {search.opening ? 'Opening…' : 'Search'}
-        </button>
+        </Button>
         {(form.errors.query || search.error) && (
-          <p className="error-message m-0 sm:col-span-2" id="search-error">
+          <Alert className="sm:col-span-2" id="search-error" severity="error">
             {form.errors.query || search.error}
-          </p>
+          </Alert>
         )}
       </form>
       {query.length >= 2 ? (
diff --git a/app/frontend/src/pages/SettingsPage.tsx b/app/frontend/src/pages/SettingsPage.tsx
index 857adb9..af3957f 100644
--- a/app/frontend/src/pages/SettingsPage.tsx
+++ b/app/frontend/src/pages/SettingsPage.tsx
@@ -1,6 +1,10 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState, type FormEvent } from 'react';
-import { Link, Navigate, NavLink, Outlet, useParams } from 'react-router';
+import { Link, matchPath, Navigate, Outlet, useLocation, useParams } from 'react-router';
 import {
+  Button,
+  Checkbox,
   Dialog,
   errorMessage,
   FormSkeleton,
@@ -52,6 +56,7 @@ const settingsSections = [
 export function SettingsLayout() {
   const auth = useAuth();
   const { handle = '' } = useParams();
+  const { pathname } = useLocation();
   const user = auth.user;
   if (!user) return null;
   if (handle.toLowerCase() !== user.handle) {
@@ -64,18 +69,21 @@ export function SettingsLayout() {
       <h1 className="page-title">{user.displayName}</h1>
       <OwnerTabs handle={user.handle} />
       <nav aria-label="Settings" className="chip-row mt-6">
-        {settingsSections.map(([section, label]) => (
-          <NavLink
-            className={({ isActive }) =>
-              `secondary-button px-3 py-2 text-sm whitespace-nowrap ${isActive ? 'border-ink' : ''}`
-            }
-            end
-            key={section}
-            to={`/users/${user.handle}/settings${section ? `/${section}` : ''}`}
-          >
-            {label}
-          </NavLink>
-        ))}
+        {settingsSections.map(([section, label]) => {
+          const href = `/users/${user.handle}/settings${section ? `/${section}` : ''}`;
+          const active = Boolean(matchPath({ path: href, end: true }, pathname));
+          return (
+            <Button
+              aria-current={active ? 'page' : undefined}
+              className={`whitespace-nowrap ${active ? 'border-ink' : ''}`}
+              href={href}
+              key={section}
+              size="small"
+            >
+              {label}
+            </Button>
+          );
+        })}
       </nav>
       <div className="mt-8">
         <Outlet />
@@ -130,13 +138,13 @@ export function ProfileSettingsPage() {
     );
   }
 
-  if (me.error) return <p className="error-message">{me.error}</p>;
+  if (me.error) return <Alert severity="error">{me.error}</Alert>;
   if (!me.data) return <FormSkeleton fields={2} />;
   const { data } = me;
 
   return (
     <div className="fade-in grid max-w-3xl gap-12">
-      {error && <p className="error-message m-0">{error}</p>}
+      {error && <Alert severity="error">{error}</Alert>}
       <section>
         <h2 className="m-0 text-xl font-medium">Profile</h2>
         <form
@@ -157,13 +165,13 @@ export function ProfileSettingsPage() {
             Handle @{data.handle} · {data.email} · the handle is permanent so profile links keep working
           </p>
           <div className="flex flex-wrap items-center gap-4">
-            <button className="primary-button" type="submit">
+            <Button type="submit" variant="primary">
               Save profile
-            </button>
+            </Button>
             {saved && <span className="mono-sm text-faint">Saved.</span>}
-            <Link className="rule-link mono-sm" to={`/users/${data.handle}`}>
+            <MuiLink className="mono-sm" component={Link} to={`/users/${data.handle}`} underline="always">
               See your profile as others do
-            </Link>
+            </MuiLink>
           </div>
         </form>
       </section>
@@ -177,11 +185,10 @@ export function ProfileSettingsPage() {
           deal with abuse.
         </p>
         <label className="mt-5 flex items-start gap-3 rounded-xl border border-line bg-surface p-4">
-          <input
+          <Checkbox
             checked={data.privacy.isPublic}
             className="mt-1"
             onChange={(event) => void send('/me/privacy', { isPublic: event.target.checked })}
-            type="checkbox"
           />
           <span>
             <span className="block font-medium">Public profile</span>
@@ -191,18 +198,18 @@ export function ProfileSettingsPage() {
         <fieldset className="m-0 mt-4 grid gap-3 border-0 p-0" disabled={!data.privacy.isPublic}>
           <legend className="sr-only">Visible sections</legend>
           {sections.map(([key, label, description]) => (
-            <label className={`flex items-start gap-3 ${data.privacy.isPublic ? '' : 'opacity-55'}`} key={key}>
-              <input
-                checked={data.privacy[key]}
-                className="mt-1"
-                onChange={(event) => void send('/me/privacy', { [key]: event.target.checked })}
-                type="checkbox"
-              />
-              <span>
-                <span className="block text-sm text-ink">{label}</span>
-                <span className="text-sm text-muted">{description}</span>
-              </span>
-            </label>
+            <Checkbox
+              checked={data.privacy[key]}
+              className={`items-start gap-3 ${data.privacy.isPublic ? '' : 'opacity-55'}`}
+              key={key}
+              label={
+                <span>
+                  <span className="block text-sm text-ink">{label}</span>
+                  <span className="text-sm text-muted">{description}</span>
+                </span>
+              }
+              onChange={(event) => void send('/me/privacy', { [key]: event.target.checked })}
+            />
           ))}
         </fieldset>
       </section>
@@ -210,15 +217,15 @@ export function ProfileSettingsPage() {
         <h2 className="m-0 text-xl font-medium">Content</h2>
         {!site.data ? (
           site.error ? (
-            <p className="error-message mt-4">{site.error}</p>
+            <Alert className="mt-4" severity="error">{site.error}</Alert>
           ) : (
             <LinesSkeleton className="mt-4 max-w-xl" label="Loading content settings" lines={2} />
           )
         ) : !site.data.adultContentEnabled ? (
-          <p className="notice mt-4">
+          <Alert className="mt-4" severity="info">
             Adult content is turned off on Graphite Tracker, so adult titles stay out of search,
             discovery, imports and title pages for everyone. Titles already in your library are kept.
-          </p>
+          </Alert>
         ) : (
           <>
             <p className="mt-2 text-sm text-muted">
@@ -255,19 +262,18 @@ export function ProfileSettingsPage() {
                   </p>
                 </div>
                 <div className="mt-6 flex justify-end gap-3">
-                  <button className="secondary-button" onClick={() => setConfirmingAdult(false)} type="button">
+                  <Button onClick={() => setConfirmingAdult(false)}>
                     Cancel
-                  </button>
-                  <button
-                    className="primary-button"
+                  </Button>
+                  <Button
                     onClick={() => {
                       setConfirmingAdult(false);
                       void send('/me', { showAdultContent: true });
                     }}
-                    type="button"
+                    variant="primary"
                   >
                     Show adult content
-                  </button>
+                  </Button>
                 </div>
               </Dialog>
             )}
diff --git a/app/frontend/src/pages/SourcesPage.tsx b/app/frontend/src/pages/SourcesPage.tsx
index e41ef27..b08a43f 100644
--- a/app/frontend/src/pages/SourcesPage.tsx
+++ b/app/frontend/src/pages/SourcesPage.tsx
@@ -1,5 +1,7 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState } from 'react';
-import { errorMessage, Placeholder, Skeleton } from '@project-graphite/ui';
+import { Checkbox, errorMessage, Placeholder, Select, Skeleton } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { catalogCategories, categoryLabels } from '../catalog';
 import type { SourceSettings } from '../sources';
@@ -28,7 +30,7 @@ export function SourcesPage() {
 
   if (!settings.data) {
     return settings.error ? (
-      <p className="error-message">{settings.error}</p>
+      <Alert severity="error">{settings.error}</Alert>
     ) : (
       <Placeholder label="Loading sources">
         <Skeleton className="h-3.5 w-full max-w-2xl" />
@@ -49,7 +51,7 @@ export function SourcesPage() {
         Choose which approved connectors you use and which one to prefer. Changing a source never
         removes library progress.
       </p>
-      {error && <p className="error-message mt-5">{error}</p>}
+      {error && <Alert className="mt-5" severity="error">{error}</Alert>}
       <section className="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         {data.sources.map((source) => (
           <article className="rounded-xl border border-line bg-surface p-5" key={source.key}>
@@ -60,13 +62,12 @@ export function SourcesPage() {
                   {source.available ? (source.enabled ? 'enabled' : 'disabled') : 'not configured on this server'}
                 </span>
               </span>
-              <input
+              <Checkbox
                 checked={source.enabled}
                 disabled={!source.available}
                 onChange={(event) =>
                   void change(`/sources/${source.key}`, 'PATCH', { enabled: event.target.checked })
                 }
-                type="checkbox"
               />
             </label>
             <div className="mt-4 flex flex-wrap gap-2">
@@ -78,9 +79,9 @@ export function SourcesPage() {
             </div>
             <p className="mt-4 mb-0 text-sm text-muted">
               {source.attributionUrl ? (
-                <a className="rule-link" href={source.attributionUrl} rel="noreferrer" target="_blank">
+                <MuiLink href={source.attributionUrl} rel="noreferrer" target="_blank" underline="always">
                   {source.attribution}
-                </a>
+                </MuiLink>
               ) : (
                 source.attribution
               )}
@@ -94,35 +95,31 @@ export function SourcesPage() {
           A title's own preference wins, then its category, then the global default.
         </p>
         <div className="mt-5 grid gap-4 sm:grid-cols-2">
-          <label className="field-label sm:col-span-2">
-            Global default
-            <select
-              onChange={(event) => choose('/sources/preferences/global', event.target.value)}
-              value={data.global ?? ''}
-            >
-              <option value="">System default</option>
-              {data.sources
+          <Select
+            className="sm:col-span-2"
+            label="Global default"
+            onChange={(value) => choose('/sources/preferences/global', value)}
+            options={[
+              { value: '', label: 'System default' },
+              ...data.sources
                 .filter((source) => source.enabled)
-                .map((source) => (
-                  <option key={source.key} value={source.key}>{source.displayName}</option>
-                ))}
-            </select>
-          </label>
+                .map((source) => ({ value: source.key, label: source.displayName })),
+            ]}
+            value={data.global ?? ''}
+          />
           {catalogCategories.map((category) => (
-            <label className="field-label" key={category}>
-              {categoryLabels[category]}
-              <select
-                onChange={(event) => choose(`/sources/preferences/category/${category}`, event.target.value)}
-                value={data.categories[category] ?? ''}
-              >
-                <option value="">Use global default</option>
-                {data.sources
+            <Select
+              key={category}
+              label={categoryLabels[category]}
+              onChange={(value) => choose(`/sources/preferences/category/${category}`, value)}
+              options={[
+                { value: '', label: 'Use global default' },
+                ...data.sources
                   .filter((source) => source.enabled && source.categories.includes(category))
-                  .map((source) => (
-                    <option key={source.key} value={source.key}>{source.displayName}</option>
-                  ))}
-              </select>
-            </label>
+                  .map((source) => ({ value: source.key, label: source.displayName })),
+              ]}
+              value={data.categories[category] ?? ''}
+            />
           ))}
         </div>
       </section>
diff --git a/app/frontend/src/pages/TitleDetailsPage.tsx b/app/frontend/src/pages/TitleDetailsPage.tsx
index e34cd9c..9bc7ee6 100644
--- a/app/frontend/src/pages/TitleDetailsPage.tsx
+++ b/app/frontend/src/pages/TitleDetailsPage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState } from 'react';
 import { Link, Navigate, useParams, useSearchParams } from 'react-router';
-import { EmptyState, Placeholder, Skeleton, SmoothImage } from '@project-graphite/ui';
+import { Button, EmptyState, Placeholder, Skeleton, SmoothImage } from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
 import { useAuth } from '../auth';
 import {
@@ -42,10 +44,10 @@ function LibraryPanel({
           </Placeholder>
         ) : !auth.user ? (
           <p className="m-0 text-sm text-muted">
-            <Link className="rule-link" to="/login">Sign in</Link> to track this title.
+            <MuiLink component={Link} to="/login" underline="always">Sign in</MuiLink> to track this title.
           </p>
         ) : lookup.error ? (
-          <p className="error-message m-0">{lookup.error}</p>
+          <Alert severity="error">{lookup.error}</Alert>
         ) : entry ? (
           <LibraryEntryEditor
             entry={entry}
@@ -54,11 +56,12 @@ function LibraryPanel({
           />
         ) : (
           <AddToListButton
-            className="primary-button w-full"
             entry={null}
             item={item}
             libraryReady
             onAdded={(added) => lookup.mutate(() => [added])}
+            size="medium"
+            variant="primary"
           />
         )}
       </div>
@@ -133,9 +136,9 @@ export function TitleDetailsPage() {
   }
   const backHref = category === 'game' ? '/games' : `/discover/${category}/recent`;
   const back = (
-    <Link className="rule-link mono-sm" to={backHref}>
+    <MuiLink className="mono-sm" component={Link} to={backHref} underline="always">
       Back to {categoryLabels[category]}
-    </Link>
+    </MuiLink>
   );
   const item = details.data;
   const hidden = blur(item?.adult) && !revealed;
@@ -153,14 +156,14 @@ export function TitleDetailsPage() {
                 ) : (
                   <>
                     This title is not available from its source, or it is adult content hidden by your{' '}
-                    <Link className="rule-link" to="/settings">content settings</Link>.
+                    <MuiLink component={Link} to="/settings" underline="always">content settings</MuiLink>.
                   </>
                 )}
               </p>
             </EmptyState>
           </div>
         ) : (
-          <p className="error-message mt-6 max-w-2xl">{details.error}</p>
+          <Alert className="mt-6 max-w-2xl" severity="error">{details.error}</Alert>
         )}
       </div>
     );
@@ -171,7 +174,7 @@ export function TitleDetailsPage() {
     <article className="page-enter">
       {back}
       {item.stale && (
-        <p className="notice mt-5">This source is unavailable. Showing cached details.</p>
+        <Alert className="mt-5" severity="info">This source is unavailable. Showing cached details.</Alert>
       )}
       {item.backdropUrl && (
         <div
@@ -194,13 +197,14 @@ export function TitleDetailsPage() {
             {blur(item.adult) && (
               <>
                 {' · '}
-                <button
-                  className="text-button mono-sm"
+                <Button
+                  className="mono-sm"
                   onClick={() => setRevealed((current) => !current)}
-                  type="button"
+                  size="small"
+                  variant="text"
                 >
                   {revealed ? 'hide artwork' : 'show artwork'}
-                </button>
+                </Button>
               </>
             )}
           </p>
@@ -241,18 +245,19 @@ export function TitleDetailsPage() {
           {item.trailers && item.trailers.length > 0 && (
             <div className="mt-6 flex flex-wrap gap-3">
               {item.trailers.map((trailer, index) => (
-                <a
-                  className={`${index === 0 ? 'primary-button' : 'secondary-button'} inline-flex gap-2`}
+                <Button
+                  className="gap-2"
                   href={trailer.url}
                   key={trailer.url}
-                  rel="noreferrer"
-                  target="_blank"
+                  LinkComponent="a"
+                  variant={index === 0 ? 'primary' : 'secondary'}
+                  {...{ rel: 'noreferrer', target: '_blank' }}
                 >
                   <svg aria-hidden="true" fill="currentColor" height="14" viewBox="0 0 24 24" width="14">
                     <path d="M7 4.5v15l12.5-7.5z" />
                   </svg>
                   {index === 0 ? 'Watch trailer' : trailer.name}
-                </a>
+                </Button>
               ))}
             </div>
           )}
@@ -297,12 +302,13 @@ export function TitleDetailsPage() {
                     {relationship.type === 'franchise' ? (
                       relationship.title
                     ) : (
-                      <Link
-                        className="rule-link"
+                      <MuiLink
+                        component={Link}
                         to={titleHref({ category: 'game', externalId: relationship.externalId, source: item.source })}
+                        underline="always"
                       >
                         {relationship.title}
-                      </Link>
+                      </MuiLink>
                     )}
                   </li>
                 ))}
diff --git a/app/frontend/src/pages/TrackGamesPage.tsx b/app/frontend/src/pages/TrackGamesPage.tsx
index 1b0f8a3..e76fa96 100644
--- a/app/frontend/src/pages/TrackGamesPage.tsx
+++ b/app/frontend/src/pages/TrackGamesPage.tsx
@@ -1,6 +1,9 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
+import MuiTextField from '@mui/material/TextField';
 import type { FormEvent } from 'react';
 import { Link, useSearchParams } from 'react-router';
-import { EmptyState, Pagination, Skeleton } from '@project-graphite/ui';
+import { Button, EmptyState, Pagination, Skeleton } from '@project-graphite/ui';
 import type { Page } from '../api';
 import { useAuth } from '../auth';
 import { countLabel, type CatalogResponse } from '../catalog';
@@ -23,13 +26,13 @@ function TrackedGames({ tracked }: { tracked: Resource<Page<LibraryEntry>> }) {
           <h2 className="mt-2 mb-0 text-2xl font-medium">Tracked games</h2>
         </div>
         {tracked.data && tracked.data.totalPages > 1 && (
-          <Link className="rule-link mono-sm" to="/library?category=game">
+          <MuiLink className="mono-sm" component={Link} to="/library?category=game" underline="always">
             View all {tracked.data.totalResults.toLocaleString()}
-          </Link>
+          </MuiLink>
         )}
       </div>
       {tracked.error ? (
-        <p className="error-message mt-5">{tracked.error}</p>
+        <Alert className="mt-5" severity="error">{tracked.error}</Alert>
       ) : !tracked.data ? (
         <div className="mt-6">
           <PosterGridSkeleton count={5} label="Loading tracked games" />
@@ -106,26 +109,31 @@ export function TrackGamesPage() {
         Find a game, choose its list, and record hours, completion and the platforms you play on.
       </p>
       <form className="mt-8 grid max-w-3xl gap-3 sm:grid-cols-[1fr_auto]" key={query} noValidate onSubmit={submit} role="search">
-        <input
-          aria-describedby={form.errors.query ? 'search-error' : undefined}
-          aria-invalid={form.errors.query ? true : undefined}
-          aria-label="Game title"
+        <MuiTextField
           defaultValue={query}
           name="query"
-          onInput={form.field('query').onInput}
           placeholder="Search games, or paste an IGDB or RAWG link"
+          size="small"
+          slotProps={{
+            htmlInput: {
+              'aria-describedby': form.errors.query ? 'search-error' : undefined,
+              'aria-invalid': form.errors.query ? true : undefined,
+              'aria-label': 'Game title',
+              onInput: form.field('query').onInput,
+            },
+          }}
           type="search"
         />
-        <button className="primary-button" disabled={search.opening} type="submit">
+        <Button disabled={search.opening} type="submit" variant="primary">
           {search.opening ? 'Opening…' : 'Search'}
-        </button>
+        </Button>
         {(form.errors.query || search.error) && (
-          <p className="error-message m-0 sm:col-span-2" id="search-error">
+          <Alert className="sm:col-span-2" id="search-error" severity="error">
             {form.errors.query || search.error}
-          </p>
+          </Alert>
         )}
       </form>
-      {results.error && <p className="error-message mt-6">{results.error}</p>}
+      {results.error && <Alert className="mt-6" severity="error">{results.error}</Alert>}
       {results.loading && (
         <div className="mt-10">
           <div className="mb-6 border-b border-line pb-4">
@@ -137,9 +145,9 @@ export function TrackGamesPage() {
       {results.data && (
         <section className="fade-in mt-10">
           {results.data.stale && (
-            <p className="notice mb-5">
+            <Alert className="mb-5" severity="info">
               The game source is temporarily unavailable. Showing the most recent cached result.
-            </p>
+            </Alert>
           )}
           <div className="mb-6 flex flex-wrap items-baseline justify-between gap-3 border-b border-line pb-4">
             <h2 className="m-0 text-xl font-medium">
diff --git a/app/frontend/src/pages/UnsubscribePage.tsx b/app/frontend/src/pages/UnsubscribePage.tsx
index c6213b8..ab0d8dd 100644
--- a/app/frontend/src/pages/UnsubscribePage.tsx
+++ b/app/frontend/src/pages/UnsubscribePage.tsx
@@ -1,6 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useState } from 'react';
 import { Link, useSearchParams } from 'react-router';
-import { errorMessage } from '@project-graphite/ui';
+import { Button, errorMessage } from '@project-graphite/ui';
 import { apiRequest } from '../api';
 import { categoryLabels, type CatalogCategory } from '../catalog';
 
@@ -49,15 +51,15 @@ export function UnsubscribePage() {
       ) : (
         <>
           <p className="mt-5 text-muted">Confirm to stop the emails this link belongs to.</p>
-          {error && <p className="error-message">{error}</p>}
-          <button className="primary-button mt-6" disabled={busy} onClick={() => void unsubscribe()} type="button">
+          {error && <Alert severity="error">{error}</Alert>}
+          <Button className="mt-6" disabled={busy} onClick={() => void unsubscribe()} variant="primary">
             {busy ? 'Unsubscribing…' : 'Unsubscribe'}
-          </button>
+          </Button>
         </>
       )}
       <p className="mt-6 text-sm text-muted">
         Signed in? Manage every email in{' '}
-        <Link className="rule-link" to="/settings/notifications">notification settings</Link>.
+        <MuiLink component={Link} to="/settings/notifications" underline="always">notification settings</MuiLink>.
       </p>
     </section>
   );
diff --git a/app/frontend/src/pages/VerifyPage.tsx b/app/frontend/src/pages/VerifyPage.tsx
index 36a83d2..9cea16f 100644
--- a/app/frontend/src/pages/VerifyPage.tsx
+++ b/app/frontend/src/pages/VerifyPage.tsx
@@ -1,6 +1,7 @@
+import Alert from '@mui/material/Alert';
 import { useState, type FormEvent } from 'react';
-import { Link, useSearchParams } from 'react-router';
-import { errorMessage, TextField } from '@project-graphite/ui';
+import { useSearchParams } from 'react-router';
+import { Button, errorMessage, TextField } from '@project-graphite/ui';
 import { useAuth } from '../auth';
 import { required, useFormErrors } from '../validation';
 
@@ -40,9 +41,9 @@ export function VerifyPage() {
         <p className="eyebrow">Email verified</p>
         <h1 className="page-title">Your email address is confirmed.</h1>
         {auth.user ? (
-          <Link className="primary-button mt-7 inline-flex" to="/settings/account">Back to settings</Link>
+          <Button className="mt-7" href="/settings/account" variant="primary">Back to settings</Button>
         ) : (
-          <Link className="primary-button mt-7 inline-flex" to="/login">Sign in</Link>
+          <Button className="mt-7" href="/login" variant="primary">Sign in</Button>
         )}
       </section>
     );
@@ -59,10 +60,10 @@ export function VerifyPage() {
           spellCheck={false}
           {...form.field('token')}
         />
-        {error && <p className="error-message">{error}</p>}
-        <button className="primary-button" disabled={busy} type="submit">
+        {error && <Alert severity="error">{error}</Alert>}
+        <Button disabled={busy} type="submit" variant="primary">
           {busy ? 'Verifying…' : 'Verify email'}
-        </button>
+        </Button>
       </form>
     </section>
   );
diff --git a/app/package-lock.json b/app/package-lock.json
index 25554bb..1a71793 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -19,7 +19,10 @@
       "name": "graphite-tracker-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.3.0/project-graphite-ui-0.3.0.tgz"
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
+        "@mui/material": "9.5.0",
+        "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v1.0.0/project-graphite-ui-1.0.0.tgz"
       },
       "devDependencies": {
         "@tailwindcss/vite": "4.3.3",
@@ -132,6 +135,145 @@
         }
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.9.tgz",
+      "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.10.tgz",
+      "integrity": "sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.10.tgz",
+      "integrity": "sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.9",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@borewit/text-codec": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@borewit/text-codec/-/text-codec-0.2.2.tgz",
@@ -180,6 +322,161 @@
         "@electric-sql/pglite": "0.4.3"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@inquirer/ansi": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-2.0.8.tgz",
@@ -528,7 +825,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -550,7 +846,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -560,14 +855,12 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
       "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -583,6 +876,213 @@
         "node": ">=8"
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.5.0.tgz",
+      "integrity": "sha512-PErEpl3Lp+1ZqWYKI7GQU8XSiciAFmLbUAZ7IoaUL598HLy1UAFuEUMEJu8yAS1v8vkXYzWprMVZzky4UwXoOA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.5.0.tgz",
+      "integrity": "sha512-QgqvdVjZoKxP8E8SBxYY6LrdV+kw00moXweZQWBbMMdifPKZAGfUaaXhGKIca6fjKnCL6HJIe/AWWCpqNvyHVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.5",
+        "@mui/core-downloads-tracker": "^9.5.0",
+        "@mui/system": "^9.5.0",
+        "@mui/types": "^9.5.0",
+        "@mui/utils": "^9.5.0",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.3.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^9.5.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.5.0.tgz",
+      "integrity": "sha512-UHZKySlr4ZJeA5HEhe/Tq1fhsR5573ViKYn7JV80dCVJtgqRQIplRSer1DHPg2Yi22llX7QRhgM0Vtrx4kZHSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.5",
+        "@mui/utils": "^9.5.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.5.0.tgz",
+      "integrity": "sha512-IX1ceHnZ0bJgzJRWO/Ayl4ME1rNmpWVYwV28yb089UAMR17rJkV1qfr7ApsWQXXPi1oi+2JapJrWQAiAnTlJHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.5.0.tgz",
+      "integrity": "sha512-OZuAwvoiaaHpvn0a540VH1DUwwmojJubGfNmO2g+nb2ybNDP4/gF7t7aA6AMduELSuJ5yxwlzyFvUO3CfLv1Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.5",
+        "@mui/private-theming": "^9.5.0",
+        "@mui/styled-engine": "^9.5.0",
+        "@mui/types": "^9.5.0",
+        "@mui/utils": "^9.5.0",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.5.0.tgz",
+      "integrity": "sha512-O0S6xS80qEQqW2CYNrd4GlBEQ1xpMOHZ5b4zO/DaLu6NZmtthM6smEg0Gz/u9gX5vL+8NB3EiBIxmxSCcG590Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.5"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.5.0.tgz",
+      "integrity": "sha512-8m0LfSgE2pj58znY3kZ+anwRKbnBkcu/7AJPA8L/77wEjN0QnpX4/zRAccyplp1VEUnMsUBADeTRin5Mkf7epA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.5",
+        "@mui/types": "^9.5.0",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nestjs/cli": {
       "version": "12.0.5",
       "resolved": "https://registry.npmjs.org/@nestjs/cli/-/cli-12.0.5.tgz",
@@ -1229,6 +1729,16 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@prisma/adapter-pg": {
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/@prisma/adapter-pg/-/adapter-pg-7.10.0.tgz",
@@ -1446,11 +1956,14 @@
       }
     },
     "node_modules/@project-graphite/ui": {
-      "version": "0.3.0",
-      "resolved": "https://github.com/project-graphite/graphite-ui/releases/download/v0.3.0/project-graphite-ui-0.3.0.tgz",
-      "integrity": "sha512-Lzpjzyla1y+LAgMtn3CBuL5Tn7x75iNyLn9KNP6o4CWvFsyJzfbIFwP0lso3mA8mpmVi65vmWrwWb5NVQU1e/A==",
+      "version": "1.0.0",
+      "resolved": "https://github.com/project-graphite/graphite-ui/releases/download/v1.0.0/project-graphite-ui-1.0.0.tgz",
+      "integrity": "sha512-tIiYecTBHErrrhMZCc54+FFngAZo3KnUHqnVrpuxvBPJ7JUqoYLXH358x8o3W4/fXED4dqrLZd+x7cRUnP2X/g==",
       "license": "MIT",
       "peerDependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@mui/material": "^9.5.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
       }
@@ -2462,6 +2975,12 @@
         "undici-types": "~8.9.0"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/passport": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.17.tgz",
@@ -2494,6 +3013,12 @@
         "@types/passport": "*"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.15.1",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.1.tgz",
@@ -2527,6 +3052,15 @@
         "@types/react": "^19.3.0"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
@@ -2872,6 +3406,21 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@@ -3021,6 +3570,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -3154,6 +3712,15 @@
         "node": ">= 12"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cluster-key-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
@@ -3215,6 +3782,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
     "node_modules/cookie": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
@@ -3267,6 +3840,31 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3489,6 +4087,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
@@ -3619,6 +4227,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -3674,6 +4291,18 @@
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "license": "MIT"
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -3938,6 +4567,12 @@
         "node": ">=20"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -4132,6 +4767,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -4188,6 +4838,22 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -4212,6 +4878,27 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
+    "node_modules/is-core-module": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.17.0.tgz",
+      "integrity": "sha512-J/vG0zBCbIKOQFfufSwyXdMrsohyJIUNkrnmo6WZGzoM7tr/lsbfW5b2BvisL6zsyMzK9UxV9L6c7AoFbyXHOA==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -4284,6 +4971,30 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -4620,6 +5331,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/load-esm": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/load-esm/-/load-esm-1.0.3.tgz",
@@ -4710,6 +5427,18 @@
       "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
       "license": "Apache-2.0"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru.min": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.5.tgz",
@@ -5211,6 +5940,36 @@
         }
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5265,6 +6024,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
     "node_modules/path-to-regexp": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
@@ -5275,6 +6040,15 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -5394,7 +6168,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -5551,6 +6324,23 @@
         }
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/proper-lockfile": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
@@ -5688,6 +6478,12 @@
         "react": "^19.3.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.3.1.tgz",
+      "integrity": "sha512-RRieF6IyxQBkcK6pP8xOHprLTPW6QjRkbGdImtqNme+/hYVwCZkLQLdlZGOhUqXwkS9IEynaGvPJtv6XB/cz0Q==",
+      "license": "MIT"
+    },
     "node_modules/react-router": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.4.0.tgz",
@@ -5711,6 +6507,22 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
@@ -5764,6 +6576,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resolve": {
+      "version": "1.22.13",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.13.tgz",
+      "integrity": "sha512-Dj/cW9zBV2aRj6XzCxuGIs3ESZKv02jixne3q6jFZYZ3/Tg09gHHviSMDL4kObh9pqSahdRHEnDoaP2gn8YLhA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.17.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
@@ -6246,6 +7088,24 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",