diff --git a/packages/freesewing.shared/components/workbench/index.js b/packages/freesewing.shared/components/workbench/index.js
deleted file mode 100644
index 3b0045b162e..00000000000
--- a/packages/freesewing.shared/components/workbench/index.js
+++ /dev/null
@@ -1,192 +0,0 @@
-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'
-
-// Don't show children for blog and showcase posts
-const keepClosed = ['blog', 'showcase', ]
-
-// TODO: For now we force tailwind to pickup these styles
-// At some point this should 'just work' though, but let's not worry about it now
-const force = [
-  <p className="w-6 mr-2"/>,
-  <p className="w-8 mr-3"/>
-]
-
-// List of icons matched to top-level slug
-const icons = {
-  blog: <RssIcon />,
-  tutorials: <TutorialIcon />,
-  guides: <GuideIcon />,
-  howtos: <HelpIcon />,
-  reference: <DocsIcon />
-}
-
-/* helper method to order nav entries */
-const order = obj => orderBy(obj, ['__order', '__title'], ['asc', 'asc'])
-
-// Component for the collapse toggle
-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
-  `}
-  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"/>
-</svg>
-
-// Helper method to filter out the real children
-const currentChildren = current => Object.values(order(current))
-  .filter(entry => (typeof entry === 'object'))
-
-// Shared classes for links
-const linkClasses = `text-lg lg:text-xl
-  py-1 hover:cursor-pointer
-  text-base-content sm:text-neutral-content
-  hover:text-secondary
-  sm:hover:text-secondary-focus
-`
-
-// Figure out whether a page is on the path to the active page
-const isActive = (slug, active) => {
-  if (slug === active) return true
-  let result = true
-  const slugParts = slug.split('/')
-  const activeParts = active.split('/')
-  for (const i in slugParts) {
-    if (slugParts[i] !== activeParts[i]) result = false
-  }
-
-  return result
-}
-
-// Component that renders a sublevel of navigation
-const SubLevel = ({ nodes={}, active }) => (
-  <ul className="pl-5 list-inside">
-    {currentChildren(nodes).map(child => (Object.keys(child).length > 4)
-      ? (
-        <li key={child.__slug} className="flex flex-row">
-          <details className="grow" open={isActive(child.__slug, active)}>
-            <summary className={`
-              flex flex-row
-              px-2
-              text-base-content
-              sm:text-neutral-content
-              hover:cursor-row-resize
-              items-center
-            `}>
-              <Link href={`/${child.__slug}`}>
-                <a title={child.__title} className={`
-                  grow pl-2 border-l-2
-                  ${linkClasses}
-                  hover:border-secondary
-                  sm:hover:border-secondary-focus
-                  ${child.__slug === active
-                    ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
-                    : 'text-base-content sm:text-neutral-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'
-                      : 'translate-y-3'
-                    }
-                  `}>
-                    {child.__slug === active ? <>&bull;</> : <>&deg;</>}
-                  </span>
-                  <span className={child.__slug === active ? 'font-bold' : ''}>
-                    { child.__linktitle || child.__title }
-                  </span>
-                </a>
-              </Link>
-              <Chevron w={6} m={3}/>
-            </summary>
-            <SubLevel nodes={child} active={active} />
-          </details>
-        </li>
-      ) : (
-        <li className='pl-2 flex flex-row items-center' key={child.__slug}>
-          <Link href={`/${child.__slug}`} title={child.__title}>
-            <a className={`
-              pl-2 border-l-2
-              grow
-              ${linkClasses}
-              hover:border-secondary
-              sm:hover:border-secondary-focus
-              ${child.__slug === active
-                ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
-                : 'text-base-content sm:text-neutral-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'
-                  : 'translate-y-3'
-                }
-              `}>
-               {child.__slug === active ? <>&bull;</> : <>&deg;</>}
-              </span>
-              <span className={child.__slug === active ? 'font-bold' : ''}>
-                {child.__linktitle}
-              </span>
-            </a>
-          </Link>
-        </li>
-      )
-
-    )}
-  </ul>
-)
-
-// Component that renders a toplevel of navigation
-const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }) => (
-  <details className='py-1' open={((keepClosed.indexOf(current.__slug) === -1) ? 1 : 0)}>
-    <summary className={`
-      flex flex-row uppercase gap-4 font-bold text-lg
-      hover:cursor-row-resize
-      p-2
-      text-base-content
-      sm:text-neutral-content
-      items-center
-    `}>
-      <span className="text-secondary-focus">{icon}</span>
-      <Link href={`/${slug}`}>
-        <a className={`grow ${linkClasses} ${slug === active ? 'text-secondary sm:text-secondary-focus' : ''}`}>
-          {title}
-        </a>
-      </Link>
-    {hasChildren && <Chevron />}
-    </summary>
-    {hasChildren && <SubLevel nodes={current} active={active} />}
-  </details>
-)
-
-const Navigation = ({ app, active }) => {
-  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>}
-    title={page.__title}
-    slug={page.__slug}
-    hasChildren={keepClosed.indexOf(page.__slug) === -1}
-    nav={app.navigation}
-    current={order(app.navigation[page.__slug])}
-    active={active}
-  />)
-
-  return <div className='pb-20'>{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} />
-  </nav>
-)
-
-export default PrimaryMenu
diff --git a/packages/freesewing.shared/components/workbench/measurements.js b/packages/freesewing.shared/components/workbench/measurements/index.js
similarity index 97%
rename from packages/freesewing.shared/components/workbench/measurements.js
rename to packages/freesewing.shared/components/workbench/measurements/index.js
index bd21f9e9b9c..2ef2bec50fa 100644
--- a/packages/freesewing.shared/components/workbench/measurements.js
+++ b/packages/freesewing.shared/components/workbench/measurements/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import MeasurementInput from './input-measurement.js'
+import MeasurementInput from './input.js'
 import { withBreasts, withoutBreasts } from 'pkgs/models/src/index.js'
-import nonHuman from './non-human-measurements.js'
+import nonHuman from './non-human.js'
 import WithBreastsIcon from 'shared/components/icons/with-breasts.js'
 import WithoutBreastsIcon from 'shared/components/icons/without-breasts.js'
 
diff --git a/packages/freesewing.shared/components/workbench/input-measurement.js b/packages/freesewing.shared/components/workbench/measurements/input.js
similarity index 100%
rename from packages/freesewing.shared/components/workbench/input-measurement.js
rename to packages/freesewing.shared/components/workbench/measurements/input.js
diff --git a/packages/freesewing.shared/components/workbench/non-human-measurements.js b/packages/freesewing.shared/components/workbench/measurements/non-human.js
similarity index 100%
rename from packages/freesewing.shared/components/workbench/non-human-measurements.js
rename to packages/freesewing.shared/components/workbench/measurements/non-human.js
diff --git a/packages/freesewing.shared/components/wrappers/workbench.js b/packages/freesewing.shared/components/wrappers/workbench.js
index 998330dc059..7ca841e658e 100644
--- a/packages/freesewing.shared/components/wrappers/workbench.js
+++ b/packages/freesewing.shared/components/wrappers/workbench.js
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
 import Layout from 'shared/components/layouts/default'
 import Menu from 'shared/components/workbench/menu.js'
-import Measurements, { Input } from 'shared/components/workbench/measurements.js'
+import Measurements, { Input } from 'shared/components/workbench/measurements/index.js'
+import LabDraft from 'shared/components/workbench/draft/index.js'
 import set from 'lodash.set'
 
 // Generates a default pattern gist to start from
@@ -78,6 +79,14 @@ const WorkbenchWrapper = ({ app, pattern }) => {
           updateGist={updateGist}
         />
       )}
+      {mode === 'draft' && (
+        <LabDraft
+          app={app}
+          pattern={pattern}
+          gist={gist}
+          updateGist={updateGist}
+        />
+      )}
       <pre>{JSON.stringify(mode, null, 2)}</pre>
       <pre>{JSON.stringify(gist, null, 2)}</pre>
     </Layout>