diff --git a/packages/freesewing.lab/components/pattern-picker.js b/packages/freesewing.lab/components/pattern-picker.js
index 4b57f83d590..b006d577f5f 100644
--- a/packages/freesewing.lab/components/pattern-picker.js
+++ b/packages/freesewing.lab/components/pattern-picker.js
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 
 const PatternPicker = ({ app }) => {
-  const { t } = useTranslation(['app'])
+  const { t } = useTranslation(['common'])
 
   return (
       <div className="dropdown">
diff --git a/packages/freesewing.lab/next-i18next.config.js b/packages/freesewing.lab/next-i18next.config.js
index 851617a3f9a..ab2c71ab36b 100644
--- a/packages/freesewing.lab/next-i18next.config.js
+++ b/packages/freesewing.lab/next-i18next.config.js
@@ -3,7 +3,7 @@ module.exports = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de', 'es', 'fr', 'nl'],
-    defaultNS: 'app',
+    defaultNS: 'common',
   },
   interpolation: {
     prefix: '{',
diff --git a/packages/freesewing.shared/components/theme-picker.js b/packages/freesewing.shared/components/theme-picker.js
index 55fc35961a9..5e8424b391d 100644
--- a/packages/freesewing.shared/components/theme-picker.js
+++ b/packages/freesewing.shared/components/theme-picker.js
@@ -3,7 +3,7 @@ import ThemeIcon from 'shared/components/icons/theme.js'
 import { useTranslation } from 'next-i18next'
 
 const ThemePicker = ({ app, className }) => {
-  const { t } = useTranslation(['app'])
+  const { t } = useTranslation(['themes'])
 
   return (
       <div className={`dropdown ${className}`}>
diff --git a/packages/freesewing.shared/components/workbench/events.js b/packages/freesewing.shared/components/workbench/events.js
index baaa34f926a..09a48e9c621 100644
--- a/packages/freesewing.shared/components/workbench/events.js
+++ b/packages/freesewing.shared/components/workbench/events.js
@@ -17,27 +17,28 @@ const order = [
   'info',
   'debug'
 ]
-const Events = props => (
-  <div className="max-w-screen-xl m-auto">
-    <div className="flex flex-col">
-      <ul className="flex flex-row row-wrap">
-        {order.map(type => (props.draft.events[type].length > 0)
-          ? (
-            <li key={type} className="">
-              <a href={`#events-${type}`} className={`text-secondary font-bold capitalize text-xl`}>{type}</a>
-              {type === 'debug' ? '' : <span className="px-2 font-bold">|</span>}
-            </li>
-          ) : (
-            <li key={type} className="text-base-content font-bold capitalize text-xl">
-              <span className="opacity-50">{type}</span>
-              {type === 'debug' ? '' : <span className="px-2 font-bold">|</span>}
-            </li>
-          )
-        )}
-      </ul>
-      {order.map(type => <EventGroup type={type} events={props.draft.events[type]} />)}
+const Events = props => props?.draft?.events
+  ? (
+    <div className="max-w-screen-xl m-auto">
+      <div className="flex flex-col">
+        <ul className="flex flex-row row-wrap">
+          {order.map(type => (props.draft.events[type].length > 0)
+            ? (
+              <li key={type} className="">
+                <a href={`#events-${type}`} className={`text-secondary font-bold capitalize text-xl`}>{type}</a>
+                {type === 'debug' ? '' : <span className="px-2 font-bold">|</span>}
+              </li>
+            ) : (
+              <li key={type} className="text-base-content font-bold capitalize text-xl">
+                <span className="opacity-50">{type}</span>
+                {type === 'debug' ? '' : <span className="px-2 font-bold">|</span>}
+              </li>
+            )
+          )}
+        </ul>
+        {order.map(type => <EventGroup type={type} events={props.draft.events[type]} />)}
+      </div>
     </div>
-  </div>
-)
+  ) : null
 
 export default Events
diff --git a/packages/freesewing.shared/components/workbench/menu/test-design-options/index.js b/packages/freesewing.shared/components/workbench/menu/test-design-options/index.js
index ee7a13ebb04..86c6cc931f6 100644
--- a/packages/freesewing.shared/components/workbench/menu/test-design-options/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/test-design-options/index.js
@@ -5,7 +5,7 @@ import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbenc
 import { useTranslation } from 'next-i18next'
 
 const DesignOptions = props => {
-  const { t } = useTranslation(['app'])
+  const { t } = useTranslation(['workbench'])
 
   return (
     <Details open>
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 3349fb9053a..1403746ba05 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
@@ -1,129 +1,66 @@
-import { Chevron } from 'shared/components/navigation/primary.js'
-import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
-import CountOption from 'shared/components/workbench/inputs/design-option-count'
-import ListOption from 'shared/components/workbench/inputs/design-option-list'
-import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
-import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { linkClasses } from 'shared/components/navigation/primary.js'
+import { Li, Ul, Details, Summary, Deg } from 'shared/components/workbench/menu'
 import { useTranslation } from 'next-i18next'
 
-const values = {
-  pct: props => {
-    const val = (typeof props.gist?.options?.[props.option] === 'undefined')
-      ? props.pattern.config.options[props.option].pct/100
-      : props.gist.options[props.option]
-    return (
-      <span className={
-        val=== props.pattern.config.options[props.option].pct/100
-          ? 'text-secondary-focus'
-          : 'text-accent'
-      }>
-        {formatPercentage(val)}
-        {props.pattern.config.options[props.option]?.toAbs
-          ? ' | ' +formatMm(props.pattern.config.options[props.option]?.toAbs(val, props.gist))
-          : null
-        }
-      </span>
-    )
-  },
-  bool: props => {
-    const { t } = useTranslation(['app'])
-    const dflt = props.pattern.config.options[props.option].bool
-    const current = props.gist?.options?.[props.option]
-    return (
-      <span className={
-        (dflt==current || typeof current === 'undefined')
-          ? 'text-secondary-focus'
-          : 'text-accent'
-      }>
-        {props.gist?.options?.[props.option]
-          ? t('yes')
-          : t('no')
-        }
-      </span>
-    )
-  },
-  count: props => {
-    const dflt = props.pattern.config.options[props.option].count
-    const current = props.gist?.options?.[props.option]
-    return (dflt==current || typeof current === 'undefined')
-      ? <span className="text-secondary-focus">{dflt}</span>
-      : <span className="text-accent">{current}</span>
-  },
-  list: props => {
-    const dflt = props.pattern.config.options[props.option].dflt
-    const current = props.gist?.options?.[props.option]
-    const prefix = `${props.option}.o.`
-    return (dflt==current || typeof current === 'undefined')
-      ? <span className="text-secondary-focus">{props.t(prefix+dflt)}</span>
-      : <span className="text-accent">{props.t(prefix+current)}</span>
-  },
-  deg: props => {
-    const dflt = props.pattern.config.options[props.option].deg
-    const current = props.gist?.options?.[props.option]
-    return (dflt==current || typeof current === 'undefined')
-      ? <span className="text-secondary-focus">{dflt}&deg;</span>
-      : <span className="text-accent">{current}&deg;</span>
-  },
-  mm: props => {
-    return <p>No mm val yet</p>
-  },
-  constant: props => {
-    return <p>No constant val yet</p>
-  },
-}
-
-const Tmp = props => <p>not yet</p>
-
-const inputs = {
-  pct: PctDegOption,
-  count: CountOption,
-  deg: props => <PctDegOption {...props} type='deg' />,
-  list: ListOption,
-  mm: <p>Mm options are not supported. Please report this.</p>,
-  constant: Tmp,
-}
+const SumButton = props => (
+  <button className={`
+    flex flex-row
+    px-2
+    w-full justify-between
+    text-left
+    text-base-content
+    sm:text-neutral-content
+    hover:cursor-pointer
+    items-center
+    mr-4
+  `} onClick={props.onClick}>{props.children}</button>
+)
+const SumDiv = (props) => (
+  <div className={`
+    grow pl-2 border-l-2
+    ${linkClasses}
+    hover:cursor-resize
+    hover:border-secondary
+    sm:hover:border-secondary-focus
+    text-base-content sm:text-neutral-content
+    ${props.active && 'border-secondary-focus'}
 
+  `}>{props.children}</div>
+)
 
 const Option = props => {
-  const { t } = useTranslation([`o_${props.pattern.config.name}`])
-  const type = optionType(props.pattern.config.options[props.option])
-  const Input = inputs[type]
-  const Value = values[type]
+  const { t } = useTranslation([`o_${props.pattern.config.name}`, 'workbench'])
+  const active = (
+    props.gist.sample?.type === 'option' &&
+    props.gist.sample?.option === props.option
+  )
 
-  const toggleBoolean = () => {
-    const dflt = props.pattern.config.options[props.option].bool
-    const current = props.gist?.options?.[props.option]
-    if (typeof current === 'undefined')
-      props.updateGist(['options', props.option], !dflt)
-    else props.unsetGist(['options', props.option])
-  }
-
-  return (type === 'bool')
-    ? (
-      <Li>
-        <SumButton onClick={toggleBoolean}>
-          <SumDiv>
-            <Deg />
-            <span>{t(`${props.option}.t`) }</span>
-          </SumDiv>
-          <Value type={type} {...props} t={t} />
-        </SumButton>
-      </Li>
-    ) : (
-      <Li>
-        <Details>
-          <Summary>
-            <SumDiv>
-              <Deg />
-              <span>{t(`${props.option}.t`)}</span>
-            </SumDiv>
-            <Value type={type} {...props} t={t} />
-            <Chevron w={6} m={3}/>
-          </Summary>
-          <Input {...props} ot={t} />
-        </Details>
-      </Li>
-    )
+  return (
+    <Li>
+      <SumButton onClick={() => props.updateGist(
+        ['sample'],
+        {
+          type: 'option',
+          option: props.option
+        }
+      )}>
+        <SumDiv active={active}>
+          <span className={`
+            text-3xl inline-block p-0 leading-3 px-2
+            ${active
+              ? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
+              : 'translate-y-3'
+            }`}
+          >
+            {active ? <span>&bull;</span> : <span>&deg;</span>}
+          </span>
+          <span className={active ? 'text-secondary font-bold' : ''}>
+            {t(`o_${props.pattern.config.name}:${props.option}.t`)}
+          </span>
+        </SumDiv>
+      </SumButton>
+    </Li>
+  )
 }
 
 export default Option
diff --git a/packages/freesewing.shared/components/workbench/menu/view.js b/packages/freesewing.shared/components/workbench/menu/view.js
index 91fc21fa12e..fe141067bd8 100644
--- a/packages/freesewing.shared/components/workbench/menu/view.js
+++ b/packages/freesewing.shared/components/workbench/menu/view.js
@@ -77,7 +77,7 @@ const View = props => {
               <span className={`
                 text-3xl mr-2 inline-block p-0 leading-3
                 ${entry.name === props.gist?._state?.view
-                  ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                  ? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
                   : 'translate-y-3'
                 }
               `}>
diff --git a/packages/freesewing.shared/components/workbench/sample.js b/packages/freesewing.shared/components/workbench/sample.js
new file mode 100644
index 00000000000..0f74f45a602
--- /dev/null
+++ b/packages/freesewing.shared/components/workbench/sample.js
@@ -0,0 +1,37 @@
+import svgattrPlugin from '@freesewing/plugin-svgattr'
+import { useTranslation } from 'next-i18next'
+
+const LabSample = ({ gist, draft }) => {
+  const { t } = useTranslation(['workbench'])
+  let svg
+  let title = ''
+  if (gist.sample) {
+    try {
+      draft.use(svgattrPlugin, {
+        class: 'freesewing'
+      })
+      draft.sample()
+      svg = draft.render()
+    }
+    catch(err) {
+      console.log(err)
+    }
+    if (gist.sample.type === 'option') {
+      title = t('testThing', {
+        thing: ' : ' + t('option') + ' : ' + gist.sample.option
+      })
+    }
+  }
+
+  return (
+    <>
+      <h2>{title}</h2>
+      <div
+        className="freesewing pattern"
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    </>
+  )
+}
+
+export default LabSample
diff --git a/packages/freesewing.shared/components/wrappers/workbench.js b/packages/freesewing.shared/components/wrappers/workbench.js
index a7506501a13..167d02d9a11 100644
--- a/packages/freesewing.shared/components/wrappers/workbench.js
+++ b/packages/freesewing.shared/components/wrappers/workbench.js
@@ -11,6 +11,7 @@ import theme from 'pkgs/plugin-theme/src/index.js'
 // Views
 import Measurements from 'shared/components/workbench/measurements/index.js'
 import LabDraft from 'shared/components/workbench/draft/index.js'
+import LabSample from 'shared/components/workbench/sample.js'
 import GistAsJson from 'shared/components/workbench/json.js'
 import GistAsYaml from 'shared/components/workbench/yaml.js'
 import DraftEvents from 'shared/components/workbench/events.js'
@@ -18,7 +19,7 @@ import DraftEvents from 'shared/components/workbench/events.js'
 const views = {
   measurements: Measurements,
   draft: LabDraft,
-  test: () => <p>TODO</p>,
+  test: LabSample,
   export: () => <p>TODO</p>,
   events: DraftEvents,
   yaml: GistAsYaml,
@@ -79,10 +80,12 @@ const WorkbenchWrapper = ({ app, pattern }) => {
 
   // Generate the draft here so we can pass it down
   let draft = false
-  if (['draft', 'events'].indexOf(gist?._state?.view) !== -1) {
+  if (['draft', 'events', 'test'].indexOf(gist?._state?.view) !== -1) {
     draft = new pattern(gist)
     if (gist?.renderer === 'svg') draft.use(theme)
-    try { draft.draft() }
+    try {
+      if (gist._state.view !== 'test') draft.draft()
+    }
     catch(error) {
       console.log('Failed to draft pattern', error)
       return <DraftError error={error} app={app} draft={draft} at={'draft'} />