diff --git a/packages/freesewing.org/pages/[...mdxslug].js b/packages/freesewing.org/pages/[...mdxslug].js
index 27f390155ba..be94a300358 100644
--- a/packages/freesewing.org/pages/[...mdxslug].js
+++ b/packages/freesewing.org/pages/[...mdxslug].js
@@ -1,10 +1,13 @@
-import Page from 'shared/components/wrappers/page.js'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import mdxMeta from 'site/prebuild/mdx.en.js'
 import mdxLoader from 'shared/mdx/loader'
 import MdxWrapper from 'shared/components/wrappers/mdx'
+import TocWrapper from 'shared/components/wrappers/toc'
 import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import components from 'site/components/mdx/index.js'
 
 const MdxPage = props => {
 
@@ -27,16 +30,24 @@ const MdxPage = props => {
         <meta property="og:type" content="article" key='type' />
         <meta property="og:description" content={props.intro} key='type' />
         <meta property="og:article:author" content='Joost De Cock' key='author' />
-        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/org/${props.page.slug}`} key='image' />
+        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} key='image' />
         <meta property="og:image:type" content="image/png" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
-        <meta property="og:url" content={`https://freesewing.org/${props.page.slug}`} key='url' />
+        <meta property="og:url" content={`https://freesewing.dev/${props.page.slug}`} key='url' />
         <meta property="og:locale" content="en_US" key='locale' />
-        <meta property="og:site_name" content="freesewing.org" key='site' />
+        <meta property="og:site_name" content="freesewing.dev" key='site' />
       </Head>
-      <MdxWrapper mdx={props.mdx} app={app}/>
-      <HelpUs mdx slug={`/${props.page.slug}`} />
+      <div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end px-8 xl:px-0">
+        {props.toc && (
+          <div className="mb-8 px-0 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
+            <TocWrapper toc={props.toc} app={app}/>
+          </div>
+        )}
+        <div className="px-0 xl:pl-8 2xl:pl-16">
+          <MdxWrapper mdx={props.mdx} app={app} components={components} />
+        </div>
+      </div>
     </Page>
   )
 }
@@ -58,13 +69,14 @@ export default MdxPage
  *
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
-export async function getStaticProps({ params }) {
+export async function getStaticProps({ params, locale }) {
 
-  const { mdx, intro } = await mdxLoader('en', 'org', params.mdxslug.join('/'))
+  const { mdx, intro, toc } = await mdxLoader('en', 'org', params.mdxslug.join('/'))
 
   return {
     props: {
       mdx,
+      toc,
       intro: intro.join(' '),
       page: {
         slug: params.mdxslug.join('/'),
@@ -72,7 +84,8 @@ export async function getStaticProps({ params }) {
         slugArray: params.mdxslug,
         ...mdxMeta[params.mdxslug.join('/')],
       },
-      params
+      params,
+      ...(await serverSideTranslations('en')),
     }
   }
 }
@@ -94,3 +107,4 @@ export async function getStaticPaths() {
     fallback: false
   }
 }
+
diff --git a/packages/freesewing.org/pages/docs/[...mdxslug].js b/packages/freesewing.org/pages/docs/[...mdxslug].js
deleted file mode 100644
index b6169dbce07..00000000000
--- a/packages/freesewing.org/pages/docs/[...mdxslug].js
+++ /dev/null
@@ -1,110 +0,0 @@
-import Page from 'site/components/wrappers/page.js'
-import useApp from 'site/hooks/useApp.js'
-import mdxMeta from 'site/prebuild/mdx.en.js'
-import mdxLoader from 'shared/mdx/loader'
-import MdxWrapper from 'shared/components/wrappers/mdx'
-import TocWrapper from 'shared/components/wrappers/toc'
-import Head from 'next/head'
-import HelpUs from 'site/components/help-us.js'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-
-const MdxPage = props => {
-
-  // This hook is used for shared code and global state
-  const app = useApp()
-
-  /*
-   * Each page should be wrapped in the Page wrapper component
-   * You MUST pass it the result of useApp() as the `app` prop
-   * and for MDX pages you can spread the props.page props to it
-   * to automatically set the title and navigation
-   *
-   * Like breadcrumbs and updating the primary navigation with
-   * active state
-   */
-  return (
-    <Page app={app} {...props.page}>
-      <Head>
-        <meta property="og:title" content={props.page.title} key="title" />
-        <meta property="og:type" content="article" key='type' />
-        <meta property="og:description" content={props.intro} key='type' />
-        <meta property="og:article:author" content='Joost De Cock' key='author' />
-        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} key='image' />
-        <meta property="og:image:type" content="image/png" />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="630" />
-        <meta property="og:url" content={`https://freesewing.dev/${props.page.slug}`} key='url' />
-        <meta property="og:locale" content="en_US" key='locale' />
-        <meta property="og:site_name" content="freesewing.dev" key='site' />
-      </Head>
-      <div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end px-8 xl:px-0">
-        {props.toc && (
-          <div className="mb-8 px-0 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
-            <TocWrapper toc={props.toc} app={app}/>
-          </div>
-        )}
-        <div className="px-0 xl:pl-8 2xl:pl-16">
-          <MdxWrapper mdx={props.mdx} app={app} />
-          <HelpUs mdx slug={`/${props.page.slug}`} />
-        </div>
-      </div>
-    </Page>
-  )
-}
-
-/*
- * Default export is the NextJS page object
- */
-export default MdxPage
-
-
-/*
- * getStaticProps() is used to fetch data at build-time.
- *
- * On this page, it is loading the mdx (markdown) content
- * from the markdown file on disk.
- *
- * This, in combination with getStaticPaths() below means this
- * page will be used to render/generate all markdown/mdx content.
- *
- * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
- */
-export async function getStaticProps({ params, locale }) {
-
-  const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
-
-  return {
-    props: {
-      mdx,
-      toc,
-      intro: intro.join(' '),
-      page: {
-        slug: params.mdxslug.join('/'),
-        path: '/' + params.mdxslug.join('/'),
-        slugArray: params.mdxslug,
-        ...mdxMeta[params.mdxslug.join('/')],
-      },
-      params,
-      ...(await serverSideTranslations('en')),
-    }
-  }
-}
-
-/*
- * 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.
- * That list comes from mdxMeta, which is build in the prebuild step
- * and contains paths, titles, and intro for all markdown.
- *
- * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
- */
-export async function getStaticPaths() {
-  return {
-    paths: Object.keys(mdxMeta).map(slug => '/'+slug),
-    fallback: false
-  }
-}
-
diff --git a/packages/freesewing.org/pages/docs/index.js b/packages/freesewing.org/pages/docs/index.js
new file mode 100644
index 00000000000..49140ad1373
--- /dev/null
+++ b/packages/freesewing.org/pages/docs/index.js
@@ -0,0 +1,99 @@
+import { useEffect } from 'react'
+import Page from 'shared/components/wrappers/page.js'
+import useApp from 'site/hooks/useApp.js'
+import Popout from 'shared/components/popout.js'
+
+const TypographyPage = (props) => {
+  const app = useApp()
+  const { updateNavigation } = app
+
+  useEffect(() => {
+    updateNavigation(
+      ['typography'],
+      {
+        __title: 'Typography',
+        __linktitle: 'Typography',
+        __slug: 'typography',
+        __order: 'typography'
+      })
+  }, [updateNavigation])
+
+  const p = (
+    <p>
+      This paragraph is here to show the vertical spacing between headings and paragraphs.
+      In addition, let&apos;s make it a bit longer so we can see the line height as the text wraps.
+    </p>
+  )
+
+  return (
+    <Page app={app} title='Typography'>
+      <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
+        <p>This typography page shows an overview of different elements and how they are styled.</p>
+        <p>It&apos;s a good starting point for theme development.</p>
+        <h2>Headings (this is h2)</h2>
+        {p}
+        <h3>This is h3</h3>{p}
+        <h4>This is h4</h4>{p}
+        <h5>This is h5</h5>{p}
+        <h6>This is h6</h6>{p}
+        <h2>Links and buttons</h2>
+        <p>A regular link <a href="#">looks like this</a>, whereas buttons look like this:</p>
+        <h3>Main button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-neutral">Neutral button</button>
+          <button className="btn btn-primary">Primary button</button>
+          <button className="btn btn-secondary">Secondary button</button>
+          <button className="btn btn-accent">Accent button</button>
+        </div>
+        <h3>State button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-info">Info button</button>
+          <button className="btn btn-success">Success button</button>
+          <button className="btn btn-warning">Warning button</button>
+          <button className="btn btn-error">Error button</button>
+        </div>
+        <h3>Other button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-ghost">Ghost button</button>
+          <button className="btn btn-link">Link button</button>
+        </div>
+        <h3>Outlined button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-outline btn-neutral">Neutral button</button>
+          <button className="btn btn-outline btn-primary">Primary button</button>
+          <button className="btn btn-outline btn-secondary">Secondary button</button>
+          <button className="btn btn-outline btn-accent">Accent button</button>
+        </div>
+        <h3>Button sizes</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-primary btn-lg">Large</button>
+          <button className="btn btn-primary">Normal</button>
+          <button className="btn btn-primary btn-sm">Small</button>
+          <button className="btn btn-primary btn-xs">Tiny</button>
+          <button className="btn btn-primary btn-lg btn-wide">Large wide</button>
+          <button className="btn btn-primary btn-wide">Normal wide</button>
+          <button className="btn btn-primary btn-sm btn-wide">Small wide</button>
+          <button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
+        </div>
+        <h2>Popouts</h2>
+        <p>The Popout component is what powers various custom MDX components under the hood:</p>
+        {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
+          const props = {}
+          props[type] = true
+          return (
+            <div key={type}>
+              <h3 className="capitalize">{type}</h3>
+              <Popout {...props}>
+                <h5>I am the {type} title</h5>
+                {p}
+              </Popout>
+            </div>
+          )
+        })}
+      </div>
+    </Page>
+  )
+}
+
+export default TypographyPage
+