diff --git a/packages/new-design/lib/config.mjs b/packages/new-design/lib/config.mjs
index 946592ea09b..0283babb389 100644
--- a/packages/new-design/lib/config.mjs
+++ b/packages/new-design/lib/config.mjs
@@ -8,7 +8,7 @@ export const config = {
   // Repository to download from
   repo: process.env.FS_REPO || 'freesewing/freesewing',
   // Branch to download from
-  branch: process.env.FS_BRANCH || 'alpha-release',
+  branch: process.env.FS_BRANCH || 'joost',
   i18n: [
     'account',
     'common',
@@ -62,34 +62,34 @@ yarn-error.log*
     sites: [
       'shared/utils.mjs',
       'shared/designs/index.js',
-      'shared/config/i18n.config.mjs',
       'shared/config/freesewing.mjs',
+      'shared/config/i18n.config.mjs',
       'shared/config/next.mjs',
-      'shared/config/tailwind-force.html',
       'shared/config/postcss.config.js',
+      'shared/config/tailwind-force.html',
       'shared/config/tailwind.config.js',
-      'shared/hooks/useGist.js',
-      'shared/hooks/useLocalStorage.js',
-      'shared/hooks/useTheme.js',
-      'shared/mdx/compiler.js',
+      'shared/hooks/useGist.mjs',
+      'shared/hooks/useLocalStorage.mjs',
+      'shared/hooks/useTheme.mjs',
+      'shared/mdx/compiler.mjs',
+      'shared/mdx/loader.mjs',
       'shared/mdx/mdx-plugin-toc.mjs',
-      'shared/mdx/loader.js',
       'shared/mdx/remark-intro-plugin.mjs',
-      'shared/styles/code.css',
-      'shared/styles/globals.css',
-      'shared/styles/svg-freesewing-draft.css',
       'shared/strapi/loader.js',
       'shared/strapi/qa.mjs',
       'shared/themes/dark.js',
       'shared/themes/hax0r.js',
+      'shared/themes/index.js',
       'shared/themes/lgbtq.js',
       'shared/themes/light.js',
-      'shared/themes/index.js',
-      'shared/themes/runtime.js',
+      'shared/themes/runtime.mjs',
+      'shared/styles/code.css',
+      'shared/styles/globals.css',
+      'shared/styles/svg-freesewing-draft.css',
+      'shared/prebuild/contributors.mjs',
       'shared/prebuild/feed.mjs',
       'shared/prebuild/i18n-only.mjs',
       'shared/prebuild/i18n.mjs',
-      'shared/prebuild/contributors.mjs',
       'shared/prebuild/index.mjs',
       'shared/prebuild/lab.mjs',
       'shared/prebuild/md-intro.mjs',
@@ -98,187 +98,140 @@ yarn-error.log*
       'shared/prebuild/patrons.mjs',
       'shared/prebuild/strapi.mjs',
       'shared/prebuild/og/index.mjs',
-      'shared/components/breadcrumbs.js',
-      'shared/components/code.js',
-      'shared/components/copy-to-clipboard.js',
-      'shared/components/docs-link.js',
-      'shared/components/json-highlight.js',
-      'shared/components/lightbox.js',
-      'shared/components/loader.js',
-      'shared/components/locale-picker.js',
-      'shared/components/modal.js',
-      'shared/components/page-link.js',
-      'shared/components/picker.js',
-      'shared/components/popout.js',
-      'shared/components/raw-span.js',
-      'shared/components/ribbon.js',
-      'shared/components/spinner.js',
-      'shared/components/theme-picker.js',
-      'shared/components/web-link.js',
-      'shared/components/wordmark.js',
-      'shared/components/worm.js',
-      'shared/components/yaml.js',
-      'shared/components/error/error-boundary.js',
-      'shared/components/error/reset-buttons.js',
-      'shared/components/error/view.js',
-      'shared/components/logos/cc-by.js',
-      'shared/components/logos/cc.js',
-      'shared/components/logos/freesewing.js',
-      'shared/components/logos/osi.js',
-      'shared/components/mdx/example.js',
-      'shared/components/mdx/examples.js',
-      'shared/components/mdx/figure.js',
-      'shared/components/mdx/highlight.js',
-      'shared/components/mdx/http-method.js',
-      'shared/components/mdx/index.js',
-      'shared/components/mdx/prev-next.js',
-      'shared/components/mdx/read-more.js',
-      'shared/components/mdx/status-code.js',
-      'shared/components/mdx/tabs.js',
-      'shared/components/mdx/youtube.js',
-      'shared/components/layouts/default.js',
-      'shared/components/navigation/aside.js',
-      'shared/components/navigation/primary.js',
-      'shared/components/icons/box.js',
-      'shared/components/icons/camera.js',
-      'shared/components/icons/clear.js',
-      'shared/components/icons/close.js',
-      'shared/components/icons/cog.js',
-      'shared/components/icons/community.js',
-      'shared/components/icons/copy.js',
-      'shared/components/icons/design.js',
-      'shared/components/icons/discord.js',
-      'shared/components/icons/docs.js',
-      'shared/components/icons/down.js',
-      'shared/components/icons/edit.js',
-      'shared/components/icons/export.js',
-      'shared/components/icons/facebook.js',
-      'shared/components/icons/filter.js',
+      'shared/components/breadcrumbs.mjs',
+      'shared/components/code.mjs',
+      'shared/components/copy-to-clipboard.mjs',
+      'shared/components/docs-link.mjs',
+      'shared/components/icons.mjs',
+      'shared/components/json.mjs',
+      'shared/components/lightbox.mjs',
+      'shared/components/loader.mjs',
+      'shared/components/modal.mjs',
+      'shared/components/page-link.mjs',
+      'shared/components/picker.mjs',
+      'shared/components/popout.mjs',
+      'shared/components/raw-span.mjs',
+      'shared/components/ribbon.mjs',
+      'shared/components/spinner.mjs',
+      'shared/components/web-link.mjs',
+      'shared/components/wordmark.mjs',
+      'shared/components/worm.mjs',
+      'shared/components/yaml.mjs',
+      'shared/components/error/error-boundary.mjs',
+      'shared/components/error/reset-buttons.mjs',
+      'shared/components/error/view.mjs',
       'shared/components/icons/flip.js',
-      'shared/components/icons/freesewing.js',
-      'shared/components/icons/github.js',
-      'shared/components/icons/guide.js',
-      'shared/components/icons/google.js',
-      'shared/components/icons/heart.js',
-      'shared/components/icons/home.js',
-      'shared/components/icons/help.js',
-      'shared/components/icons/i18n.js',
-      'shared/components/icons/instagram.js',
-      'shared/components/icons/left.js',
-      'shared/components/icons/menswear.js',
-      'shared/components/icons/menu.js',
-      'shared/components/icons/note.js',
-      'shared/components/icons/options.js',
-      'shared/components/icons/page-size.js',
-      'shared/components/icons/page.js',
-      'shared/components/icons/print.js',
-      'shared/components/icons/reddit.js',
-      'shared/components/icons/right.js',
       'shared/components/icons/rotate.js',
-      'shared/components/icons/rss.js',
-      'shared/components/icons/search.js',
-      'shared/components/icons/settings.js',
       'shared/components/icons/sheet.js',
-      'shared/components/icons/swipeleft.js',
-      'shared/components/icons/swiperight.js',
-      'shared/components/icons/theme.js',
-      'shared/components/icons/tip.js',
-      'shared/components/icons/tutorial.js',
-      'shared/components/icons/twitter.js',
-      'shared/components/icons/user.js',
-      'shared/components/icons/versions.js',
-      'shared/components/icons/womenswear.js',
-      'shared/components/icons/xray.js',
-      'shared/components/wrappers/img.js',
-      'shared/components/wrappers/mdx.js',
-      'shared/components/wrappers/page.js',
-      'shared/components/wrappers/toc.js',
-      'shared/components/wrappers/workbench.js',
-      'shared/components/robot/index.js',
-      'shared/components/robot/poses.js',
-      'shared/components/workbench/default-settings.js',
-      'shared/components/workbench/gist-as-json.js',
-      'shared/components/workbench/logs.js',
-      'shared/components/workbench/sample.js',
-      'shared/components/workbench/preload.js',
-      'shared/components/workbench/yaml.js',
-      'shared/components/workbench/exporting/export-handler.js',
+      'shared/components/locale-picker/index.mjs',
+      'shared/components/locale-picker/locales.de.yaml',
+      'shared/components/locale-picker/locales.en.yaml',
+      'shared/components/locale-picker/locales.es.yaml',
+      'shared/components/locale-picker/locales.fr.yaml',
+      'shared/components/locale-picker/locales.nl.yaml',
+      'shared/components/logos/cc-by.mjs',
+      'shared/components/logos/cc.mjs',
+      'shared/components/logos/freesewing.mjs',
+      'shared/components/logos/osi.mjs',
+      'shared/components/mdx/examples.mjs',
+      'shared/components/mdx/figure.mjs',
+      'shared/components/mdx/highlight.mjs',
+      'shared/components/mdx/http.mjs',
+      'shared/components/mdx/index.mjs',
+      'shared/components/mdx/prev-next.mjs',
+      'shared/components/mdx/read-more.mjs',
+      'shared/components/mdx/tabbed-example.mjs',
+      'shared/components/mdx/tabs.mjs',
+      'shared/components/mdx/youtube.mjs',
+      'shared/components/navigation/aside.mjs',
+      'shared/components/navigation/primary.mjs',
+      'shared/components/robot/index.mjs',
+      'shared/components/robot/poses.mjs',
+      'shared/components/theme-picker/index.mjs',
+      'shared/components/theme-picker/themes.de.yaml',
+      'shared/components/theme-picker/themes.en.yaml',
+      'shared/components/theme-picker/themes.es.yaml',
+      'shared/components/theme-picker/themes.fr.yaml',
+      'shared/components/theme-picker/themes.nl.yaml',
+      'shared/components/wrappers/img.mjs',
+      'shared/components/wrappers/mdx.mjs',
+      'shared/components/wrappers/page.mjs',
+      'shared/components/wrappers/toc.mjs',
+      'shared/components/wrappers/workbench.mjs',
+      'shared/components/workbench/gist.mjs',
+      'shared/components/workbench/logs.mjs',
+      'shared/components/workbench/preloaders.mjs',
+      'shared/components/workbench/sample.mjs',
+      'shared/components/workbench/exporting/export-handler.mjs',
       'shared/components/workbench/exporting/export-worker.js',
-      'shared/components/workbench/exporting/index.js',
-      'shared/components/workbench/exporting/pdf-maker.js',
-      'shared/components/workbench/inputs/design-option-count.js',
-      'shared/components/workbench/inputs/design-option-list.js',
-      'shared/components/workbench/inputs/design-option-pct-deg.js',
-      'shared/components/workbench/inputs/measurement.js',
-      'shared/components/workbench/measurements/index.js',
-      'shared/components/workbench/measurements/non-human.js',
-      'shared/components/workbench/layout/cut/index.js',
-      'shared/components/workbench/layout/cut/settings.js',
-      'shared/components/workbench/layout/print/index.js',
-      'shared/components/workbench/layout/print/orientation-picker.js',
-      'shared/components/workbench/layout/print/pagesize-picker.js',
-      'shared/components/workbench/layout/print/plugin.js',
-      'shared/components/workbench/layout/print/settings.js',
-      'shared/components/workbench/layout/draft/index.js',
-      'shared/components/workbench/layout/draft/stack.js',
-      'shared/components/workbench/layout/draft/buttons.js',
-      'shared/components/workbench/draft/error.js',
-      'shared/components/workbench/draft/index.js',
-      'shared/components/workbench/draft/stack.js',
-      'shared/components/workbench/draft/svg-wrapper.js',
-      'shared/components/workbench/draft/utils.js',
-      'shared/components/workbench/draft/circle/index.js',
-      'shared/components/workbench/draft/path/index.js',
-      'shared/components/workbench/draft/defs/index.js',
-      'shared/components/workbench/draft/part/index.js',
-      'shared/components/workbench/draft/snippet/index.js',
-      'shared/components/workbench/draft/point/index.js',
-      'shared/components/workbench/draft/text/index.js',
-      'shared/components/workbench/draft/svg/index.js',
-      'shared/components/workbench/draft/text-on-path/index.js',
-      'shared/components/workbench/layout/cut/index.js',
-      'shared/components/workbench/layout/cut/settings.js',
-      'shared/components/workbench/layout/draft/buttons.js',
-      'shared/components/workbench/layout/draft/index.js',
-      'shared/components/workbench/layout/draft/stack.js',
-      'shared/components/workbench/layout/print/index.js',
-      'shared/components/workbench/layout/print/orientation-picker.js',
-      'shared/components/workbench/layout/print/pagesize-picker.js',
-      'shared/components/workbench/layout/print/plugin.js',
-      'shared/components/workbench/layout/print/settings.js',
-      'shared/components/workbench/menu/index.js',
-      'shared/components/workbench/menu/view.js',
-      'shared/components/workbench/menu/core-settings/core-setting-bool.js',
-      'shared/components/workbench/menu/core-settings/core-setting-list.js',
-      'shared/components/workbench/menu/core-settings/core-setting-mm.js',
-      'shared/components/workbench/menu/core-settings/core-setting-nr.js',
-      'shared/components/workbench/menu/core-settings/core-setting-only.js',
-      'shared/components/workbench/menu/core-settings/core-setting-sa-mm.js',
-      'shared/components/workbench/menu/core-settings/index.js',
-      'shared/components/workbench/menu/core-settings/setting.js',
-      'shared/components/workbench/menu/core-settings/core-setting-sa-bool.js',
-      'shared/components/workbench/menu/design-options/option-group.js',
-      'shared/components/workbench/menu/design-options/index.js',
-      'shared/components/workbench/menu/design-options/option-value.js',
-      'shared/components/workbench/menu/design-options/option.js',
-      'shared/components/workbench/menu/design-options/option-input.js',
-      'shared/components/workbench/menu/xray/attributes.js',
-      'shared/components/workbench/menu/xray/disable.js',
-      'shared/components/workbench/menu/xray/index.js',
-      'shared/components/workbench/menu/xray/list.js',
-      'shared/components/workbench/menu/xray/log.js',
-      'shared/components/workbench/menu/xray/point.js',
-      'shared/components/workbench/menu/xray/reset.js',
-      'shared/components/workbench/menu/xray/path-ops.js',
-      'shared/components/workbench/menu/xray/path.js',
-      'shared/components/workbench/menu/test-design-options/option.js',
-      'shared/components/workbench/menu/test-design-options/index.js',
-      'lab/components/about.js',
-      'lab/components/design-picker.js',
-      'lab/components/wrappers/layout.js',
-      'lab/components/wrappers/page.js',
-      'lab/components/layouts/bare.js',
-      'lab/components/layouts/lab.js',
+      'shared/components/workbench/exporting/index.mjs',
+      'shared/components/workbench/exporting/pdf-maker.mjs',
+      'shared/components/workbench/inputs/design-option-count.mjs',
+      'shared/components/workbench/inputs/design-option-list.mjs',
+      'shared/components/workbench/inputs/design-option-pct-deg.mjs',
+      'shared/components/workbench/inputs/measurement.mjs',
+      'shared/components/workbench/measurements/index.mjs',
+      'shared/components/workbench/measurements/non-human.mjs',
+      'shared/components/workbench/draft/circle.mjs',
+      'shared/components/workbench/draft/defs.mjs',
+      'shared/components/workbench/draft/error.mjs',
+      'shared/components/workbench/draft/index.mjs',
+      'shared/components/workbench/draft/part.mjs',
+      'shared/components/workbench/draft/path.mjs',
+      'shared/components/workbench/draft/point.mjs',
+      'shared/components/workbench/draft/snippet.mjs',
+      'shared/components/workbench/draft/stack.mjs',
+      'shared/components/workbench/draft/svg.mjs',
+      'shared/components/workbench/draft/text.mjs',
+      'shared/components/workbench/draft/utils.mjs',
+      'shared/components/workbench/layout/default.mjs',
+      'shared/components/workbench/layout/cut/index.mjs',
+      'shared/components/workbench/layout/cut/settings.mjs',
+      'shared/components/workbench/layout/print/index.mjs',
+      'shared/components/workbench/layout/print/orientation-picker.mjs',
+      'shared/components/workbench/layout/print/pagesize-picker.mjs',
+      'shared/components/workbench/layout/print/plugin.mjs',
+      'shared/components/workbench/layout/print/settings.mjs',
+      'shared/components/workbench/layout/draft/buttons.mjs',
+      'shared/components/workbench/layout/draft/index.mjs',
+      'shared/components/workbench/layout/draft/stack.mjs',
+      'shared/components/workbench/menu/index.mjs',
+      'shared/components/workbench/menu/view.mjs',
+      'shared/components/workbench/menu/design-options/index.mjs',
+      'shared/components/workbench/menu/design-options/option-group.mjs',
+      'shared/components/workbench/menu/design-options/option-input.mjs',
+      'shared/components/workbench/menu/design-options/option-value.mjs',
+      'shared/components/workbench/menu/design-options/option.mjs',
+      'shared/components/workbench/menu/test-design-options/index.mjs',
+      'shared/components/workbench/menu/test-design-options/option.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-bool.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-list.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-mm.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-nr.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-only.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-sa-bool.mjs',
+      'shared/components/workbench/menu/core-settings/core-setting-sa-mm.mjs',
+      'shared/components/workbench/menu/core-settings/index.mjs',
+      'shared/components/workbench/menu/core-settings/setting.mjs',
+      'shared/components/workbench/menu/xray/attributes.mjs',
+      'shared/components/workbench/menu/xray/disable.mjs',
+      'shared/components/workbench/menu/xray/index.mjs',
+      'shared/components/workbench/menu/xray/list.mjs',
+      'shared/components/workbench/menu/xray/log.mjs',
+      'shared/components/workbench/menu/xray/path-ops.mjs',
+      'shared/components/workbench/menu/xray/path.mjs',
+      'shared/components/workbench/menu/xray/point.mjs',
+      'shared/components/workbench/menu/xray/reset.mjs',
+      'lab/components/about.mjs',
+      'lab/components/design-picker.mjs',
+      'lab/components/footer.mjs',
+      'lab/components/header.mjs',
+      'lab/components/help-us.mjs',
+      'lab/components/search.mjs',
+      'lab/components/layouts/bare.mjs',
+      'lab/components/layouts/lab.mjs',
+      'lab/components/wrappers/layout.mjs',
+      'lab/components/wrappers/page.mjs',
     ],
   },
 }
diff --git a/packages/new-design/shared/lab/components/footer.js b/packages/new-design/shared/lab/components/footer.mjs
similarity index 81%
rename from packages/new-design/shared/lab/components/footer.js
rename to packages/new-design/shared/lab/components/footer.mjs
index 46c02e48024..e28f71f9fcd 100644
--- a/packages/new-design/shared/lab/components/footer.js
+++ b/packages/new-design/shared/lab/components/footer.mjs
@@ -1,15 +1,17 @@
-import Logo from 'shared/components/logos/freesewing.js'
-import { useTranslation } from 'next-i18next'
-import Ribbon from 'shared/components/ribbon.js'
 import Link from 'next/link'
+import { FreeSewingLogo } from 'shared/components/logos/freesewing.mjs'
+import { useTranslation } from 'next-i18next'
+import { Ribbon } from 'shared/components/ribbon.mjs'
 import { WordMark } from 'shared/components/wordmark.js'
 
-import DiscordIcon from 'shared/components/icons/discord.js'
-import FacebookIcon from 'shared/components/icons/facebook.js'
-import GithubIcon from 'shared/components/icons/github.js'
-import InstagramIcon from 'shared/components/icons/instagram.js'
-import RedditIcon from 'shared/components/icons/reddit.js'
-import TwitterIcon from 'shared/components/icons/twitter.js'
+import {
+  DiscordIcon,
+  FacebookIcon,
+  GithubIcon,
+  InstagramIcon,
+  RedditIcon,
+  TwitterIcon,
+} from 'shared/components/icons.mjs'
 
 const icon = { className: 'w-8 lg:w-12 h-8 lg:h-12' }
 const social = {
@@ -39,7 +41,7 @@ const social = {
   },
 }
 
-const Footer = ({ app }) => {
+export const Footer = ({ app }) => {
   const { t } = useTranslation(['common', 'patrons'])
 
   return (
@@ -80,5 +82,3 @@ const Footer = ({ app }) => {
     </footer>
   )
 }
-
-export default Footer
diff --git a/packages/new-design/shared/lab/components/header.js b/packages/new-design/shared/lab/components/header.mjs
similarity index 85%
rename from packages/new-design/shared/lab/components/header.js
rename to packages/new-design/shared/lab/components/header.mjs
index 7a36a76438a..a6fcfd5d398 100644
--- a/packages/new-design/shared/lab/components/header.js
+++ b/packages/new-design/shared/lab/components/header.mjs
@@ -1,20 +1,17 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
-import ThemePicker from 'shared/components/theme-picker.js'
-import LocalePicker from 'shared/components/locale-picker.js'
-import CloseIcon from 'shared/components/icons/close.js'
-import MenuIcon from 'shared/components/icons/menu.js'
-import HelpIcon from 'shared/components/icons/help.js'
-import Ribbon from 'shared/components/ribbon.js'
+import { ThemePicker } from 'shared/components/theme-picker.js'
+import { LocalePicker } from 'shared/components/locale-picker.js'
+import { CloseIcon, MenuIcon, HelpIcon, DocsIcon } from 'shared/components/icons/close.js'
+import { Ribbon } from 'shared/components/ribbon.js'
 import { WordMark } from 'shared/components/wordmark.js'
-import DocsIcon from 'shared/components/icons/docs.js'
 import { useTranslation } from 'next-i18next'
 
 const btnClasses =
   'btn btn-ghost text-base font-medium btn-sm text-neutral-content ' +
   ' capitalize hover:bg-transparent hover:text-secondary-focus'
 
-const Header = ({ app }) => {
+export const Header = ({ app }) => {
   const { t } = useTranslation(['common'])
 
   const [prevScrollPos, setPrevScrollPos] = useState(0)
@@ -83,5 +80,3 @@ const Header = ({ app }) => {
     </header>
   )
 }
-
-export default Header
diff --git a/packages/new-design/shared/lab/components/layouts/bare.js b/packages/new-design/shared/lab/components/layouts/bare.js
deleted file mode 100644
index b21c698c6cc..00000000000
--- a/packages/new-design/shared/lab/components/layouts/bare.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useRouter } from 'next/router'
-import Aside from 'shared/components/navigation/aside'
-import { BeforeNav } from './lab'
-
-const DefaultLayout = ({ app, title=false, children=[] }) => {
-  const router = useRouter()
-  const slug = router.asPath.slice(1)
-
-  return (
-    <>
-      <Aside app={app} slug={slug} before={<BeforeNav app={app}/>} mobileOnly />
-      {children}
-    </>
-  )
-}
-
-export default DefaultLayout
diff --git a/packages/new-design/shared/lab/components/layouts/default.mjs b/packages/new-design/shared/lab/components/layouts/default.mjs
new file mode 100644
index 00000000000..9b8aa847da4
--- /dev/null
+++ b/packages/new-design/shared/lab/components/layouts/default.mjs
@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router'
+import { AsideNavigation } from 'shared/components/navigation/aside.mjs'
+import { BeforeNav } from './lab'
+
+export const DefaultLayout = ({ app, title = false, children = [] }) => {
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+
+  return (
+    <>
+      <AsideNavigation app={app} slug={slug} before={<BeforeNav app={app} />} mobileOnly />
+      {children}
+    </>
+  )
+}
diff --git a/packages/new-design/shared/lab/components/layouts/docs.js b/packages/new-design/shared/lab/components/layouts/docs.js
deleted file mode 100644
index ef923b1bb4b..00000000000
--- a/packages/new-design/shared/lab/components/layouts/docs.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import Aside from 'shared/components/navigation/aside'
-
-const DocsLayout = ({ app, title=false, children=[] }) => (
-  <div className="max-w-7xl m-auto mt-32">
-    {title && <h1 className="capitalize">{title}</h1>}
-    <Aside app={app} mobileOnly />
-    {children}
-  </div>
-)
-
-export default DocsLayout
diff --git a/packages/new-design/shared/lab/components/layouts/home.mjs b/packages/new-design/shared/lab/components/layouts/home.mjs
new file mode 100644
index 00000000000..7f7e1f3c6f2
--- /dev/null
+++ b/packages/new-design/shared/lab/components/layouts/home.mjs
@@ -0,0 +1,10 @@
+import React from 'react'
+import { AsideNavigation } from 'shared/components/navigation/aside.mjs'
+
+export const HomeLayout = ({ app, title = false, children = [] }) => (
+  <div className="max-w-7xl m-auto mt-32">
+    {title && <h1 className="capitalize">{title}</h1>}
+    <AsideNavigation app={app} mobileOnly />
+    {children}
+  </div>
+)
diff --git a/packages/new-design/shared/lab/components/layouts/lab.js b/packages/new-design/shared/lab/components/layouts/lab.mjs
similarity index 69%
rename from packages/new-design/shared/lab/components/layouts/lab.js
rename to packages/new-design/shared/lab/components/layouts/lab.mjs
index e269676042c..5c1a709259d 100644
--- a/packages/new-design/shared/lab/components/layouts/lab.js
+++ b/packages/new-design/shared/lab/components/layouts/lab.mjs
@@ -1,5 +1,5 @@
-import ThemePicker from 'shared/components/theme-picker.js'
-import LocalePicker from 'shared/components/locale-picker.js'
+import { ThemePicker } from 'shared/components/theme-picker.mjs'
+import { LocalePicker } from 'shared/components/locale-picker.mjs'
 
 export const BeforeNav = ({ app }) => (
   <>
@@ -7,17 +7,15 @@ export const BeforeNav = ({ app }) => (
       <ThemePicker app={app} />
       <LocalePicker app={app} />
     </div>
-    <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
-    </div>
+    <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2"></div>
   </>
 )
 
-const LabLayout = ({ app, AltMenu, children=[] }) => (
+export 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={`
+    <div className="w-full px-8">{children}</div>
+    <aside
+      className={`
       fixed top-0 right-0
       pt-20 pb-8 px-8
       md:pt-0
@@ -37,11 +35,10 @@ const LabLayout = ({ app, AltMenu, children=[] }) => (
       md:w-80
       lg:w-96
       shrink-0
-    `}>
-      <BeforeNav app={app}/>
+    `}
+    >
+      <BeforeNav app={app} />
       {AltMenu}
     </aside>
   </div>
 )
-
-export default LabLayout
diff --git a/packages/new-design/shared/lab/components/search.js b/packages/new-design/shared/lab/components/search.js
deleted file mode 100644
index e5b204c70b1..00000000000
--- a/packages/new-design/shared/lab/components/search.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// Noop placeholder
-const Noop = props => null
-
-export default Noop
diff --git a/packages/new-design/shared/lab/components/mdx/dot.js b/packages/new-design/shared/lab/components/search.mjs
similarity index 58%
rename from packages/new-design/shared/lab/components/mdx/dot.js
rename to packages/new-design/shared/lab/components/search.mjs
index 944782a8f28..f8bde194a71 100644
--- a/packages/new-design/shared/lab/components/mdx/dot.js
+++ b/packages/new-design/shared/lab/components/search.mjs
@@ -1,5 +1,4 @@
 // Noop placeholder
-const Noop = props => null
+const Noop = (props) => null
 
 export default Noop
-
diff --git a/packages/new-design/shared/lab/hooks/useApp.js b/packages/new-design/shared/lab/hooks/useApp.mjs
similarity index 88%
rename from packages/new-design/shared/lab/hooks/useApp.js
rename to packages/new-design/shared/lab/hooks/useApp.mjs
index 3576bb4f693..ebafb15152d 100644
--- a/packages/new-design/shared/lab/hooks/useApp.js
+++ b/packages/new-design/shared/lab/hooks/useApp.mjs
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 // Stores state in local storage
-import useLocalStorage from 'shared/hooks/useLocalStorage.js'
+import { useLocalStorage } from 'shared/hooks/useLocalStorage.mjs'
 // Locale and translation
 import { useRouter } from 'next/router'
-import useTheme from 'shared/hooks/useTheme'
+import { useTheme } from 'shared/hooks/useTheme.mjs'
 
-function useApp(full = true) {
+export const useApp = () => {
   // Load translation method
   const locale = useRouter().locale
 
diff --git a/packages/new-design/shared/pages/design.mjs b/packages/new-design/shared/pages/design.mjs
index efa2889a4f8..826042385cf 100644
--- a/packages/new-design/shared/pages/design.mjs
+++ b/packages/new-design/shared/pages/design.mjs
@@ -1,18 +1,17 @@
-import { Pattern } from 'design/src/index.mjs'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-
-import Page from 'site/components/wrappers/page.js'
-import useApp from 'site/hooks/useApp.js'
-import WorkbenchWrapper from 'shared/components/wrappers/workbench.js'
-import Layout from 'site/components/layouts/lab'
+import { Pattern } from 'design/src/index.mjs'
+import { useApp } from 'site/hooks/useApp.mjs'
+import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { LabLayout } from 'site/components/layouts/lab.mjs'
+import { WorkbenchWrapper } from 'shared/components/wrappers/workbench.mjs'
 
 const WorkbenchPage = (props) => {
   const app = useApp()
 
   return (
-    <Page app={app}>
-      <WorkbenchWrapper {...{ app, design: Pattern, layout: Layout }} />
-    </Page>
+    <PageWrapper app={app}>
+      <WorkbenchWrapper {...{ app, design: Pattern, layout: LabLayout }} />
+    </PageWrapper>
   )
 }
 
diff --git a/packages/new-design/shared/pages/index.mjs b/packages/new-design/shared/pages/index.mjs
index 5e535f830ee..2fab22f15ff 100644
--- a/packages/new-design/shared/pages/index.mjs
+++ b/packages/new-design/shared/pages/index.mjs
@@ -1,12 +1,12 @@
-import Page from 'site/components/wrappers/page.js'
-import useApp from 'site/hooks/useApp.js'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import Layout from 'site/components/layouts/docs'
 import { useTranslation } from 'next-i18next'
-import FsIcon from 'shared/components/icons/freesewing'
-import Link from 'next/link'
-import Popout from 'shared/components/popout'
 import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { useApp } from 'site/hooks/useApp.mjs'
+import { HomeLayout } from 'site/components/layouts/home.mjs'
+import { FreeSewingIcon } from 'shared/components/icons.mjs'
+import { Popout } from 'shared/components/popout.mjs'
 import themes from 'shared/themes/index.js'
 
 const translations = {
@@ -39,9 +39,9 @@ const HomePage = () => {
   const { t } = useTranslation(['common', 'patrons', 'locales', 'themes'])
 
   return (
-    <Page app={app} title={false} layout={Layout}>
+    <PageWrapper app={app} title={false} layout={HomeLayout}>
       <div className="text-center w-full pt-20 pb-10 max-w-4xl m-auto">
-        <FsIcon className="w-96 m-auto" />
+        <FreeSewingIcon className="w-96 m-auto" />
         <h1>FreeSewing</h1>
         <h4>{translations.sade[app.locale]}</h4>
         <Link href="/design" className="btn btn-primary btn-lg h-20 my-8 mb-12">
@@ -101,7 +101,7 @@ const HomePage = () => {
       </div>
       {/* here to force Tailwind inclusion of the w-8 h-8 classes */}
       <span className="w-8 h-8" />
-    </Page>
+    </PageWrapper>
   )
 }
 
diff --git a/packages/new-design/shared/pages/support.mjs b/packages/new-design/shared/pages/support.mjs
index 778a174c09a..c7b540484f1 100644
--- a/packages/new-design/shared/pages/support.mjs
+++ b/packages/new-design/shared/pages/support.mjs
@@ -1,13 +1,9 @@
-import Page from 'site/components/wrappers/page.js'
-import useApp from 'site/hooks/useApp.js'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import Layout from 'site/components/layouts/docs'
 import { useTranslation } from 'next-i18next'
-import DiscordIcon from 'shared/components/icons/discord'
-import GithubIcon from 'shared/components/icons/github'
-import CcIcon from 'shared/components/icons/community'
-import HeartIcon from 'shared/components/icons/heart'
-import DocsIcon from 'shared/components/icons/docs'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { PageWrapper } from 'site/components/wrappers/page.mjs'
+import { useApp } from 'site/hooks/useApp.mjs'
+import { DefaultLayout } from 'site/components/layouts/default.mjs'
+import { DiscordIcon, GithubIcon, CcIcon, HeartIcon, DocsIcon } from 'shared/components/icons/docs'
 
 const gh = `<a class="text-secondary hover:text-secondary-focus"
 href="https://github.com/freesewing/freesewing">freesewing/freesewing</a>`
@@ -51,7 +47,7 @@ const SupportPage = (props) => {
   const app = useApp()
   const { t } = useTranslation(['common', 'patrons'])
   return (
-    <Page app={app} title={t('support')} layout={Layout}>
+    <PageWrapper app={app} title={t('support')} layout={DefaultLayout}>
       <h2 className="border-0">Discord</h2>
       <div className="flex flex-row flex-wrap gap-2">
         <p className="max-w-3xl">{translations.discord[app.locale]}</p>
@@ -116,7 +112,7 @@ const SupportPage = (props) => {
           </a>
         </div>
       </div>
-    </Page>
+    </PageWrapper>
   )
 }
 
diff --git a/sites/org/pages/signup/index.mjs b/sites/org/pages/signup/index.mjs
index 414a17f447d..7feb750ae20 100644
--- a/sites/org/pages/signup/index.mjs
+++ b/sites/org/pages/signup/index.mjs
@@ -5,7 +5,7 @@ import { useBackend } from 'site/hooks/useBackend.mjs'
 import { useTranslation } from 'next-i18next'
 // Dependencies
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { validateEmail, validateTld } from 'shared/utils.mjs'
+import { validateEmail, validateTld } from 'site/utils.mjs'
 // Components
 import Link from 'next/link'
 import { PageWrapper } from 'site/components/wrappers/page.mjs'
diff --git a/sites/org/utils.mjs b/sites/org/utils.mjs
new file mode 100644
index 00000000000..1ed43a00924
--- /dev/null
+++ b/sites/org/utils.mjs
@@ -0,0 +1,17 @@
+import tlds from 'tlds/index.json' assert { type: 'json' }
+
+/** Validates an email address for correct syntax */
+export const validateEmail = (email) => {
+  /* eslint-disable */
+  const re =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  /* eslint-enable */
+  return re.test(email)
+}
+
+/** Validates the top level domain (TLT) for an email address */
+export const validateTld = (email) => {
+  const tld = email.split('@').pop().split('.').pop().toLowerCase()
+  if (tlds.indexOf(tld) === -1) return tld
+  else return true
+}
diff --git a/sites/shared/hooks/useTheme.mjs b/sites/shared/hooks/useTheme.mjs
index 8aa6dbc08dc..b299d2296f9 100644
--- a/sites/shared/hooks/useTheme.mjs
+++ b/sites/shared/hooks/useTheme.mjs
@@ -1,7 +1,7 @@
-import { useLocalStorage } from 'shared/hooks/useLocalStorage'
 import { useEffect } from 'react'
+import { useLocalStorage } from 'shared/hooks/useLocalStorage.mjs'
 
-export function useTheme() {
+export const useTheme = () => {
   // make a local storage item for the theme
   const [storedTheme, setStoredTheme, ready] = useLocalStorage('theme', undefined)
 
diff --git a/sites/shared/themes/index.js b/sites/shared/themes/index.js
index 29b12d4668a..ef52b0f690f 100644
--- a/sites/shared/themes/index.js
+++ b/sites/shared/themes/index.js
@@ -1,3 +1,4 @@
+// This is CJS because Tailwind does not (yet) support ESM
 const light = require('./light')
 const dark = require('./dark')
 const hax0r = require('./hax0r')
diff --git a/sites/shared/utils.mjs b/sites/shared/utils.mjs
index 2b6e28b1a93..7773c5f9a18 100644
--- a/sites/shared/utils.mjs
+++ b/sites/shared/utils.mjs
@@ -1,7 +1,6 @@
 import get from 'lodash.get'
 import set from 'lodash.set'
 import orderBy from 'lodash.orderby'
-import tlds from 'tlds/index.json' assert { type: 'json' }
 
 // Generic rounding method
 export const round = (val, decimals = 1) =>
@@ -189,19 +188,3 @@ export const optionsMenuStructure = (options) => {
 
   return menu
 }
-
-/** Validates an email address for correct syntax */
-export const validateEmail = (email) => {
-  /* eslint-disable */
-  const re =
-    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-  /* eslint-enable */
-  return re.test(email)
-}
-
-/** Validates the top level domain (TLT) for an email address */
-export const validateTld = (email) => {
-  const tld = email.split('@').pop().split('.').pop().toLowerCase()
-  if (tlds.indexOf(tld) === -1) return tld
-  else return true
-}