diff --git a/website/src/pages/archive/[...page].astro b/website/src/pages/archive/[...page].astro
new file mode 100644
index 00000000..2c916e36
--- /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 email 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="flex justify-center pt-10 space-x-6">
+      { page.url.prev ? <a href={ page.url.prev }>&larr; Newer emails</a> : null }
+      { page.url.next ? <a 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/[year]/[month]/[day]/[slug].astro b/website/src/pages/archive/[year]/[month]/[day]/[slug].astro
new file mode 100644
index 00000000..2f8bb2bc
--- /dev/null
+++ b/website/src/pages/archive/[year]/[month]/[day]/[slug].astro
@@ -0,0 +1,36 @@
+---
+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 => {
+    const pubDate = email.frontmatter.pubDate.split('T')[0].split('-')
+
+    const slug = email.frontmatter.permalink
+      .replace('archive/', '')
+      .replace('\n', '')
+      .split('/')[3]
+
+    return {
+      params: {
+        day: pubDate[2],
+        month: pubDate[1],
+        slug, 
+        year: pubDate[0],
+      },
+      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>