diff --git a/markdown/org/docs/patterns/tamiko/cutting/fr.md b/markdown/org/docs/patterns/tamiko/cutting/fr.md
index 9a737b8c9c1..fd276165b23 100644
--- a/markdown/org/docs/patterns/tamiko/cutting/fr.md
+++ b/markdown/org/docs/patterns/tamiko/cutting/fr.md
@@ -5,7 +5,7 @@ title: "Tamiko top: Cutting Instructions"
 - **Tissu principal**
   - Couper **1 Tamiko dessus** sur le pli
 
-Tamiko is a zero-waste pattern. It's a rectangle that's cut out on the fold. Not more than that. There's only one part to this top, we will simply refer to it at the **Tamiko top**. It needs to be cut on the fold along the bottom.
+Le Tamiko est un modèle zéro déchets. C'est un rectangle découpé sur la pliure. Rien de plus. C'est un modèle en une seule pièce, que nous appellerons simplement le **Tamiko top**. Elle doit être coupée sur la pliure, le long du bas.
 
 <Note>
 
diff --git a/markdown/org/docs/patterns/tamiko/fabric/fr.md b/markdown/org/docs/patterns/tamiko/fabric/fr.md
index dfc7a95f3d1..da2b84be0b4 100644
--- a/markdown/org/docs/patterns/tamiko/fabric/fr.md
+++ b/markdown/org/docs/patterns/tamiko/fabric/fr.md
@@ -2,6 +2,6 @@
 title: "Tamiko top: Fabric Options"
 - - -
 
-This pattern has a lot of unfinished edges, so you need something that does not ravel. And you want to go for something with a nice drape.
+This pattern has a lot of unfinished edges, so you need something that does not ravel. Et vous voulez quelque chose avec un joli drapé.
 
-Long story short, go for a knitted fabric, or some light scuba or something. No wovens.
+Bref, choisissez un tissu à mailles, ou un scuba léger, quelque chose dans le genre. Pas de tissu tissé.
diff --git a/markdown/org/docs/patterns/tamiko/instructions/fr.md b/markdown/org/docs/patterns/tamiko/instructions/fr.md
index 7e4640688fb..24f3bc32378 100644
--- a/markdown/org/docs/patterns/tamiko/instructions/fr.md
+++ b/markdown/org/docs/patterns/tamiko/instructions/fr.md
@@ -2,25 +2,25 @@
 title: "Tamiko top: Sewing Instructions"
 - - -
 
-### Étape 1 : Terminer la couture des armoiries
+### Étape 1 : Terminer l'emmanchure
 
-![Finsh the armhole seam](step03.png)
+![Étape : Terminer la couture de la manche](step03.png)
 
-- Finish the armhole seam with a narrow hem.
+- Terminez la couture de la manche avec un ourlet étroit.
 
 ### Étape 2 : Terminer le haut
 
-![Sew the three seamlines that are marked on your draft](step04.png)
+![Coudre les trois lignes de couture qui sont marquées sur votre patron](step04.png)
 
 <Note>
 
-Comme votre dessus est plié, c'est une bonne idée de relier les deux moitiés.
-De cette façon, votre top ne peut pas se déplacer pendant que nous le finissons.
+Comme votre top est plié, c'est une bonne idée d'épingler les deux moitiés ensemble.
+Comme ça, votre top ne va pas bouger pendant que nous le finissons.
 
 </Note>
 
-- Sew the three seamlines that are marked on your draft. F-H, C and I-J in the diagram, represented by lines and notches on the pattern.
+- Coudre les trois lignes de couture qui sont marquées sur votre patron. F-H, C et I-J dans le diagramme, représentés par des lignes et des encoches sur le modèle.
 
 ### Step 3: Enjoy!
 
-Now enjoy your new top and it's zero waste properties!
+Vous pouvez maintenant enfiler votre nouveau top, qui a généré zéro déchets!
diff --git a/markdown/org/docs/patterns/tamiko/measurements/fr.md b/markdown/org/docs/patterns/tamiko/measurements/fr.md
index 74b7554838f..e6858061e43 100644
--- a/markdown/org/docs/patterns/tamiko/measurements/fr.md
+++ b/markdown/org/docs/patterns/tamiko/measurements/fr.md
@@ -1,5 +1,5 @@
 - - -
-title: "Tamiko top: Required Measurements"
+title: "top: Tamiko : Mensurations requises"
 - - -
 
 <PatternMeasurements pattern='tamiko' />
diff --git a/markdown/org/docs/patterns/tamiko/needs/fr.md b/markdown/org/docs/patterns/tamiko/needs/fr.md
index e093eb8b1a3..a53cc2b7cac 100644
--- a/markdown/org/docs/patterns/tamiko/needs/fr.md
+++ b/markdown/org/docs/patterns/tamiko/needs/fr.md
@@ -1,8 +1,8 @@
 - - -
-title: "Tamiko top: What You Need"
+title: "Top Tamiko : ce dont vous avez besoin"
 - - -
 
-To make Tamiko, you will need the following:
+Pour faire Tamiko, vous aurez besoin des éléments suivants :
 
 - Fourniture de base pour la couture
-- About 1 meter (1.1 yards) of a suitable fabric ([see Fabric options](/docs/patterns/tamiko/fabric))
+- Environ 1 mètre (1.1 yards) d'un tissu adapté ([voir Options de tissu](/docs/patterns/tamiko/fabric))
diff --git a/markdown/org/docs/patterns/tamiko/options/armholedepthfactor/fr.md b/markdown/org/docs/patterns/tamiko/options/armholedepthfactor/fr.md
index a1c30856609..7a112073f03 100644
--- a/markdown/org/docs/patterns/tamiko/options/armholedepthfactor/fr.md
+++ b/markdown/org/docs/patterns/tamiko/options/armholedepthfactor/fr.md
@@ -1,6 +1,6 @@
 
-Contrôle la profondeur de votre armure, en tant que facteur de mesure de votre épaule à épaule.
+Contrôle la profondeur de votre manche, en fonction de la mensuration de votre épaule à épaule.
 
 
-## Effet de cette option sur le motif
+## Effet de cette option sur le patron
 ![Cette image montre l'effet de cette option en superposant plusieurs variantes qui ont une valeur différente pour cette option](tamiko_armholedepthfactor_sample.svg "Effet de cette option sur le motif")
\ No newline at end of file
diff --git a/markdown/org/docs/patterns/tamiko/options/chestease/fr.md b/markdown/org/docs/patterns/tamiko/options/chestease/fr.md
index 3e9d4eee1b2..717d89dea89 100644
--- a/markdown/org/docs/patterns/tamiko/options/chestease/fr.md
+++ b/markdown/org/docs/patterns/tamiko/options/chestease/fr.md
@@ -1,5 +1,5 @@
 
-La quantité d'aisance à votre poitrine.
+L'aisance au niveau de la poitrine.
 
 
 ## Effet de cette option sur le motif
diff --git a/markdown/org/docs/patterns/tamiko/options/flare/fr.md b/markdown/org/docs/patterns/tamiko/options/flare/fr.md
index 348982a1541..4844008d7b1 100644
--- a/markdown/org/docs/patterns/tamiko/options/flare/fr.md
+++ b/markdown/org/docs/patterns/tamiko/options/flare/fr.md
@@ -1,5 +1,5 @@
 
-L'angle par lequel le vêtement sort de votre poitrine vers le bas.
+L'angle par lequel le vêtement s'évase de votre poitrine vers le bas.
 
 
 ## Effet de cette option sur le motif
diff --git a/markdown/org/docs/patterns/tamiko/options/shoulderseamlength/fr.md b/markdown/org/docs/patterns/tamiko/options/shoulderseamlength/fr.md
index 61333514a45..da12d11d150 100644
--- a/markdown/org/docs/patterns/tamiko/options/shoulderseamlength/fr.md
+++ b/markdown/org/docs/patterns/tamiko/options/shoulderseamlength/fr.md
@@ -1,5 +1,5 @@
 
-La longueur de la couture d'épaule, en tant que facteur de la mesure d'épaule à épaule.
+La longueur de la couture d'épaule, en fonction de la mensuration d'épaule à épaule.
 
 
 ## Effet de cette option sur le motif
diff --git a/packages/freesewing.dev/components/footer.js b/packages/freesewing.dev/components/footer.js
index 0f4923dd0d4..3a03a17a847 100644
--- a/packages/freesewing.dev/components/footer.js
+++ b/packages/freesewing.dev/components/footer.js
@@ -24,7 +24,7 @@ const social = {
 
 const Footer = ({ app }) => (
   <footer className="bg-neutral">
-    <div className={`theme-gradient h-1 w-full relative ${app.loading ? 'loading' : ''}`}></div>
+    <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
     <div className="p-4 py-16 flex flex-row bg-neutral -mt-1 z-0 gap-8 flex-wrap justify-around text-neutral-content">
       <div className="w-64 mt-2">
         <div className="px-4 mb-4"><CreativeCommonsLogo /></div>
@@ -159,6 +159,7 @@ const Footer = ({ app }) => (
       </a>
     </div>
 
+    <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
   </footer>
 )
 
diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js
index ddabd24548f..eaff538fb58 100644
--- a/packages/freesewing.dev/components/header.js
+++ b/packages/freesewing.dev/components/header.js
@@ -46,6 +46,8 @@ const Header = ({ app, setSearch }) => {
         z-30
         transition-transform
         ${show ? '': 'fixed top-0 left-0 -translate-y-20'}
+        drop-shadow-xl
+        ${app.loading ? "theme-gradient loading" : ""}
       `}>
         <div className="max-w-6xl m-auto">
           <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
@@ -55,7 +57,7 @@ const Header = ({ app, setSearch }) => {
                 text-neutral-content bg-transparent
                 border border-transparent
                 hover:bg-transparent hover:border-base-100
-                sm:hidden
+                md:hidden
                 h-12
               `}
               onClick={app.togglePrimaryMenu}>
@@ -79,14 +81,14 @@ const Header = ({ app, setSearch }) => {
                   )
                 }
             </button>
-            <div className="flex flex-row gap-2 sm:hidden">
+            <div className="flex flex-row gap-2 md:hidden">
               <button className="btn btn-sm btn h-12 px-12" onClick={() => setSearch(true)}>
                 <SearchIcon />
               </button>
             </div>
             <button className={`
               btn btn-sm h-12
-              hidden sm:flex
+              hidden md:flex
               flex-row gap-1 mr-4 w-64 px-2
               bg-base-100 text-base-content
               hover:bg-base-100 hover:text-base-content
@@ -110,15 +112,11 @@ const Header = ({ app, setSearch }) => {
                 </a>
               </Link>
             </div>
-            <div className="hidden sm:flex flex-row items-center">
+            <div className="hidden md:flex flex-row items-center">
               <ThemePicker app={app} />
             </div>
           </div>
         </div>
-        <div className={`
-          theme-gradient h-1 w-full z-10 relative -mb-1
-          ${app.loading ? 'loading' : ''}
-        `}></div>
       </header>
   )
 }
diff --git a/packages/freesewing.dev/components/layouts/bare.js b/packages/freesewing.dev/components/layouts/bare.js
new file mode 100644
index 00000000000..f26b9bca699
--- /dev/null
+++ b/packages/freesewing.dev/components/layouts/bare.js
@@ -0,0 +1,68 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+// Shared components
+import Logo from 'shared/components/logos/freesewing.js'
+import Aside from 'shared/components/navigation/aside'
+import get from 'lodash.get'
+
+const PageTitle = ({ app, slug, title }) => {
+  if (title) return <h1>{title}</h1>
+  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
+
+  return <h1>FIXME: This page has no title</h1>
+}
+
+const Breadcrumbs = ({ app, slug=false, title }) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+  }
+
+  return (
+    <ul className="flex flex-row flex-wrap gap-2 font-bold">
+      <li>
+        <Link href="/">
+          <a title="To the homepage" className="text-base-content">
+            <Logo size={24} fill="currentColor" stroke={false}/>
+          </a>
+        </Link>
+      </li>
+      {crumbs.map(crumb => (
+        <React.Fragment key={crumb[1]}>
+          <li className="text-base-content">&raquo;</li>
+          <li>
+            {crumb[2]
+              ?  (
+                <Link href={crumb[1]}>
+                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                    {crumb[0]}
+                  </a>
+                </Link>
+              )
+              : <span className="text-base-content">{crumb[0]}</span>
+            }
+          </li>
+        </React.Fragment>
+      ))}
+    </ul>
+  )
+}
+
+const DefaultLayout = ({ app, title=false, children=[] }) => {
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+
+  return (
+    <>
+      <Aside app={app} slug={slug} mobileOnly />
+      {children}
+    </>
+  )
+}
+
+export default DefaultLayout
diff --git a/packages/freesewing.dev/components/layouts/docs.js b/packages/freesewing.dev/components/layouts/docs.js
new file mode 100644
index 00000000000..285e5a3c124
--- /dev/null
+++ b/packages/freesewing.dev/components/layouts/docs.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+// Shared components
+import Logo from 'shared/components/logos/freesewing.js'
+import Aside from 'shared/components/navigation/aside'
+import get from 'lodash.get'
+
+const PageTitle = ({ app, slug, title }) => {
+  if (title) return <h1>{title}</h1>
+  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
+
+  return <h1>FIXME: This page has no title</h1>
+}
+
+const Breadcrumbs = ({ app, slug=false, title }) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+  }
+
+  return (
+    <ul className="flex flex-row flex-wrap gap-2 font-bold">
+      <li>
+        <Link href="/">
+          <a title="To the homepage" className="text-base-content">
+            <Logo size={24} fill="currentColor" stroke={false}/>
+          </a>
+        </Link>
+      </li>
+      {crumbs.map(crumb => (
+        <React.Fragment key={crumb[1]}>
+          <li className="text-base-content">&raquo;</li>
+          <li>
+            {crumb[2]
+              ?  (
+                <Link href={crumb[1]}>
+                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                    {crumb[0]}
+                  </a>
+                </Link>
+              )
+              : <span className="text-base-content">{crumb[0]}</span>
+            }
+          </li>
+        </React.Fragment>
+      ))}
+    </ul>
+  )
+}
+
+const DefaultLayout = ({ app, title=false, children=[] }) => {
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+
+  return (
+    <div className="m-auto flex flex-row justify-center">
+      <Aside app={app} slug={slug} />
+      <section className="py-28 md:py-36">
+        <div>
+          {title && (
+            <div className="px-8 xl:pl-8 2xl:pl-16">
+              <Breadcrumbs app={app} slug={slug} title={title} />
+              <PageTitle app={app} slug={slug} title={title} />
+            </div>
+          )}
+          {children}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default DefaultLayout
diff --git a/packages/freesewing.dev/components/wrappers/layout.js b/packages/freesewing.dev/components/wrappers/layout.js
new file mode 100644
index 00000000000..b928604121f
--- /dev/null
+++ b/packages/freesewing.dev/components/wrappers/layout.js
@@ -0,0 +1,115 @@
+import React from 'react'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+// Shared components
+import Logo from 'shared/components/logos/freesewing.js'
+import PrimaryNavigation from 'shared/components/navigation/primary'
+import get from 'lodash.get'
+import Right from 'shared/components/icons/right.js'
+import Left from 'shared/components/icons/left.js'
+// Site components
+import Header from 'site/components/header'
+import Footer from 'site/components/footer'
+import Search from 'site/components/search'
+
+const PageTitle = ({ app, slug, title }) => {
+  if (title) return <h1>{title}</h1>
+  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
+
+  return <h1>FIXME: This page has no title</h1>
+}
+
+const Breadcrumbs = ({ app, slug=false, title }) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+  }
+
+  return (
+    <ul className="flex flex-row flex-wrap gap-2 font-bold">
+      <li>
+        <Link href="/">
+          <a title="To the homepage" className="text-base-content">
+            <Logo size={24} fill="currentColor" stroke={false}/>
+          </a>
+        </Link>
+      </li>
+      {crumbs.map(crumb => (
+        <React.Fragment key={crumb[1]}>
+          <li className="text-base-content">&raquo;</li>
+          <li>
+            {crumb[2]
+              ?  (
+                <Link href={crumb[1]}>
+                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                    {crumb[0]}
+                  </a>
+                </Link>
+              )
+              : <span className="text-base-content">{crumb[0]}</span>
+            }
+          </li>
+        </React.Fragment>
+      ))}
+    </ul>
+  )
+}
+
+const LayoutWrapper = ({
+  app,
+  title=false,
+  children=[],
+  search,
+  setSearch,
+  noSearch=false,
+  workbench=false,
+  AltMenu=null,
+}) => {
+  const startNavigation = () => {
+    app.startLoading()
+    // Force close of menu on mobile if it is open
+    if (app.primaryNavigation) app.setPrimaryNavigation(false)
+    // Force close of search modal if it is open
+    if (search) setSearch(false)
+  }
+
+  const router = useRouter()
+  router.events?.on('routeChangeStart', startNavigation)
+  router.events?.on('routeChangeComplete', () => app.stopLoading())
+  const slug = router.asPath.slice(1)
+  const [collapsePrimaryNav, setCollapsePrimaryNav] = useState(workbench || false)
+  const [collapseAltMenu, setCollapseAltMenu] = useState(false)
+
+  return (
+    <div className={`
+    flex flex-col justify-between
+    min-h-screen
+    bg-base-100
+    `}>
+      <Header app={app} setSearch={setSearch} />
+      <main className="grow">{children}</main>
+      {!noSearch && search && (
+        <>
+        <div className={`
+          fixed w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
+          md:rounded-lg md:top-24
+          md:max-w-xl md:m-auto md:inset-x-12
+          md:max-w-2xl
+          lg:max-w-4xl
+        `}>
+          <Search app={app} search={search} setSearch={setSearch}/>
+        </div>
+        <div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
+        </>
+      )}
+      <Footer app={app} />
+    </div>
+  )
+}
+
+export default LayoutWrapper
diff --git a/packages/freesewing.dev/components/wrappers/page.js b/packages/freesewing.dev/components/wrappers/page.js
new file mode 100644
index 00000000000..ae1a731df14
--- /dev/null
+++ b/packages/freesewing.dev/components/wrappers/page.js
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react'
+import { useSwipeable } from 'react-swipeable'
+import { useRouter } from 'next/router'
+import { useHotkeys } from 'react-hotkeys-hook'
+// Layouts components
+import LayoutWrapper from 'site/components/wrappers/layout'
+import Docs from 'site/components/layouts/docs'
+
+const layouts = {
+  docs: Docs,
+}
+
+/* This component should wrap all page content */
+const PageWrapper= ({
+  title="FIXME: No title set",
+  noSearch=false,
+  app=false,
+  layout=Docs,
+  children=[]
+}) => {
+
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: evt => (app.primaryMenu) ? app.setPrimaryMenu(false) : null,
+    onSwipedRight: evt => (app.primaryMenu) ? null : app.setPrimaryMenu(true),
+    trackMouse: true
+  })
+
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+
+  useEffect(() => app.setSlug(slug), [slug])
+
+  // Trigger search with Ctrl+k
+  useHotkeys('ctrl+k', (evt) => {
+    evt.preventDefault()
+    setSearch(true)
+  })
+
+  const [search, setSearch] = useState(false)
+
+  const childProps = {
+    app: app,
+    title: title,
+    search, setSearch, toggleSearch: () => setSearch(!search),
+    noSearch: noSearch,
+  }
+
+  const Layout = layout
+
+  return (
+    <div
+      ref={swipeHandlers.ref}
+      onMouseDown={swipeHandlers.onMouseDown}
+      data-theme={app.theme}
+      key={app.theme} // Thiis forces the data-theme update
+    >
+      <LayoutWrapper {...childProps}>
+        {Layout
+          ? <Layout {...childProps}>{children}</Layout>
+          : children
+        }
+      </LayoutWrapper>
+    </div>
+  )
+}
+
+export default PageWrapper
+
diff --git a/packages/freesewing.dev/package.json b/packages/freesewing.dev/package.json
index 52bfe47a541..967404f9e66 100644
--- a/packages/freesewing.dev/package.json
+++ b/packages/freesewing.dev/package.json
@@ -50,8 +50,5 @@
     "postcss": "^8.4.4",
     "tailwindcss": "^3.0.1",
     "yaml-loader": "^0.8.0"
-  },
-  "engines": {
-    "node": ">=14.18.1"
   }
 }
diff --git a/packages/freesewing.dev/pages/[...mdxslug].js b/packages/freesewing.dev/pages/[...mdxslug].js
index 9a898f1bd98..4c8cfdfa983 100644
--- a/packages/freesewing.dev/pages/[...mdxslug].js
+++ b/packages/freesewing.dev/pages/[...mdxslug].js
@@ -1,8 +1,9 @@
-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'
@@ -36,8 +37,17 @@ const MdxPage = props => {
         <meta property="og:locale" content="en_US" key='locale' />
         <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}/>
+          <HelpUs mdx slug={`/${props.page.slug}`} />
+        </div>
+      </div>
     </Page>
   )
 }
@@ -61,11 +71,12 @@ export default MdxPage
  */
 export async function getStaticProps({ params, locale }) {
 
-  const { mdx, intro } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
+  const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
 
   return {
     props: {
       mdx,
+      toc,
       intro: intro.join(' '),
       page: {
         slug: params.mdxslug.join('/'),
diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js
index d8f9787830d..21f8df826e4 100644
--- a/packages/freesewing.dev/pages/index.js
+++ b/packages/freesewing.dev/pages/index.js
@@ -1,15 +1,16 @@
-import Page from 'shared/components/wrappers/page.js'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Head from 'next/head'
 import HelpUs from 'site/components/help-us.js'
 import Link from 'next/link'
-import Script from 'next/script'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import Layout from 'site/components/layouts/bare'
+import Navigation, { Icons } from 'shared/components/navigation/primary'
 
 const HomePage = (props) => {
   const app = useApp()
   return (
-    <Page app={app} title="Welcome to FreeSewing.dev">
+    <Page app={app} title="Welcome to FreeSewing.dev" layout={Layout}>
       <Head>
         <meta property="og:title" content="FreeSewing.dev" key="title" />
         <meta property="og:type" content="article" key='type' />
@@ -23,85 +24,60 @@ const HomePage = (props) => {
         <meta property="og:locale" content="en_US" key='locale' />
         <meta property="og:site_name" content="freesewing.dev" key='site' />
       </Head>
-      <Script src="/sw.js"></Script>
-      <div className="max-w-screen-md">
-        <p>
-          FreeSewing.dev hosts documentation for contributors and developers alike.
-          <br />
-          For our maker site, and to try our platform, go
-          to <a
-            href="https://freesewing.org/"
-            title="Go to FreeSewing.org"
-            className="text-secondary font-bold"
-          >freesewing.org</a>.
-        </p>
-        <h2 className="mt-8">What is FreeSewing?</h2>
-        <div className="theme-gradient p-1 -mt-2 mb-2 "></div>
-        <p className="text-2xl sm:text-3xl">
-          FreeSewing is an open source platform for made-to-measure sewing patterns.
-        </p>
-        <p className="text-xl sm:text-2xl">
-          <b>@freeSewing/core</b> is a Javascript library for 2D parametric design
-        </p>
-        <p>
-          It has a primary focus is on sewing patterns,
-          but can be utilized for a variety of similar 2D design tasks.
-        </p>
-
-        <h2 className='mt-8'>How can I try it out?</h2>
-        <div className="theme-gradient p-1 -mt-2 mb-2 "></div>
-        <p className="text-2xl sm:text-3xl">
-          You can try it <Link
-            href="/howtos/environments/browser">
-              <a className="text-secondary">in the browser</a>
-            </Link>, <Link
-            href="/howtos/environments/node">
-              <a className="text-secondary">in NodeJS</a>
-            </Link>,
-          or on any Javascript runtime.
-        </p>
-        <p className="text-xl sm:text-2xl">
-          The includes Deno, AWS Lamba, Cloudflare workers, Vercel Edge functions, Netlify functions, and so on.
-        </p>
-        <p>
-          Or save yourself the trouble, and check <a
-            href="https://freesewing.org/"
-            title="Go to FreeSewing.org"
-            className="text-secondary font-bold"
-          >freesewing.org</a> for a showcase of our software.
-        </p>
-
-        <h2 className='mt-8'>
-          You son of a bitch, I&apos;m in
-          <sup>
-            <a
-              href="https://www.youtube.com/watch?v=nKxvDYHkfSY"
-              className="text-secondary"
-            >*</a>
-          </sup>
-        </h2>
-        <div className="theme-gradient p-1 -mt-2 mb-2 "></div>
-        <p className="text-2xl sm:text-3xl">
-          We are an <a
-            href="https://allcontributors.org/"
-            className="text-secondary"
-          >all-contributors</a> project
-          and welcome all contributions.
-        </p>
-        <p className="text-xl sm:text-2xl">
-          <a
-            href="https://discord.freesewing.org/"
-            className="text-secondary"
-          >Come say hi on Discord</a>,
-          or check out <Link
-              href="/howtos/ways-to-contribute"><a
-              className="text-secondary">ways to contribute</a>
-          </Link> to get inspired.
-        </p>
-        <p>
-          Last but certainly not least, you can also support FreeSewing financially:
-        </p>
-
+        <section
+          style={{
+            backgroundImage: "url('/img/splash.jpg')",
+            backgroundSize: 'cover',
+            backgroundPosition: '40% 50%',
+          }}
+          className="m-0 p-0 shadow drop-shadow-lg w-full mb-8"
+        >
+          <div className="mx-auto px-8 flex flex-col items-center justify-center min-h-screen lg:min-h-0 lg:py-96">
+            <div className="flex flex-col items-end max-w-4xl">
+              <h1
+                className={`
+                  text-4xl font-black text-right px-4
+                  sm:text-6xl
+                  md:text-7xl px-6
+                  lg:px-8
+                  bg-secondary
+                  `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+              >
+                FreeSewing
+                <span className="font-light">.dev</span>
+              </h1>
+              <h2
+                className={`
+                  text-right text-2xl mr-0
+                  sm:text-3xl
+                  md:text-4xl
+                  lg:max-w-1/2 lg:text-4xl xl:pr-0 `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+              >
+                Documentation for FreeSewing contributors & developers
+              </h2>
+            </div>
+            <Icons app={app}  active='/'
+              ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
+              liClasses="text-neutral-content w-1/3 my-4 lg:mx-2 lg:w-24"
+              linkClasses={`
+                text-lg lg:text-xl py-1 text-secondary
+                hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
+                flex flex-col items-center capitalize`}
+            />
+            <p className="text-neutral-content text-center mt-8">
+              To learn more about FreeSewing and try our platform
+              go to <a
+                href="https://freesewing.org/"
+                title="Go to FreeSewing.org"
+                className="text-secondary font-bold"
+              >freesewing.org</a>
+            </p>
+          </div>
+        </section>
+      <div>
+      <div className="max-w-7xl m-auto my-32">
         <div className="bg-cover bg-neutral w-full bg-center rounded-lg shadow p-4 "
           style={{backgroundImage: "url(/support.jpg)"}}
         >
@@ -116,8 +92,25 @@ const HomePage = (props) => {
           </p>
           <a role="button" className="btn btn-accent btn-wide ml-4 mb-8" href="https://freesewing.org/patrons/join">Become a Patron</a>
         </div>
+      </div>
+      <div className="max-w-7xl m-auto my-32">
+        <div className="px-8 text-base-content">
+          <Icons app={app}
+            active='/'
+            ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
+            liClasses="w-1/3 my-4 lg:mx-2 lg:w-24"
+            linkClasses={`
+              text-lg lg:text-xl py-1 text-base-content
+              hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
+              flex flex-col items-center capitalize`}
+          />
+        </div>
+      </div>
+      <div className="max-w-xl m-auto my-32">
         <HelpUs slug='/' />
       </div>
+    </div>
+
     </Page>
   )
 }
diff --git a/packages/freesewing.dev/public/img/splash.jpg b/packages/freesewing.dev/public/img/splash.jpg
new file mode 100644
index 00000000000..25d06b10f62
Binary files /dev/null and b/packages/freesewing.dev/public/img/splash.jpg differ
diff --git a/packages/freesewing.dev/public/sw.js b/packages/freesewing.dev/public/sw.js
deleted file mode 100644
index bcd6a004a54..00000000000
--- a/packages/freesewing.dev/public/sw.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * This is here to force-remove the cache of the old Gatsby site
- * See: https://github.com/gatsbyjs/gatsby/issues/15623
- */
-self.addEventListener("activate", function (event) {
-  event.waitUntil(
-    caches.keys().then(function (cacheNames) {
-      return Promise.all(
-        cacheNames
-          .map(function (cacheName) {
-            return caches.delete(cacheName);
-          })
-      );
-    })
-  );
-});
diff --git a/packages/freesewing.dev/skip_build.sh b/packages/freesewing.dev/skip_build.sh
new file mode 100755
index 00000000000..3d189b47f60
--- /dev/null
+++ b/packages/freesewing.dev/skip_build.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+if git diff HEAD^ HEAD --quiet ../freesewing.shared || git diff --quiet HEAD^ HEAD  . ; then
+  # We have local changes, go ahead and build
+  echo "✅ - Changed detected; Let's build this thing"
+  exit 1;
+else
+  # No changes, do not waste time building this commit
+  echo "🛑 - No changes detected; Let's just not"
+  exit 0;
+fi
+
diff --git a/packages/freesewing.lab/available-versions.json b/packages/freesewing.lab/available-versions.json
new file mode 100644
index 00000000000..58a40d3d887
--- /dev/null
+++ b/packages/freesewing.lab/available-versions.json
@@ -0,0 +1,771 @@
+{
+  "2.20.7": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.6": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.5": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.4": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.3": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.2": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.1": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.20.0": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "plugintest",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.19.9": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.19.0": [
+    "aaron",
+    "albert",
+    "bee",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "lunetius",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "tiberius",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "walburga",
+    "waralee",
+    "yuri"
+  ],
+  "2.18.0": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "waralee",
+    "yuri"
+  ],
+  "2.17.1": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "waralee"
+  ],
+  "2.17.0": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "ursula",
+    "wahid",
+    "waralee"
+  ],
+  "2.16.2": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "wahid",
+    "waralee"
+  ],
+  "2.16.0": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "wahid",
+    "waralee"
+  ],
+  "2.15.4": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "wahid",
+    "waralee"
+  ],
+  "2.15.0": [
+    "aaron",
+    "albert",
+    "bella",
+    "benjamin",
+    "bent",
+    "breanna",
+    "brian",
+    "bruce",
+    "carlita",
+    "carlton",
+    "cathrin",
+    "charlie",
+    "cornelius",
+    "diana",
+    "examples",
+    "florence",
+    "florent",
+    "holmes",
+    "hortensia",
+    "huey",
+    "hugo",
+    "jaeger",
+    "legend",
+    "paco",
+    "penelope",
+    "rendertest",
+    "sandy",
+    "shin",
+    "simon",
+    "simone",
+    "sven",
+    "tamiko",
+    "teagan",
+    "theo",
+    "titan",
+    "trayvon",
+    "tutorial",
+    "wahid",
+    "waralee"
+  ]
+}
\ No newline at end of file
diff --git a/packages/freesewing.lab/components/footer.js b/packages/freesewing.lab/components/footer.js
index f0ca29abb8a..2d620f860a3 100644
--- a/packages/freesewing.lab/components/footer.js
+++ b/packages/freesewing.lab/components/footer.js
@@ -28,7 +28,7 @@ const Footer = ({ app }) => {
 
   return (
     <footer className="bg-neutral">
-      <div className={`theme-gradient h-1 w-full relative ${app.loading ? 'loading' : ''}`}></div>
+      <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
       <div className="p-4 py-16 flex flex-row bg-neutral -mt-1 z-0 gap-8 flex-wrap justify-around text-neutral-content">
         <div className="w-64 mt-2">
           <div className="px-4 mb-4"><CreativeCommonsLogo /></div>
@@ -163,6 +163,7 @@ const Footer = ({ app }) => {
         </a>
       </div>
 
+      <div className={`theme-gradient h-14 ${app.loading ? 'loading' : ''}`} />
     </footer>
   )
 }
diff --git a/packages/freesewing.lab/components/header.js b/packages/freesewing.lab/components/header.js
index 05192791ae9..ca6578c14f3 100644
--- a/packages/freesewing.lab/components/header.js
+++ b/packages/freesewing.lab/components/header.js
@@ -47,7 +47,9 @@ const Header = ({ app }) => {
         w-full
         z-30
         transition-transform
+        drop-shadow-xl
         ${show ? '': 'fixed top-0 left-0 -translate-y-20'}
+        ${app.loading ? "theme-gradient loading" : ""}
       `}>
         <div className="max-w-6xl m-auto">
           <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
@@ -57,7 +59,7 @@ const Header = ({ app }) => {
                 text-neutral-content bg-transparent
                 border border-transparent
                 hover:bg-transparent hover:border-base-100
-                sm:hidden
+                md:hidden
                 h-12
               `}
               onClick={app.togglePrimaryMenu}>
@@ -66,29 +68,23 @@ const Header = ({ app }) => {
                   : <><MenuIcon /><span className="opacity-50 pl-2 flex flex-row items-center gap-1"><Right />swipe</span></>
                 }
             </button>
-            <div className="hidden sm:flex flex-row items-center">
+            <div className="hidden md:flex flex-row items-center">
               <PatternPicker app={app} />
               <VersionPicker app={app} />
             </div>
             <div className="hidden md:flex md:flex-row gap-2">
               <Link href="/">
-                <a className="flex flex-column items-center">
-                  <Logo size={36} fill="currentColor" stroke={false} />
-                </a>
-              </Link>
-              <Link href="/">
-                <a role="button" className="btn btn-link btn-sm text-neutral-content h-12">
-                  lab.freesewing.dev
+                <a role="button" className="btn btn-link btn-sm text-neutral-content h-12 font-normal lowercase text-2xl">
+                  lab.<span className="font-black px-1 normal-case">FreeSewing</span>.dev
                 </a>
               </Link>
             </div>
-            <div className="hidden sm:flex flex-row items-center">
+            <div className="hidden md:flex flex-row items-center">
               <ThemePicker app={app} />
               <LocalePicker app={app} />
             </div>
           </div>
         </div>
-        <div className={`theme-gradient h-1 w-full z-10 relative -mb-1 ${app.loading ? 'loading' : ''}`}></div>
       </header>
   )
 }
diff --git a/packages/freesewing.lab/components/layouts/bare.js b/packages/freesewing.lab/components/layouts/bare.js
new file mode 100644
index 00000000000..e2c0953cbba
--- /dev/null
+++ b/packages/freesewing.lab/components/layouts/bare.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+// Shared components
+import Logo from 'shared/components/logos/freesewing.js'
+import Aside from 'shared/components/navigation/aside'
+import get from 'lodash.get'
+import { BeforeNav } from './lab'
+
+const PageTitle = ({ app, slug, title }) => {
+  if (title) return <h1>{title}</h1>
+  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
+
+  return <h1>FIXME: This page has no title</h1>
+}
+
+const Breadcrumbs = ({ app, slug=false, title }) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+  }
+
+  return (
+    <ul className="flex flex-row flex-wrap gap-2 font-bold">
+      <li>
+        <Link href="/">
+          <a title="To the homepage" className="text-base-content">
+            <Logo size={24} fill="currentColor" stroke={false}/>
+          </a>
+        </Link>
+      </li>
+      {crumbs.map(crumb => (
+        <React.Fragment key={crumb[1]}>
+          <li className="text-base-content">&raquo;</li>
+          <li>
+            {crumb[2]
+              ?  (
+                <Link href={crumb[1]}>
+                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                    {crumb[0]}
+                  </a>
+                </Link>
+              )
+              : <span className="text-base-content">{crumb[0]}</span>
+            }
+          </li>
+        </React.Fragment>
+      ))}
+    </ul>
+  )
+}
+
+const DefaultLayout = ({ app, title=false, children=[] }) => {
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+console.log(BeforeNav)
+  return (
+    <>
+      <Aside app={app} slug={slug} before={<BeforeNav app={app}/>} mobileOnly />
+      {children}
+    </>
+  )
+}
+
+export default DefaultLayout
diff --git a/packages/freesewing.lab/components/layouts/lab.js b/packages/freesewing.lab/components/layouts/lab.js
new file mode 100644
index 00000000000..b460248a007
--- /dev/null
+++ b/packages/freesewing.lab/components/layouts/lab.js
@@ -0,0 +1,51 @@
+import ThemePicker from 'shared/components/theme-picker.js'
+import LocalePicker from 'shared/components/locale-picker.js'
+import PatternPicker from 'site/components/pattern-picker.js'
+import VersionPicker from 'site/components/version-picker.js'
+
+export const BeforeNav = ({ app }) => (
+  <>
+    <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
+      <ThemePicker app={app} />
+      <LocalePicker app={app} />
+    </div>
+    <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
+      <PatternPicker app={app} />
+      <VersionPicker app={app} />
+    </div>
+  </>
+)
+
+const LabLayout = ({ app, AltMenu, children=[] }) => (
+  <div className="py-24 lg:py-36 flex flex-row">
+    <div className="w-full px-8">
+      {children}
+    </div>
+    <aside className={`
+      fixed top-0 right-0
+      pt-20 pb-8 px-8
+      md:pt-0
+      md:relative md:transform-none
+      h-screen w-screen
+      bg-base-100
+      md:bg-base-50
+      md:flex
+      md:sticky
+      overflow-y-scroll
+      z-20
+      bg-base-100 text-base-content
+      transition-all
+      xl:w-1/4
+      ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
+      md:flex-row
+      md:w-80
+      lg:w-96
+      shrink-0
+    `}>
+      <BeforeNav app={app}/>
+      {AltMenu}
+    </aside>
+  </div>
+)
+
+export default LabLayout
diff --git a/packages/freesewing.lab/components/pattern-picker.js b/packages/freesewing.lab/components/pattern-picker.js
index 7de30101ecc..f253efa8a29 100644
--- a/packages/freesewing.lab/components/pattern-picker.js
+++ b/packages/freesewing.lab/components/pattern-picker.js
@@ -10,10 +10,10 @@ const PatternPicker = ({ app }) => {
   const version = useVersion()
 
   return (
-      <div className="dropdown">
+      <div className="dropdown w-full md:w-auto">
         <div tabIndex="0" className={`
-          m-0 btn btn-neutral flex flex-row gap-2
-          sm:btn-ghost
+          m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+          md:btn-ghost
           hover:bg-neutral hover:border-neutral-content
         `}>
           <DesignIcon />
diff --git a/packages/freesewing.lab/components/version-picker.js b/packages/freesewing.lab/components/version-picker.js
index ecfcdd78643..d358d596fdc 100644
--- a/packages/freesewing.lab/components/version-picker.js
+++ b/packages/freesewing.lab/components/version-picker.js
@@ -24,10 +24,10 @@ const PatternPicker = ({ app }) => {
   const version = useVersion()
 
   return (
-      <div className="dropdown">
+      <div className="dropdown w-full md:w-auto">
         <div tabIndex="0" className={`
-          m-0 btn btn-neutral flex flex-row gap-2
-          sm:btn-ghost
+          m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+          md:btn-ghost
           hover:bg-neutral hover:border-neutral-content
         `}>
           <VersionsIcon />
diff --git a/packages/freesewing.lab/components/wrappers/layout.js b/packages/freesewing.lab/components/wrappers/layout.js
new file mode 100644
index 00000000000..33268ae68c6
--- /dev/null
+++ b/packages/freesewing.lab/components/wrappers/layout.js
@@ -0,0 +1,88 @@
+import React from 'react'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+// Shared components
+import Logo from 'shared/components/logos/freesewing.js'
+import PrimaryNavigation from 'shared/components/navigation/primary'
+import get from 'lodash.get'
+import Right from 'shared/components/icons/right.js'
+import Left from 'shared/components/icons/left.js'
+// Site components
+import Header from 'site/components/header'
+import Footer from 'site/components/footer'
+
+export const PageTitle = ({ app, slug, title }) => {
+  if (title) return <h1>{title}</h1>
+  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
+
+  return <h1>FIXME: This page has no title</h1>
+}
+
+export const Breadcrumbs = ({ app, slug=false, title }) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+  }
+
+  return (
+    <ul className="flex flex-row flex-wrap gap-2 font-bold">
+      <li>
+        <Link href="/">
+          <a title="To the homepage" className="text-base-content">
+            <Logo size={24} fill="currentColor" stroke={false}/>
+          </a>
+        </Link>
+      </li>
+      {crumbs.map(crumb => (
+        <React.Fragment key={crumb[1]}>
+          <li className="text-base-content">&raquo;</li>
+          <li>
+            {crumb[2]
+              ?  (
+                <Link href={crumb[1]}>
+                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                    {crumb[0]}
+                  </a>
+                </Link>
+              )
+              : <span className="text-base-content">{crumb[0]}</span>
+            }
+          </li>
+        </React.Fragment>
+      ))}
+    </ul>
+  )
+}
+
+const LayoutWrapper = ({ app, title=false, children=[] }) => {
+
+  const startNavigation = () => {
+    app.startLoading()
+    // Force close of menu on mobile if it is open
+    if (app.primaryMenu) app.setPrimaryMenu(false)
+  }
+
+  const router = useRouter()
+  router.events?.on('routeChangeStart', startNavigation)
+  router.events?.on('routeChangeComplete', app.stopLoading)
+  const slug = router.asPath.slice(1)
+
+  return (
+    <div className={`
+    flex flex-col justify-between
+    min-h-screen
+    bg-base-100
+    `}>
+      <Header app={app}/>
+      <main className="grow">{children}</main>
+      <Footer app={app} />
+    </div>
+  )
+}
+
+export default LayoutWrapper
diff --git a/packages/freesewing.lab/components/wrappers/page.js b/packages/freesewing.lab/components/wrappers/page.js
new file mode 100644
index 00000000000..8821c578c33
--- /dev/null
+++ b/packages/freesewing.lab/components/wrappers/page.js
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react'
+import { useSwipeable } from 'react-swipeable'
+import { useRouter } from 'next/router'
+import { useHotkeys } from 'react-hotkeys-hook'
+// Layouts components
+import LayoutWrapper from 'site/components/wrappers/layout'
+
+/* This component should wrap all page content */
+const PageWrapper= ({
+  title="FIXME: No title set",
+  app=false,
+  layout=false,
+  children=[]
+}) => {
+
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: evt => (app.primaryMenu) ? app.setPrimaryMenu(false) : null,
+    onSwipedRight: evt => (app.primaryMenu) ? null : app.setPrimaryMenu(true),
+    trackMouse: true
+  })
+
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+
+  useEffect(() => app.setSlug(slug), [slug])
+
+  const childProps = {
+    app: app,
+    title: title,
+  }
+
+  const Layout = layout
+
+  return (
+    <div
+      ref={swipeHandlers.ref}
+      onMouseDown={swipeHandlers.onMouseDown}
+      data-theme={app.theme}
+      key={app.theme} // Thiis forces the data-theme update
+    >
+      <LayoutWrapper {...childProps}>
+        {Layout
+          ? <Layout {...childProps}>{children}</Layout>
+          : children
+        }
+      </LayoutWrapper>
+    </div>
+  )
+}
+
+export default PageWrapper
+
diff --git a/packages/freesewing.lab/package.json b/packages/freesewing.lab/package.json
index b1286f85a87..9cee275ad5e 100644
--- a/packages/freesewing.lab/package.json
+++ b/packages/freesewing.lab/package.json
@@ -6,6 +6,7 @@
     "dev": "next dev -p 3002",
     "develop": "next dev -p 3002",
     "prebuild": "cd ../utils && npm run build && cd - && SITE=lab node ../freesewing.shared/prebuild/index.mjs",
+    "cibuild": "yarn prebuild && next build",
     "build": "next build",
     "export": "yarn prebuild && next build && next export",
     "start": "next start -p 3002",
@@ -52,8 +53,5 @@
     "postcss": "^8.4.4",
     "tailwindcss": "^3.0.1"
   },
-  "engines": {
-    "node": ">=14.18.1"
-  },
   "browserslist": [ "last 2 versions" ]
 }
diff --git a/packages/freesewing.lab/page-templates/pattern-list.js b/packages/freesewing.lab/page-templates/pattern-list.js
index 8dd3c65feff..f2f606e9871 100644
--- a/packages/freesewing.lab/page-templates/pattern-list.js
+++ b/packages/freesewing.lab/page-templates/pattern-list.js
@@ -1,10 +1,16 @@
-import Page from 'shared/components/wrappers/page.js'
+import React from 'react'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Head from 'next/head'
 import Link from 'next/link'
-import About from 'site/components/about.js'
 import { useTranslation } from 'next-i18next'
 import { defaultVersion, formatVersionTitle, formatVersionUri } from 'site/components/version-picker.js'
+import TutorialIcon from 'shared/components/icons/tutorial.js'
+import DesignIcon from 'shared/components/icons/design.js'
+import BoxIcon from 'shared/components/icons/box.js'
+import CogIcon from 'shared/components/icons/cog.js'
+import Layout from 'site/components/layouts/bare'
+import { PageTitle, Breadcrumbs } from 'site/components/wrappers/layout'
 
 const links = (section, list, version) => list.map(design => (
   <li key={design} className="">
@@ -14,13 +20,49 @@ const links = (section, list, version) => list.map(design => (
   </li>
 ))
 
-const PatternListPageTemplate = ({ sections=false, version=false }) => {
+const icons = {
+  accessories: (className='') => <TutorialIcon className={className}/>,
+  blocks: (className='') => <BoxIcon className={className}/>,
+  garments: (className='') => <DesignIcon className={className}/>,
+  utilities: (className='') => <CogIcon className={className}/>,
+}
+
+const Section = ({ section, version, patterns }) => {
+  const { t } = useTranslation(['patterns'])
+  return patterns.map(design => (
+    <Link href={formatVersionUri(version, design)}>
+      <a className={`
+        text-secondary border rounded-lg
+        flex flex-col gap-1 px-4 py-2 grow justify-between text-2xl
+        md:text-4xl
+        lg:text-4xl
+        xl:text-6xl
+        2xl:text-7xl
+        hover:border hover:border-secondary hover:bg-secondary hover:bg-opacity-10
+        shadow
+      `}>
+        <div className="flex flex-row items-center justify-items-start w-full">
+          <span className="text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-5xl font-bold grow capitalize">
+            {t(`patterns:${design}.t`)}
+          </span>
+          {icons[section]("w-12 h-12 md:h-20 md:w-20 xl:w-32 xl:h-32 shrink-0")}
+        </div>
+          <span className="text-xl md:text-2xl xl:text-3xl pb-2 xl:pb-4 2xl:text-4xl">{t(`patterns:${design}.d`)}</span>
+      </a>
+    </Link>
+  ))
+}
+
+const PatternListPageTemplate = ({ section=false, version=false }) => {
   const app = useApp()
   const { t } = useTranslation(['app'])
-  if (sections === false) sections = Object.keys(app.patterns)
+
+  const title = section
+    ? app.navigation[section].__title
+    : t('designs')
 
   return (
-    <Page app={app} title={`FreeSewing Lab: ${formatVersionTitle(version)}`}>
+    <Page app={app} title={`FreeSewing Lab: ${formatVersionTitle(version)}`} layout={Layout}>
       <Head>
         <meta property="og:title" content="lab.FreeSewing.dev" key="title" />
         <meta property="og:type" content="article" key='type' />
@@ -34,22 +76,30 @@ const PatternListPageTemplate = ({ sections=false, version=false }) => {
         <meta property="og:locale" content="en_US" key='locale' />
         <meta property="og:site_name" content="lab.freesewing.dev" key='site' />
       </Head>
-      <div className="max-w-screen-md">
-        {Object.keys(app.navigation).map(section => {
-          if (sections.indexOf(section) !== -1) return (
-            <div key={section}>
-              <h2>{t(app.navigation[section].__title)}</h2>
-              <ul className="flex flex-row flex-wrap gap-2">
-                {links(section, app.patterns[section], version)}
-              </ul>
-            </div>
-          )
-          else return null
-        })}
-        <About />
+      <div className="max-w-7xl m-auto py-20 md:py-36 min-h-screen">
+        <section className="px-8">
+          <PageTitle app={app} slug={'/'+section} title={title} />
+            {section
+              ? (
+                <div className="flex flex-row flex-wrap gap-4 items-center justify-center my-8">
+                  <Section section={section} version={version} patterns={app.patterns[section]} />
+                </div>
+              )
+              : Object.keys(app.patterns).map(section => (
+                <div key={section} className="mb-12">
+                  <h2 className="pb-0">{app.navigation[section].__title}</h2>
+                  <div className="flex flex-row flex-wrap gap-4 items-center justify-center my-8">
+                    <Section {...{section, version}} patterns={app.patterns[section]} />
+                  </div>
+                </div>
+              ))
+            }
+        </section>
       </div>
     </Page>
   )
 }
 
 export default PatternListPageTemplate
+
+
diff --git a/packages/freesewing.lab/page-templates/workbench.js b/packages/freesewing.lab/page-templates/workbench.js
index b62ffd34aec..706d32179c3 100644
--- a/packages/freesewing.lab/page-templates/workbench.js
+++ b/packages/freesewing.lab/page-templates/workbench.js
@@ -1,7 +1,8 @@
-import Page from 'shared/components/wrappers/page.js'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import WorkbenchWrapper from 'shared/components/wrappers/workbench.js'
 import { useRouter } from 'next/router'
+import Layout from 'site/components/layouts/lab'
 
 const WorkbenchPage = ({ pattern }) => {
   const app = useApp()
@@ -9,8 +10,8 @@ const WorkbenchPage = ({ pattern }) => {
   const { preload, from } = router.query
 
   return (
-    <Page app={app} noLayout>
-      <WorkbenchWrapper {...{ app, pattern, preload, from }} />
+    <Page app={app}>
+      <WorkbenchWrapper {...{ app, pattern, preload, from }} layout={Layout} />
     </Page>
   )
 }
diff --git a/packages/freesewing.lab/pages/accessories/index.js b/packages/freesewing.lab/pages/accessories/index.js
new file mode 100644
index 00000000000..1a47b9f9fac
--- /dev/null
+++ b/packages/freesewing.lab/pages/accessories/index.js
@@ -0,0 +1,16 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import PageTemplate from 'site/page-templates/pattern-list.js'
+
+const Page = props => <PageTemplate section='accessories' />
+
+export default Page
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+
+
diff --git a/packages/freesewing.lab/pages/blocks/index.js b/packages/freesewing.lab/pages/blocks/index.js
new file mode 100644
index 00000000000..7c3e89ed764
--- /dev/null
+++ b/packages/freesewing.lab/pages/blocks/index.js
@@ -0,0 +1,16 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import PageTemplate from 'site/page-templates/pattern-list.js'
+
+const Page = props => <PageTemplate section='blocks' />
+
+export default Page
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+
+
diff --git a/packages/freesewing.lab/pages/garments/index.js b/packages/freesewing.lab/pages/garments/index.js
new file mode 100644
index 00000000000..13ceda7afa3
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/index.js
@@ -0,0 +1,16 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import PageTemplate from 'site/page-templates/pattern-list.js'
+
+const Page = props => <PageTemplate section='garments' />
+
+export default Page
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+
+
diff --git a/packages/freesewing.lab/pages/index.js b/packages/freesewing.lab/pages/index.js
index 8c3ac41649e..3970912aa2c 100644
--- a/packages/freesewing.lab/pages/index.js
+++ b/packages/freesewing.lab/pages/index.js
@@ -1,7 +1,134 @@
+import Page from 'site/components/wrappers/page.js'
+import useApp from 'site/hooks/useApp.js'
+import Head from 'next/head'
+import Link from 'next/link'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import Page from 'site/page-templates/pattern-list.js'
+import Layout from 'site/components/layouts/bare'
+import { useTranslation } from 'next-i18next'
+import Navigation, { Icons } from 'shared/components/navigation/primary'
 
-export default Page
+const HomePage = (props) => {
+  const app = useApp()
+  const { t } = useTranslation(['lab'])
+  return (
+    <Page app={app} title="Welcome to FreeSewing.dev" layout={Layout}>
+      <Head>
+        <meta property="og:title" content="FreeSewing.dev" key="title" />
+        <meta property="og:type" content="article" key='type' />
+        <meta property="og:description" content="Documentation and tutorials for FreeSewing developers and contributors. Plus our Developers Blog" key='description' />
+        <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/" 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/" key='url' />
+        <meta property="og:locale" content="en_US" key='locale' />
+        <meta property="og:site_name" content="freesewing.dev" key='site' />
+      </Head>
+        <section
+          style={{
+            backgroundImage: "url('/img/splash.jpg')",
+            backgroundSize: 'cover',
+            backgroundPosition: '40% 50%',
+          }}
+          className="m-0 p-0 shadow drop-shadow-lg w-full mb-8"
+        >
+          <div className="mx-auto px-8 flex flex-col items-center justify-center min-h-screen py-24 lg:min-h-0 lg:py-96">
+            <div className="flex flex-col items-end max-w-4xl">
+              <h1
+                className={`
+                  text-3xl font-black text-right px-4
+                  sm:text-6xl
+                  md:text-7xl px-6
+                  lg:px-8
+                  bg-accent
+                  `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+              >
+                <span className="font-light">lab.</span>
+                FreeSewing
+                <span className="font-light">.dev</span>
+              </h1>
+
+              <h2
+                className={`
+                  text-xl mr-0 mt-4 font-bold
+                  sm:text-3xl
+                  md:text-4xl
+                  lg:max-w-1/2 lg:text-4xl
+                  xl:pr-0 `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+              >{t('slogan')}:</h2>
+              <ul
+                className={`
+                  text-xl mr-8 font-bold list list-inside list-disc
+                  sm:text-3xl
+                  md:text-4xl
+                  lg:max-w-1/2 lg:text-3xl
+                  xl:pr-0 `}
+                style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
+              >
+                <li>{t('slogan1')}</li>
+                <li>{t('slogan2')}</li>
+                <li>{t('slogan3')}</li>
+                <li>{t('slogan4')}</li>
+              </ul>
+            </div>
+            <Icons app={app}  active='/'
+              ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
+              liClasses="text-neutral-content w-1/2 my-4 lg:mx-2 lg:w-24"
+              linkClasses={`
+                text-lg lg:text-xl py-1 text-secondary text-center
+                hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
+                flex flex-col items-center capitalize`}
+            />
+            <p className="text-neutral-content text-center mt-8">
+              To learn more about FreeSewing and try our platform
+              go to <a
+                href="https://freesewing.org/"
+                title="Go to FreeSewing.org"
+                className="text-secondary font-bold"
+              >freesewing.org</a>
+            </p>
+          </div>
+        </section>
+      <div>
+      <div className="max-w-7xl m-auto my-32">
+        <div className="bg-cover bg-neutral w-full bg-center rounded-lg shadow p-4 "
+          style={{backgroundImage: "url(/support.jpg)"}}
+        >
+          <h2 className="text-neutral-content p-4 text-4xl font-bold sm:font-light sm:text-6xl drop-shadow">Support FreeSewing</h2>
+          <p className="text-neutral-content p-4 font-bold max-w-md text-lg">
+            FreeSewing is fuelled by a voluntary subscription model
+          </p>
+          <p className="text-neutral-content p-4 font-bold max-w-md text-lg">
+            If you think what we do is worthwhile,
+            and if you can spare a few coins each month without hardship,
+            please support our work
+          </p>
+          <a role="button" className="btn btn-accent btn-wide ml-4 mb-8" href="https://freesewing.org/patrons/join">Become a Patron</a>
+        </div>
+      </div>
+      <div className="max-w-7xl m-auto my-32">
+        <div className="px-8 text-base-content">
+          <Icons app={app}
+            active='/'
+            ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
+            liClasses="w-1/3 my-4 lg:mx-2 lg:w-24"
+            linkClasses={`
+              text-lg lg:text-xl py-1 text-base-content text-center
+              hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
+              flex flex-col items-center capitalize`}
+          />
+        </div>
+      </div>
+    </div>
+
+    </Page>
+  )
+}
+
+export default HomePage
 
 export async function getStaticProps({ locale }) {
   return {
@@ -12,3 +139,4 @@ export async function getStaticProps({ locale }) {
 }
 
 
+
diff --git a/packages/freesewing.lab/pages/utilities/index.js b/packages/freesewing.lab/pages/utilities/index.js
new file mode 100644
index 00000000000..d647622f408
--- /dev/null
+++ b/packages/freesewing.lab/pages/utilities/index.js
@@ -0,0 +1,16 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import PageTemplate from 'site/page-templates/pattern-list.js'
+
+const Page = props => <PageTemplate section='utilities' />
+
+export default Page
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+
+
diff --git a/packages/freesewing.lab/public/img/splash.jpg b/packages/freesewing.lab/public/img/splash.jpg
new file mode 120000
index 00000000000..6de53397c7b
--- /dev/null
+++ b/packages/freesewing.lab/public/img/splash.jpg
@@ -0,0 +1 @@
+../../../freesewing.dev/public/img/splash.jpg
\ No newline at end of file
diff --git a/packages/freesewing.lab/versions.json b/packages/freesewing.lab/versions.json
index bfbdcdbaf71..b29a358278d 100644
--- a/packages/freesewing.lab/versions.json
+++ b/packages/freesewing.lab/versions.json
@@ -8,14 +8,13 @@
   "2.20.1",
   "2.20.0",
   "2.19.9",
-  "2.19.8",
-  "2.19.7",
-  "2.19.6",
-  "2.19.5",
-  "2.19.4",
-  "2.19.3",
-  "2.19.2",
-  "2.19.1",
-  "2.19.0"
+  "2.19.0",
+  "2.18.0",
+  "2.17.1",
+  "2.17.0",
+  "2.16.2",
+  "2.16.0",
+  "2.15.4",
+  "2.15.0"
 ]
 
diff --git a/packages/freesewing.shared/components/icons/box.js b/packages/freesewing.shared/components/icons/box.js
new file mode 100644
index 00000000000..6a72ec8ea31
--- /dev/null
+++ b/packages/freesewing.shared/components/icons/box.js
@@ -0,0 +1,7 @@
+const BoxIcon = ({ className="m-6 h-6" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+  </svg>
+)
+
+export default BoxIcon
diff --git a/packages/freesewing.shared/components/icons/cog.js b/packages/freesewing.shared/components/icons/cog.js
new file mode 100644
index 00000000000..021a248a8cf
--- /dev/null
+++ b/packages/freesewing.shared/components/icons/cog.js
@@ -0,0 +1,8 @@
+const CogIcon = ({ className='h-6 m-6' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </svg>
+)
+
+export default CogIcon
diff --git a/packages/freesewing.shared/components/icons/design.js b/packages/freesewing.shared/components/icons/design.js
index 3d4575d4ff0..8bf2e61fc97 100644
--- a/packages/freesewing.shared/components/icons/design.js
+++ b/packages/freesewing.shared/components/icons/design.js
@@ -1,5 +1,5 @@
-const Design = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
+const Design = ({ className='h-6 w-6' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.75} d="m11.975 2.9104c-1.5285 0-2.7845 1.2563-2.7845 2.7848 0 0.7494 0.30048 1.4389 0.78637 1.9394a0.79437 0.79437 0 0 0 0.0084 0.00839c0.38087 0.38087 0.74541 0.62517 0.94538 0.82483 0.19998 0.19966 0.25013 0.2645 0.25013 0.51907v0.65964l-9.1217 5.2665c-0.28478 0.16442-0.83603 0.46612-1.3165 0.9611-0.48047 0.49498-0.92451 1.3399-0.66684 2.2585 0.22026 0.78524 0.7746 1.3486 1.3416 1.5878 0.56697 0.23928 1.0982 0.23415 1.4685 0.23415h18.041c0.37033 0 0.90158 0.0051 1.4686-0.23415 0.56697-0.23928 1.1215-0.80261 1.3418-1.5878 0.25767-0.91859-0.18662-1.7636-0.66709-2.2585-0.48046-0.49498-1.0315-0.79669-1.3162-0.9611l-8.9844-5.1873v-0.73889c0-0.70372-0.35623-1.2837-0.71653-1.6435-0.35778-0.3572-0.70316-0.58503-0.93768-0.81789-0.20864-0.21601-0.33607-0.50298-0.33607-0.83033 0-0.67 0.52595-1.1962 1.1959-1.1962 0.67001 0 1.1962 0.5262 1.1962 1.1962a0.79429 0.79429 0 0 0 0.79434 0.79427 0.79429 0.79429 0 0 0 0.79427-0.79427c0-1.5285-1.2563-2.7848-2.7848-2.7848zm-0.06859 8.2927 8.9919 5.1914c0.28947 0.16712 0.69347 0.41336 0.94393 0.67138 0.25046 0.25803 0.31301 0.3714 0.24754 0.60483-0.10289 0.36677-0.19003 0.40213-0.35969 0.47373-0.16967 0.07161-0.47013 0.09952-0.80336 0.09952h-18.041c-0.33323 0-0.6337-0.02792-0.80336-0.09952-0.16967-0.07161-0.25675-0.10696-0.35963-0.47373-0.06548-0.23342-0.00303-0.3468 0.24748-0.60483 0.25046-0.25803 0.65471-0.50426 0.94418-0.67138z" />
   </svg>
 )
diff --git a/packages/freesewing.shared/components/icons/docs.js b/packages/freesewing.shared/components/icons/docs.js
index 65053ce741b..89e7f8bfba1 100644
--- a/packages/freesewing.shared/components/icons/docs.js
+++ b/packages/freesewing.shared/components/icons/docs.js
@@ -1,6 +1,6 @@
 /* Sourced from heroicons.com - Thanks guys! */
-const Docs = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+const Docs = ({ className="h-6 w-6" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
   </svg>
 )
diff --git a/packages/freesewing.shared/components/icons/guide.js b/packages/freesewing.shared/components/icons/guide.js
index 910bacf2127..0456eaa3768 100644
--- a/packages/freesewing.shared/components/icons/guide.js
+++ b/packages/freesewing.shared/components/icons/guide.js
@@ -1,5 +1,5 @@
-const Guides = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+const Guides = ({ className="h-6 w-6" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z" />
   </svg>
 )
diff --git a/packages/freesewing.shared/components/icons/help.js b/packages/freesewing.shared/components/icons/help.js
index 92d7723d790..edf0c6e6bd3 100644
--- a/packages/freesewing.shared/components/icons/help.js
+++ b/packages/freesewing.shared/components/icons/help.js
@@ -1,6 +1,6 @@
 /* Sourced from heroicons.com - Thanks guys! */
-const Help = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+const Help = ({ className="w-6 h-6" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   </svg>
 )
diff --git a/packages/freesewing.shared/components/icons/rss.js b/packages/freesewing.shared/components/icons/rss.js
index 0b5b77e7532..cf3c03fca90 100644
--- a/packages/freesewing.shared/components/icons/rss.js
+++ b/packages/freesewing.shared/components/icons/rss.js
@@ -1,6 +1,6 @@
 /* Sourced from heroicons.com - Thanks guys! */
-const Rss = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+const Rss = ({ className='h-6 w-6' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
   </svg>
 )
diff --git a/packages/freesewing.shared/components/icons/tutorial.js b/packages/freesewing.shared/components/icons/tutorial.js
index ea49dcfa350..3f642bc80dc 100644
--- a/packages/freesewing.shared/components/icons/tutorial.js
+++ b/packages/freesewing.shared/components/icons/tutorial.js
@@ -1,5 +1,5 @@
-const Tutorial = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+const Tutorial = ({ className="w-6 h-6" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path d="M12 14l9-5-9-5-9 5 9 5z" />
     <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js
index 18c33ab486e..7c946d1e4ab 100644
--- a/packages/freesewing.shared/components/layouts/default.js
+++ b/packages/freesewing.shared/components/layouts/default.js
@@ -74,8 +74,9 @@ const asideClasses = `
   overflow-y-scroll
   z-20
   bg-base-100 text-base-content
-  sm:bg-neutral sm:bg-opacity-95 sm:text-neutral-content
-  transition-all `
+  transition-all
+  xl:w-1/4
+`
 
 
 const DefaultLayout = ({
@@ -110,53 +111,58 @@ const DefaultLayout = ({
     bg-base-100
     `}>
       <Header app={app} setSearch={setSearch} />
-      <main className={`
-        grow flex flex-row
-        gap-2
-        ${!workbench ? 'lg:gap-8 xl:gap-16' : ''}
-      `}>
-        <aside className={`
-          ${asideClasses}
-          ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
-          sm:flex-row-reverse
-          ${workbench && collapsePrimaryNav
-            ? 'sm:px-0 sm:w-16'
-            : 'sm:px-1 md:px-4 lg:px-8 sm:w-[38.2%]'
-          }
-        `}>
-          {workbench && (
-            <div className={`hidden sm:flex`}>
-              <button
-                className="text-secondary-focus h-full px-2 pl-4 hover:animate-pulse"
-                onClick={() => setCollapsePrimaryNav(!collapsePrimaryNav)}
-              >
-                {collapsePrimaryNav
-                  ? <><Right /><Right /><Right /></>
-                  : <><Left /><Left /><Left /></>
-                }
-              </button>
-            </div>
-          )}
-          <PrimaryNavigation app={app} active={slug}/>
-        </aside>
-        <section className={`
-          p-4 pt-24 sm:pt-28 w-full
-          sm:px-1 md:px-4 lg:px-8
-          ${workbench && collapsePrimaryNav
-            ? ''
-            : 'max-w-61.8%'
-          }
-        `}>
-          <div className={workbench ? '' : "max-w-5xl"}>
-            {title && (
-              <>
-                <Breadcrumbs app={app} slug={slug} title={title} />
-                <PageTitle app={app} slug={slug} title={title} />
-              </>
+      <main className="grow bg-base-100">
+        <div className="m-auto flex flex-row justify-center">
+
+          <aside className={`
+            ${asideClasses}
+            ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
+            sm:flex-row-reverse
+            ${workbench && collapsePrimaryNav
+              ? 'sm:px-0 sm:w-16'
+              : 'sm:px-1 md:px-4 lg:px-8'
+            }
+            w-96
+          `}>
+            {workbench && (
+              <div className={`hidden sm:flex`}>
+                <button
+                  className="text-secondary-focus h-full px-2 pl-4 hover:animate-pulse"
+                  onClick={() => setCollapsePrimaryNav(!collapsePrimaryNav)}
+                >
+                  {collapsePrimaryNav
+                    ? <><Right /><Right /><Right /></>
+                    : <><Left /><Left /><Left /></>
+                  }
+                </button>
+              </div>
             )}
-            {children}
+            <PrimaryNavigation app={app} active={slug}/>
+          </aside>
+
+          <div className="p-0 m-0 bg-base-100">
+            <section className={`
+              p-4 pt-24 sm:pt-28
+              sm:px-1 md:px-4 lg:px-8
+              ${workbench && collapsePrimaryNav
+                ? ''
+                : 'max-w-7xl'
+              }
+            `}>
+              <div>
+                {title && (
+                  <>
+                    <Breadcrumbs app={app} slug={slug} title={title} />
+                    <PageTitle app={app} slug={slug} title={title} />
+                  </>
+                )}
+                {children}
+              </div>
+            </section>
           </div>
-        </section>
+
+        </div>
+
         {workbench && AltMenu && (
           <aside className={`
             ${asideClasses}
diff --git a/packages/freesewing.shared/components/locale-picker.js b/packages/freesewing.shared/components/locale-picker.js
index 2b2eb7e16cd..a0505579c95 100644
--- a/packages/freesewing.shared/components/locale-picker.js
+++ b/packages/freesewing.shared/components/locale-picker.js
@@ -9,10 +9,10 @@ const LocalePicker = ({ app }) => {
   const router = useRouter()
 
   return (
-    <div className="dropdown">
+    <div className="dropdown w-full md:w-auto">
       <div tabIndex="0" className={`
-        m-0 btn btn-neutral flex flex-row gap-2
-        sm:btn-ghost
+        m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+        md:btn-ghost
         hover:bg-neutral hover:border-neutral-content
       `}>
         <LocaleIcon />
diff --git a/packages/freesewing.shared/components/mdx/highlight.js b/packages/freesewing.shared/components/mdx/highlight.js
index f76d80df3e4..7013375d153 100644
--- a/packages/freesewing.shared/components/mdx/highlight.js
+++ b/packages/freesewing.shared/components/mdx/highlight.js
@@ -17,7 +17,7 @@ const Highlight = (props) => {
     : 'txt'
 
   const preProps = {
-    className: `language-${language} hljs text-base lg:text-lg whitespace-pre-wrap break-words`
+    className: `language-${language} hljs text-base lg:text-lg whitespace-pre-wrap break-all`
   }
   if (props.raw) preProps.dangerouslySetInnerHTML = { __html: props.raw }
 
diff --git a/packages/freesewing.shared/components/navigation/aside.js b/packages/freesewing.shared/components/navigation/aside.js
new file mode 100644
index 00000000000..1f6fe7b7dd0
--- /dev/null
+++ b/packages/freesewing.shared/components/navigation/aside.js
@@ -0,0 +1,26 @@
+import PrimaryNavigation from './primary'
+
+const Aside = ({ app, slug, mobileOnly=false, before=[], after=[]}) => (
+  <aside className={`
+    fixed top-0 right-0 h-screen w-screen
+    overflow-y-auto z-20
+    bg-base-100 text-base-content md:bg-base-50
+    transition-all
+    ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
+    md:flex md:sticky md:flex-row-reverse
+    md:relative md:transform-none
+    px-8 py-24
+    shrink-0
+    md:w-24 md:px-2 md:justify-center
+    lg:w-max lg:pr-2 lg:border-r-2
+    xl:w-max xl:border-0
+    2xl:pr-8
+    ${mobileOnly ? 'block md:hidden' : ''}
+  `}>
+    {before}
+    <PrimaryNavigation app={app} active={slug}/>
+    {after}
+  </aside>
+)
+
+export default Aside
diff --git a/packages/freesewing.shared/components/navigation/primary.js b/packages/freesewing.shared/components/navigation/primary.js
index 187015d9e42..54e2cc9557f 100644
--- a/packages/freesewing.shared/components/navigation/primary.js
+++ b/packages/freesewing.shared/components/navigation/primary.js
@@ -1,11 +1,13 @@
 import Link from 'next/link'
 import orderBy from 'lodash.orderby'
-import ThemePicker from 'shared/components/theme-picker.js'
 import RssIcon from 'shared/components/icons/rss.js'
 import TutorialIcon from 'shared/components/icons/tutorial.js'
 import GuideIcon from 'shared/components/icons/guide.js'
 import HelpIcon from 'shared/components/icons/help.js'
 import DocsIcon from 'shared/components/icons/docs.js'
+import DesignIcon from 'shared/components/icons/design.js'
+import BoxIcon from 'shared/components/icons/box.js'
+import CogIcon from 'shared/components/icons/cog.js'
 
 // Don't show children for blog and showcase posts
 const keepClosed = ['blog', 'showcase', ]
@@ -19,11 +21,15 @@ const force = [
 
 // List of icons matched to top-level slug
 const icons = {
-  blog: <RssIcon />,
-  tutorials: <TutorialIcon />,
-  guides: <GuideIcon />,
-  howtos: <HelpIcon />,
-  reference: <DocsIcon />
+  blog: (className='') => <RssIcon className={className}/>,
+  tutorials: (className='') => <TutorialIcon className={className}/>,
+  guides: (className='') => <GuideIcon className={className}/>,
+  howtos: (className='') => <HelpIcon className={className}/>,
+  reference: (className='') => <DocsIcon className={className}/>,
+  accessories: (className='') => <TutorialIcon className={className}/>,
+  blocks: (className='') => <BoxIcon className={className}/>,
+  garments: (className='') => <DesignIcon className={className}/>,
+  utilities: (className='') => <CogIcon className={className}/>,
 }
 
 /* helper method to order nav entries */
@@ -33,7 +39,7 @@ const order = obj => orderBy(obj, ['__order', '__title'], ['asc', 'asc'])
 // Exported for re-use
 export const Chevron = ({w=8, m=2}) => <svg className={`
     fill-current opacity-75 w-${w} h-${w} mr-${m}
-    details-toggle hover:text-secondary sm:hover:text-secondary-focus
+    details-toggle hover:text-secondary sm:hover:text-secondary
   `}
   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
   <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/>
@@ -47,9 +53,9 @@ const currentChildren = current => Object.values(order(current))
 // Exported for re-use
 export const linkClasses = `text-lg lg:text-xl
   py-1
-  text-base-content sm:text-neutral-content
+  text-base-content sm:text-base-content
   hover:text-secondary
-  sm:hover:text-secondary-focus
+  sm:hover:text-secondary
 `
 
 // Figure out whether a page is on the path to the active page
@@ -76,7 +82,7 @@ const SubLevel = ({ nodes={}, active }) => (
               flex flex-row
               px-2
               text-base-content
-              sm:text-neutral-content
+              sm:text-base-content
               hover:cursor-row-resize
               items-center
             `}>
@@ -86,16 +92,16 @@ const SubLevel = ({ nodes={}, active }) => (
                   ${linkClasses}
                   hover:cursor-pointer
                   hover:border-secondary
-                  sm:hover:border-secondary-focus
+                  sm:hover:border-secondary
                   ${child.__slug === active
-                    ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
-                    : 'text-base-content sm:text-neutral-content'
+                    ? 'text-secondary border-secondary sm:text-secondary sm:border-secondary'
+                    : 'text-base-content sm:text-base-content'
                   }
                 `}>
                   <span className={`
                     text-3xl mr-2 inline-block p-0 leading-3
                     ${child.__slug === active
-                      ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                      ? 'text-secondary sm:text-secondary translate-y-1'
                       : 'translate-y-3'
                     }
                   `}>
@@ -120,15 +126,15 @@ const SubLevel = ({ nodes={}, active }) => (
               ${linkClasses}
               hover:cursor-pointer
               hover:border-secondary
-              sm:hover:border-secondary-focus
+              sm:hover:border-secondary
               ${child.__slug === active
-                ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
-                : 'text-base-content sm:text-neutral-content'
+                ? 'text-secondary border-secondary sm:text-secondary sm:border-secondary'
+                : 'text-base-content sm:text-base-content'
               }`}>
               <span className={`
                 text-3xl mr-2 inline-block p-0 leading-3
                 ${child.__slug === active
-                  ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                  ? 'text-secondary sm:text-secondary translate-y-1'
                   : 'translate-y-3'
                 }
               `}>
@@ -154,15 +160,15 @@ const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }
       hover:cursor-row-resize
       p-2
       text-base-content
-      sm:text-neutral-content
+      sm:text-base-content
       items-center
     `}>
-      <span className="text-secondary-focus">{icon}</span>
+      <span className="text-secondary">{icon}</span>
       <Link href={`/${slug}`}>
         <a className={`
           grow ${linkClasses} hover:cursor-pointer
           ${slug === active
-            ? 'text-secondary sm:text-secondary-focus'
+            ? 'text-secondary sm:text-secondary'
             : ''
           }`}
         >
@@ -175,12 +181,15 @@ const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }
   </details>
 )
 
-const Navigation = ({ app, active }) => {
+const Navigation = ({ app, active, className='' }) => {
   if (!app.navigation) return null
   const output = []
   for (const page of order(app.navigation)) output.push(<TopLevel
     key={page.__slug}
-    icon={icons[page.__slug] || <span className="text-3xl mr-2 translate-y-3 inline-block p-0 leading-3">&deg;</span>}
+    icon={icons[page.__slug]
+      ? icons[page.__slug]('w-6 h-6')
+      : <span className="text-3xl mr-2 translate-y-3 inline-block p-0 leading-3">&deg;</span>
+    }
     title={page.__title}
     slug={page.__slug}
     hasChildren={keepClosed.indexOf(page.__slug) === -1}
@@ -189,13 +198,44 @@ const Navigation = ({ app, active }) => {
     active={active}
   />)
 
-  return <div className='pb-20'>{output}</div>
+  return <div className={`pb-20 ${className}`}>{output}</div>
 }
 
-const PrimaryMenu = ({ app, active }) => (
-  <nav className="sm:max-w-lg grow mb-12">
-    <ThemePicker app={app} className="w-full sm:hidden"/>
-    <Navigation app={app} active={active} />
+export const Icons = ({
+  app, active,
+  ulClasses='',
+  liClasses='',
+  linkClasses=`grow text-lg lg:text-xl py-1 text-base-content sm:text-base-content
+  hover:text-secondary sm:hover:text-secondary hover:cursor-pointer
+  flex flex-col items-center`
+}) => {
+  if (!app.navigation) return null
+  const output = []
+  for (const page of order(app.navigation)) {
+    output.push(
+      <li key={page.__slug} className={liClasses}>
+        <Link href={`/${page.__slug}`}>
+          <a className={linkClasses} title={page.__title}>
+            {icons[page.__slug]
+              ? icons[page.__slug]('w-14 h-14')
+              : <HelpIcon />
+            }
+            <span className='font-bold'>{page.__title}</span>
+          </a>
+        </Link>
+      </li>
+    )
+  }
+
+  return <ul className={ulClasses}>{output}</ul>
+}
+
+const PrimaryMenu = ({ app, active, before=[], after=[] }) => (
+  <nav className="mb-12">
+    {before}
+    <Icons app={app} ulClasses="hidden md:block lg:hidden flex flex-col items-center"/>
+    <Navigation app={app} active={active} className="md:hidden lg:block"/>
+    {after}
   </nav>
 )
 
diff --git a/packages/freesewing.shared/components/theme-picker.js b/packages/freesewing.shared/components/theme-picker.js
index 5e8424b391d..cf2a6eaa46f 100644
--- a/packages/freesewing.shared/components/theme-picker.js
+++ b/packages/freesewing.shared/components/theme-picker.js
@@ -6,10 +6,10 @@ const ThemePicker = ({ app, className }) => {
   const { t } = useTranslation(['themes'])
 
   return (
-      <div className={`dropdown ${className}`}>
+      <div className={`dropdown ${className} w-full md:w-auto`}>
         <div tabIndex="0" className={`
-          m-0 btn btn-neutral flex flex-row gap-2
-          sm:btn-ghost
+          m-0 btn btn-neutral flex flex-row gap-2 btn-outline
+          md:btn-ghost
           hover:bg-neutral hover:border-neutral-content
         `}>
           <ThemeIcon />
diff --git a/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js b/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js
index fb3124f3df8..97cf95861d5 100644
--- a/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js
+++ b/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js
@@ -15,7 +15,7 @@ import Part from './part'
  * where the browser will render this as zero width and height.
  *
  * To avoid that, we use the SizeMe which will report the size of the
- * grandparent element, and then we wraper our SVG in a div that we
+ * grandparent element, and then we wrap our SVG in a div that we
  * set to this size. This will cause the SVG to fill in that entire
  * space, and the pan and zoom to adapt to this size.
  *
@@ -32,6 +32,7 @@ const SvgWrapper = props => {
     <TransformWrapper
       minScale={0.1}
       centerZoomedOut={true}
+      wheel={{ activationKeys: ['Control'] }}
     >
       <TransformComponent>
         <div style={{ width: size.width+'px', }}>
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-count.js b/packages/freesewing.shared/components/workbench/inputs/design-option-count.js
index 20bb961ec3a..bc62080ed13 100644
--- a/packages/freesewing.shared/components/workbench/inputs/design-option-count.js
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-count.js
@@ -6,9 +6,9 @@ import { useTranslation } from 'next-i18next'
 const EditCount = props => (
   <div className="form-control mb-2 w-full">
     <label className="label">
-      <span className="label-text text-neutral-content">{props.min}</span>
-      <span className="label-text font-bold text-neutral-content">{props.value}</span>
-      <span className="label-text text-neutral-content">{props.max}</span>
+      <span className="label-text text-base-content">{props.min}</span>
+      <span className="label-text font-bold text-base-content">{props.value}</span>
+      <span className="label-text text-base-content">{props.max}</span>
     </label>
     <label className="input-group input-group-sm">
       <input
@@ -19,7 +19,7 @@ const EditCount = props => (
         value={props.value}
         onChange={props.handleChange}
       />
-      <span className="text-neutral-content font-bold">#</span>
+      <span className="text-base-content font-bold">#</span>
     </label>
   </div>
 )
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-list.js b/packages/freesewing.shared/components/workbench/inputs/design-option-list.js
index 2525826c848..746d0a4ebb7 100644
--- a/packages/freesewing.shared/components/workbench/inputs/design-option-list.js
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-list.js
@@ -36,7 +36,7 @@ const DesignOptionList = props => {
                   ? choice === dflt
                     ? 'text-secondary'
                     : 'text-accent'
-                  : 'text-neutral-content'
+                  : 'text-base-content'
                 }
               `}
             >
@@ -56,7 +56,7 @@ const DesignOptionList = props => {
           disabled={val === dflt}
           onClick={reset}
         >
-          <span className={val===dflt ? 'text-neutral' : 'text-accent'}><ClearIcon /></span>
+          <span className={val===dflt ? 'text-base' : 'text-accent'}><ClearIcon /></span>
         </button>
       </div>
     </div>
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js b/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
index e83b23556a3..53830a10d6f 100644
--- a/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
@@ -7,9 +7,9 @@ import { useTranslation } from 'next-i18next'
 const EditOption = props => (
   <div className="form-control mb-2 w-full">
     <label className="label">
-      <span className="label-text text-neutral-content">{props.min}{props.suffix}</span>
-      <span className="label-text font-bold text-neutral-content">{props.value}{props.suffix}</span>
-      <span className="label-text text-neutral-content">{props.max}{props.suffix}</span>
+      <span className="label-text text-base-content">{props.min}{props.suffix}</span>
+      <span className="label-text font-bold text-base-content">{props.value}{props.suffix}</span>
+      <span className="label-text text-base-content">{props.max}{props.suffix}</span>
     </label>
     <label className="input-group input-group-sm">
       <input
@@ -20,7 +20,7 @@ const EditOption = props => (
         value={props.value}
         onChange={props.handleChange}
       />
-      <span className="text-neutral-content font-bold">{props.suffix}</span>
+      <span className="text-base-content font-bold">{props.suffix}</span>
     </label>
   </div>
 )
@@ -51,7 +51,7 @@ const DesignOptionPctDeg = props => {
 
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
-      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+      <p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
         {props.ot(`${props.option}.d`)}
       </p>
       <div className="flex flex-row justify-between">
diff --git a/packages/freesewing.shared/components/workbench/measurements/index.js b/packages/freesewing.shared/components/workbench/measurements/index.js
index bd4acda5426..a370885b15f 100644
--- a/packages/freesewing.shared/components/workbench/measurements/index.js
+++ b/packages/freesewing.shared/components/workbench/measurements/index.js
@@ -48,8 +48,7 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
       <h1>
         <span className='capitalize mr-4 opacity-70'>
           {pattern.config.name}:
-        </span>
-        {t('measurements')}
+        </span> {t('measurements')}
       </h1>
       <details open className="my-2">
         <summary><h2 className="inline pl-1">{t('cfp:preloadMeasurements')}</h2></summary>
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
index 32fa66bca25..7d0d78a899e 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
@@ -24,7 +24,7 @@ const CoreSettingList = props => {
 
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
-      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+      <p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
         {t(`settings:${props.setting}.d`)}
       </p>
       <div className="flex flex-row">
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js
index 69d47763876..9b8f012f882 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js
@@ -27,7 +27,7 @@ const CoreSettingMm = props => {
 
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
-      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+      <p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
         {t(`settings:${props.setting}.d`)}
       </p>
       <div className="flex flex-row justify-between">
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js
index ce83ef979bc..9fa8c83ce64 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js
@@ -27,7 +27,7 @@ const CoreSettingNr = props => {
 
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
-      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+      <p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
         {t(`settings:${props.setting}.d`)}
       </p>
       <div className="flex flex-row justify-between">
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js
index 07cf086e878..a3b903ee34c 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js
@@ -22,7 +22,7 @@ const CoreSettingOnly = props => {
 
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
-      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+      <p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
         {t(`settings:only.d`)}
       </p>
       <div className="flex flex-row">
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js
index 3ddf230f87e..f4104c88fd8 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js
@@ -29,7 +29,7 @@ const CoreSettingMm = props => {
 
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
-      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+      <p className="m-0 p-0 px-2 mb-2 text-base-content opacity-60 italic">
         {t(`settings:sa.d`)}
       </p>
       <div className="flex flex-row justify-between">
diff --git a/packages/freesewing.shared/components/workbench/menu/index.js b/packages/freesewing.shared/components/workbench/menu/index.js
index 9f04d4bf1ba..0dfb2fb4fc0 100644
--- a/packages/freesewing.shared/components/workbench/menu/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/index.js
@@ -24,7 +24,7 @@ export const NoSumDiv = props => (
     hover:cursor-resize
     hover:border-secondary
     sm:hover:border-secondary-focus
-    text-base-content sm:text-neutral-content
+    text-base-content sm:text-base-content
   `}>{props.children}</div>
 )
 export const SumDiv = props => (
@@ -34,7 +34,7 @@ export const SumDiv = props => (
     hover:cursor-resize
     hover:border-secondary
     sm:hover:border-secondary-focus
-    text-base-content sm:text-neutral-content
+    text-base-content sm:text-base-content
   `}>{props.children}</div>
 )
 export const Summary = props => (
@@ -42,7 +42,7 @@ export const Summary = props => (
     flex flex-row
     px-2
     text-base-content
-    sm:text-neutral-content
+    sm:text-base-content
     hover:cursor-row-resize
     items-center
   `}>{props.children}</summary>
@@ -53,7 +53,7 @@ export const TopSummary = props => (
     hover:cursor-row-resize
     p-2
     text-base-content
-    sm:text-neutral-content
+    sm:text-base-content
     items-center
   `}>
     <span className="text-secondary-focus mr-4">{props.icon || null}</span>
@@ -67,7 +67,7 @@ export const SumButton = props => (
     w-full justify-between
     text-left
     text-base-content
-    sm:text-neutral-content
+    sm:text-base-content
     hover:cursor-pointer
     items-center
     mr-4
@@ -84,7 +84,7 @@ export const SecText = props => props.raw
 
 const WorkbenchMenu = props => {
   return (
-    <nav className="smmax-w-96 grow mb-12">
+    <nav className="grow mb-12">
       <ViewMenu {...props} />
       {props.gist?._state?.view === 'draft' && (
         <>
diff --git a/packages/freesewing.shared/components/workbench/menu/test-design-options/option.js b/packages/freesewing.shared/components/workbench/menu/test-design-options/option.js
index eadf6918ef3..941e6888df9 100644
--- a/packages/freesewing.shared/components/workbench/menu/test-design-options/option.js
+++ b/packages/freesewing.shared/components/workbench/menu/test-design-options/option.js
@@ -9,7 +9,7 @@ const SumButton = props => (
     w-full justify-between
     text-left
     text-base-content
-    sm:text-neutral-content
+    sm:text-base-content
     hover:cursor-pointer
     items-center
     mr-4
@@ -22,7 +22,7 @@ const SumDiv = (props) => (
     hover:cursor-resize
     hover:border-secondary
     sm:hover:border-secondary-focus
-    text-base-content sm:text-neutral-content
+    text-base-content sm:text-base-content
     ${props.active && 'border-secondary-focus'}
 
   `}>{props.children}</div>
@@ -42,7 +42,8 @@ const Option = props => {
         {
           type: 'option',
           option: props.option
-        }
+        },
+        true // Close navigation on mobile
       )}>
         <SumDiv active={active}>
           <span className={`
diff --git a/packages/freesewing.shared/components/workbench/menu/view.js b/packages/freesewing.shared/components/workbench/menu/view.js
index c35e983f1a1..e83938b38c7 100644
--- a/packages/freesewing.shared/components/workbench/menu/view.js
+++ b/packages/freesewing.shared/components/workbench/menu/view.js
@@ -8,54 +8,54 @@ const View = props => {
     {
       name: 'measurements',
       title: t('measurements'),
-      onClick: () => props.updateGist(['_state', 'view'], 'measurements')
+      onClick: () => props.updateGist(['_state', 'view'], 'measurements', true)
     },
     {
       name: 'draft',
       title: t('draftPattern', { pattern: props.pattern.config.name }),
-      onClick: () => props.updateGist(['_state', 'view'], 'draft')
+      onClick: () => props.updateGist(['_state', 'view'], 'draft', true)
     },
     {
       name: 'test',
       title: t('testPattern', { pattern: props.pattern.config.name }),
-      onClick: () => props.updateGist(['_state', 'view'], 'test')
+      onClick: () => props.updateGist(['_state', 'view'], 'test', true)
     },
     {
       name: 'printingLayout',
       title: t('layoutThing', { thing: props.pattern.config.name })
        + ': ' + t('forPrinting'),
-      onClick: () => props.updateGist(['_state', 'view'], 'printingLayout')
+      onClick: () => props.updateGist(['_state', 'view'], 'printingLayout', true)
     },
     {
       name: 'cuttingLayout',
       title: t('layoutThing', { thing: props.pattern.config.name })
        + ': ' + t('forCutting'),
-      onClick: () => props.updateGist(['_state', 'view'], 'cuttingLayout')
+      onClick: () => props.updateGist(['_state', 'view'], 'cuttingLayout', true)
     },
     {
       name: 'export',
       title: t('exportThing', { thing: props.pattern.config.name }),
-      onClick: () => props.updateGist(['_state', 'view'], 'export')
+      onClick: () => props.updateGist(['_state', 'view'], 'export', true)
     },
     {
       name: 'events',
       title: t('events'),
-      onClick: () => props.updateGist(['_state', 'view'], 'events')
+      onClick: () => props.updateGist(['_state', 'view'], 'events', true)
     },
     {
       name: 'yaml',
       title: t('YAML'),
-      onClick: () => props.updateGist(['_state', 'view'], 'yaml')
+      onClick: () => props.updateGist(['_state', 'view'], 'yaml', true)
     },
     {
       name: 'json',
       title: t('JSON'),
-      onClick: () => props.updateGist(['_state', 'view'], 'json')
+      onClick: () => props.updateGist(['_state', 'view'], 'json', true)
     },
     {
       name: 'edit',
       title: t('editThing', { thing: 'YAML' }),
-      onClick: () => props.updateGist(['_state', 'view'], 'edit')
+      onClick: () => props.updateGist(['_state', 'view'], 'edit', true)
     },
     {
       name: 'clear',
@@ -71,7 +71,7 @@ const View = props => {
         hover:cursor-row-resize
         p-2
         text-base-content
-        sm:text-neutral-content
+        sm:text-base-content
         items-center
       `}>
         <span className="text-secondary-focus mr-4"><MenuIcon /></span>
@@ -93,7 +93,7 @@ const View = props => {
               capitalize
               ${entry.name === props.gist?._state?.view
                 ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
-                : 'text-base-content sm:text-neutral-content'
+                : 'text-base-content sm:text-base-content'
               }
             `} onClick={entry.onClick}>
               <span className={`
diff --git a/packages/freesewing.shared/components/wrappers/toc.js b/packages/freesewing.shared/components/wrappers/toc.js
new file mode 100644
index 00000000000..aa950c3e0c9
--- /dev/null
+++ b/packages/freesewing.shared/components/wrappers/toc.js
@@ -0,0 +1,42 @@
+/*
+ * This is used to wrap a Table of Contents (toc) as returned
+ * from the mdxLoader method (see shared/mdx/loader.js)
+ * It is NOT for wrapping plain markdown/mdx
+ */
+import { useState, useEffect, Fragment } from 'react'
+
+// See: https://mdxjs.com/guides/mdx-on-demand/
+import { run } from '@mdx-js/mdx'
+import * as runtime from 'react/jsx-runtime.js'
+
+// Components that are available in all MDX
+import customComponents from 'shared/components/mdx'
+
+const TocWrapper = ({toc, app}) => {
+
+  const [mdxModule, setMdxModule] = useState()
+
+  useEffect(() => {
+    ;(async () => {
+      setMdxModule(await run(toc, runtime))
+    })()
+  }, [toc])
+
+  // React component for MDX content
+  const MdxContent = mdxModule ? mdxModule.default : Fragment
+
+  return (
+    <div className={`
+      mdx mdx-toc text-base-content text-lg lg:text-xl
+      sticky top-8 max-h-screen overflow-y-auto
+      max-w-prose
+      md:border-l-4 md:pl-4 md:mb-8 md:border-base-200
+    `}
+    >
+      {mdxModule && <MdxContent components={customComponents(app)}/>}
+    </div>
+  )
+}
+
+export default TocWrapper
+
diff --git a/packages/freesewing.shared/components/wrappers/workbench.js b/packages/freesewing.shared/components/wrappers/workbench.js
index 12e4f6e74c8..204a65ec6a9 100644
--- a/packages/freesewing.shared/components/wrappers/workbench.js
+++ b/packages/freesewing.shared/components/wrappers/workbench.js
@@ -55,10 +55,10 @@ const hasRequiredMeasurements = (pattern, gist) => {
 
 /*
  * This component wraps the workbench and is in charge of
- * keeping the gist state, which will trickly down
+ * keeping the gist state, which will trickle down
  * to all workbench subcomponents
  */
-const WorkbenchWrapper = ({ app, pattern, preload=false, from=false }) => {
+const WorkbenchWrapper = ({ app, pattern, preload=false, from=false, layout=false }) => {
 
   // State for gist
   const [gist, setGist] = useLocalStorage(`${pattern.config.name}_gist`, defaultGist(pattern, app.locale))
@@ -82,10 +82,12 @@ const WorkbenchWrapper = ({ app, pattern, preload=false, from=false }) => {
   }, [preload, from])
 
   // Helper methods to manage the gist state
-  const updateGist = (path, content) => {
+  const updateGist = (path, content, closeNav=false) => {
     const newGist = {...gist}
     set(newGist, path, content)
     setGist(newGist)
+    // Force close of menu on mobile if it is open
+    if (closeNav && app.primaryMenu) app.setPrimaryMenu(false)
   }
   const unsetGist = (path) => {
     const newGist = {...gist}
@@ -128,14 +130,19 @@ const WorkbenchWrapper = ({ app, pattern, preload=false, from=false }) => {
     AltMenu: <Menu {...componentProps }/>
   }
 
+  // Layout to use
+  const LayoutComponent = layout
+    ? layout
+    : Layout
+
   const Component = views[gist?._state?.view]
     ? views[gist._state.view]
     : views.welcome
 
-  return  <Layout {...layoutProps}>
+  return  <LayoutComponent {...layoutProps}>
             {messages}
             <Component {...componentProps} />
-          </Layout>
+          </LayoutComponent>
 }
 
 export default WorkbenchWrapper
diff --git a/packages/freesewing.shared/config/tailwind.config.js b/packages/freesewing.shared/config/tailwind.config.js
index c854c29a711..5dfec877b1a 100644
--- a/packages/freesewing.shared/config/tailwind.config.js
+++ b/packages/freesewing.shared/config/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     './pages/**/*.js',
     './components/*.js',
     './components/**/*.js',
+    './page-templates/*.js',
     '../freesewing.shared/components/**/*.js',
   ],
   plugins: [require('daisyui'), require('tailwindcss/nesting')],
diff --git a/packages/freesewing.shared/mdx/loader.js b/packages/freesewing.shared/mdx/loader.js
index aa398c1cf5d..9a164fb5f44 100644
--- a/packages/freesewing.shared/mdx/loader.js
+++ b/packages/freesewing.shared/mdx/loader.js
@@ -10,6 +10,7 @@ import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import remarkCopyLinkedFiles from 'remark-copy-linked-files'
 import { remarkIntroPlugin } from './remark-intro-plugin.mjs'
+import mdxPluginToc from './mdx-plugin-toc.mjs'
 import smartypants from 'remark-smartypants'
 // Rehype plugins we want to use
 import rehypeHighlight from 'rehype-highlight'
@@ -61,7 +62,27 @@ const mdxLoader = async (language, site, slug) => {
     })
   )
 
-  return {mdx, intro}
+  // This is not ideal as we're adding a second pass but for now it will do
+  // See: https://github.com/remarkjs/remark-toc/issues/37
+  const toc = String(
+    await compile(md, {
+      outputFormat: 'function-body',
+      remarkPlugins: [
+        remarkFrontmatter,
+        remarkGfm,
+        smartypants,
+        [
+          mdxPluginToc,
+          { language: 'en' }
+        ]
+      ],
+      rehypePlugins: [
+        rehypeSlug,
+      ],
+    })
+  )
+
+  return {mdx, intro, toc}
 }
 
 export default mdxLoader
diff --git a/packages/freesewing.shared/mdx/mdx-plugin-toc.mjs b/packages/freesewing.shared/mdx/mdx-plugin-toc.mjs
new file mode 100644
index 00000000000..4ce5bf443f2
--- /dev/null
+++ b/packages/freesewing.shared/mdx/mdx-plugin-toc.mjs
@@ -0,0 +1,30 @@
+import {toc} from 'mdast-util-toc'
+
+const headings = {
+  en: 'Table of contents',
+  fr: 'Table des matières',
+  nl: 'Inhoudsopgave',
+  es: 'Tabla de contenido',
+  de: 'Inhaltsverzeichnis'
+}
+
+export default function mdxToc(options = {}) {
+  return (node) => {
+    const result = toc(node, { heading: false })
+
+    if (result.map) node.children = [
+      {
+        type: 'heading',
+        depth: 4,
+        children: [{
+          type: 'text',
+          value: headings[options.language || 'en']
+        }]
+      },
+      result.map
+    ]
+    else node.children = []
+
+    return
+  }
+}
diff --git a/packages/freesewing.shared/package.json b/packages/freesewing.shared/package.json
index fedd3a1f886..c0e10de0db0 100644
--- a/packages/freesewing.shared/package.json
+++ b/packages/freesewing.shared/package.json
@@ -22,6 +22,7 @@
     "highlight.js": "^11.4.0",
     "lodash.orderby": "^4.6.0",
     "lodash.unset": "^4.5.2",
+    "mdast-util-toc": "^6.1.0",
     "react-markdown": "^8.0.0",
     "react-sizeme": "^3.0.2",
     "react-timeago": "^6.2.1",
diff --git a/packages/freesewing.shared/prebuild/lab.mjs b/packages/freesewing.shared/prebuild/lab.mjs
index fb183f5c616..c25cfbbf927 100644
--- a/packages/freesewing.shared/prebuild/lab.mjs
+++ b/packages/freesewing.shared/prebuild/lab.mjs
@@ -89,6 +89,7 @@ export async function getStaticProps({ locale }) {
 const l = 'prebuild'
 export const prebuildLab = async (site) => {
   const promises = []
+  const availableVersions = {}
   // Load config
   const versions = JSON.parse(await fs.readFile(
     path.resolve('..', 'freesewing.lab', 'versions.json'),
@@ -130,6 +131,7 @@ export const prebuildLab = async (site) => {
       if (process.env.BUILD_ALL_VERSIONS) {
         // Download published versions from unpkg
         for (const version of versions) {
+          if (typeof availableVersions[version] === 'undefined') availableVersions[version] = new Set()
           // Assume that if the file is on disk, it's good to go (caching)
           const file = path.resolve('..', `freesewing.lab`, 'lib', version, `${design}.mjs`)
           let cached
@@ -145,6 +147,7 @@ export const prebuildLab = async (site) => {
             await fs.mkdir(path.resolve('..', `freesewing.lab`, 'pages', 'v', version), { recursive: true })
             const code = (await loadFromUnpkg(design, version))
             if (code) {
+              availableVersions[version].add(design)
               promises.push(
                 fs.writeFile(
                   path.resolve('..', `freesewing.lab`, 'lib', version, `${design}.mjs`),
@@ -156,6 +159,8 @@ export const prebuildLab = async (site) => {
                 ),
               )
             } else console.log(`No ${version} for ${design}`)
+          } else {
+            availableVersions[version].add(design)
           }
         }
       }
@@ -163,6 +168,15 @@ export const prebuildLab = async (site) => {
   }
 
   if (process.env.BUILD_ALL_VERSIONS) {
+    // Write available versions file
+    const av = {}
+    for (const [v, set] of Object.entries(availableVersions)) av[v] = [...set].sort()
+    promises.push(
+      fs.writeFile(
+        path.resolve('..', `freesewing.lab`, 'available-versions.json'),
+        JSON.stringify(av, null, 2)
+      )
+    )
     // Also add version overview pages
     for (const version of versions) {
       // Assume that if the file is on disk, it's good to go (caching)
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index 8a7d4fb5835..527e10af35d 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -35,6 +35,18 @@
   .mdx a[aria-hidden="true"] {
     text-decoration: none;
   }
+  /* Watch out of P tags in the toc list */
+  .mdx-toc ul li p {
+    margin: 0;
+    padding: 0;
+    display: inline;
+  }
+  /* Prevent inline code style from applying to code blocks */
+  .mdx code.hljs {
+    color: inherit;
+    background-color: inherit;
+    background-opacity: inherit;
+  }
 
   /* FreeSewing SVG output styles */
   .fs-stroke-fabric      { stroke: var(--pattern-fabric); }
@@ -206,7 +218,7 @@
 }
 .theme-gradient.loading {
   animation-name: MOVE-BG;
-  animation-duration: 2s;
+  animation-duration: 4s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   margin-top: 0;
@@ -217,7 +229,7 @@
      background-position-x: 0;
    }
    to {
-     background-position-x: -300px;
+     background-position-x: -200vw;
    }
 }
 
diff --git a/packages/freesewing.shared/themes/dark.js b/packages/freesewing.shared/themes/dark.js
index 693e88827fa..0197accf3fd 100644
--- a/packages/freesewing.shared/themes/dark.js
+++ b/packages/freesewing.shared/themes/dark.js
@@ -34,11 +34,12 @@ module.exports = {
   '--btn-error-content': colors.neutral[50],
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.neutral[300]},
-    ${colors.neutral[300]} 10px,
-    ${colors.neutral[800]} 10px,
-    ${colors.neutral[800]} 20px
+    90deg,
+    ${colors.violet[900]},
+    ${colors.violet[900]} 40%,
+    ${colors.pink[700]} 65%,
+    ${colors.violet[600]} 90%,
+    ${colors.violet[900]} 100%
   )`,
 
   '--code-background-color': '#111',
@@ -50,7 +51,7 @@ module.exports = {
   '--code-border-width': 2,
   '--code-outer-padding': '0 0.5rem',
   '--code-inner-padding': '1rem',
-  '--code-color-keyword': colors.pink['400'],
+  '--code-color-keyword': colors.yellow['500'],
   '--code-font-weight-keyword': 'bold',
   '--code-color-entity': colors.violet['400'],
   '--code-font-weight-entity': 'bold',
diff --git a/packages/freesewing.shared/themes/hax0r.js b/packages/freesewing.shared/themes/hax0r.js
index b2c31016475..1a28587ac06 100644
--- a/packages/freesewing.shared/themes/hax0r.js
+++ b/packages/freesewing.shared/themes/hax0r.js
@@ -36,11 +36,10 @@ module.exports = {
   '--rounded-btn': '0',
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.lime['700']},
-    ${colors.lime['700']} 15px,
-    ${bg} 15px,
-    ${bg} 30px
+    90deg,
+    ${colors.lime['900']},
+    ${colors.lime['500']} 50%,
+    ${colors.lime['900']} 100%
   )`,
 
   '--code-background-color': '#002407',
diff --git a/packages/freesewing.shared/themes/lgbtq.js b/packages/freesewing.shared/themes/lgbtq.js
index e2960df1ebd..0bfa855fa81 100644
--- a/packages/freesewing.shared/themes/lgbtq.js
+++ b/packages/freesewing.shared/themes/lgbtq.js
@@ -29,19 +29,19 @@ module.exports = {
   'error': colors.red['600'],
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.red[500]},
-    ${colors.red[500]} 20px,
-    ${colors.orange[500]} 20px,
-    ${colors.orange[500]} 40px,
-    ${colors.yellow[400]} 40px,
-    ${colors.yellow[400]} 60px,
-    ${colors.green[500]} 60px,
-    ${colors.green[500]} 80px,
-    ${colors.blue[500]} 80px,
-    ${colors.blue[500]} 100px,
-    ${colors.violet[500]} 100px,
-    ${colors.violet[500]} 120px
+     90deg,
+     ${colors.red[500]},
+     ${colors.red[500]} 16.66%,
+     ${colors.orange[500]} 16.66%,
+     ${colors.orange[500]} 33.33%,
+     ${colors.yellow[400]} 33.33%,
+     ${colors.yellow[400]} 50%,
+     ${colors.green[500]} 50%,
+     ${colors.green[500]} 66.66%,
+     ${colors.blue[500]} 66.66%,
+     ${colors.blue[500]} 83.33%,
+     ${colors.violet[500]} 83.33%,
+     ${colors.violet[500]} 100%
   )`,
 
   '--code-background-color': colors.neutral['800'],
diff --git a/packages/freesewing.shared/themes/light.js b/packages/freesewing.shared/themes/light.js
index 7a94464334e..97ffefb18d0 100644
--- a/packages/freesewing.shared/themes/light.js
+++ b/packages/freesewing.shared/themes/light.js
@@ -131,11 +131,12 @@ module.exports = {
   * This is used as a border & loading indicator
   */
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
-    ${colors.neutral[900]} 0,
-    ${colors.neutral[900]} 10px,
-    ${colors.neutral[50]} 10px,
-    ${colors.neutral[50]} 20px
+    90deg,
+    ${colors.violet[600]} 0,
+    ${colors.violet[500]} 30%,
+    ${colors.yellow[500]} 50%,
+    ${colors.purple[500]} 75%,
+    ${colors.violet[600]} 100%
   )`,
 
   /* CODE HIGHLIGHTING COLORS
@@ -158,7 +159,7 @@ module.exports = {
   /*
     * These variables are used to style the highlighted tokens themselves
     */
-  '--code-color-keyword': colors.pink['400'],
+  '--code-color-keyword': colors.yellow['500'],
   '--code-font-weight-keyword': 'bold',
   '--code-color-entity': colors.violet['400'],
   '--code-font-weight-entity': 'bold',
@@ -168,7 +169,7 @@ module.exports = {
   '--code-color-variable': colors.indigo['400'],
   '--code-color-comment': colors.neutral['400'],
   '--code-color-tag': colors.green['400'],
-  '--code-color-property': 'inherit',
+  '--code-color-property': colors.yellow['200'],
   '--code-font-weight-property': 'bold',
 
   /* FREESEWING PATTERN THEMEING
diff --git a/packages/freesewing.shared/themes/trans.js b/packages/freesewing.shared/themes/trans.js
index f4438251e75..a51ccd20ec5 100644
--- a/packages/freesewing.shared/themes/trans.js
+++ b/packages/freesewing.shared/themes/trans.js
@@ -14,7 +14,7 @@ module.exports = {
   'primary': pink,
   'primary-focus': blue,
   'primary-content': colors.neutral['900'],
-  'secondary': blue,
+  'secondary': colors.sky['500'],
   'secondary-focus': pink,
   'secondary-content': colors.neutral['900'],
 
@@ -32,17 +32,17 @@ module.exports = {
   'error': colors.red['600'],
 
   '--theme-gradient': `repeating-linear-gradient(
-    -45deg,
+    90deg,
     #77cbf9,
-    #77cbf9 20px,
-    #ecadb9 20px,
-    #ecadb9 40px,
-    ${colors.neutral['50']} 40px,
-    ${colors.neutral['50']} 60px,
-    #ecadb9 60px,
-    #ecadb9 80px,
-    #77cbf9 80px,
-    #77cbf9 100px
+    #77cbf9 20%,
+    #ecadb9 20%,
+    #ecadb9 40%,
+    ${colors.neutral['50']} 40%,
+    ${colors.neutral['50']} 60%,
+    #ecadb9 60%,
+    #ecadb9 80%,
+    #77cbf9 80%,
+    #77cbf9 100%
   )`,
 
   '--code-background-color': colors.neutral['800'],
diff --git a/packages/i18n/src/locales/de/index.js b/packages/i18n/src/locales/de/index.js
index 7a651b6767f..328625f6af9 100644
--- a/packages/i18n/src/locales/de/index.js
+++ b/packages/i18n/src/locales/de/index.js
@@ -9,6 +9,7 @@ import gdpr from './gdpr.yaml'
 import i18n from './i18n.yaml'
 import intro from './intro.yaml'
 import measurements from './measurements.yaml'
+import lab from './lab.yaml'
 import options from './options/'
 import optiongroups from './optiongroups.yaml'
 import parts from './parts.yaml'
@@ -31,6 +32,7 @@ const topics = {
   i18n,
   intro,
   measurements,
+  lab,
   options,
   optiongroups,
   parts,
diff --git a/packages/i18n/src/locales/de/lab.yaml b/packages/i18n/src/locales/de/lab.yaml
new file mode 100644
index 00000000000..1d4ea84b02b
--- /dev/null
+++ b/packages/i18n/src/locales/de/lab.yaml
@@ -0,0 +1,5 @@
+slogan: The FreeSewing lab provides
+slogan1: All our pattern designs
+slogan2: New & old version
+slogan3: Bleeding edge code
+slogan4: Unreleased designs
diff --git a/packages/i18n/src/locales/en/index.js b/packages/i18n/src/locales/en/index.js
index 7a651b6767f..328625f6af9 100644
--- a/packages/i18n/src/locales/en/index.js
+++ b/packages/i18n/src/locales/en/index.js
@@ -9,6 +9,7 @@ import gdpr from './gdpr.yaml'
 import i18n from './i18n.yaml'
 import intro from './intro.yaml'
 import measurements from './measurements.yaml'
+import lab from './lab.yaml'
 import options from './options/'
 import optiongroups from './optiongroups.yaml'
 import parts from './parts.yaml'
@@ -31,6 +32,7 @@ const topics = {
   i18n,
   intro,
   measurements,
+  lab,
   options,
   optiongroups,
   parts,
diff --git a/packages/i18n/src/locales/en/lab.yaml b/packages/i18n/src/locales/en/lab.yaml
new file mode 100644
index 00000000000..1d4ea84b02b
--- /dev/null
+++ b/packages/i18n/src/locales/en/lab.yaml
@@ -0,0 +1,5 @@
+slogan: The FreeSewing lab provides
+slogan1: All our pattern designs
+slogan2: New & old version
+slogan3: Bleeding edge code
+slogan4: Unreleased designs
diff --git a/packages/i18n/src/locales/es/index.js b/packages/i18n/src/locales/es/index.js
index 7a651b6767f..328625f6af9 100644
--- a/packages/i18n/src/locales/es/index.js
+++ b/packages/i18n/src/locales/es/index.js
@@ -9,6 +9,7 @@ import gdpr from './gdpr.yaml'
 import i18n from './i18n.yaml'
 import intro from './intro.yaml'
 import measurements from './measurements.yaml'
+import lab from './lab.yaml'
 import options from './options/'
 import optiongroups from './optiongroups.yaml'
 import parts from './parts.yaml'
@@ -31,6 +32,7 @@ const topics = {
   i18n,
   intro,
   measurements,
+  lab,
   options,
   optiongroups,
   parts,
diff --git a/packages/i18n/src/locales/es/lab.yaml b/packages/i18n/src/locales/es/lab.yaml
new file mode 100644
index 00000000000..1d4ea84b02b
--- /dev/null
+++ b/packages/i18n/src/locales/es/lab.yaml
@@ -0,0 +1,5 @@
+slogan: The FreeSewing lab provides
+slogan1: All our pattern designs
+slogan2: New & old version
+slogan3: Bleeding edge code
+slogan4: Unreleased designs
diff --git a/packages/i18n/src/locales/fr/index.js b/packages/i18n/src/locales/fr/index.js
index 7a651b6767f..328625f6af9 100644
--- a/packages/i18n/src/locales/fr/index.js
+++ b/packages/i18n/src/locales/fr/index.js
@@ -9,6 +9,7 @@ import gdpr from './gdpr.yaml'
 import i18n from './i18n.yaml'
 import intro from './intro.yaml'
 import measurements from './measurements.yaml'
+import lab from './lab.yaml'
 import options from './options/'
 import optiongroups from './optiongroups.yaml'
 import parts from './parts.yaml'
@@ -31,6 +32,7 @@ const topics = {
   i18n,
   intro,
   measurements,
+  lab,
   options,
   optiongroups,
   parts,
diff --git a/packages/i18n/src/locales/fr/lab.yaml b/packages/i18n/src/locales/fr/lab.yaml
new file mode 100644
index 00000000000..1d4ea84b02b
--- /dev/null
+++ b/packages/i18n/src/locales/fr/lab.yaml
@@ -0,0 +1,5 @@
+slogan: The FreeSewing lab provides
+slogan1: All our pattern designs
+slogan2: New & old version
+slogan3: Bleeding edge code
+slogan4: Unreleased designs
diff --git a/packages/i18n/src/locales/nl/index.js b/packages/i18n/src/locales/nl/index.js
index 7a651b6767f..328625f6af9 100644
--- a/packages/i18n/src/locales/nl/index.js
+++ b/packages/i18n/src/locales/nl/index.js
@@ -9,6 +9,7 @@ import gdpr from './gdpr.yaml'
 import i18n from './i18n.yaml'
 import intro from './intro.yaml'
 import measurements from './measurements.yaml'
+import lab from './lab.yaml'
 import options from './options/'
 import optiongroups from './optiongroups.yaml'
 import parts from './parts.yaml'
@@ -31,6 +32,7 @@ const topics = {
   i18n,
   intro,
   measurements,
+  lab,
   options,
   optiongroups,
   parts,
diff --git a/packages/i18n/src/locales/nl/lab.yaml b/packages/i18n/src/locales/nl/lab.yaml
new file mode 100644
index 00000000000..1d4ea84b02b
--- /dev/null
+++ b/packages/i18n/src/locales/nl/lab.yaml
@@ -0,0 +1,5 @@
+slogan: The FreeSewing lab provides
+slogan1: All our pattern designs
+slogan2: New & old version
+slogan3: Bleeding edge code
+slogan4: Unreleased designs
diff --git a/packages/i18n/src/next/de/app.mjs b/packages/i18n/src/next/de/app.mjs
index 1304bc5a6f3..f904e71a461 100644
--- a/packages/i18n/src/next/de/app.mjs
+++ b/packages/i18n/src/next/de/app.mjs
@@ -70,7 +70,7 @@ const app = {
   "documentationForEditors": "Dokumentation für Redakteure",
   "documentationForTranslators": "Dokumentation für Übersetzer/-innen",
   "documentationOverview": "Überblick über die Dokumentation",
-  "dolls": "Dolls",
+  "dolls": "Puppen",
   "download": "Herunterladen",
   "draft": "Entwurf",
   "draftPattern": "{pattern} erstellen",
@@ -127,7 +127,7 @@ const app = {
   "newThing": "Neu {thing}",
   "newPatternForModel": "{pattern} für {model} neu erstellen",
   "noChanges": "Keine Änderungen",
-  "no": "No",
+  "no": "Nein",
   "noPasswordPolicy": "Wir haben keine strikten Passwort-Rictlinien",
   "noSeamAllowance": "Keine Nahtzugabe",
   "notAllOfThisContentIsAvailableInLanguage": "Nicht alle Inhalte sind auf Deutsch verfügbar",
@@ -228,7 +228,7 @@ const app = {
   "withBreasts": "Mit Brüsten",
   "withoutBreasts": "Ohne Brüste",
   "yay": "Juhuu!",
-  "yes": "Yes",
+  "yes": "Ja",
   "youAreAPatron": "Du bist ein/e Förder/in",
   "youAreNotAPatron": "Du bist kein/e Förder/in",
   "youAreNotLoggedIn": "Du bist nicht eingeloggt",
diff --git a/packages/i18n/src/next/de/common.mjs b/packages/i18n/src/next/de/common.mjs
index 2127614e23f..39594d6b160 100644
--- a/packages/i18n/src/next/de/common.mjs
+++ b/packages/i18n/src/next/de/common.mjs
@@ -3,9 +3,9 @@
  * All edits will be overwritten on the next (pre)build
  */
 const common = {
-  "designs": "Designs",
-  "sloganCome": "Come for the sewing patterns",
-  "sloganStay": "Stay for the community"
+  "designs": "Entwurf",
+  "sloganCome": "Komm für die Schnittmuster",
+  "sloganStay": "Bleib für die Community"
 }
 
 export default common
diff --git a/packages/i18n/src/next/de/index.mjs b/packages/i18n/src/next/de/index.mjs
index ff8663da767..d3a172711a0 100644
--- a/packages/i18n/src/next/de/index.mjs
+++ b/packages/i18n/src/next/de/index.mjs
@@ -16,6 +16,7 @@ import gdpr from "./gdpr.mjs"
 import i18n from "./i18n.mjs"
 import intro from "./intro.mjs"
 import jargon from "./jargon.mjs"
+import lab from "./lab.mjs"
 import measurements from "./measurements.mjs"
 import optiongroups from "./optiongroups.mjs"
 import o_aaron from "./o_aaron.mjs"
@@ -79,6 +80,7 @@ const allNamespaces = {
   i18n,
   intro,
   jargon,
+  lab,
   measurements,
   optiongroups,
   o_aaron,
diff --git a/packages/i18n/src/next/de/jargon.mjs b/packages/i18n/src/next/de/jargon.mjs
index 0c419a79e4e..9cf9baf73e9 100644
--- a/packages/i18n/src/next/de/jargon.mjs
+++ b/packages/i18n/src/next/de/jargon.mjs
@@ -9,7 +9,7 @@ const jargon = {
   "darts.d": "<a href='/docs/sewing/darts/'>Abnäher</a> in der <a href='/docs/sewing'>Dokumentation zum Nähen</a>",
   "doubleWeltPockets.d": "Siehe <a href='/docs/sewing/double-welt-pockets/'>Doppelpaspeltasche</a> in der <a href='/docs/sewing'>Dokumentation zum Nähen</a>",
   "ease.d": "Siehe <a href='/docs/sewing/ease/'>Zugabe</a> in der <a href='/docs/sewing'>Dokumentation zum Nähen</a>",
-  "edgestitch.d": "See <a href='/docs/sewing/edgestitching/'>Edgestitching</a> in the <a href='/docs/sewing'>Sewing documentation</a>",
+  "edgestitch.d": "Siehe <a href='/docs/sewing/edgestitching/'>Nähte absteppen</a> in der <a href='/docs/sewing'>Dokumentation zum Nähen</a>",
   "fabricGrain.d": "Siehe <a href='/docs/sewing/fabric-grain/'>Fadenlauf</a> in der <a href='/docs/sewing'>Dokumentation zum Nähen</a>",
   "goodSidesTogether.d": "Siehe <a href='/docs/sewing/good-sides-together/'>rechts auf rechts</a> in der <a href='/docs/sewing/'>Dokumentation zum Nähen</a>",
   "onTheFold.d": "Siehe <a href='/docs/sewing/on-the-fold/'>Im Stoffbruch</a> in der <a href='/docs/sewing/'>Dokumentation zum Nähen</a>",
diff --git a/packages/i18n/src/next/de/lab.mjs b/packages/i18n/src/next/de/lab.mjs
new file mode 100644
index 00000000000..3c9ee32c121
--- /dev/null
+++ b/packages/i18n/src/next/de/lab.mjs
@@ -0,0 +1,13 @@
+/*
+ * This file is auto-generated by the prebuild script
+ * All edits will be overwritten on the next (pre)build
+ */
+const lab = {
+  "slogan": "The FreeSewing lab provides",
+  "slogan1": "All our pattern designs",
+  "slogan2": "New & old version",
+  "slogan3": "Bleeding edge code",
+  "slogan4": "Unreleased designs"
+}
+
+export default lab
diff --git a/packages/i18n/src/next/de/measurements.mjs b/packages/i18n/src/next/de/measurements.mjs
index 36bc155c5ba..aeecce61a57 100644
--- a/packages/i18n/src/next/de/measurements.mjs
+++ b/packages/i18n/src/next/de/measurements.mjs
@@ -33,7 +33,7 @@ const measurements = {
   "upperLeg": "Oberschenkelumfang",
   "waist": "Taillenweite",
   "waistBack": "Taillenweite hinten",
-  "waistToArmhole": "Waist to armhole",
+  "waistToArmhole": "Taille zu Armloch",
   "waistToFloor": "Taille bis Boden",
   "waistToHips": "Taille bis Hüfte",
   "waistToKnee": "Taille bis Knie",
diff --git a/packages/i18n/src/next/de/o_aaron.mjs b/packages/i18n/src/next/de/o_aaron.mjs
index cf071eff6ce..b5d9cbd12ae 100644
--- a/packages/i18n/src/next/de/o_aaron.mjs
+++ b/packages/i18n/src/next/de/o_aaron.mjs
@@ -5,7 +5,7 @@
 const o_aaron = {
   "armholeDrop.t": "Armlochabsenkung",
   "armholeDrop.d": "Senkt das Armloch um diesen Wert. Negative Werte erhöhen es.",
-  "backlineBend.t": "Armlochform hinten",
+  "backlineBend.t": "Hintere Armlochform",
   "backlineBend.d": "Bestimmt die Form / Krümmung der Rückseite der Armlöcher.",
   "hipsEase.t": "Bequemlichkeitszugabe Hüfte",
   "hipsEase.d": "Die Menge an Bequemlichkeits-/Bewegungszugabe an deinen Hüften.",
diff --git a/packages/i18n/src/next/de/o_bee.mjs b/packages/i18n/src/next/de/o_bee.mjs
index 61207cadf96..5884727580a 100644
--- a/packages/i18n/src/next/de/o_bee.mjs
+++ b/packages/i18n/src/next/de/o_bee.mjs
@@ -4,55 +4,57 @@
  */
 const o_bee = {
   "chestEase.t": "Brustzugabe",
-  "chestEase.d": "Controls the chest ease in the underlying Bella block Bee is based on",
+  "chestEase.d": "Kontrolliert die Brustzugabe des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
   "waistEase.t": "Taillenzugabe",
-  "waistEase.d": "Controls the waist ease in the underlying Bella block Bee is based on",
-  "bustSpanEase.t": "Büstenumfang leicht",
-  "bustSpanEase.d": "Controls the bust span ease in the underlying Bella block Bee is based on",
-  "topDepth.t": "Top Depth",
-  "topDepth.d": "Controls how far the bikini cup extends upwards",
-  "bottomCupDepth.t": "Bottom depth",
-  "bottomCupDepth.d": "Controls how far the bikini cup extends downwards",
-  "sideDepth.t": "Side depth",
-  "sideDepth.d": "Controls how far the bikini cup extends towards the side",
-  "sideCurve.t": "Side curve",
-  "sideCurve.d": "Controls the curvature of the side of the bikini cup",
-  "frontCurve.t": "Front curve",
-  "frontCurve.d": "Controls the curvature of the front of the bikini cup",
-  "bellaGuide.t": "Show Bella",
-  "bellaGuide.d": "Shows the outline of the Bella block Bee is based on",
-  "ties.t": "Ties",
-  "ties.d": "Whether to includes ties, yes or no",
-  "bandTieWidth.t": "Band (chest) tie width",
-  "bandTieWidth.d": "Controls the width of the ties around your chest",
-  "bandTieLength.t": "Band (chest) tie length",
-  "bandTieLength.d": "Controls the length of the ties around your chest",
-  "bandTieEnds.t": "Band (chest) tie ends",
-  "bandTieEnds.d": "Whether you like straight or pointy ends on the ties around your chest",
-  "bandTieColours.t": "Band (chest) tie length colours",
-  "bandTieColours.d": "Whether you want single color ties around your chest, or dual-coloured ones",
-  "neckTieWidth.t": "Neck tie width",
-  "neckTieWidth.d": "Controls the width of the ties around your chest",
-  "neckTieLength.t": "Neck tie length",
-  "neckTieLength.d": "Controls the length of the ties around your chest",
-  "neckTieEnds.t": "Neck tie ends",
-  "neckTieEnds.d": "Whether you like straight or pointy ends on the ties around your chest",
-  "neckTieColours.t": "Neck tie colours",
-  "neckTieColours.d": "Whether you want single color ties around your chest, or dual-coloured ones",
-  "crossBackTies.t": "Cross back ties",
-  "crossBackTies.d": "Whether you'd like to use the cross back tie variation of Bee",
-  "bandLength.t": "Band Length (Cross back ties)",
-  "bandLength.d": "Controls the length of the band around your chest for the cross back ties variation of Bee",
-  "backDartHeight.t": "Back dart height (Bella)",
-  "backDartHeight.d": "Controls the back dart height in the underlying Bella block Bee is based on",
-  "armholeDepth.t": "Armhole depth (Bella)",
-  "armholeDepth.d": "Controls the armhole depth in the underlying Bella block Bee is based on",
-  "frontArmholePitchDepth.t": "Front armhole pitch depth (Bella)",
-  "frontArmholePitchDepth.d": "Controls the front armhole pitch depth in the underlying Bella block Bee is based on",
-  "frontShoulderWidth.t": "Front shoulder width (Bella)",
-  "frontShoulderWidth.d": "Controls the front shoulder width in the underlying Bella block Bee is based on",
-  "highBustWidth.t": "High bust width (Bella)",
-  "highBustWidth.d": "Controls the high bust width in the underlying Bella block Bee is based on"
+  "waistEase.d": "Kontrolliert die Taillenzugabe des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
+  "bustSpanEase.t": "Zugabe im Abstand der Brustpunkte",
+  "bustSpanEase.d": "Kontrolliert die Zugabe des Abstandes der Brustpunkte des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
+  "topDepth.t": "Obere Tiefe",
+  "topDepth.d": "Kontrolliert, wie weit sich der Bikini-Cup nach oben erstreckt",
+  "bottomCupDepth.t": "Untere Tiefe",
+  "bottomCupDepth.d": "Kontrolliert, wie weit sich der Bikini-Cup nach unten erstreckt",
+  "sideDepth.t": "Seitliche Tiefe",
+  "sideDepth.d": "Kontrolliert, wie weit sich der Bikini-Cup zur Seite erstreckt",
+  "sideCurve.t": "Seitliche Kurve",
+  "sideCurve.d": "Kontrolliert die Krümmung der Seite des Bikini-Cups",
+  "frontCurve.t": "Vordere Kurve",
+  "frontCurve.d": "Kontrolliert die Krümmung der Vorderseite des Bikini-Cups",
+  "bellaGuide.t": "Bella anzeigen",
+  "bellaGuide.d": "Zeigt die Umrisse des Bella-Grundschnittes an, auf dem Bee basiert",
+  "ties.t": "Bänder",
+  "ties.d": "Sollen Bänder hinzugefügt werden, ja oder nein",
+  "bandTieWidth.t": "Breite des Brustbandes",
+  "bandTieWidth.d": "Kontrolliert die Breite des Bandes um deinen Brustkorb",
+  "bandTieLength.t": "Länge des Brustbandes",
+  "bandTieLength.d": "Kontrolliert die Länge des Bandes um deinen Brustkorb",
+  "bandTieEnds.t": "Enden des Brustbandes",
+  "bandTieEnds.d": "Möchtest du gerade oder spitze Enden des Brustbandes?",
+  "bandTieColours.t": "Farben des Brustbandes",
+  "bandTieColours.d": "Möchtest du ein- oder mehrfarbige Brustbänder?",
+  "neckTieWidth.t": "Breite des Nackenträgers",
+  "neckTieWidth.d": "Steuert die Breite des Nackenträgers",
+  "neckTieLength.t": "Länge des Nackenträgers",
+  "neckTieLength.d": "Steuert die Länge des Nackenträgers",
+  "neckTieEnds.t": "Enden des Nackenträgers",
+  "neckTieEnds.d": "Möchtest du gerade oder spitze Enden des Nackenträgers?",
+  "neckTieColours.t": "Farben des Nackenträgers",
+  "neckTieColours.d": "Möchtest du ein- oder mehrfarbige Nackenträger?",
+  "crossBackTies.t": "Gekreuzte Rückenträger",
+  "crossBackTies.d": "Möchtest du die Version von Bee mit gekreuzten Rückenträgern?",
+  "bandLength.t": "Länge der gekreuzten Rückenträger",
+  "bandLength.d": "Kontrolliert die Länge Brustbandes für die Variante von Bee mit gekreuzten Rückenträgern",
+  "backDartHeight.t": "Höhe der Rückenabnäher (Bella)",
+  "backDartHeight.d": "Kontrolliert die Höhe der Rückenabnäher des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
+  "armholeDepth.t": "Tiefen des Armloches (Bella)",
+  "armholeDepth.d": "Kontrolliert die Tiefe des Armloches des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
+  "frontArmholePitchDepth.t": "Tiefe des vorderen Armlochdrehpunktes (Bella)",
+  "frontArmholePitchDepth.d": "Kontrolliert die Tiefe des vorderen Armlochdrehpunktes des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
+  "frontShoulderWidth.t": "Vordere Schulterbreite (Bella)",
+  "frontShoulderWidth.d": "Kontrolliert die vordere Schulterbreite des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert",
+  "fullChestEaseReduction.t": "Full chest reduction (Bella)",
+  "fullChestEaseReduction.d": "Controls the full chest reduction in the underlying Bella block Bee is based on",
+  "highBustWidth.t": "Hohe Brustweite (Bella)",
+  "highBustWidth.d": "Kontrolliert die hohe Brustbreite des zugrunde liegenden Grundschnittes \"Bella\" auf welchem Bee basiert"
 }
 
 export default o_bee
diff --git a/packages/i18n/src/next/de/o_bella.mjs b/packages/i18n/src/next/de/o_bella.mjs
index b5b99645dbe..6cf2bd08a0c 100644
--- a/packages/i18n/src/next/de/o_bella.mjs
+++ b/packages/i18n/src/next/de/o_bella.mjs
@@ -9,10 +9,10 @@ const o_bella = {
   "waistEase.d": "Steuert die Menge an Leichtigkeit in deiner Taille",
   "bustSpanEase.t": "Zugabe seitlicher Brustbereich",
   "bustSpanEase.d": "Steuert die Größe der (horizontalen) Zugabe, zu deinem seitlichen Brustbereich, \nwenn Brustpunkt berechnet wird.",
-  "shoulderToShoulderEase.t": "Shoulder to Shoulder ease",
-  "shoulderToShoulderEase.d": "Controls the amount of ease between your shoulders. Initially set to -.5% because Bella implements a block that is used in the industry.",
-  "fullChestEaseReduction.t": "Full chest ease reduction",
-  "fullChestEaseReduction.d": "Allows you to independently reduce the ease around the chest to make it fit tight(er) in that area",
+  "shoulderToShoulderEase.t": "Zugabe des Schulterabstandes",
+  "shoulderToShoulderEase.d": "Kontrolliert die Menge an Zugabe zwischen deinen Schultern. Liegt inital bei -0,5%, da Bella ein Grundschnitt erfüllt, welcher in der Branche verwendet wird.",
+  "fullChestEaseReduction.t": "Verringerung der Brustumfangszugabe",
+  "fullChestEaseReduction.d": "Ermöglicht es dir den Spielraum an der Brust zu verringern, um dort einen engeren Sitz zu ermöglichen",
   "backDartHeight.t": "Höhe Rückenabnäher",
   "backDartHeight.d": "Steuert die Höhe des Rückenabnähers",
   "bustDartLength.t": "Länge des Brustabnähers",
@@ -24,18 +24,18 @@ const o_bella = {
   "armholeDepth.t": "Armlochtiefe",
   "armholeDepth.d": "Steuert die Tiefe des Armloches",
   "backArmholeSlant.t": "Hintere Armlochschiebung",
-  "backArmholeSlant.d": "Das Rüstungsloch dreht sich leicht um seinen Pitchpunkt",
+  "backArmholeSlant.d": "Dreht das Armloch leicht in seinem Drehpunkt",
   "frontArmholeCurvature.t": "Vordere Armlochkrümmung",
   "frontArmholeCurvature.d": "Steuert wie tief das Armloch nach vorne unten ausgeschnitten ist",
   "backArmholeCurvature.t": "Hintere Armlochkrümmung",
   "backArmholeCurvature.d": "Steuert wie tief das Armloch nach hinten unten ausgeschnitten ist",
-  "frontArmholePitchDepth.t": "Front-Armloch-Tiefe",
+  "frontArmholePitchDepth.t": "Vordere Armlochtiefe",
   "frontArmholePitchDepth.d": "Stellt die horizontale Position des Vorderarmlochpunktes fest",
   "backArmholePitchDepth.t": "Rückenarmloch-Tiefe",
   "backArmholePitchDepth.d": "Stellt die horizontale Position des Rückenlochpunktes fest",
   "backNeckCutout.t": "Ausschnitt im Nacken",
-  "backNeckCutout.d": "Steuert wie tief die Halsöffnung auf der Rückseite abgesogen wird",
-  "backHemSlope.t": "Hinterer Saum Hang",
+  "backNeckCutout.d": "Steuert, wie tief der Nackenausschnit am Rücken ausfällt",
+  "backHemSlope.t": "Neigung des hinteren Saumes",
   "backHemSlope.d": "Steuert den Hang des Saum auf der Rückseite",
   "frontShoulderWidth.t": "Vordere Schulterbreite",
   "frontShoulderWidth.d": "Steuert die Schmalheit der vorderen Schultern relativ zum Rücken",
diff --git a/packages/i18n/src/next/de/o_charlie.mjs b/packages/i18n/src/next/de/o_charlie.mjs
index 07c549a5f8c..588794b761d 100644
--- a/packages/i18n/src/next/de/o_charlie.mjs
+++ b/packages/i18n/src/next/de/o_charlie.mjs
@@ -11,8 +11,8 @@ const o_charlie = {
   "backPocketWidth.d": "Steuert die Breite der hinteren Tasche",
   "backPocketDepth.t": "Tiefe der hinteren Tasche",
   "backPocketDepth.d": "Steuert die Tiefe der hinteren Tasche",
-  "backPocketFacing.t": "Back pocket facing",
-  "backPocketFacing.d": "Controls whether or not to include facing on the back pockets",
+  "backPocketFacing.t": "Besatz der hinteren Tasche",
+  "backPocketFacing.d": "Legt fest, ob die hinteren Taschen Besatz haben sollen oder nicht",
   "frontPocketSlantDepth.t": "Vordertasche Schrägtiefe",
   "frontPocketSlantDepth.d": "Steuert die Tiefe des (vorder) Taschenschlitzes",
   "frontPocketSlantWidth.t": "Fronttasche Schrägbreite",
diff --git a/packages/i18n/src/next/de/o_holmes.mjs b/packages/i18n/src/next/de/o_holmes.mjs
index 11177614799..c7b3c42c621 100644
--- a/packages/i18n/src/next/de/o_holmes.mjs
+++ b/packages/i18n/src/next/de/o_holmes.mjs
@@ -6,21 +6,21 @@ const o_holmes = {
   "headEase.t": "Kopfumfangszugabe",
   "headEase.d": "Bequemlichkeits-/Bewegungszugabe zum Umfang deines Kopfes.",
   "lengthRatio.t": "Längenverhältnis",
-  "lengthRatio.d": "Controls the length of the crown and ear flaps",
-  "gores.t": "Number of gores",
-  "gores.d": "The number of gores used to construct the crown",
-  "visorAngle.t": "Visor angle",
-  "visorAngle.d": "The arc angle used to draft the inner curve of the visor",
-  "visorWidth.t": "Visor width",
-  "visorWidth.d": "Controls the width of the visor",
-  "earLength.t": "Ear flap length",
-  "earLength.d": "Controls the length of the ear flaps independently from the crown pieces",
-  "earWidth.t": "Ear flap width",
-  "earWidth.d": "Controls the width of the ear flaps",
-  "buttonhole.t": "Buttonhole guide",
-  "buttonhole.d": "Adds a buttonhole to the ear flap to help you draft the buttonhole ear flap variant",
-  "visorLength.t": "Visor length",
-  "visorLength.d": "Controls the length of the visor"
+  "lengthRatio.d": "Kontrolliert die Länge der Hutkrone und Ohrklappen",
+  "gores.t": "Anzahl der Keile",
+  "gores.d": "Anzahl der Keile, die die Hutkrone zu bilden",
+  "visorAngle.t": "Winkel des Mützenschirms",
+  "visorAngle.d": "Winkel, der die innere Kurve des Mützenschirms beschreibt",
+  "visorWidth.t": "Breite des Mützenschirms",
+  "visorWidth.d": "Steuert die Breite des Mützenschirms",
+  "earLength.t": "Länge der Ohrklappen",
+  "earLength.d": "Steuert die Länge der Ohrklappen unabhängig von den Kronenstücken",
+  "earWidth.t": "Breite der Ohrklappen",
+  "earWidth.d": "Steuert die Breite der Ohrklappen",
+  "buttonhole.t": "Führung für das Knopfloch",
+  "buttonhole.d": "Fügt der Ohrklappe einen Knopfloch hinzu, um die Variante mit Knopflochs zu entwerfen",
+  "visorLength.t": "Länge des Mützenschirmes",
+  "visorLength.d": "Steuert die Länge des Mützenschirms"
 }
 
 export default o_holmes
diff --git a/packages/i18n/src/next/de/o_lunetius.mjs b/packages/i18n/src/next/de/o_lunetius.mjs
index ff0a9a3b586..f896fcad6dd 100644
--- a/packages/i18n/src/next/de/o_lunetius.mjs
+++ b/packages/i18n/src/next/de/o_lunetius.mjs
@@ -8,7 +8,7 @@ const o_lunetius = {
   "widthRatio.t": "Breitenverhältnis",
   "widthRatio.d": "Steuert die Breite des Kleidungsstückes",
   "length.t": "Länge",
-  "length.d": "Choose from the different length styles"
+  "length.d": "Wähle zwischen verschiedenen Längenarten"
 }
 
 export default o_lunetius
diff --git a/packages/i18n/src/next/de/o_tiberius.mjs b/packages/i18n/src/next/de/o_tiberius.mjs
index a570a91fb6e..cb45ec94e6c 100644
--- a/packages/i18n/src/next/de/o_tiberius.mjs
+++ b/packages/i18n/src/next/de/o_tiberius.mjs
@@ -3,20 +3,20 @@
  * All edits will be overwritten on the next (pre)build
  */
 const o_tiberius = {
-  "headRatio.t": "Head ratio",
-  "headRatio.d": "Controls the size of the head opening",
+  "headRatio.t": "Kopfgrößenverhältnis",
+  "headRatio.d": "Steuert die Größe der Kopföffnung",
   "armholeDrop.t": "Armlochabsenkung",
   "armholeDrop.d": "Steuert die Tiefe des Armloches",
   "lengthBonus.t": "Längenzugabe",
-  "lengthBonus.d": "Allows variation of the length of the garment",
+  "lengthBonus.d": "Erlaubt Variation der Länge des Kleidungsstücks",
   "widthBonus.t": "Breitenzugabe",
-  "widthBonus.d": "Allows variation of the width of the garment",
+  "widthBonus.d": "Erlaubt Variation der Breite des Kleidungsstücks",
   "clavi.t": "Clavi",
-  "clavi.d": "Whether or not to include guides for clavi",
-  "clavusLocation.t": "Clavus location",
-  "clavusLocation.d": "Controls the location of the clavi",
-  "clavusWidth.t": "Clavus width",
-  "clavusWidth.d": "Controls the width of the clavi",
+  "clavi.d": "Legt fest, ob Hilfslinien für Clavi enthalten sind oder nicht",
+  "clavusLocation.t": "Positionierung der Clavi",
+  "clavusLocation.d": "Steuert die Position der Clavi",
+  "clavusWidth.t": "Breite der Clavi",
+  "clavusWidth.d": "Steuert die Breite der Clavi",
   "length.t": "Länge",
   "length.d": "Steuert die Länge des Kleidungsstückes",
   "width.t": "Breite",
diff --git a/packages/i18n/src/next/de/o_walburga.mjs b/packages/i18n/src/next/de/o_walburga.mjs
index 2bd88f32597..1885ade82e0 100644
--- a/packages/i18n/src/next/de/o_walburga.mjs
+++ b/packages/i18n/src/next/de/o_walburga.mjs
@@ -3,18 +3,18 @@
  * All edits will be overwritten on the next (pre)build
  */
 const o_walburga = {
-  "headRatio.t": "Head ratio",
-  "headRatio.d": "Controls the size of the head opening",
+  "headRatio.t": "Kopfgrößenverhältnis",
+  "headRatio.d": "Steuert die Größe der Kopföffnung",
   "lengthBonus.t": "Längenzugabe",
-  "lengthBonus.d": "Allows variation of the length of the garment",
+  "lengthBonus.d": "Erlaubt Variation der Länge des Kleidungsstücks",
   "widthBonus.t": "Breitenzugabe",
-  "widthBonus.d": "Allows variation of the width of the garment",
+  "widthBonus.d": "Erlaubt Variation der Breite des Kleidungsstücks",
   "length.t": "Länge",
   "length.d": "Steuert die Länge des Kleidungsstückes",
-  "neckoRatio.t": "Neck opening shape",
-  "neckoRatio.d": "controls the shape of the neck opening",
-  "neckline.t": "Neckline",
-  "neckline.d": "Controls whether or not to draft a neck opening"
+  "neckoRatio.t": "Form des Halsausschnittes",
+  "neckoRatio.d": "Steuert die Form des Halsausschnittes",
+  "neckline.t": "Halsausschnitt",
+  "neckline.d": "Bestimmt, ob ein Halsausschnit erstellt werden soll oder nicht"
 }
 
 export default o_walburga
diff --git a/packages/i18n/src/next/de/o_waralee.mjs b/packages/i18n/src/next/de/o_waralee.mjs
index b7cbabb09bd..960f1319a3a 100644
--- a/packages/i18n/src/next/de/o_waralee.mjs
+++ b/packages/i18n/src/next/de/o_waralee.mjs
@@ -7,10 +7,10 @@ const o_waralee = {
   "backPocket.d": "Definiert ob rückwärtige Taschen integriert werden",
   "frontPocket.t": "Vordere Taschen",
   "frontPocket.d": "Ob eine Fronttasche hinzugefügt werden soll oder nicht",
-  "hemWidth.t": "Hem size",
-  "hemWidth.d": "Size of the hem at the bottom of the pants",
-  "waistbandWidth.t": "Waist Band",
-  "waistbandWidth.d": "Size of the waist band",
+  "hemWidth.t": "Saumgröße",
+  "hemWidth.d": "Größe des Saums am unteren Rand der Hose",
+  "waistbandWidth.t": "Taillenbund",
+  "waistbandWidth.d": "Größe des Taillenbundes",
   "waistRaise.t": "Taillenhöhe",
   "waistRaise.d": "Wie hoch soll die Taille über dem Gesäßumfang angelegt werden? Dies beeinflusst die Tiefe des Schrittauschnittes.",
   "crotchBack.t": "Hinterer Schritt",
diff --git a/packages/i18n/src/next/de/optiongroups.mjs b/packages/i18n/src/next/de/optiongroups.mjs
index 17452157ea8..8624e1a94f5 100644
--- a/packages/i18n/src/next/de/optiongroups.mjs
+++ b/packages/i18n/src/next/de/optiongroups.mjs
@@ -21,9 +21,9 @@ const optiongroups = {
   "frontPockets": "Vordere Taschen",
   "waistband": "Bund",
   "fly": "Hosenstall",
-  "bellaDarts": "Bella darts",
-  "bellaArmhole": "Bella armhole",
-  "bellaAdvanced": "Bella advanced",
+  "bellaDarts": "Bella Abnäher",
+  "bellaArmhole": "Bella Armloch",
+  "bellaAdvanced": "Bella Fortgeschritten",
   "clavi": "Clavi"
 }
 
diff --git a/packages/i18n/src/next/de/settings.mjs b/packages/i18n/src/next/de/settings.mjs
index 75c8b9b2de2..2096696c4cb 100644
--- a/packages/i18n/src/next/de/settings.mjs
+++ b/packages/i18n/src/next/de/settings.mjs
@@ -25,10 +25,10 @@ const settings = {
   "debug.d": "Debuggen aktivieren, um zusätzliche Informationen dazu zu erhalten, wie dein Schnittmuster erstellt wurde",
   "scale.t": "Beschriftungsgröße",
   "scale.d": "Steuert die allgemeine Linienbreite, Schriftgröße und andere Elementgrößen, \nbeeinflusst jedoch nicht den Maßstab des Schnittmusters selbst",
-  "renderer.t": "Render engine",
-  "renderer.d": "Controls how the pattern is rendered (drawn) on the screen",
-  "xray.t": "X-ray",
-  "xray.d": "Look under the hood with FreeSewing's X-ray mode"
+  "renderer.t": "Render Engine",
+  "renderer.d": "Legt fest, wie das Muster auf dem Bildschirm gerendert (gezeichnet) wird",
+  "xray.t": "Röntgen",
+  "xray.d": "Mit FreeSewings Röntgenmodus unter die Haube schauen"
 }
 
 export default settings
diff --git a/packages/i18n/src/next/de/themes.mjs b/packages/i18n/src/next/de/themes.mjs
index cc93e9ce149..d5b511a8e36 100644
--- a/packages/i18n/src/next/de/themes.mjs
+++ b/packages/i18n/src/next/de/themes.mjs
@@ -3,11 +3,11 @@
  * All edits will be overwritten on the next (pre)build
  */
 const themes = {
-  "lightTheme": "Light Theme",
-  "darkTheme": "Dark Theme",
-  "hax0rTheme": "Hax0r Theme",
-  "lgbtqTheme": "LGBTQ Theme",
-  "transTheme": "Trans Theme"
+  "lightTheme": "Helles Thema",
+  "darkTheme": "Dunkles Thema",
+  "hax0rTheme": "Hax0r Thema",
+  "lgbtqTheme": "LGBTQ Thema",
+  "transTheme": "Trans Thema"
 }
 
 export default themes
diff --git a/packages/i18n/src/next/de/workbench.mjs b/packages/i18n/src/next/de/workbench.mjs
index 8c4b7ec2bcd..0a23932e3fc 100644
--- a/packages/i18n/src/next/de/workbench.mjs
+++ b/packages/i18n/src/next/de/workbench.mjs
@@ -3,13 +3,13 @@
  * All edits will be overwritten on the next (pre)build
  */
 const workbench = {
-  "designOptions": "Design options",
-  "forPrinting": "For printing",
-  "forCutting": "For cutting",
+  "designOptions": "Designoptionen",
+  "forPrinting": "Zum Drucken",
+  "forCutting": "Zum Schneiden",
   "layoutThing": "Layout {thing}",
-  "pageSize": "Page size",
-  "startBySelectingAThing": "Start by selecting a {thing}",
-  "testThing": "Test {thing}"
+  "pageSize": "Seitengröße",
+  "startBySelectingAThing": "Beginne mit der Auswahl eines {thing}",
+  "testThing": "{thing} testen"
 }
 
 export default workbench
diff --git a/packages/i18n/src/next/en/index.mjs b/packages/i18n/src/next/en/index.mjs
index ff8663da767..d3a172711a0 100644
--- a/packages/i18n/src/next/en/index.mjs
+++ b/packages/i18n/src/next/en/index.mjs
@@ -16,6 +16,7 @@ import gdpr from "./gdpr.mjs"
 import i18n from "./i18n.mjs"
 import intro from "./intro.mjs"
 import jargon from "./jargon.mjs"
+import lab from "./lab.mjs"
 import measurements from "./measurements.mjs"
 import optiongroups from "./optiongroups.mjs"
 import o_aaron from "./o_aaron.mjs"
@@ -79,6 +80,7 @@ const allNamespaces = {
   i18n,
   intro,
   jargon,
+  lab,
   measurements,
   optiongroups,
   o_aaron,
diff --git a/packages/i18n/src/next/en/lab.mjs b/packages/i18n/src/next/en/lab.mjs
new file mode 100644
index 00000000000..3c9ee32c121
--- /dev/null
+++ b/packages/i18n/src/next/en/lab.mjs
@@ -0,0 +1,13 @@
+/*
+ * This file is auto-generated by the prebuild script
+ * All edits will be overwritten on the next (pre)build
+ */
+const lab = {
+  "slogan": "The FreeSewing lab provides",
+  "slogan1": "All our pattern designs",
+  "slogan2": "New & old version",
+  "slogan3": "Bleeding edge code",
+  "slogan4": "Unreleased designs"
+}
+
+export default lab
diff --git a/packages/i18n/src/next/en/o_bee.mjs b/packages/i18n/src/next/en/o_bee.mjs
index 747e0314c92..aaae18228b8 100644
--- a/packages/i18n/src/next/en/o_bee.mjs
+++ b/packages/i18n/src/next/en/o_bee.mjs
@@ -51,6 +51,8 @@ const o_bee = {
   "frontArmholePitchDepth.d": "Controls the front armhole pitch depth in the underlying Bella block Bee is based on",
   "frontShoulderWidth.t": "Front shoulder width (Bella)",
   "frontShoulderWidth.d": "Controls the front shoulder width in the underlying Bella block Bee is based on",
+  "fullChestEaseReduction.t": "Full chest reduction (Bella)",
+  "fullChestEaseReduction.d": "Controls the full chest reduction in the underlying Bella block Bee is based on",
   "highBustWidth.t": "High bust width (Bella)",
   "highBustWidth.d": "Controls the high bust width in the underlying Bella block Bee is based on"
 }
diff --git a/packages/i18n/src/next/es/index.mjs b/packages/i18n/src/next/es/index.mjs
index ff8663da767..d3a172711a0 100644
--- a/packages/i18n/src/next/es/index.mjs
+++ b/packages/i18n/src/next/es/index.mjs
@@ -16,6 +16,7 @@ import gdpr from "./gdpr.mjs"
 import i18n from "./i18n.mjs"
 import intro from "./intro.mjs"
 import jargon from "./jargon.mjs"
+import lab from "./lab.mjs"
 import measurements from "./measurements.mjs"
 import optiongroups from "./optiongroups.mjs"
 import o_aaron from "./o_aaron.mjs"
@@ -79,6 +80,7 @@ const allNamespaces = {
   i18n,
   intro,
   jargon,
+  lab,
   measurements,
   optiongroups,
   o_aaron,
diff --git a/packages/i18n/src/next/es/lab.mjs b/packages/i18n/src/next/es/lab.mjs
new file mode 100644
index 00000000000..3c9ee32c121
--- /dev/null
+++ b/packages/i18n/src/next/es/lab.mjs
@@ -0,0 +1,13 @@
+/*
+ * This file is auto-generated by the prebuild script
+ * All edits will be overwritten on the next (pre)build
+ */
+const lab = {
+  "slogan": "The FreeSewing lab provides",
+  "slogan1": "All our pattern designs",
+  "slogan2": "New & old version",
+  "slogan3": "Bleeding edge code",
+  "slogan4": "Unreleased designs"
+}
+
+export default lab
diff --git a/packages/i18n/src/next/es/o_bee.mjs b/packages/i18n/src/next/es/o_bee.mjs
index cd5d97f3d59..b8936cee439 100644
--- a/packages/i18n/src/next/es/o_bee.mjs
+++ b/packages/i18n/src/next/es/o_bee.mjs
@@ -51,6 +51,8 @@ const o_bee = {
   "frontArmholePitchDepth.d": "Controls the front armhole pitch depth in the underlying Bella block Bee is based on",
   "frontShoulderWidth.t": "Front shoulder width (Bella)",
   "frontShoulderWidth.d": "Controls the front shoulder width in the underlying Bella block Bee is based on",
+  "fullChestEaseReduction.t": "Full chest reduction (Bella)",
+  "fullChestEaseReduction.d": "Controls the full chest reduction in the underlying Bella block Bee is based on",
   "highBustWidth.t": "High bust width (Bella)",
   "highBustWidth.d": "Controls the high bust width in the underlying Bella block Bee is based on"
 }
diff --git a/packages/i18n/src/next/fr/index.mjs b/packages/i18n/src/next/fr/index.mjs
index ff8663da767..d3a172711a0 100644
--- a/packages/i18n/src/next/fr/index.mjs
+++ b/packages/i18n/src/next/fr/index.mjs
@@ -16,6 +16,7 @@ import gdpr from "./gdpr.mjs"
 import i18n from "./i18n.mjs"
 import intro from "./intro.mjs"
 import jargon from "./jargon.mjs"
+import lab from "./lab.mjs"
 import measurements from "./measurements.mjs"
 import optiongroups from "./optiongroups.mjs"
 import o_aaron from "./o_aaron.mjs"
@@ -79,6 +80,7 @@ const allNamespaces = {
   i18n,
   intro,
   jargon,
+  lab,
   measurements,
   optiongroups,
   o_aaron,
diff --git a/packages/i18n/src/next/fr/lab.mjs b/packages/i18n/src/next/fr/lab.mjs
new file mode 100644
index 00000000000..3c9ee32c121
--- /dev/null
+++ b/packages/i18n/src/next/fr/lab.mjs
@@ -0,0 +1,13 @@
+/*
+ * This file is auto-generated by the prebuild script
+ * All edits will be overwritten on the next (pre)build
+ */
+const lab = {
+  "slogan": "The FreeSewing lab provides",
+  "slogan1": "All our pattern designs",
+  "slogan2": "New & old version",
+  "slogan3": "Bleeding edge code",
+  "slogan4": "Unreleased designs"
+}
+
+export default lab
diff --git a/packages/i18n/src/next/fr/o_bee.mjs b/packages/i18n/src/next/fr/o_bee.mjs
index 5c97e167ab8..fc19a016f43 100644
--- a/packages/i18n/src/next/fr/o_bee.mjs
+++ b/packages/i18n/src/next/fr/o_bee.mjs
@@ -51,6 +51,8 @@ const o_bee = {
   "frontArmholePitchDepth.d": "Contrôle la profondeur du point pivot de l'emmanchure avant dans le bloc Bella sur lequel est basé le patron Bee",
   "frontShoulderWidth.t": "Largeur de l'épaule devant (Bella)",
   "frontShoulderWidth.d": "Contrôle la largeur de l'épaule avant dans le bloc de Bella sur lequel est basé le patron Bee",
+  "fullChestEaseReduction.t": "Full chest reduction (Bella)",
+  "fullChestEaseReduction.d": "Controls the full chest reduction in the underlying Bella block Bee is based on",
   "highBustWidth.t": "Largeur du tour de buste supérieur (Bella)",
   "highBustWidth.d": "Contrôle la largeur du buste supérieur dans le bloc de Bella sur lequel est basé Bee"
 }
diff --git a/packages/i18n/src/next/nl/index.mjs b/packages/i18n/src/next/nl/index.mjs
index ff8663da767..d3a172711a0 100644
--- a/packages/i18n/src/next/nl/index.mjs
+++ b/packages/i18n/src/next/nl/index.mjs
@@ -16,6 +16,7 @@ import gdpr from "./gdpr.mjs"
 import i18n from "./i18n.mjs"
 import intro from "./intro.mjs"
 import jargon from "./jargon.mjs"
+import lab from "./lab.mjs"
 import measurements from "./measurements.mjs"
 import optiongroups from "./optiongroups.mjs"
 import o_aaron from "./o_aaron.mjs"
@@ -79,6 +80,7 @@ const allNamespaces = {
   i18n,
   intro,
   jargon,
+  lab,
   measurements,
   optiongroups,
   o_aaron,
diff --git a/packages/i18n/src/next/nl/lab.mjs b/packages/i18n/src/next/nl/lab.mjs
new file mode 100644
index 00000000000..3c9ee32c121
--- /dev/null
+++ b/packages/i18n/src/next/nl/lab.mjs
@@ -0,0 +1,13 @@
+/*
+ * This file is auto-generated by the prebuild script
+ * All edits will be overwritten on the next (pre)build
+ */
+const lab = {
+  "slogan": "The FreeSewing lab provides",
+  "slogan1": "All our pattern designs",
+  "slogan2": "New & old version",
+  "slogan3": "Bleeding edge code",
+  "slogan4": "Unreleased designs"
+}
+
+export default lab
diff --git a/packages/i18n/src/next/nl/o_bee.mjs b/packages/i18n/src/next/nl/o_bee.mjs
index 4f6b9fdd04f..5a4e16f2d59 100644
--- a/packages/i18n/src/next/nl/o_bee.mjs
+++ b/packages/i18n/src/next/nl/o_bee.mjs
@@ -51,6 +51,8 @@ const o_bee = {
   "frontArmholePitchDepth.d": "Controls the front armhole pitch depth in the underlying Bella block Bee is based on",
   "frontShoulderWidth.t": "Front shoulder width (Bella)",
   "frontShoulderWidth.d": "Controls the front shoulder width in the underlying Bella block Bee is based on",
+  "fullChestEaseReduction.t": "Full chest reduction (Bella)",
+  "fullChestEaseReduction.d": "Controls the full chest reduction in the underlying Bella block Bee is based on",
   "highBustWidth.t": "High bust width (Bella)",
   "highBustWidth.d": "Controls the high bust width in the underlying Bella block Bee is based on"
 }
diff --git a/packages/pattern-info/src/prebuild/info.js b/packages/pattern-info/src/prebuild/info.js
new file mode 100644
index 00000000000..a55a1a4f1bf
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/info.js
@@ -0,0 +1,2 @@
+module.exports = {"aaron":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":2,"deprecated":false},"albert":{"design":"Wouter Van Wageningen","code":"Wouter Van Wageningen","department":"accessories","type":"pattern","difficulty":2,"deprecated":false},"bee":{"design":"PrudenceRabbit","code":"bobgeorgethe3rd","department":"tops","type":"pattern","difficulty":3,"deprecated":false},"bella":{"design":"Bella Incognito","code":"Joost De Cock","department":"tops","type":"block","difficulty":3,"deprecated":false},"benjamin":{"design":"Wouter Van Wageningen","code":"Wouter Van Wageningen","department":"accessories","type":"pattern","difficulty":3,"deprecated":false},"bent":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"block","difficulty":3,"deprecated":false},"brian":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"block","difficulty":3,"deprecated":false},"breanna":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"block","difficulty":3,"deprecated":false},"diana":{"design":"Erica Alcusa Sáez","code":"Erica Alcusa Sáez","department":"tops","type":"pattern","difficulty":2,"deprecated":false},"bruce":{"design":"Joost De Cock","code":"Joost De Cock","department":"underwear","type":"pattern","difficulty":3,"deprecated":false},"carlita":{"design":["Anneke Caramin","Joost De Cock"],"code":"Joost De Cock","department":"coats","type":"pattern","difficulty":5,"deprecated":false},"carlton":{"design":["Anneke Caramin","Joost De Cock"],"code":"Joost De Cock","department":"coats","type":"pattern","difficulty":5,"deprecated":false},"cathrin":{"design":["Cathrin Åhlén","Joost De Cock"],"code":"Joost De Cock","department":"underwear","type":"pattern","difficulty":4,"deprecated":false},"charlie":{"design":"Joost De Cock","code":"Joost De Cock","department":"bottoms","type":"pattern","difficulty":3,"deprecated":false},"cornelius":{"design":"Wouter Van Wageningen","code":"Wouter Van Wageningen","department":"bottoms","type":"pattern","difficulty":3,"deprecated":false},"florent":{"design":"Quentin Felix","code":["Quentin Felix","Joost De Cock"],"department":"accessories","type":"pattern","difficulty":3,"deprecated":false},"florence":{"design":"Joost De Cock","code":"Joost De Cock","department":"accessories","type":"pattern","difficulty":1,"deprecated":false},"holmes":{"design":"Erica Alcusa Sáez","code":["Erica Alcusa Sáez","bobgeorgethe3rd"],"department":"accessories","type":"pattern","difficulty":3,"deprecated":false},"hortensia":{"design":["Stoffsuchti","Wouter Van Wageningen"],"code":"Wouter Van Wageningen","department":"accessories","type":"pattern","difficulty":3,"deprecated":false},"huey":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":3,"deprecated":false},"hugo":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":3,"deprecated":false},"jaeger":{"design":"Joost De Cock","code":"Joost De Cock","department":"coats","type":"pattern","difficulty":5,"deprecated":false},"lunetius":{"design":"Rika Tamaike","code":"Rika Tamaike","department":"tops","type":"pattern","difficulty":1,"tags":["freesewing","design","diy","fashion","made to measure","parametric design","pattern","sewing","sewing pattern"],"deprecated":false},"paco":{"design":"Joost De Cock","code":"Joost De Cock","department":"bottoms","type":"pattern","difficulty":3,"deprecated":false},"penelope":{"design":"Wouter Van Wageningen","code":"Wouter Van Wageningen","department":"bottoms","type":"pattern","difficulty":3,"deprecated":false},"sandy":{"design":"Erica Alcusa Sáez","code":["Erica Alcusa Sáez","Joost De Cock"],"department":"bottoms","type":"pattern","difficulty":3,"deprecated":false},"shin":{"design":"Joost De Cock","code":"Joost De Cock","department":"swimwear","type":"pattern","difficulty":2,"deprecated":false},"simon":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":4,"deprecated":false},"simone":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":4,"deprecated":false},"sven":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":3,"deprecated":false},"tamiko":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":1,"deprecated":false},"teagan":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":2,"deprecated":false},"theo":{"design":"Joost De Cock","code":"Joost De Cock","department":"bottoms","type":"pattern","difficulty":4,"deprecated":"charlie"},"tiberius":{"design":"Rika Tamaike","code":"Rika Tamaike","department":"tops","type":"pattern","difficulty":1,"tags":["freesewing","design","diy","fashion","made to measure","parametric design","pattern","sewing","sewing pattern"],"deprecated":false},"titan":{"design":["Debra Bean","Joost De Cock"],"code":"Joost De Cock","department":"bottoms","type":"block","difficulty":3,"deprecated":false},"trayvon":{"design":"Joost De Cock","code":"Joost De Cock","department":"accessories","type":"pattern","difficulty":2,"deprecated":false},"ursula":{"design":"Natalia Sayang","code":"Natalia Sayang","department":"underwear","type":"pattern","difficulty":1,"tags":["freesewing","design","diy","fashion","made to measure","parametric design","pattern","sewing","sewing pattern"],"deprecated":false},"wahid":{"design":"Joost De Cock","code":"Joost De Cock","department":"tops","type":"pattern","difficulty":4,"deprecated":false},"walburga":{"design":"Rika Tamaike","code":"Rika Tamaike","department":"tops","type":"pattern","difficulty":1,"tags":["freesewing","design","diy","fashion","made to measure","parametric design","pattern","sewing","sewing pattern"],"deprecated":false},"waralee":{"design":"Wouter Van Wageningen","code":"Wouter Van Wageningen","department":"bottoms","type":"pattern","difficulty":2,"deprecated":false},"yuri":{"design":"Hellgy","code":"Biou","department":"tops","type":"pattern","difficulty":3,"deprecated":false}}
+
diff --git a/packages/pattern-info/src/prebuild/measurements.js b/packages/pattern-info/src/prebuild/measurements.js
new file mode 100644
index 00000000000..d61647d9c8c
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/measurements.js
@@ -0,0 +1 @@
+module.exports = {"aaron":["biceps","chest","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToShoulder","hips"],"albert":["chest","waist","hips","hpsToWaistBack","waistToKnee"],"bee":["highBust","chest","underbust","waist","waistBack","bustSpan","neck","hpsToBust","hpsToWaistFront","hpsToWaistBack","shoulderToShoulder","shoulderSlope","bustPointToUnderbust"],"bella":["highBust","chest","underbust","waist","waistBack","bustSpan","neck","hpsToBust","hpsToWaistFront","hpsToWaistBack","shoulderToShoulder","shoulderSlope"],"benjamin":["neck"],"bent":["biceps","chest","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToElbow","shoulderToShoulder","shoulderToWrist","wrist"],"brian":["biceps","chest","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToShoulder","shoulderToWrist","waistToArmhole","wrist"],"breanna":["biceps","bustFront","bustSpan","highBust","highBustFront","hpsToBust","hpsToWaistBack","hpsToWaistFront","waist","waistToHips","neck","shoulderToShoulder","shoulderToWrist","shoulderSlope","wrist"],"diana":["biceps","chest","hpsToWaistBack","hips","waist","waistToHips","neck","shoulderSlope","shoulderToShoulder","shoulderToWrist","wrist"],"bruce":["hips","upperLeg","waistToHips","waistToUpperLeg"],"carlita":["biceps","chest","hips","hpsToWaistBack","waist","waistToHips","neck","shoulderSlope","shoulderToElbow","shoulderToShoulder","shoulderToWrist","wrist","waistToFloor","waistToSeat","seat","highBust","bustSpan","hpsToBust"],"carlton":["biceps","chest","hips","hpsToWaistBack","waist","waistToHips","neck","shoulderSlope","shoulderToElbow","shoulderToShoulder","shoulderToWrist","wrist","waistToFloor","waistToSeat","seat"],"cathrin":["underbust","waist","hips","waistToUnderbust","waistToHips"],"charlie":["crossSeam","crossSeamFront","knee","seat","seatBack","waist","waistBack","waistToFloor","waistToKnee","waistToHips","waistToSeat","waistToUpperLeg"],"cornelius":["waist","hips","inseam","seat","waistToKnee","waistToHips","waistToFloor","knee"],"florent":["head"],"florence":["head"],"holmes":["head"],"hortensia":[],"huey":["biceps","chest","head","hips","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToShoulder","shoulderToWrist","wrist"],"hugo":["biceps","chest","head","hips","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToShoulder","shoulderToWrist","wrist"],"jaeger":["biceps","chest","hips","hpsToWaistBack","waist","waistToHips","neck","shoulderSlope","shoulderToElbow","shoulderToShoulder","shoulderToWrist","wrist"],"lunetius":["waistToKnee","waistToUpperLeg","waistToFloor","hpsToWaistBack","neck","shoulderToShoulder","shoulderToElbow","waistToHips"],"paco":["crossSeam","crossSeamFront","heel","knee","seat","seatBack","waist","waistBack","waistToFloor","waistToKnee","waistToHips","waistToSeat","waistToUpperLeg"],"penelope":["waist","seat","waistToHips","waistToSeat","waistToKnee"],"sandy":["waist","waistToFloor","waistToHips","hips"],"shin":["hips","upperLeg","waistToUpperLeg","waistToHips"],"simon":["biceps","chest","hpsToWaistBack","waist","waistToHips","neck","shoulderSlope","shoulderToShoulder","hips","shoulderToWrist","wrist"],"simone":["biceps","bustSpan","chest","highBust","hpsToBust","hpsToWaistBack","waist","waistToHips","neck","shoulderSlope","shoulderToShoulder","hips","shoulderToWrist","wrist"],"sven":["biceps","chest","hpsToWaistBack","hips","waist","waistToHips","neck","shoulderSlope","shoulderToShoulder","shoulderToWrist","wrist"],"tamiko":["shoulderToShoulder","chest","hpsToWaistBack","shoulderSlope","waistToHips"],"teagan":["biceps","chest","hips","hpsToWaistBack","neck","shoulderSlope","shoulderToShoulder","waistToHips","waist"],"theo":["crotchDepth","hips","inseam","knee","seat","waistToHips"],"tiberius":["head","shoulderToElbow","shoulderToShoulder","biceps","hpsToWaistBack","waistToKnee","waist","chest","seat","hips","waistToFloor","waistToUpperLeg"],"titan":["crossSeam","crossSeamFront","knee","seat","seatBack","waist","waistBack","waistToFloor","waistToKnee","waistToHips","waistToSeat","waistToUpperLeg"],"trayvon":["hpsToWaistBack","waistToHips","neck"],"ursula":["waist","seat","waistToSeat","waistToUpperLeg"],"wahid":["biceps","chest","hips","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToShoulder","waist"],"walburga":["head","neck","shoulderToShoulder","hpsToWaistBack","waistToKnee","waistToHips","waistToFloor","waistToUpperLeg"],"waralee":["seat","inseam","crotchDepth","waistToHips"],"yuri":["biceps","chest","head","hips","hpsToWaistBack","waistToHips","neck","shoulderSlope","shoulderToShoulder","shoulderToWrist","wrist","hpsToBust"]}
diff --git a/packages/pattern-info/src/prebuild/option-groups.js b/packages/pattern-info/src/prebuild/option-groups.js
new file mode 100644
index 00000000000..72dacf42910
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/option-groups.js
@@ -0,0 +1 @@
+module.exports = {"aaron":{"fit":["chestEase","hipsEase","stretchFactor"],"style":["armholeDrop","backlineBend","necklineBend","necklineDrop","shoulderStrapWidth","shoulderStrapPlacement","lengthBonus"]},"albert":{"fit":["backOpening","chestDepth"],"style":["lengthBonus","bibLength","bibWidth","strapWidth"]},"bee":{"fit":["chestEase","waistEase","bustSpanEase","topDepth","bottomCupDepth","sideDepth","sideCurve","frontCurve","bellaGuide"],"style":["ties","neckTieWidth","neckTieLength","neckTieEnds","neckTieColours","bandTieWidth","bandTieLength","bandTieEnds","bandTieColours","crossBackTies","bandLength"],"advanced":[{"bellaDarts":["backDartHeight"]},{"bellaArmhole":["armholeDepth","frontArmholePitchDepth"]},{"bellaAdvanced":["frontShoulderWidth","fullChestEaseReduction","highBustWidth"]}]},"bella":{"fit":["chestEase","waistEase","bustSpanEase","fullChestEaseReduction"],"darts":["backDartHeight","bustDartLength","waistDartLength","bustDartCurve"],"armhole":["armholeDepth","backArmholeSlant","frontArmholeCurvature","backArmholeCurvature","frontArmholePitchDepth","backArmholePitchDepth"],"advanced":["backNeckCutout","backHemSlope","frontShoulderWidth","highBustWidth"]},"benjamin":{"fit":["collarEase","adjustmentRibbon"],"style":["tipWidth","knotWidth","bowLength","bowStyle","endStyle","ribbonWidth"]},"bent":{"fit":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","sleeveBend"],"style":["s3Collar","s3Armhole"],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleevecapHeight","sleevecapEase"]},"brian":{"fit":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus"],"style":["s3Collar","s3Armhole"],"advanced":["acrossBackFactor","armholeHeight","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleeveWidthGuarantee",{"sleevecap":["sleevecapEase","sleevecapHeight","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"breanna":{"fit":["shoulderDart","shoulderDartSize","shoulderDartLength","waistDart","waistDartSize","waistDartLength","frontScyeDart","verticalEase","chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","waistEase"],"style":["primaryBustDart","primaryBustDartLength","secondaryBustDart","secondaryBustDartLength","primaryBustDartShaping","sleeveLengthBonus"],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"diana":{"fit":["chestEase","bicepsEase","cuffEase","shoulderEase","waistEase","hipsEase","lengthBonus","sleeveLengthBonus"],"style":["drapeAngle","shoulderSeamLength"],"advanced":["acrossBackFactor","armholeDepthFactor","frontArmholeDeeper","sleeveWidthGuarantee",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"bruce":{"fit":["bulge","stretch","legStretch","backRise"],"style":["rise","legBonus"]},"carlita":{"fit":["acrossBackFactor","armholeDepthFactor","bicepsEase","chestEase","cuffEase","shoulderEase","sleeveBend","sleeveLengthBonus","waistEase","seatEase"],"advanced":["backNeckCutout","frontArmholeDeeper","frontOverlap","lapelReduction","shoulderSlopeReduction","sleevecapHeight","sleevecapEase","contour"],"pockets":["pocketPlacementHorizontal","pocketPlacementVertical","pocketWidth","pocketHeight","pocketRadius","pocketFlapRadius","chestPocketHeight","chestPocketWidth","chestPocketPlacement","chestPocketAngle","innerPocketPlacement","innerPocketWidth","innerPocketDepth","innerPocketWeltHeight"],"style":["beltWidth","buttonSpacingHorizontal","cuffLength","length","s3Collar","s3Armhole"],"collar":["collarHeight","collarSpread","collarFlare"]},"carlton":{"fit":["acrossBackFactor","armholeDepthFactor","bicepsEase","chestEase","cuffEase","shoulderEase","sleeveBend","sleeveLengthBonus","waistEase","seatEase"],"advanced":["backNeckCutout","frontArmholeDeeper","frontOverlap","lapelReduction","shoulderSlopeReduction","sleevecapHeight","sleevecapEase"],"pockets":["pocketPlacementHorizontal","pocketPlacementVertical","pocketWidth","pocketHeight","pocketRadius","pocketFlapRadius","chestPocketHeight","chestPocketWidth","chestPocketPlacement","chestPocketAngle","innerPocketPlacement","innerPocketWidth","innerPocketDepth","innerPocketWeltHeight"],"style":["beltWidth","buttonSpacingHorizontal","cuffLength","length","s3Collar","s3Armhole"],"collar":["collarHeight","collarSpread","collarFlare"]},"cathrin":{"fit":["waistReduction","panels"],"style":["backOpening","backRise","backDrop","frontRise","frontDrop","hipRise"]},"charlie":{"fit":["seatEase","kneeEase","waistEase","waistbandCurve"],"style":["waistHeight","waistbandWidth","lengthBonus","crotchDrop"],"pockets":[{"backPockets":["backPocketHorizontalPlacement","backPocketVerticalPlacement","backPocketWidth","backPocketDepth","backPocketFacing"],"frontPockets":["frontPocketSlantDepth","frontPocketSlantWidth","frontPocketSlantRound","frontPocketSlantBend","frontPocketWidth","frontPocketDepth","frontPocketFacing"]}],"advanced":["crossSeamCurveStart","crossSeamCurveBend","crossSeamCurveAngle","crotchSeamCurveStart","crotchSeamCurveBend","crotchSeamCurveAngle","grainlinePosition","legBalance","waistBalance","beltLoops",{"fly":["flyCurve","flyLength","flyWidth"]}]},"cornelius":{"fit":["fullness","waistReduction"],"style":["waistbandBelowWaist","cuffStyle","cuffWidth","ventLength"],"advanced":["bandBelowKnee","kneeToBelow"]},"florent":{"fit":["headEase"]},"florence":{"fit":["height","length","curve"]},"holmes":{"fit":["headEase"],"style":["lengthRatio","gores","visorAngle","visorWidth","earLength","earWidth","buttonhole"],"advanced":["visorLength"]},"hortensia":{"style":["size","zipperSize","strapLength","handleWidth"]},"huey":{"fit":["bicepsEase","chestEase","cuffEase","collarEase","shoulderEase","hipsEase","ribbingStretch"],"style":["lengthBonus","sleeveLengthBonus","ribbing","pocket","ribbingHeight","pocketHeight","pocketWidth","hoodHeight","hoodCutback","hoodClosure","hoodDepth","hoodAngle","s3Collar","s3Armhole"],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","sleeveWidthGuarantee",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"hugo":{"fit":["bicepsEase","chestEase","cuffEase","hipsEase","ribbingStretch"],"style":["lengthBonus","sleeveLengthBonus","ribbingHeight"],"advanced":["acrossBackFactor","backNeckCutout"]},"jaeger":{"fit":["acrossBackFactor","armholeDepthFactor","bicepsEase","centerBackDart","chestEase","collarEase","cuffEase","hipsEase","lengthBonus","shoulderEase","waistEase"],"sleeves":["sleeveBend","sleeveLengthBonus","sleeveVentLength","sleeveVentWidth"],"advanced":["backNeckCutout","chestShaping","frontArmholeDeeper","frontDartPlacement","frontOverlap","sideFrontPlacement","shoulderSlopeReduction","sleevecapHeight","sleevecapEase"],"pockets":["chestPocketDepth","chestPocketWidth","chestPocketPlacement","chestPocketAngle","chestPocketWeltSize","frontPocketPlacement","frontPocketWidth","frontPocketDepth","frontPocketRadius","innerPocketPlacement","innerPocketWidth","innerPocketDepth","innerPocketWeltHeight","pocketFoldover"],"style":["centerFrontHemDrop","backVent","backVentLength","buttonLength","buttons","frontCutawayAngle","frontCutawayStart","frontCutawayEnd","hemRadius","lapelStart","lapelReduction"],"collar":["collarSpread","collarHeight","collarNotchDepth","collarNotchAngle","collarNotchReturn","collarRoll","rollLineCollarHeight"]},"lunetius":{"style":["lengthRatio","widthRatio","length"]},"paco":{"fit":["seatEase","waistEase","heelEase"],"style":["waistHeight","lengthBonus","crotchDrop","elasticatedHem"],"elastic":["waistbandWidth","ankleElastic"],"pockets":["frontPockets","backPockets"],"advanced":["crossSeamCurveStart","crossSeamCurveBend","crossSeamCurveAngle","crotchSeamCurveStart","crotchSeamCurveBend","crotchSeamCurveAngle","grainlinePosition","legBalance","waistBalance"]},"penelope":{"fit":["lengthBonus","hem","backVent","backVentLength","waistBand","waistBandWidth","zipperLocation","nrOfDarts","hemBonus"],"advanced":["seatEase","waistEase","backDartDepthFactor","frontDartDepthFactor","dartToSideSeamFactor"]},"sandy":{"fit":["waistbandPosition","waistbandShape"],"style":["lengthBonus","circleRatio","waistbandWidth","waistbandOverlap","gathering"],"construction":["seamlessFullCircle","hemWidth"]},"shin":{"fit":["bulge","backRise","legReduction","stretch"],"style":["rise","elasticWidth"]},"simon":{"fit":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","waistEase","hipsEase","roundBack"],"style":["hemStyle","hemCurve","boxPleat","backDarts","splitYoke","yokeHeight","s3Collar","s3Armhole",{"closure":["extraTopButton","buttons","seperateButtonPlacket","buttonPlacketStyle","seperateButtonholePlacket","buttonholePlacketStyle","buttonPlacketWidth","buttonholePlacketWidth","buttonholePlacketFoldWidth","buttonFreeLength"]},{"cuffs":["cuffStyle","barrelCuffNarrowButton","cuffButtonRows","sleevePlacketWidth","sleevePlacketLength","cuffDrape","cuffLength"]},{"collar":["collarAngle","collarStandBend","collarStandCurve","collarFlare","collarStandWidth","collarBend","collarGap","collarRoll"]}],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleeveWidthGuarantee","boxPleatWidth","boxPleatFold","backDartShaping","ffsa",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"simone":{"fit":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","waistEase","hipsEase","roundBack"],"style":["splitYoke","hemStyle","hemCurve","boxPleat","backDarts","frontDarts","contour","yokeHeight","s3Collar","s3Armhole",{"closure":["extraTopButton","buttons","seperateButtonPlacket","buttonPlacketStyle","seperateButtonholePlacket","buttonholePlacketStyle","buttonPlacketWidth","buttonholePlacketWidth","buttonholePlacketFoldWidth","buttonFreeLength"]},{"cuffs":["cuffStyle","barrelCuffNarrowButton","cuffButtonRows","sleevePlacketWidth","sleevePlacketLength","cuffDrape","cuffLength"]},{"collar":["collarAngle","collarStandBend","collarStandCurve","collarFlare","collarStandWidth","collarBend","collarGap","collarRoll"]}],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleeveWidthGuarantee","boxPleatWidth","boxPleatFold","backDartShaping","bustDartAngle","bustDartLength","frontDartLength","ffsa",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"sven":{"fit":["chestEase","hipsEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus"],"style":["ribbing","ribbingHeight","s3Collar","s3Armhole"],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","ribbingStretch","sleeveWidthGuarantee",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"tamiko":{"fit":["armholeDepthFactor","chestEase"],"style":["flare","lengthBonus","shoulderseamLength"]},"teagan":{"fit":["chestEase","hipsEase","sleeveEase","draftForHighBust"],"style":["necklineWidth","necklineDepth","necklineBend","lengthBonus","sleeveLength"],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]},"theo":{"fit":["backRise","wedge"],"style":["waistbandWidth","lengthBonus","legWidth"]},"tiberius":{"fit":["headRatio","armholeDrop"],"style":["lengthBonus","widthBonus",{"clavi":["clavi","clavusLocation","clavusWidth"]},"length","width"],"advanced":["forceWidth"]},"titan":{"fit":["seatEase","kneeEase","waistEase"],"style":["waistHeight","fitKnee","lengthBonus","crotchDrop"],"advanced":["crossSeamCurveStart","crossSeamCurveBend","crossSeamCurveAngle","crotchSeamCurveStart","crotchSeamCurveBend","crotchSeamCurveAngle","grainlinePosition","legBalance","waistBalance","waistbandWidth"]},"trayvon":{"style":["tipWidth","knotWidth","lengthBonus"]},"ursula":{"fit":["fabricStretch","gussetWidth","gussetLength","elasticStretch"],"style":["rise","legOpening","frontDip","backDip","taperToGusset","backExposure"]},"wahid":{"fit":["chestEase","waistEase","hipsEase","lengthBonus","armholeDepthFactor","backScyeDart","frontScyeDart","centerBackDart"],"style":["pocketLocation","pocketWidth","weltHeight","necklineDrop","frontStyle","hemStyle","hemRadius","buttons"],"advanced":["backInset","frontInset","shoulderInset","neckInset","pocketAngle"]},"walburga":{"fit":["headRatio"],"style":["lengthBonus","widthBonus","length","neckoRatio","neckline"]},"waralee":{"fit":["backRaise","waistRaise"],"style":["hemWidth","legShortening","waistOverlap","frontPocket","backPocket","waistbandWidth"],"advanced":["crotchFront","crotchBack","crotchFactorBackHor","crotchFactorBackVer","crotchFactorFrontHor","crotchFactorFrontVer"]},"yuri":{"fit":["bicepsEase","chestEase","cuffEase","collarEase","shoulderEase","hipsEase"],"style":["lengthBonus","sleeveLengthBonus","s3Collar","s3Armhole"],"advanced":["acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","sleeveWidthGuarantee",{"sleevecap":["sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}]}}
diff --git a/packages/pattern-info/src/prebuild/optional-measurements.js b/packages/pattern-info/src/prebuild/optional-measurements.js
new file mode 100644
index 00000000000..20e683b086d
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/optional-measurements.js
@@ -0,0 +1 @@
+module.exports = {"aaron":[],"albert":[],"bee":[],"bella":[],"benjamin":[],"bent":[],"brian":[],"breanna":[],"diana":[],"bruce":[],"carlita":[],"carlton":[],"cathrin":[],"charlie":[],"cornelius":[],"florent":[],"florence":[],"holmes":[],"hortensia":[],"huey":[],"hugo":[],"jaeger":[],"lunetius":[],"paco":[],"penelope":[],"sandy":[],"shin":[],"simon":[],"simone":[],"sven":[],"tamiko":[],"teagan":["highBust"],"theo":[],"tiberius":[],"titan":[],"trayvon":[],"ursula":[],"wahid":[],"walburga":[],"waralee":[],"yuri":[]}
diff --git a/packages/pattern-info/src/prebuild/options.js b/packages/pattern-info/src/prebuild/options.js
new file mode 100644
index 00000000000..c3578c42652
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/options.js
@@ -0,0 +1 @@
+module.exports = {"aaron":["chestEase","hipsEase","stretchFactor","armholeDrop","backlineBend","necklineBend","necklineDrop","shoulderStrapWidth","shoulderStrapPlacement","lengthBonus"],"albert":["backOpening","chestDepth","lengthBonus","bibLength","bibWidth","strapWidth"],"bee":["chestEase","waistEase","bustSpanEase","topDepth","bottomCupDepth","sideDepth","sideCurve","frontCurve","bellaGuide","ties","neckTieWidth","neckTieLength","neckTieEnds","neckTieColours","bandTieWidth","bandTieLength","bandTieEnds","bandTieColours","crossBackTies","bandLength","backDartHeight","armholeDepth","frontArmholePitchDepth","frontShoulderWidth","fullChestEaseReduction","highBustWidth"],"bella":["chestEase","waistEase","bustSpanEase","fullChestEaseReduction","backDartHeight","bustDartLength","waistDartLength","bustDartCurve","armholeDepth","backArmholeSlant","frontArmholeCurvature","backArmholeCurvature","frontArmholePitchDepth","backArmholePitchDepth","backNeckCutout","backHemSlope","frontShoulderWidth","highBustWidth"],"benjamin":["collarEase","adjustmentRibbon","tipWidth","knotWidth","bowLength","bowStyle","endStyle","ribbonWidth"],"bent":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","sleeveBend","s3Collar","s3Armhole","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleevecapHeight","sleevecapEase"],"brian":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","s3Collar","s3Armhole","acrossBackFactor","armholeHeight","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleeveWidthGuarantee","sleevecapEase","sleevecapHeight","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"breanna":["shoulderDart","shoulderDartSize","shoulderDartLength","waistDart","waistDartSize","waistDartLength","frontScyeDart","verticalEase","chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","waistEase","primaryBustDart","primaryBustDartLength","secondaryBustDart","secondaryBustDartLength","primaryBustDartShaping","sleeveLengthBonus","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"diana":["chestEase","bicepsEase","cuffEase","shoulderEase","waistEase","hipsEase","lengthBonus","sleeveLengthBonus","drapeAngle","shoulderSeamLength","acrossBackFactor","armholeDepthFactor","frontArmholeDeeper","sleeveWidthGuarantee","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"bruce":["bulge","stretch","legStretch","backRise","rise","legBonus"],"carlita":["acrossBackFactor","armholeDepthFactor","bicepsEase","chestEase","cuffEase","shoulderEase","sleeveBend","sleeveLengthBonus","waistEase","seatEase","backNeckCutout","frontArmholeDeeper","frontOverlap","lapelReduction","shoulderSlopeReduction","sleevecapHeight","sleevecapEase","contour","pocketPlacementHorizontal","pocketPlacementVertical","pocketWidth","pocketHeight","pocketRadius","pocketFlapRadius","chestPocketHeight","chestPocketWidth","chestPocketPlacement","chestPocketAngle","innerPocketPlacement","innerPocketWidth","innerPocketDepth","innerPocketWeltHeight","beltWidth","buttonSpacingHorizontal","cuffLength","length","s3Collar","s3Armhole","collarHeight","collarSpread","collarFlare"],"carlton":["acrossBackFactor","armholeDepthFactor","bicepsEase","chestEase","cuffEase","shoulderEase","sleeveBend","sleeveLengthBonus","waistEase","seatEase","backNeckCutout","frontArmholeDeeper","frontOverlap","lapelReduction","shoulderSlopeReduction","sleevecapHeight","sleevecapEase","pocketPlacementHorizontal","pocketPlacementVertical","pocketWidth","pocketHeight","pocketRadius","pocketFlapRadius","chestPocketHeight","chestPocketWidth","chestPocketPlacement","chestPocketAngle","innerPocketPlacement","innerPocketWidth","innerPocketDepth","innerPocketWeltHeight","beltWidth","buttonSpacingHorizontal","cuffLength","length","s3Collar","s3Armhole","collarHeight","collarSpread","collarFlare"],"cathrin":["waistReduction","panels","backOpening","backRise","backDrop","frontRise","frontDrop","hipRise"],"charlie":["seatEase","kneeEase","waistEase","waistbandCurve","waistHeight","waistbandWidth","lengthBonus","crotchDrop","backPocketHorizontalPlacement","backPocketVerticalPlacement","backPocketWidth","backPocketDepth","backPocketFacing","frontPocketSlantDepth","frontPocketSlantWidth","frontPocketSlantRound","frontPocketSlantBend","frontPocketWidth","frontPocketDepth","frontPocketFacing","crossSeamCurveStart","crossSeamCurveBend","crossSeamCurveAngle","crotchSeamCurveStart","crotchSeamCurveBend","crotchSeamCurveAngle","grainlinePosition","legBalance","waistBalance","beltLoops","flyCurve","flyLength","flyWidth"],"cornelius":["fullness","waistReduction","waistbandBelowWaist","cuffStyle","cuffWidth","ventLength","bandBelowKnee","kneeToBelow"],"florent":["headEase"],"florence":["height","length","curve"],"holmes":["headEase","lengthRatio","gores","visorAngle","visorWidth","earLength","earWidth","buttonhole","visorLength"],"hortensia":["size","zipperSize","strapLength","handleWidth"],"huey":["bicepsEase","chestEase","cuffEase","collarEase","shoulderEase","hipsEase","ribbingStretch","lengthBonus","sleeveLengthBonus","ribbing","pocket","ribbingHeight","pocketHeight","pocketWidth","hoodHeight","hoodCutback","hoodClosure","hoodDepth","hoodAngle","s3Collar","s3Armhole","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","sleeveWidthGuarantee","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"hugo":["bicepsEase","chestEase","cuffEase","hipsEase","ribbingStretch","lengthBonus","sleeveLengthBonus","ribbingHeight","acrossBackFactor","backNeckCutout"],"jaeger":["acrossBackFactor","armholeDepthFactor","bicepsEase","centerBackDart","chestEase","collarEase","cuffEase","hipsEase","lengthBonus","shoulderEase","waistEase","sleeveBend","sleeveLengthBonus","sleeveVentLength","sleeveVentWidth","backNeckCutout","chestShaping","frontArmholeDeeper","frontDartPlacement","frontOverlap","sideFrontPlacement","shoulderSlopeReduction","sleevecapHeight","sleevecapEase","chestPocketDepth","chestPocketWidth","chestPocketPlacement","chestPocketAngle","chestPocketWeltSize","frontPocketPlacement","frontPocketWidth","frontPocketDepth","frontPocketRadius","innerPocketPlacement","innerPocketWidth","innerPocketDepth","innerPocketWeltHeight","pocketFoldover","centerFrontHemDrop","backVent","backVentLength","buttonLength","buttons","frontCutawayAngle","frontCutawayStart","frontCutawayEnd","hemRadius","lapelStart","lapelReduction","collarSpread","collarHeight","collarNotchDepth","collarNotchAngle","collarNotchReturn","collarRoll","rollLineCollarHeight"],"lunetius":["lengthRatio","widthRatio","length"],"paco":["seatEase","waistEase","heelEase","waistHeight","lengthBonus","crotchDrop","elasticatedHem","waistbandWidth","ankleElastic","frontPockets","backPockets","crossSeamCurveStart","crossSeamCurveBend","crossSeamCurveAngle","crotchSeamCurveStart","crotchSeamCurveBend","crotchSeamCurveAngle","grainlinePosition","legBalance","waistBalance"],"penelope":["lengthBonus","hem","backVent","backVentLength","waistBand","waistBandWidth","zipperLocation","nrOfDarts","hemBonus","seatEase","waistEase","backDartDepthFactor","frontDartDepthFactor","dartToSideSeamFactor"],"sandy":["waistbandPosition","waistbandShape","lengthBonus","circleRatio","waistbandWidth","waistbandOverlap","gathering","seamlessFullCircle","hemWidth"],"shin":["bulge","backRise","legReduction","stretch","rise","elasticWidth"],"simon":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","waistEase","hipsEase","roundBack","hemStyle","hemCurve","boxPleat","backDarts","splitYoke","yokeHeight","s3Collar","s3Armhole","extraTopButton","buttons","seperateButtonPlacket","buttonPlacketStyle","seperateButtonholePlacket","buttonholePlacketStyle","buttonPlacketWidth","buttonholePlacketWidth","buttonholePlacketFoldWidth","buttonFreeLength","cuffStyle","barrelCuffNarrowButton","cuffButtonRows","sleevePlacketWidth","sleevePlacketLength","cuffDrape","cuffLength","collarAngle","collarStandBend","collarStandCurve","collarFlare","collarStandWidth","collarBend","collarGap","collarRoll","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleeveWidthGuarantee","boxPleatWidth","boxPleatFold","backDartShaping","ffsa","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"simone":["chestEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","waistEase","hipsEase","roundBack","splitYoke","hemStyle","hemCurve","boxPleat","backDarts","frontDarts","contour","yokeHeight","s3Collar","s3Armhole","extraTopButton","buttons","seperateButtonPlacket","buttonPlacketStyle","seperateButtonholePlacket","buttonholePlacketStyle","buttonPlacketWidth","buttonholePlacketWidth","buttonholePlacketFoldWidth","buttonFreeLength","cuffStyle","barrelCuffNarrowButton","cuffButtonRows","sleevePlacketWidth","sleevePlacketLength","cuffDrape","cuffLength","collarAngle","collarStandBend","collarStandCurve","collarFlare","collarStandWidth","collarBend","collarGap","collarRoll","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","shoulderSlopeReduction","sleeveWidthGuarantee","boxPleatWidth","boxPleatFold","backDartShaping","bustDartAngle","bustDartLength","frontDartLength","ffsa","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"sven":["chestEase","hipsEase","collarEase","bicepsEase","cuffEase","shoulderEase","lengthBonus","sleeveLengthBonus","ribbing","ribbingHeight","s3Collar","s3Armhole","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","ribbingStretch","sleeveWidthGuarantee","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"tamiko":["armholeDepthFactor","chestEase","flare","lengthBonus","shoulderseamLength"],"teagan":["chestEase","hipsEase","sleeveEase","draftForHighBust","necklineWidth","necklineDepth","necklineBend","lengthBonus","sleeveLength","acrossBackFactor","armholeDepthFactor","backNeckCutout","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"],"theo":["backRise","wedge","waistbandWidth","lengthBonus","legWidth"],"tiberius":["headRatio","armholeDrop","lengthBonus","widthBonus","clavi","clavusLocation","clavusWidth","length","width","forceWidth"],"titan":["seatEase","kneeEase","waistEase","waistHeight","fitKnee","lengthBonus","crotchDrop","crossSeamCurveStart","crossSeamCurveBend","crossSeamCurveAngle","crotchSeamCurveStart","crotchSeamCurveBend","crotchSeamCurveAngle","grainlinePosition","legBalance","waistBalance","waistbandWidth"],"trayvon":["tipWidth","knotWidth","lengthBonus"],"ursula":["fabricStretch","gussetWidth","gussetLength","elasticStretch","rise","legOpening","frontDip","backDip","taperToGusset","backExposure"],"wahid":["chestEase","waistEase","hipsEase","lengthBonus","armholeDepthFactor","backScyeDart","frontScyeDart","centerBackDart","pocketLocation","pocketWidth","weltHeight","necklineDrop","frontStyle","hemStyle","hemRadius","buttons","backInset","frontInset","shoulderInset","neckInset","pocketAngle"],"walburga":["headRatio","lengthBonus","widthBonus","length","neckoRatio","neckline"],"waralee":["backRaise","waistRaise","hemWidth","legShortening","waistOverlap","frontPocket","backPocket","waistbandWidth","crotchFront","crotchBack","crotchFactorBackHor","crotchFactorBackVer","crotchFactorFrontHor","crotchFactorFrontVer"],"yuri":["bicepsEase","chestEase","cuffEase","collarEase","shoulderEase","hipsEase","lengthBonus","sleeveLengthBonus","s3Collar","s3Armhole","acrossBackFactor","armholeDepthFactor","backNeckCutout","frontArmholeDeeper","sleeveWidthGuarantee","sleevecapEase","sleevecapTopFactorX","sleevecapTopFactorY","sleevecapBackFactorX","sleevecapBackFactorY","sleevecapFrontFactorX","sleevecapFrontFactorY","sleevecapQ1Offset","sleevecapQ2Offset","sleevecapQ3Offset","sleevecapQ4Offset","sleevecapQ1Spread1","sleevecapQ1Spread2","sleevecapQ2Spread1","sleevecapQ2Spread2","sleevecapQ3Spread1","sleevecapQ3Spread2","sleevecapQ4Spread1","sleevecapQ4Spread2"]}
diff --git a/packages/pattern-info/src/prebuild/parts.js b/packages/pattern-info/src/prebuild/parts.js
new file mode 100644
index 00000000000..fa9fffd9b8b
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/parts.js
@@ -0,0 +1 @@
+module.exports = {"aaron":["front","back"],"albert":["front","strap","pocket"],"bee":["cup","neckTie","bandTie"],"bella":["back","frontSideDart"],"benjamin":["ribbon","bow1","bow2","bow3"],"bent":["back","front","topSleeve","underSleeve"],"brian":["back","front","sleeve"],"breanna":["back","front","sleeve","base"],"diana":["front","back","sleeve"],"bruce":["side","back","front","inset"],"carlita":["back","tail","topSleeve","underSleeve","belt","collarStand","collar","cuffFacing","pocket","pocketFlap","pocketLining","chestPocketWelt","chestPocketBag","innerPocketWelt","innerPocketBag","innerPocketTab","front","side"],"carlton":["front","back","tail","topSleeve","underSleeve","belt","collarStand","collar","cuffFacing","pocket","pocketFlap","pocketLining","chestPocketWelt","chestPocketBag","innerPocketWelt","innerPocketBag","innerPocketTab"],"cathrin":["panel1","panel2","panel3","panel4","panel5","panel6"],"charlie":["beltLoops","back","front","waistband","waistbandCurved","backPocket","frontPocket","frontPocketFacing","backPocketFacing","backPocketInterfacing","backPocketJet","flyFacing","flyExtension"],"cornelius":["back","front","waistband","legband","legbandkeystone","pocket","pocketfacing","zipperguard"],"florent":["side","top","brimTop","brimBottom","brimInterfacing"],"florence":["mask"],"holmes":["gore","visor","ear"],"hortensia":["strap","sidepanel","bottompanel","frontpanel","sidepanelreinforcement","zipperpanel"],"huey":["hood","waistband","cuff","back","front","sleeve","pocket"],"hugo":["waistband","cuff","front","back","sleeve","pocket","pocketFacing","hoodCenter","hoodSide"],"jaeger":["front","back","side","collarStand","collar","underCollar","pocket","pocketLining","chestPocketWelt","chestPocketBag","innerPocketWelt","innerPocketBag","topSleeve","underSleeve"],"lunetius":["lacerna"],"paco":["back","front","waistband","cuff","pocketBagFront","pocketBagBack","pocketWelt","pocketWeltInterfacing"],"penelope":["front","back","waistband"],"sandy":["waistband","skirt"],"shin":["back","front","waistband"],"simon":["collarStand","collar","sleevePlacketUnderlap","sleevePlacketOverlap","cuff","back","sleeve","frontRight","frontLeft","buttonPlacket","buttonholePlacket","yoke"],"simone":["collarStand","collar","sleevePlacketUnderlap","sleevePlacketOverlap","cuff","back","sleeve","frontRight","frontLeft","buttonPlacket","buttonholePlacket","yoke"],"sven":["cuff","waistband","front","back","sleeve"],"tamiko":["top"],"teagan":["front","back","sleeve"],"theo":["waistbandInterfacingLeft","waistbandInterfacingRight","backPocketFacing","beltLoop","front","back","waistbandLeft","waistbandRight","waistbandLiningLeft","waistbandLiningRight","flyPiece","flyShield","sidePiece","frontPocketBag","backOuterPocketBag","backInnerPocketBag","backPocketInterfacing"],"tiberius":["tunica"],"titan":["front","back"],"trayvon":["interfacingTip","interfacingTail","fabricTip","fabricTail","liningTip","liningTail","loop"],"ursula":["front","back","gusset","elastic"],"wahid":["pocketWelt","pocketFacing","pocketInterfacing","front","back","frontFacing","frontLining","pocketBag"],"walburga":["front","back"],"waralee":["cutout","pocket","backPocket","facings","pants","pantsproto","mini"],"yuri":["gusset","hoodSide","hoodCenter","back","front","sleeve"]}
diff --git a/packages/pattern-info/src/prebuild/versions.js b/packages/pattern-info/src/prebuild/versions.js
new file mode 100644
index 00000000000..93d71a4222f
--- /dev/null
+++ b/packages/pattern-info/src/prebuild/versions.js
@@ -0,0 +1 @@
+module.exports = {"aaron":"2.20.7","albert":"2.20.7","bee":"2.20.7","bella":"2.20.7","benjamin":"2.20.7","bent":"2.20.7","brian":"2.20.7","breanna":"2.20.7","diana":"2.20.7","bruce":"2.20.7","carlita":"2.20.7","carlton":"2.20.7","cathrin":"2.20.7","charlie":"2.20.7","cornelius":"2.20.7","florent":"2.20.7","florence":"2.20.7","holmes":"2.20.7","hortensia":"2.20.7","huey":"2.20.7","hugo":"2.20.7","jaeger":"2.20.7","lunetius":"2.20.7","paco":"2.20.7","penelope":"2.20.7","sandy":"2.20.7","shin":"2.20.7","simon":"2.20.7","simone":"2.20.7","sven":"2.20.7","tamiko":"2.20.7","teagan":"2.20.7","theo":"2.20.7","tiberius":"2.20.7","titan":"2.20.7","trayvon":"2.20.7","ursula":"2.20.7","wahid":"2.20.7","walburga":"2.20.7","waralee":"2.20.7","yuri":"2.20.7"}
diff --git a/packages/shin/src/back.js b/packages/shin/src/back.js
index c5c2729bbd6..5eee88d7c2a 100644
--- a/packages/shin/src/back.js
+++ b/packages/shin/src/back.js
@@ -117,7 +117,13 @@ export default function (part) {
       nr: 1,
       title: 'back',
     })
-    macro('scalebox', { at: new Point(points.legSide.x + 80, points.legSide.y - 40) })
+    macro('scalebox', { at: new Point(points.legSide.x + 100, points.legSide.y - 40) })
+	points.grainlineFrom = points.legSide.shift(0,15)
+	points.grainlineTo = points.hipSide.shift(0,15)
+	macro("grainline", {
+		from: points.grainlineFrom,
+		to: points.grainlineTo,
+		})
     if (sa) {
       paths.sa = paths.hemBase
         .offset(3 * sa)
diff --git a/packages/shin/src/front.js b/packages/shin/src/front.js
index d481ab907da..55ed0d55d8d 100644
--- a/packages/shin/src/front.js
+++ b/packages/shin/src/front.js
@@ -120,6 +120,12 @@ export default function (part) {
       nr: 2,
       title: 'front',
     })
+	points.grainlineFrom = points.seatCb.shift(180,30)
+	points.grainlineTo = points.hipCb.shift(180,30)
+	macro("grainline", {
+		from: points.grainlineFrom,
+		to: points.grainlineTo,
+		})
     if (sa) {
       paths.sa = paths.hemBase
         .offset(3 * sa)
diff --git a/packages/shin/src/waistband.js b/packages/shin/src/waistband.js
index 79d76bd5212..54b3b3149f8 100644
--- a/packages/shin/src/waistband.js
+++ b/packages/shin/src/waistband.js
@@ -48,6 +48,12 @@ export default function (part) {
       nr: 3,
       title: 'waistband',
     })
+  points.grainlineFrom = points.bottomLeft.shiftFractionTowards(points.bottomRight,1/8)
+	points.grainlineTo = new Point(points.grainlineFrom.x, points.topLeft.y)
+	macro("grainline", {
+  from: points.grainlineFrom,
+  to: points.grainlineTo,
+})
     if (sa) {
       paths.sa = new Path()
         .move(points.topLeft)
diff --git a/packages/strapi/package.json b/packages/strapi/package.json
index bf26a36ea61..c1446013019 100644
--- a/packages/strapi/package.json
+++ b/packages/strapi/package.json
@@ -41,7 +41,7 @@
     "strapi-plugin-email": "3.6.8",
     "strapi-plugin-upload": "3.6.8",
     "strapi-plugin-i18n": "3.6.8",
-    "strapi-connector-mongoose": "3.6.8"
+    "strapi-connector-mongoose": "3.6.9"
   },
   "devDependencies": {},
   "files": [],
diff --git a/packages/titan/src/front.js b/packages/titan/src/front.js
index 9805a71b3f9..2e3384d6665 100644
--- a/packages/titan/src/front.js
+++ b/packages/titan/src/front.js
@@ -216,7 +216,7 @@ export default (part) => {
   points.kneeOutCp1 = points.kneeOut.shift(90, points.fork.dy(points.knee) / 3)
   points.seatOutCp1 = points.seatOut.shift(
     90,
-    measurements.waistToHips + absoluteOptions.waistbandWidth
+    measurements.waistToHips * options.waistHeight + absoluteOptions.waistbandWidth
   )
   points.seatOutCp2 = points.seatOut.shift(-90, points.seatOut.dy(points.knee) / 3)
 
diff --git a/yarn.lock b/yarn.lock
index 8bad8cda74b..da135af7855 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1368,13 +1368,13 @@
     sift "^13.0.0"
 
 "@commitlint/cli@^16.0.2":
-  version "16.2.3"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-16.2.3.tgz#6c250ce7a660a08a3ac35dd2ec5039421fb831df"
-  integrity sha512-VsJBQLvhhlOgEfxs/Z5liYuK0dXqLE5hz1VJzLBxiOxG31kL/X5Q4OvK292BmO7IGZcm1yJE3XQPWSiFaEHbWA==
+  version "16.2.4"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-16.2.4.tgz#f22707918d08c27a19779798788a7c793f1d38e6"
+  integrity sha512-rbvqvz9JI+uiKxV2nH65BtSU01fsADd3bxe9fWtO3rM0c+CI/H9FfzKkDLvSRmXjvk1G2/wXlCGeqO9IBT4X9g==
   dependencies:
     "@commitlint/format" "^16.2.1"
-    "@commitlint/lint" "^16.2.1"
-    "@commitlint/load" "^16.2.3"
+    "@commitlint/lint" "^16.2.4"
+    "@commitlint/load" "^16.2.4"
     "@commitlint/read" "^16.2.1"
     "@commitlint/types" "^16.2.1"
     lodash "^4.17.19"
@@ -1418,28 +1418,28 @@
     "@commitlint/types" "^16.2.1"
     chalk "^4.0.0"
 
-"@commitlint/is-ignored@^16.2.1":
-  version "16.2.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-16.2.1.tgz#cc688ec73a3d204b90f8086821a08814da461e5e"
-  integrity sha512-exl8HRzTIfb1YvDJp2b2HU5z1BT+9tmgxR2XF0YEzkMiCIuEKh+XLeocPr1VcvAKXv3Cmv5X/OfNRp+i+/HIhQ==
+"@commitlint/is-ignored@^16.2.4":
+  version "16.2.4"
+  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-16.2.4.tgz#369e40a240ad5451bf2b57a80829253129d7f19b"
+  integrity sha512-Lxdq9aOAYCOOOjKi58ulbwK/oBiiKz+7Sq0+/SpFIEFwhHkIVugvDvWjh2VRBXmRC/x5lNcjDcYEwS/uYUvlYQ==
   dependencies:
     "@commitlint/types" "^16.2.1"
-    semver "7.3.5"
+    semver "7.3.7"
 
-"@commitlint/lint@^16.2.1":
-  version "16.2.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-16.2.1.tgz#c773f082cd4f69cb7807b805b691d2a52c732f97"
-  integrity sha512-fNINQ3X2ZqsCkNB3Z0Z8ElmhewqrS3gy2wgBTx97BkcjOWiyPAGwDJ752hwrsUnWAVBRztgw826n37xPzxsOgg==
+"@commitlint/lint@^16.2.4":
+  version "16.2.4"
+  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-16.2.4.tgz#575f5a9d227dddfca8386253d9aff27be5b94788"
+  integrity sha512-AUDuwOxb2eGqsXbTMON3imUGkc1jRdtXrbbohiLSCSk3jFVXgJLTMaEcr39pR00N8nE9uZ+V2sYaiILByZVmxQ==
   dependencies:
-    "@commitlint/is-ignored" "^16.2.1"
+    "@commitlint/is-ignored" "^16.2.4"
     "@commitlint/parse" "^16.2.1"
-    "@commitlint/rules" "^16.2.1"
+    "@commitlint/rules" "^16.2.4"
     "@commitlint/types" "^16.2.1"
 
-"@commitlint/load@^16.2.3":
-  version "16.2.3"
-  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-16.2.3.tgz#7b2e85af25a6f736f080ba08e7165738cedf8c8f"
-  integrity sha512-Hb4OUlMnBUK6UxJEZ/VJ5k0LocIS7PtEMbRXEAA7eSpOgORIFexC4K/RaRpVd5UTtu3M0ST3ddPPijF9rdW6nw==
+"@commitlint/load@^16.2.4":
+  version "16.2.4"
+  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-16.2.4.tgz#32c9f4c6538b21cf48cf40266312bb1adb65f435"
+  integrity sha512-HjANm3/29ROV+zt4yfaY/K6gpr9Dbzgtlp0kSwZGW0poDXlD/yqVYgPQ6JolJzZii5FUz5R4yVLC15hVL/w60w==
   dependencies:
     "@commitlint/config-validator" "^16.2.1"
     "@commitlint/execute-rule" "^16.2.1"
@@ -1489,10 +1489,10 @@
     resolve-from "^5.0.0"
     resolve-global "^1.0.0"
 
-"@commitlint/rules@^16.2.1":
-  version "16.2.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-16.2.1.tgz#7264aa1c754e1c212aeceb27e5eb380cfa7bb233"
-  integrity sha512-ZFezJXQaBBso+BOTre/+1dGCuCzlWVaeLiVRGypI53qVgPMzQqZhkCcrxBFeqB87qeyzr4A4EoG++IvITwwpIw==
+"@commitlint/rules@^16.2.4":
+  version "16.2.4"
+  resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-16.2.4.tgz#c2fbbf20d9d0e8fcf25690c88a27750d4a3e867b"
+  integrity sha512-rK5rNBIN2ZQNQK+I6trRPK3dWa0MtaTN4xnwOma1qxa4d5wQMQJtScwTZjTJeallFxhOgbNOgr48AMHkdounVg==
   dependencies:
     "@commitlint/ensure" "^16.2.1"
     "@commitlint/message" "^16.2.1"
@@ -1704,9 +1704,9 @@
   integrity sha512-krIslwmFMjDHtbSVKZLC6+PM6dOvw26OTm7rE7CrniJ4q5Lbfffx67RAlDI3ee0LsG6gIJd/JXBeUm+RgUsPqg==
 
 "@fontsource/ubuntu@latest":
-  version "4.5.6"
-  resolved "https://registry.yarnpkg.com/@fontsource/ubuntu/-/ubuntu-4.5.6.tgz#9aa9203386d0f6c8ba6b28b67b9f39484b20dfa7"
-  integrity sha512-MOYHXrby1tF36wRydHN6YX70tlURth+gA1izuR6CynwwcUYYS+VpfTM60Uhwqo+rcp7NtnnkWpvLQt/CMCFttg==
+  version "4.5.9"
+  resolved "https://registry.yarnpkg.com/@fontsource/ubuntu/-/ubuntu-4.5.9.tgz#924ac5bfdebcf714be11bfd6bd97c8decc6ac31f"
+  integrity sha512-vclZr1HH0wAS+NiFYx0pf2vvIU6ylUN0FNMqBkRLvUqm5cjF+fQ53WfiI9f07tY1/EjbNY6NURmd0/nM/L7krA==
 
 "@formatjs/ecma402-abstract@1.11.3":
   version "1.11.3"
@@ -3361,10 +3361,10 @@
     unixify "^1.0.0"
     yargs "^16.0.0"
 
-"@next/env@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.5.tgz#a21ba6708022d630402ca2b340316e69a0296dfc"
-  integrity sha512-+34yUJslfJi7Lyx6ELuN8nWcOzi27izfYnZIC1Dqv7kmmfiBVxgzR3BXhlvEMTKC2IRJhXVs2FkMY+buQe3k7Q==
+"@next/env@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.6.tgz#5f44823a78335355f00f1687cfc4f1dafa3eca08"
+  integrity sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA==
 
 "@next/eslint-plugin-next@12.1.5":
   version "12.1.5"
@@ -3373,65 +3373,65 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm-eabi@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.5.tgz#36729ab3dfd7743e82cfe536b43254dcb146620c"
-  integrity sha512-SKnGTdYcoN04Y2DvE0/Y7/MjkA+ltsmbuH/y/hR7Ob7tsj+8ZdOYuk+YvW1B8dY20nDPHP58XgDTSm2nA8BzzA==
+"@next/swc-android-arm-eabi@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz#79a35349b98f2f8c038ab6261aa9cd0d121c03f9"
+  integrity sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==
 
-"@next/swc-android-arm64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.5.tgz#52578f552305c92d0b9b81d603c9643fb71e0835"
-  integrity sha512-YXiqgQ/9Rxg1dXp6brXbeQM1JDx9SwUY/36JiE+36FXqYEmDYbxld9qkX6GEzkc5rbwJ+RCitargnzEtwGW0mw==
+"@next/swc-android-arm64@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz#ec08ea61794f8752c8ebcacbed0aafc5b9407456"
+  integrity sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==
 
-"@next/swc-darwin-arm64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.5.tgz#3d5b53211484c72074f4975ba0ec2b1107db300e"
-  integrity sha512-y8mhldb/WFZ6lFeowkGfi0cO/lBdiBqDk4T4LZLvCpoQp4Or/NzUN6P5NzBQZ5/b4oUHM/wQICEM+1wKA4qIVw==
+"@next/swc-darwin-arm64@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz#d1053805615fd0706e9b1667893a72271cd87119"
+  integrity sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==
 
-"@next/swc-darwin-x64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.5.tgz#adcabb732d226453777c0d37d58eaff9328b66fd"
-  integrity sha512-wqJ3X7WQdTwSGi0kIDEmzw34QHISRIQ5uvC+VXmsIlCPFcMA+zM5723uh8NfuKGquDMiEMS31a83QgkuHMYbwQ==
+"@next/swc-darwin-x64@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz#2d1b926a22f4c5230d5b311f9c56cfdcc406afec"
+  integrity sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==
 
-"@next/swc-linux-arm-gnueabihf@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.5.tgz#82a7cde67482b756bc65fbebf1dfa8a782074e93"
-  integrity sha512-WnhdM5duONMvt2CncAl+9pim0wBxDS2lHoo7ub/o/i1bRbs11UTzosKzEXVaTDCUkCX2c32lIDi1WcN2ZPkcdw==
+"@next/swc-linux-arm-gnueabihf@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz#c021918d2a94a17f823106a5e069335b8a19724f"
+  integrity sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==
 
-"@next/swc-linux-arm64-gnu@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.5.tgz#f82ca014504950aab751e81f467492e9be0bad5d"
-  integrity sha512-Jq2H68yQ4bLUhR/XQnbw3LDW0GMQn355qx6rU36BthDLeGue7YV7MqNPa8GKvrpPocEMW77nWx/1yI6w6J07gw==
+"@next/swc-linux-arm64-gnu@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz#ac55c07bfabde378dfa0ce2b8fc1c3b2897e81ae"
+  integrity sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==
 
-"@next/swc-linux-arm64-musl@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.5.tgz#f811ec9f4b12a978426c284c95ab2f515ddf7f9e"
-  integrity sha512-KgPjwdbhDqXI7ghNN8V/WAiLquc9Ebe8KBrNNEL0NQr+yd9CyKJ6KqjayVkmX+hbHzbyvbui/5wh/p3CZQ9xcQ==
+"@next/swc-linux-arm64-musl@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz#e429f826279894be9096be6bec13e75e3d6bd671"
+  integrity sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==
 
-"@next/swc-linux-x64-gnu@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.5.tgz#d44857257e6d20dc841998951d584ab1f25772c3"
-  integrity sha512-O2ErUTvCJ6DkNTSr9pbu1n3tcqykqE/ebty1rwClzIYdOgpB3T2MfEPP+K7GhUR87wmN/hlihO9ch7qpVFDGKw==
+"@next/swc-linux-x64-gnu@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz#1f276c0784a5ca599bfa34b2fcc0b38f3a738e08"
+  integrity sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==
 
-"@next/swc-linux-x64-musl@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.5.tgz#3cc523abadc9a2a6de680593aff06e71cc29ecef"
-  integrity sha512-1eIlZmlO/VRjxxzUBcVosf54AFU3ltAzHi+BJA+9U/lPxCYIsT+R4uO3QksRzRjKWhVQMRjEnlXyyq5SKJm7BA==
+"@next/swc-linux-x64-musl@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz#1d9933dd6ba303dcfd8a2acd6ac7c27ed41e2eea"
+  integrity sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==
 
-"@next/swc-win32-arm64-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.5.tgz#c62232d869f1f9b22e8f24e4e7f05307c20f30ca"
-  integrity sha512-oromsfokbEuVb0CBLLE7R9qX3KGXucZpsojLpzUh1QJjuy1QkrPJncwr8xmWQnwgtQ6ecMWXgXPB+qtvizT9Tw==
+"@next/swc-win32-arm64-msvc@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz#2ef9837f12ca652b1783d72ecb86208906042f02"
+  integrity sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==
 
-"@next/swc-win32-ia32-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.5.tgz#2bd9b28a9ba730d12a493e7d9d18e150fe89d496"
-  integrity sha512-a/51L5KzBpeZSW9LbekMo3I3Cwul+V+QKwbEIMA+Qwb2qrlcn1L9h3lt8cHqNTFt2y72ce6aTwDTw1lyi5oIRA==
+"@next/swc-win32-ia32-msvc@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz#74003d0aa1c59dfa56cb15481a5c607cbc0027b9"
+  integrity sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==
 
-"@next/swc-win32-x64-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.5.tgz#02f377e4d41eaaacf265e34bab9bacd8efc4a351"
-  integrity sha512-/SoXW1Ntpmpw3AXAzfDRaQidnd8kbZ2oSni8u5z0yw6t4RwJvmdZy1eOaAADRThWKV+2oU90++LSnXJIwBRWYQ==
+"@next/swc-win32-x64-msvc@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz#a350caf42975e7197b24b495b8d764eec7e6a36e"
+  integrity sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==
 
 "@node-redis/bloom@1.0.1":
   version "1.0.1"
@@ -4428,6 +4428,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/extend@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/extend/-/extend-3.0.1.tgz#923dc2d707d944382433e01d6cc0c69030ab2c75"
+  integrity sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==
+
 "@types/formidable@^1.0.31":
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/@types/formidable/-/formidable-1.2.5.tgz#561d026e5f09179e5c8ef7b31e8f4652e11abe4c"
@@ -4435,6 +4440,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/github-slugger@^1.0.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524"
+  integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==
+
 "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -7842,7 +7852,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001332:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001332:
   version "1.0.30001332"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz#39476d3aa8d83ea76359c70302eafdd4a1d727dd"
   integrity sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==
@@ -12725,7 +12735,7 @@ github-from-package@0.0.0:
   resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
   integrity sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=
 
-github-slugger@^1.1.1:
+github-slugger@^1.0.0, github-slugger@^1.1.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
   integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
@@ -17418,6 +17428,20 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
   integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
 
+mdast-util-toc@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz#1f38419f5ce774449c8daa87b39a4d940b24be7c"
+  integrity sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==
+  dependencies:
+    "@types/extend" "^3.0.0"
+    "@types/github-slugger" "^1.0.0"
+    "@types/mdast" "^3.0.0"
+    extend "^3.0.0"
+    github-slugger "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit "^3.0.0"
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -18991,27 +19015,27 @@ next-tick@~1.0.0:
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
 next@latest:
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.5.tgz#7a07687579ddce61ee519493e1c178d83abac063"
-  integrity sha512-YGHDpyfgCfnT5GZObsKepmRnne7Kzp7nGrac07dikhutWQug7hHg85/+sPJ4ZW5Q2pDkb+n0FnmLkmd44htIJQ==
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.1.6.tgz#eb205e64af1998651f96f9df44556d47d8bbc533"
+  integrity sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==
   dependencies:
-    "@next/env" "12.1.5"
-    caniuse-lite "^1.0.30001283"
+    "@next/env" "12.1.6"
+    caniuse-lite "^1.0.30001332"
     postcss "8.4.5"
-    styled-jsx "5.0.1"
+    styled-jsx "5.0.2"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.5"
-    "@next/swc-android-arm64" "12.1.5"
-    "@next/swc-darwin-arm64" "12.1.5"
-    "@next/swc-darwin-x64" "12.1.5"
-    "@next/swc-linux-arm-gnueabihf" "12.1.5"
-    "@next/swc-linux-arm64-gnu" "12.1.5"
-    "@next/swc-linux-arm64-musl" "12.1.5"
-    "@next/swc-linux-x64-gnu" "12.1.5"
-    "@next/swc-linux-x64-musl" "12.1.5"
-    "@next/swc-win32-arm64-msvc" "12.1.5"
-    "@next/swc-win32-ia32-msvc" "12.1.5"
-    "@next/swc-win32-x64-msvc" "12.1.5"
+    "@next/swc-android-arm-eabi" "12.1.6"
+    "@next/swc-android-arm64" "12.1.6"
+    "@next/swc-darwin-arm64" "12.1.6"
+    "@next/swc-darwin-x64" "12.1.6"
+    "@next/swc-linux-arm-gnueabihf" "12.1.6"
+    "@next/swc-linux-arm64-gnu" "12.1.6"
+    "@next/swc-linux-arm64-musl" "12.1.6"
+    "@next/swc-linux-x64-gnu" "12.1.6"
+    "@next/swc-linux-x64-musl" "12.1.6"
+    "@next/swc-win32-arm64-msvc" "12.1.6"
+    "@next/swc-win32-ia32-msvc" "12.1.6"
+    "@next/swc-win32-x64-msvc" "12.1.6"
 
 nice-try@^1.0.4:
   version "1.0.5"
@@ -24438,18 +24462,18 @@ semver@7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^7.0.0, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
+semver@7.3.7, semver@^7.0.0, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
@@ -25370,10 +25394,10 @@ strapi-admin@3.6.8:
     webpackbar "^4.0.0"
     yup "^0.32.9"
 
-strapi-connector-mongoose@3.6.8:
-  version "3.6.8"
-  resolved "https://registry.yarnpkg.com/strapi-connector-mongoose/-/strapi-connector-mongoose-3.6.8.tgz#c5aa4c1b5f9ef4b39d48b84aba256c1ec20b6b5a"
-  integrity sha512-szBQhCSOZhobfu5FWS56u2JaqWe/bz7BhMeBBRPXc9SFT5buKVMydrMxRI3l63/Aap6AtHt43OtZ6V5aUZlTDA==
+strapi-connector-mongoose@3.6.9:
+  version "3.6.9"
+  resolved "https://registry.yarnpkg.com/strapi-connector-mongoose/-/strapi-connector-mongoose-3.6.9.tgz#31a5f009e6def3962427f12ffc269407f666265c"
+  integrity sha512-h8GX/Ekr00a1uewgq6ExJ1kRbSfESFzG3jKpO+9W+WEVwjoLG5KjA0hru3JQ3vlG/44HOrroO02l2TEviLVZbg==
   dependencies:
     lodash "4.17.21"
     mongoose "5.10.8"
@@ -25382,7 +25406,7 @@ strapi-connector-mongoose@3.6.8:
     p-map "4.0.0"
     pluralize "^8.0.0"
     semver "^7.3.5"
-    strapi-utils "3.6.8"
+    strapi-utils "3.6.9"
 
 strapi-database@3.6.8:
   version "3.6.8"
@@ -26177,10 +26201,10 @@ styled-components@^5.2.3:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-styled-jsx@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
-  integrity sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==
+styled-jsx@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729"
+  integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
 
 stylehacks@^5.0.2:
   version "5.0.2"