diff --git a/website/src/pages/archive/[...page].astro b/website/src/pages/archive/[...page].astro
new file mode 100644
index 00000000..142f9c5a
--- /dev/null
+++ b/website/src/pages/archive/[...page].astro
@@ -0,0 +1,39 @@
+---
+import DailyEmailForm from '../../components/DailyEmailForm.astro'
+import Layout from '../../layouts/DailyEmailLayout.astro'
+
+export async function getStaticPaths({ paginate }) {
+  const emails = await Astro.glob('../../daily-emails/*.md')
+  const sortedEmails = emails
+    .sort((a, b) =>
+      new Date(b.frontmatter.pubDate).valueOf() -
+      new Date(a.frontmatter.pubDate).valueOf()
+    )
+
+  return paginate(sortedEmails, { pageSize: 20 })
+}
+
+const { page } = Astro.props;
+---
+
+<Layout title="Daily emails archive">
+  <ul>
+    {page.data.map(email => (
+      <li>
+        <a href={`/${email.frontmatter.permalink}`}>
+          {new Date(email.frontmatter.pubDate).toLocaleDateString('en-GB', {
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+          })} -
+          {email.frontmatter.title}
+        </a>
+      </li>
+    ))}
+  </ul>
+
+  <nav class="mt-12 flex justify-center">
+    { page.url.prev ? <a class="px-2" href={ page.url.prev }>&larr; Newer emails</a> : null }
+    { page.url.next ? <a class="px-2" href={ page.url.next }>Older emails &rarr;</a> : null }
+  </nav>
+</Layout>
diff --git a/website/src/pages/archive/[...slug].astro b/website/src/pages/archive/[...slug].astro
deleted file mode 100644
index 73bc6b30..00000000
--- a/website/src/pages/archive/[...slug].astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-import DailyEmailForm from '../../components/DailyEmailForm.astro'
-import Layout from '../../layouts/DailyEmailLayout.astro'
-
-export async function getStaticPaths() {
-  const emails = await Astro.glob('../../daily-emails/*.md')
-
-  return emails.map(email => {
-    return {
-      params: {
-        slug: email.frontmatter.permalink
-          .replace('archive/', '')
-          .replace('\n', ''),
-      },
-      props: {
-        email,
-      } 
-    } 
-  })
-}
-
-const { Content } = Astro.props.email
-const { title } = Astro.props.email.frontmatter
----
-
-<Layout title={title}>
-  <Content />
-</Layout>
diff --git a/website/src/pages/archive/index.astro b/website/src/pages/archive/index.astro
deleted file mode 100644
index e0041d95..00000000
--- a/website/src/pages/archive/index.astro
+++ /dev/null
@@ -1,28 +0,0 @@
----
-import PageLayout from '../../layouts/PageLayout.astro'
-
-const emails = await Astro.glob('../../daily-emails/*.md');
-
-const sortedEmails = emails
-  .sort((a, b) =>
-    new Date(b.frontmatter.pubDate).valueOf() -
-    new Date(a.frontmatter.pubDate).valueOf()
-  )
----
-
-<PageLayout title="Daily emails archive">
-  <ul>
-    {sortedEmails.map(email => (
-      <li>
-        <a href={`/${email.frontmatter.permalink}`}>
-          {new Date(email.frontmatter.pubDate).toLocaleDateString('en-GB', {
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric',
-          })} -
-          {email.frontmatter.title}
-        </a>
-      </li>
-    ))}
-  </ul>
-</PageLayout>