diff --git a/sites/lab/pages/account/[platform].mjs b/sites/lab/pages/account/[platform].mjs
new file mode 100644
index 00000000000..a47580ec167
--- /dev/null
+++ b/sites/lab/pages/account/[platform].mjs
@@ -0,0 +1,84 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge, capitalize } from 'shared/utils.mjs'
+import { freeSewingConfig } from 'shared/config/freesewing.config.mjs'
+import { siteConfig } from 'site/site.config.mjs'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as platformNs } from 'shared/components/account/platform.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(platformNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicPlatform = dynamic(
+  () => import('shared/components/account/platform.mjs').then((mod) => mod.PlatformSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPage = ({ page, platform }) => (
+  <PageWrapper {...page} title={capitalize(platform)}>
+    <DynamicAuthWrapper>
+      <DynamicPlatform platform={platform} />
+    </DynamicAuthWrapper>
+  </PageWrapper>
+)
+
+export default AccountPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      platform: params.platform,
+      page: {
+        locale,
+        path: ['account', params.platform],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ *
+ * On this page, it is returning a truncated list of routes (think URLs) for all
+ * the mdx blog (markdown) content.
+ * That list comes from prebuild/blog-paths.mjs, which is built in the prebuild step
+ * and contains paths, titles, imageUrls, and intro for all blog posts.
+ *
+ * the fallback: 'blocking' property means that
+ * any pages that haven't been pre-generated
+ * will generate and cache the first time someone visits them
+ *
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => {
+  const paths = []
+  for (const platform of Object.keys(freeSewingConfig.account.fields.identities).filter(
+    (key) => key !== 'github'
+  )) {
+    for (const locale of siteConfig.languages) {
+      paths.push({ params: { platform }, locale })
+    }
+  }
+
+  return { paths, fallback: true }
+}
diff --git a/sites/lab/pages/account/apikeys/[id].mjs b/sites/lab/pages/account/apikeys/[id].mjs
new file mode 100644
index 00000000000..5f49b0173eb
--- /dev/null
+++ b/sites/lab/pages/account/apikeys/[id].mjs
@@ -0,0 +1,84 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Context
+import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+import { useState, useEffect, useContext } from 'react'
+import { useBackend } from 'shared/hooks/use-backend.mjs'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as apikeysNs } from 'shared/components/account/apikeys.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(apikeysNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicApikey = dynamic(
+  () => import('shared/components/account/apikeys.mjs').then((mod) => mod.Apikey),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const ApikeyPage = ({ page, id }) => {
+  const { t } = useTranslation(ns)
+  const backend = useBackend()
+  const { setLoadingStatus } = useContext(LoadingStatusContext)
+
+  const [apikey, setApikey] = useState()
+
+  useEffect(() => {
+    const getApikey = async () => {
+      const result = await backend.getApikey(id)
+      if (result.success) setApikey(result.data.apikey)
+      else setLoadingStatus([false])
+    }
+    getApikey()
+  }, [id])
+
+  return (
+    <PageWrapper {...page} title={`${t('apikeys')}: ${apikey?.name}`}>
+      <DynamicAuthWrapper>
+        <DynamicApikey apikey={apikey} t={t} />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default ApikeyPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      id: params.id,
+      page: {
+        locale,
+        path: ['account', 'apikeys', params.id],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => ({ paths: [], fallback: true })
diff --git a/sites/lab/pages/account/apikeys/index.mjs b/sites/lab/pages/account/apikeys/index.mjs
new file mode 100644
index 00000000000..f1c346f8e10
--- /dev/null
+++ b/sites/lab/pages/account/apikeys/index.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as apikeysNs } from 'shared/components/account/apikeys.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(apikeysNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicApikeys = dynamic(
+  () => import('shared/components/account/apikeys.mjs').then((mod) => mod.Apikeys),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountApikeysPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('apikeys')}>
+      <DynamicAuthWrapper>
+        <DynamicApikeys />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountApikeysPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'apikeys'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/bio.mjs b/sites/lab/pages/account/bio.mjs
new file mode 100644
index 00000000000..de1459d45d2
--- /dev/null
+++ b/sites/lab/pages/account/bio.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as bioNs } from 'shared/components/account/bio.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(bioNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicBio = dynamic(
+  () => import('shared/components/account/bio.mjs').then((mod) => mod.BioSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountBioPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('bio')}>
+      <DynamicAuthWrapper>
+        <DynamicBio title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountBioPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'bio'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/bookmarks/[id].mjs b/sites/lab/pages/account/bookmarks/[id].mjs
new file mode 100644
index 00000000000..1b36edc05af
--- /dev/null
+++ b/sites/lab/pages/account/bookmarks/[id].mjs
@@ -0,0 +1,84 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Context
+import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+import { useState, useEffect, useContext } from 'react'
+import { useBackend } from 'shared/hooks/use-backend.mjs'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as bookmarksNs } from 'shared/components/account/bookmarks.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(bookmarksNs, authNs, pageNs, 'status')
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicBookmark = dynamic(
+  () => import('shared/components/account/bookmarks.mjs').then((mod) => mod.Bookmark),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const BookmarkPage = ({ page, id }) => {
+  const { t } = useTranslation(ns)
+  const backend = useBackend()
+  const { setLoadingStatus } = useContext(LoadingStatusContext)
+
+  const [bookmark, setBookmark] = useState()
+
+  useEffect(() => {
+    const getBookmark = async () => {
+      const result = await backend.getBookmark(id)
+      if (result.success) setBookmark(result.data.bookmark)
+      else setLoadingStatus([false])
+    }
+    getBookmark()
+  }, [id])
+
+  return (
+    <PageWrapper {...page} title={`${t('bookmarks')}: ${bookmark?.title}`}>
+      <DynamicAuthWrapper>
+        <DynamicBookmark bookmark={bookmark} />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default BookmarkPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      id: params.id,
+      page: {
+        locale,
+        path: ['account', 'bookmarks', params.id],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => ({ paths: [], fallback: true })
diff --git a/sites/lab/pages/account/bookmarks/index.mjs b/sites/lab/pages/account/bookmarks/index.mjs
new file mode 100644
index 00000000000..73cd278a9a8
--- /dev/null
+++ b/sites/lab/pages/account/bookmarks/index.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as bookmarksNs } from 'shared/components/account/bookmarks.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(bookmarksNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicBookmarks = dynamic(
+  () => import('shared/components/account/bookmarks.mjs').then((mod) => mod.Bookmarks),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountBookmarksPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('bookmarks')}>
+      <DynamicAuthWrapper>
+        <DynamicBookmarks />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountBookmarksPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'bookmarks'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/compare.mjs b/sites/lab/pages/account/compare.mjs
new file mode 100644
index 00000000000..4f7d08d4de4
--- /dev/null
+++ b/sites/lab/pages/account/compare.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as compareNs } from 'shared/components/account/compare.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(compareNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicCompare = dynamic(
+  () => import('shared/components/account/compare.mjs').then((mod) => mod.CompareSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountComparePage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('compare')}>
+      <DynamicAuthWrapper>
+        <DynamicCompare title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountComparePage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'compare'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/consent.mjs b/sites/lab/pages/account/consent.mjs
new file mode 100644
index 00000000000..23e7c00415c
--- /dev/null
+++ b/sites/lab/pages/account/consent.mjs
@@ -0,0 +1,52 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as consentNs } from 'shared/components/account/consent.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...consentNs, ...authNs, ...pageNs])]
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicConsent = dynamic(
+  () => import('shared/components/account/consent.mjs').then((mod) => mod.ConsentSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountConsentPage = ({ page }) => (
+  <PageWrapper {...page}>
+    <DynamicAuthWrapper>
+      <DynamicConsent title />
+    </DynamicAuthWrapper>
+  </PageWrapper>
+)
+
+export default AccountConsentPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['account', 'consent'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/control.mjs b/sites/lab/pages/account/control.mjs
new file mode 100644
index 00000000000..a3e598f5bdf
--- /dev/null
+++ b/sites/lab/pages/account/control.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as controlNs } from 'shared/components/account/control.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(controlNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicControl = dynamic(
+  () => import('shared/components/account/control.mjs').then((mod) => mod.ControlSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('control')}>
+      <DynamicAuthWrapper>
+        <DynamicControl title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'control'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/email.mjs b/sites/lab/pages/account/email.mjs
new file mode 100644
index 00000000000..38443b2e029
--- /dev/null
+++ b/sites/lab/pages/account/email.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as emailNs } from 'shared/components/account/email.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(emailNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicEmail = dynamic(
+  () => import('shared/components/account/email.mjs').then((mod) => mod.EmailSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountEmailPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('email')}>
+      <DynamicAuthWrapper>
+        <DynamicEmail title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountEmailPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'email'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/export.mjs b/sites/lab/pages/account/export.mjs
new file mode 100644
index 00000000000..af4eeea480d
--- /dev/null
+++ b/sites/lab/pages/account/export.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as reloadNs } from 'shared/components/account/reload.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(reloadNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicExport = dynamic(
+  () => import('shared/components/account/export.mjs').then((mod) => mod.ExportAccount),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountExportPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('export')}>
+      <DynamicAuthWrapper>
+        <DynamicExport title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountExportPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'export'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/github.mjs b/sites/lab/pages/account/github.mjs
new file mode 100644
index 00000000000..5976fc41c7c
--- /dev/null
+++ b/sites/lab/pages/account/github.mjs
@@ -0,0 +1,53 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as githubNs } from 'shared/components/account/github.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(githubNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicGithub = dynamic(
+  () => import('shared/components/account/github.mjs').then((mod) => mod.GithubSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPage = ({ page }) => (
+  <PageWrapper {...page} title="GitHub">
+    <DynamicAuthWrapper>
+      <DynamicGithub title />
+    </DynamicAuthWrapper>
+  </PageWrapper>
+)
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'github'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/img.mjs b/sites/lab/pages/account/img.mjs
new file mode 100644
index 00000000000..971fad057e3
--- /dev/null
+++ b/sites/lab/pages/account/img.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as imgNs } from 'shared/components/account/img.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(imgNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicImg = dynamic(
+  () => import('shared/components/account/img.mjs').then((mod) => mod.ImgSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} t={t('img')}>
+      <DynamicAuthWrapper>
+        <DynamicImg title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'img'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/index.mjs b/sites/lab/pages/account/index.mjs
new file mode 100644
index 00000000000..d3bb8cac2c0
--- /dev/null
+++ b/sites/lab/pages/account/index.mjs
@@ -0,0 +1,52 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge('account', 'status', pageNs, authNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicAccountOverview = dynamic(
+  () => import('shared/components/account/overview.mjs').then((mod) => mod.AccountOverview),
+  { ssr: false }
+)
+
+const AccountIndexPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('yourAccount')}>
+      <DynamicAuthWrapper>
+        <DynamicAccountOverview />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountIndexPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/language.mjs b/sites/lab/pages/account/language.mjs
new file mode 100644
index 00000000000..136ea77c763
--- /dev/null
+++ b/sites/lab/pages/account/language.mjs
@@ -0,0 +1,66 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+import { siteConfig } from 'site/site.config.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as languageNs } from 'shared/components/account/language.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(languageNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicLanguage = dynamic(
+  () => import('shared/components/account/language.mjs').then((mod) => mod.LanguageSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountLanguagePage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('account:language')}>
+      <DynamicAuthWrapper>
+        <DynamicLanguage title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountLanguagePage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      // We are loading all languages here so we can show each language in its own language
+      ...(await serverSideTranslations(
+        locale,
+        ns,
+        null,
+        siteConfig.languages.filter((lang) => lang !== locale)
+      )),
+      page: {
+        locale,
+        path: ['account', 'language'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/mfa.mjs b/sites/lab/pages/account/mfa.mjs
new file mode 100644
index 00000000000..bcebe204970
--- /dev/null
+++ b/sites/lab/pages/account/mfa.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as mfaNs } from 'shared/components/account/mfa.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(mfaNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicMfa = dynamic(
+  () => import('shared/components/account/mfa.mjs').then((mod) => mod.MfaSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountMfaPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('mfa')}>
+      <DynamicAuthWrapper>
+        <DynamicMfa title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountMfaPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'mfa'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/newsletter.mjs b/sites/lab/pages/account/newsletter.mjs
new file mode 100644
index 00000000000..cc0b5c65566
--- /dev/null
+++ b/sites/lab/pages/account/newsletter.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as newsletterNs } from 'shared/components/account/newsletter.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(newsletterNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicNewsletter = dynamic(
+  () => import('shared/components/account/newsletter.mjs').then((mod) => mod.NewsletterSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountNewsletterPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('newsletter')}>
+      <DynamicAuthWrapper>
+        <DynamicNewsletter title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountNewsletterPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'newsletter'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/password.mjs b/sites/lab/pages/account/password.mjs
new file mode 100644
index 00000000000..d9cb5e98f36
--- /dev/null
+++ b/sites/lab/pages/account/password.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as passwordNs } from 'shared/components/account/password.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(passwordNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicPassword = dynamic(
+  () => import('shared/components/account/password.mjs').then((mod) => mod.PasswordSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPasswordPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('password')}>
+      <DynamicAuthWrapper>
+        <DynamicPassword title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPasswordPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'password'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/patterns/[id].mjs b/sites/lab/pages/account/patterns/[id].mjs
new file mode 100644
index 00000000000..c518cea8800
--- /dev/null
+++ b/sites/lab/pages/account/patterns/[id].mjs
@@ -0,0 +1,67 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as patternsNs } from 'shared/components/account/patterns.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(patternsNs, authNs, pageNs, 'status')
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicPattern = dynamic(
+  () => import('shared/components/account/patterns.mjs').then((mod) => mod.Pattern),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const PatternPage = ({ page, id }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={`${t('patterns')}: #${id}`}>
+      <DynamicAuthWrapper>
+        <DynamicPattern id={id} />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default PatternPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      id: params.id,
+      page: {
+        locale,
+        path: ['account', 'patterns', params.id],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => ({ paths: [], fallback: true })
diff --git a/sites/lab/pages/account/patterns/index.mjs b/sites/lab/pages/account/patterns/index.mjs
new file mode 100644
index 00000000000..4665d61ee04
--- /dev/null
+++ b/sites/lab/pages/account/patterns/index.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as setsNs } from 'shared/components/account/sets.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(setsNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicPatterns = dynamic(
+  () => import('shared/components/account/patterns.mjs').then((mod) => mod.Patterns),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountSetsPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('patterns')}>
+      <DynamicAuthWrapper>
+        <DynamicPatterns />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountSetsPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'patterns'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/privacy.mjs b/sites/lab/pages/account/privacy.mjs
new file mode 100644
index 00000000000..fa7e4059823
--- /dev/null
+++ b/sites/lab/pages/account/privacy.mjs
@@ -0,0 +1,7 @@
+/*
+ * This `/account/privacy` page is merely an alias for the `/account/consent` page
+ */
+import Page, { getStaticProps as gsp } from './consent.mjs'
+
+export const getStaticProps = gsp
+export default Page
diff --git a/sites/lab/pages/account/reload.mjs b/sites/lab/pages/account/reload.mjs
new file mode 100644
index 00000000000..f96685d5336
--- /dev/null
+++ b/sites/lab/pages/account/reload.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as reloadNs } from 'shared/components/account/reload.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(reloadNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicReload = dynamic(
+  () => import('shared/components/account/reload.mjs').then((mod) => mod.ReloadAccount),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountReloadPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('reload')}>
+      <DynamicAuthWrapper>
+        <DynamicReload title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountReloadPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'reload'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/remove.mjs b/sites/lab/pages/account/remove.mjs
new file mode 100644
index 00000000000..173b27257ae
--- /dev/null
+++ b/sites/lab/pages/account/remove.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as reloadNs } from 'shared/components/account/reload.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(reloadNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicRemove = dynamic(
+  () => import('shared/components/account/remove.mjs').then((mod) => mod.RemoveAccount),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountRemovePage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('remove')}>
+      <DynamicAuthWrapper>
+        <DynamicRemove />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountRemovePage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'remove'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/restrict.mjs b/sites/lab/pages/account/restrict.mjs
new file mode 100644
index 00000000000..84f3cb3cd90
--- /dev/null
+++ b/sites/lab/pages/account/restrict.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as reloadNs } from 'shared/components/account/reload.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(reloadNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicRestrict = dynamic(
+  () => import('shared/components/account/restrict.mjs').then((mod) => mod.RestrictAccount),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountRestrictPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('restrict')}>
+      <DynamicAuthWrapper>
+        <DynamicRestrict />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountRestrictPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'restrict'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/sets/[id].mjs b/sites/lab/pages/account/sets/[id].mjs
new file mode 100644
index 00000000000..bf9302391af
--- /dev/null
+++ b/sites/lab/pages/account/sets/[id].mjs
@@ -0,0 +1,67 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as setsNs } from 'shared/components/account/sets.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(setsNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicSet = dynamic(
+  () => import('shared/components/account/sets.mjs').then((mod) => mod.Mset),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const SetPage = ({ page, id }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={`${t('sets')}: #${id}`}>
+      <DynamicAuthWrapper>
+        <DynamicSet id={id} />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default SetPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      id: params.id,
+      page: {
+        locale,
+        path: ['account', 'sets', params.id],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => ({ paths: [], fallback: true })
diff --git a/sites/lab/pages/account/sets/index.mjs b/sites/lab/pages/account/sets/index.mjs
new file mode 100644
index 00000000000..5c79ea23be9
--- /dev/null
+++ b/sites/lab/pages/account/sets/index.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as setsNs } from 'shared/components/account/bookmarks.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(setsNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicSets = dynamic(
+  () => import('shared/components/account/sets.mjs').then((mod) => mod.Sets),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountSetsPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('sets')}>
+      <DynamicAuthWrapper>
+        <DynamicSets />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountSetsPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'bookmarks'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/units.mjs b/sites/lab/pages/account/units.mjs
new file mode 100644
index 00000000000..6cc5d2f7b53
--- /dev/null
+++ b/sites/lab/pages/account/units.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as unitsNs } from 'shared/components/account/imperial.mjs'
+
+// Translation namespaces used on this page
+const namespaces = nsMerge(unitsNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicImperial = dynamic(
+  () => import('shared/components/account/imperial.mjs').then((mod) => mod.ImperialSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountUnitsPage = ({ page }) => {
+  const { t } = useTranslation(namespaces)
+
+  return (
+    <PageWrapper {...page} title={t('account:units')}>
+      <DynamicAuthWrapper>
+        <DynamicImperial title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountUnitsPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['account', 'units'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/account/username.mjs b/sites/lab/pages/account/username.mjs
new file mode 100644
index 00000000000..aeadc56e3c4
--- /dev/null
+++ b/sites/lab/pages/account/username.mjs
@@ -0,0 +1,59 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as usernameNs } from 'shared/components/account/username.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(usernameNs, authNs, pageNs)
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicUsername = dynamic(
+  () => import('shared/components/account/username.mjs').then((mod) => mod.UsernameSettings),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const AccountPage = ({ page }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={t('username')}>
+      <DynamicAuthWrapper>
+        <DynamicUsername title />
+      </DynamicAuthWrapper>
+    </PageWrapper>
+  )
+}
+
+export default AccountPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        locale,
+        path: ['account', 'username'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/designs/index.mjs b/sites/lab/pages/designs/index.mjs
new file mode 100644
index 00000000000..e49aa841202
--- /dev/null
+++ b/sites/lab/pages/designs/index.mjs
@@ -0,0 +1,34 @@
+// Dependencies
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { DesignPicker, ns as designNs } from 'shared/components/designs/design-picker.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...designNs, ...pageNs])]
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const DesignsPage = ({ page }) => (
+  <PageWrapper {...page}>
+    <DesignPicker />
+  </PageWrapper>
+)
+
+export default DesignsPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['designs'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/designs/tags/[tag].mjs b/sites/lab/pages/designs/tags/[tag].mjs
new file mode 100644
index 00000000000..67d93f29bd3
--- /dev/null
+++ b/sites/lab/pages/designs/tags/[tag].mjs
@@ -0,0 +1,61 @@
+// Dependencies
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { DesignList, ns as designNs } from 'shared/components/designs/design-list.mjs'
+import { tags } from 'shared/config/designs.mjs'
+import { siteConfig } from 'site/site.config.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...designNs, ...pageNs])]
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const DesignsPage = ({ page }) => {
+  return (
+    <PageWrapper {...page}>
+      <DesignList tag={page.tag} />
+    </PageWrapper>
+  )
+}
+
+export default DesignsPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['designs', 'tags', params.tag],
+        tag: params.tag,
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ *
+ * On this page, it is returning a list of routes (think URLs) for all
+ * the mdx (markdown) content.
+ *
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export async function getStaticPaths() {
+  const enPaths = [...tags].map((tag) => `/designs/tags/${tag}`)
+  const paths = [...enPaths]
+  for (const lang of siteConfig.languages.filter((lang) => lang !== 'en')) {
+    paths.push(...enPaths.map((path) => `/${lang}${path}`))
+  }
+
+  return {
+    paths,
+    fallback: 'blocking',
+  }
+}
diff --git a/sites/lab/pages/designs/tags/index.mjs b/sites/lab/pages/designs/tags/index.mjs
new file mode 100644
index 00000000000..ae9e38772ad
--- /dev/null
+++ b/sites/lab/pages/designs/tags/index.mjs
@@ -0,0 +1,39 @@
+// Dependencies
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { tags } from 'shared/config/designs.mjs'
+import { DesignTag } from 'shared/components/designs/tag.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set(['tags', 'design', 'designs', ...pageNs])]
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const DesignsPage = ({ page }) => (
+  <PageWrapper {...page}>
+    <div className="flex flex-row flex-wrap gap-2">
+      {tags.sort().map((tag) => (
+        <DesignTag tag={tag} key={tag} />
+      ))}
+    </div>
+  </PageWrapper>
+)
+
+export default DesignsPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['designs', 'tags'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/patterns/[id]/edit.mjs b/sites/lab/pages/patterns/[id]/edit.mjs
new file mode 100644
index 00000000000..6b899ead241
--- /dev/null
+++ b/sites/lab/pages/patterns/[id]/edit.mjs
@@ -0,0 +1,75 @@
+// Hooks
+import { useEffect, useState } from 'react'
+import { useBackend } from 'shared/hooks/use-backend.mjs'
+import { useDesign } from 'shared/hooks/use-design.mjs'
+// Dependencies
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { Workbench, ns as wbNs } from 'shared/components/workbench/new.mjs'
+import { WorkbenchLayout } from 'site/components/layouts/workbench.mjs'
+import { Null } from 'shared/components/null.mjs'
+import { DynamicOrgDocs as DynamicDocs } from 'site/components/dynamic-org-docs.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set(['aaron', ...wbNs, ...pageNs])]
+
+const EditPatternPage = ({ page, id }) => {
+  // State
+  const [pattern, setPattern] = useState(false)
+
+  // Hooks
+  const backend = useBackend()
+  const Design = useDesign(pattern?.design)
+
+  // Effect
+  useEffect(() => {
+    const getPattern = async () => {
+      const result = await backend.getPattern(id)
+      if (result.success) setPattern(result.data.pattern)
+    }
+    // Guard against loops as the backend object is recreated on each render
+    if (pattern === false) getPattern()
+    else if (pattern.id && pattern.id !== id) getPattern()
+  }, [id, pattern, backend])
+
+  const baseSettings = pattern
+    ? {
+        ...pattern.settings,
+        measurements: pattern.set ? pattern.set.measies : pattern.cset.measies,
+      }
+    : null
+
+  return (
+    <PageWrapper {...page} layout={WorkbenchLayout} header={Null}>
+      <Workbench
+        design={pattern?.design}
+        from={{ type: 'pattern', data: pattern }}
+        {...{ Design, DynamicDocs, baseSettings }}
+      />
+    </PageWrapper>
+  )
+}
+
+export default EditPatternPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      id: Number(params.id),
+      page: {
+        locale,
+        path: ['new', 'pattern', 'aaron', 'set', params.id],
+        title: '',
+      },
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: true,
+  }
+}
diff --git a/sites/lab/pages/patterns/[id]/index.mjs b/sites/lab/pages/patterns/[id]/index.mjs
new file mode 100644
index 00000000000..db3051057ee
--- /dev/null
+++ b/sites/lab/pages/patterns/[id]/index.mjs
@@ -0,0 +1,60 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as patternsNs } from 'shared/components/account/patterns.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(patternsNs, authNs, pageNs, 'status')
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicPattern = dynamic(
+  () => import('shared/components/account/patterns.mjs').then((mod) => mod.Pattern),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const PatternPage = ({ page, id }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={`${t('patterns')}: #${id}`}>
+      <DynamicPattern id={id} publicOnly />
+    </PageWrapper>
+  )
+}
+
+export default PatternPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      id: params.id,
+      page: {
+        locale,
+        path: ['account', 'patterns', params.id],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => ({ paths: [], fallback: true })
diff --git a/sites/lab/pages/patterns/index.mjs b/sites/lab/pages/patterns/index.mjs
new file mode 100644
index 00000000000..b74a5880e31
--- /dev/null
+++ b/sites/lab/pages/patterns/index.mjs
@@ -0,0 +1,53 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as setsNs } from 'shared/components/account/sets.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...setsNs, ...authNs, ...pageNs])]
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+const DynamicPatterns = dynamic(
+  () => import('shared/components/account/patterns.mjs').then((mod) => mod.Patterns),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const PatternsIndexPage = ({ page }) => (
+  <PageWrapper {...page}>
+    <DynamicAuthWrapper>
+      <DynamicPatterns standAlone={1} />
+    </DynamicAuthWrapper>
+  </PageWrapper>
+)
+
+export default PatternsIndexPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['patterns'],
+      },
+    },
+  }
+}
diff --git a/sites/lab/pages/sets/[id].mjs b/sites/lab/pages/sets/[id].mjs
new file mode 100644
index 00000000000..79b0643bfb0
--- /dev/null
+++ b/sites/lab/pages/sets/[id].mjs
@@ -0,0 +1,55 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { ns as setsNs } from 'shared/components/account/sets.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(setsNs, pageNs)
+
+const DynamicSet = dynamic(
+  () => import('shared/components/account/sets.mjs').then((mod) => mod.Mset),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const SetPage = ({ page, id }) => {
+  const { t } = useTranslation(ns)
+
+  return (
+    <PageWrapper {...page} title={`${t('sets')}: #${id}`}>
+      <DynamicSet id={id} publicOnly />
+    </PageWrapper>
+  )
+}
+
+export default SetPage
+
+export async function getStaticProps({ locale, params }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      id: params.id,
+      page: {
+        locale,
+        path: ['sets', params.id],
+      },
+    },
+  }
+}
+
+/*
+ * getStaticPaths() is used to specify for which routes (think URLs)
+ * this page should be used to generate the result.
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export const getStaticPaths = async () => ({ paths: [], fallback: false })
diff --git a/sites/lab/pages/signup/index.mjs b/sites/lab/pages/signup/index.mjs
new file mode 100644
index 00000000000..470519a6e76
--- /dev/null
+++ b/sites/lab/pages/signup/index.mjs
@@ -0,0 +1,35 @@
+// Dependencies
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { nsMerge } from 'shared/utils.mjs'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { BareLayout } from 'site/components/layouts/bare.mjs'
+import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
+
+// Translation namespaces used on this page
+const ns = nsMerge(susiNs, pageNs)
+
+const SignUpPage = ({ page }) => {
+  return (
+    <PageWrapper {...page} layout={BareLayout}>
+      <div className="flex flex-col items-center h-screen justify-center text-base-content px-4">
+        <div className="max-w-2xl">
+          <SignUp />
+        </div>
+      </div>
+    </PageWrapper>
+  )
+}
+
+export default SignUpPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ns)),
+      page: {
+        path: ['signup'],
+      },
+    },
+  }
+}