diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index 506c132..b07d5b4 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -9,6 +9,7 @@ const links = [
   { label: 'Contribute', url: '/contribute/' },
   { label: 'About', url: '/about/' },
   { label: 'API', url: '/about/#api' },
+  { label: 'Sitemap', url: '/sitemap/' },
 ];
 ---
 
diff --git a/src/components/ui/PageTree.astro b/src/components/ui/PageTree.astro
new file mode 100644
index 0000000..c195675
--- /dev/null
+++ b/src/components/ui/PageTree.astro
@@ -0,0 +1,75 @@
+---
+const { pages, depth = 1 } = Astro.props;
+---
+
+<ul class="page-tree" data-depth={depth} role="list">
+  {pages.map((page) => (
+    <li>
+      <a href={page.url}>
+        {page.label} {page.code && <code>{page.code}</code>}
+      </a>
+      {page.children?.length > 0 && <Astro.self pages={page.children} depth={depth + 1} />}
+    </li>
+  ))}
+</ul>
+
+<style is:global>
+  /* Global under .page-tree, like .matrix, so hundreds of links each skip a scoping attribute */
+  .page-tree {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    code {
+      margin-inline-start: var(--space-2xs);
+      color: var(--text-muted);
+      font-size: var(--text-xs);
+    }
+
+    &[data-depth='1'] {
+      display: grid;
+      gap: var(--space-lg);
+
+      > li > a {
+        color: var(--text);
+        font-size: var(--text-lg);
+        font-weight: 600;
+      }
+    }
+
+    &[data-depth='2'] {
+      columns: 14rem;
+      column-gap: var(--space-xl);
+      margin-block-start: var(--space-sm);
+
+      > li {
+        break-inside: avoid;
+      }
+
+      > li > a {
+        color: var(--text);
+        font-weight: 500;
+      }
+    }
+
+    &[data-depth='3'] {
+      margin-block: var(--space-2xs) var(--space-md);
+      padding-inline-start: var(--space-sm);
+      border-inline-start: 1px solid var(--border);
+      font-size: var(--text-sm);
+
+      > li {
+        padding-inline-start: var(--space-sm);
+        text-indent: calc(-1 * var(--space-sm));
+      }
+    }
+  }
+</style>
diff --git a/src/pages/sitemap.astro b/src/pages/sitemap.astro
new file mode 100644
index 0000000..c505b6b
--- /dev/null
+++ b/src/pages/sitemap.astro
@@ -0,0 +1,36 @@
+---
+import Base from '../components/layout/Base.astro';
+import PageHead from '../components/layout/PageHead.astro';
+import PageTree from '../components/ui/PageTree.astro';
+import { getModel } from '../lib/data/model.js';
+
+const { brands, devices, roms } = getModel();
+const pages = [
+  { label: 'Home', url: '/' },
+  {
+    label: 'Devices',
+    url: '/devices/',
+    children: brands.map((brand) => ({
+      label: brand.name,
+      url: brand.url,
+      children: brand.devices.map((device) => ({
+        label: device.name,
+        url: device.url,
+        code: device.codenames[0],
+      })),
+    })),
+  },
+  { label: 'ROMs', url: '/roms/', children: roms.map(({ name, url }) => ({ label: name, url })) },
+  { label: 'Contribute', url: '/contribute/' },
+  { label: 'About', url: '/about/' },
+];
+---
+
+<Base
+  title="Sitemap"
+  description={`Every page in one list: all ${devices.length} devices by brand, the ${roms.length} ROMs, and the rest of the site.`}
+  crumbs={[{ label: 'Sitemap', url: '/sitemap/' }]}
+>
+  <PageHead title="Sitemap" />
+  <PageTree pages={pages} />
+</Base>