diff --git a/packages/freesewing.lab/pages/accessories/florence.js b/packages/freesewing.lab/pages/accessories/florence.js
new file mode 100644
index 00000000000..40cbaac6491
--- /dev/null
+++ b/packages/freesewing.lab/pages/accessories/florence.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/florence/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/accessories/florent.js b/packages/freesewing.lab/pages/accessories/florent.js
new file mode 100644
index 00000000000..ea5c29a7798
--- /dev/null
+++ b/packages/freesewing.lab/pages/accessories/florent.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/florent/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/accessories/holmes.js b/packages/freesewing.lab/pages/accessories/holmes.js
new file mode 100644
index 00000000000..d139ab86bfe
--- /dev/null
+++ b/packages/freesewing.lab/pages/accessories/holmes.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/holmes/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/accessories/hortensia.js b/packages/freesewing.lab/pages/accessories/hortensia.js
new file mode 100644
index 00000000000..b8328591b74
--- /dev/null
+++ b/packages/freesewing.lab/pages/accessories/hortensia.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/hortensia/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/accessories/trayvon.js b/packages/freesewing.lab/pages/accessories/trayvon.js
new file mode 100644
index 00000000000..bc70a2d4a2d
--- /dev/null
+++ b/packages/freesewing.lab/pages/accessories/trayvon.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/trayvon/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/blocks/bella.js b/packages/freesewing.lab/pages/blocks/bella.js
new file mode 100644
index 00000000000..3d008eb6422
--- /dev/null
+++ b/packages/freesewing.lab/pages/blocks/bella.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/bella/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/blocks/bent.js b/packages/freesewing.lab/pages/blocks/bent.js
new file mode 100644
index 00000000000..409276b4f39
--- /dev/null
+++ b/packages/freesewing.lab/pages/blocks/bent.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/bent/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/blocks/titan.js b/packages/freesewing.lab/pages/blocks/titan.js
new file mode 100644
index 00000000000..a576cd56e93
--- /dev/null
+++ b/packages/freesewing.lab/pages/blocks/titan.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/titan/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/albert.js b/packages/freesewing.lab/pages/garments/albert.js
new file mode 100644
index 00000000000..147545139b6
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/albert.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/albert/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/bee.js b/packages/freesewing.lab/pages/garments/bee.js
new file mode 100644
index 00000000000..ac901596665
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/bee.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/bee/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/benjamin.js b/packages/freesewing.lab/pages/garments/benjamin.js
new file mode 100644
index 00000000000..cec2b494470
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/benjamin.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/benjamin/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/breanna.js b/packages/freesewing.lab/pages/garments/breanna.js
new file mode 100644
index 00000000000..2b7305183ae
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/breanna.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/breanna/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/bruce.js b/packages/freesewing.lab/pages/garments/bruce.js
new file mode 100644
index 00000000000..5f3b2f1a1fb
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/bruce.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/bruce/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/carlita.js b/packages/freesewing.lab/pages/garments/carlita.js
new file mode 100644
index 00000000000..8f92d0585b2
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/carlita.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/carlita/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/carlton.js b/packages/freesewing.lab/pages/garments/carlton.js
new file mode 100644
index 00000000000..5f49adbba4d
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/carlton.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/carlton/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/cathrin.js b/packages/freesewing.lab/pages/garments/cathrin.js
new file mode 100644
index 00000000000..312faec4e2c
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/cathrin.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/cathrin/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/charlie.js b/packages/freesewing.lab/pages/garments/charlie.js
new file mode 100644
index 00000000000..6485cbb6948
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/charlie.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/charlie/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/cornelius.js b/packages/freesewing.lab/pages/garments/cornelius.js
new file mode 100644
index 00000000000..c6380fc7154
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/cornelius.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/cornelius/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/diana.js b/packages/freesewing.lab/pages/garments/diana.js
new file mode 100644
index 00000000000..6955ca2aa90
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/diana.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/diana/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/huey.js b/packages/freesewing.lab/pages/garments/huey.js
new file mode 100644
index 00000000000..93e3c509c1f
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/huey.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/huey/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/hugo.js b/packages/freesewing.lab/pages/garments/hugo.js
new file mode 100644
index 00000000000..422344d6daf
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/hugo.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/hugo/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/jaeger.js b/packages/freesewing.lab/pages/garments/jaeger.js
new file mode 100644
index 00000000000..c6040c72213
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/jaeger.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/jaeger/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/lunetius.js b/packages/freesewing.lab/pages/garments/lunetius.js
new file mode 100644
index 00000000000..933a147f47f
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/lunetius.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/lunetius/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/paco.js b/packages/freesewing.lab/pages/garments/paco.js
new file mode 100644
index 00000000000..3754ff56bac
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/paco.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/paco/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/penelope.js b/packages/freesewing.lab/pages/garments/penelope.js
new file mode 100644
index 00000000000..2aa0a8658ed
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/penelope.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/penelope/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/sandy.js b/packages/freesewing.lab/pages/garments/sandy.js
new file mode 100644
index 00000000000..b19b6fcdc0c
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/sandy.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/sandy/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/shin.js b/packages/freesewing.lab/pages/garments/shin.js
new file mode 100644
index 00000000000..162b12e4bf3
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/shin.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/shin/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/simon.js b/packages/freesewing.lab/pages/garments/simon.js
new file mode 100644
index 00000000000..b50780974da
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/simon.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/simon/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/simone.js b/packages/freesewing.lab/pages/garments/simone.js
new file mode 100644
index 00000000000..60897644c29
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/simone.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/simone/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/sven.js b/packages/freesewing.lab/pages/garments/sven.js
new file mode 100644
index 00000000000..532c49c3190
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/sven.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/sven/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/tamiko.js b/packages/freesewing.lab/pages/garments/tamiko.js
new file mode 100644
index 00000000000..6905cd0b3e9
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/tamiko.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/tamiko/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/teagan.js b/packages/freesewing.lab/pages/garments/teagan.js
index f7b82e8a8fb..9fa675bfe2b 100644
--- a/packages/freesewing.lab/pages/garments/teagan.js
+++ b/packages/freesewing.lab/pages/garments/teagan.js
@@ -1,8 +1,4 @@
 import pattern from 'pkgs/teagan/src/index.js'
 import PageTemplate from 'site/page-templates/workbench.js'
 
-const Teagan = function() {
-  return <PageTemplate pattern={pattern} />
-}
-
-export default Teagan
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/theo.js b/packages/freesewing.lab/pages/garments/theo.js
new file mode 100644
index 00000000000..e61c47b6221
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/theo.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/theo/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/tiberius.js b/packages/freesewing.lab/pages/garments/tiberius.js
new file mode 100644
index 00000000000..7b032a418f0
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/tiberius.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/tiberius/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/trayvon.js b/packages/freesewing.lab/pages/garments/trayvon.js
new file mode 100644
index 00000000000..bc70a2d4a2d
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/trayvon.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/trayvon/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/ursula.js b/packages/freesewing.lab/pages/garments/ursula.js
new file mode 100644
index 00000000000..1a7b7ad4d05
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/ursula.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/ursula/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/wahid.js b/packages/freesewing.lab/pages/garments/wahid.js
new file mode 100644
index 00000000000..598ca2d1192
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/wahid.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/wahid/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/walburga.js b/packages/freesewing.lab/pages/garments/walburga.js
new file mode 100644
index 00000000000..d6c36b30bed
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/walburga.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/walburga/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/waralee.js b/packages/freesewing.lab/pages/garments/waralee.js
new file mode 100644
index 00000000000..5bdffccacf0
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/waralee.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/waralee/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/garments/yuri.js b/packages/freesewing.lab/pages/garments/yuri.js
new file mode 100644
index 00000000000..9837f1b2035
--- /dev/null
+++ b/packages/freesewing.lab/pages/garments/yuri.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/yuri/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/utilities/examples.js b/packages/freesewing.lab/pages/utilities/examples.js
new file mode 100644
index 00000000000..3c8eac1adff
--- /dev/null
+++ b/packages/freesewing.lab/pages/utilities/examples.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/examples/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/utilities/legend.js b/packages/freesewing.lab/pages/utilities/legend.js
new file mode 100644
index 00000000000..54af4949149
--- /dev/null
+++ b/packages/freesewing.lab/pages/utilities/legend.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/legend/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/utilities/plugintest.js b/packages/freesewing.lab/pages/utilities/plugintest.js
new file mode 100644
index 00000000000..acf429d7c8e
--- /dev/null
+++ b/packages/freesewing.lab/pages/utilities/plugintest.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/plugintest/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/utilities/rendertest.js b/packages/freesewing.lab/pages/utilities/rendertest.js
new file mode 100644
index 00000000000..69be390bdb2
--- /dev/null
+++ b/packages/freesewing.lab/pages/utilities/rendertest.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/rendertest/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/pages/utilities/tutorial.js b/packages/freesewing.lab/pages/utilities/tutorial.js
new file mode 100644
index 00000000000..66d2926b51f
--- /dev/null
+++ b/packages/freesewing.lab/pages/utilities/tutorial.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/tutorial/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.lab/patterns.json b/packages/freesewing.lab/patterns.json
index fdc4ada517e..5e508f6f94f 100644
--- a/packages/freesewing.lab/patterns.json
+++ b/packages/freesewing.lab/patterns.json
@@ -3,7 +3,8 @@
     "florence",
     "hortensia",
     "florent",
-    "holmes"
+    "holmes",
+    "trayvon"
   ],
   "blocks": [
     "bella",
@@ -39,7 +40,6 @@
     "teagan",
     "theo",
     "tiberius",
-    "trayvon",
     "ursula",
     "wahid",
     "walburga",
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-percentage.js b/packages/freesewing.shared/components/workbench/inputs/design-option-percentage.js
new file mode 100644
index 00000000000..49f7d0f9503
--- /dev/null
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-percentage.js
@@ -0,0 +1,7 @@
+const DesignOptionPercentage = props => {
+  return (
+    <input type="range" max="100" value="50" className="range range-secondary range-sm" />
+  )
+}
+
+export default DesignOptionPercentage
diff --git a/packages/freesewing.shared/components/workbench/measurements/input.js b/packages/freesewing.shared/components/workbench/inputs/measurement.js
similarity index 98%
rename from packages/freesewing.shared/components/workbench/measurements/input.js
rename to packages/freesewing.shared/components/workbench/inputs/measurement.js
index 5122b85c072..760ad6efa22 100644
--- a/packages/freesewing.shared/components/workbench/measurements/input.js
+++ b/packages/freesewing.shared/components/workbench/inputs/measurement.js
@@ -33,7 +33,6 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
   )
 
   useEffect(() => {
-    console.log(gist.measurements)
     if (gist?.measurements?.[m]) setVal(gist.measurements[m]/10)
   }, [gist])
 
diff --git a/packages/freesewing.shared/components/workbench/measurements/index.js b/packages/freesewing.shared/components/workbench/measurements/index.js
index 2ef2bec50fa..5452053c6f7 100644
--- a/packages/freesewing.shared/components/workbench/measurements/index.js
+++ b/packages/freesewing.shared/components/workbench/measurements/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import MeasurementInput from './input.js'
+import MeasurementInput from '../inputs/measurement.js'
 import { withBreasts, withoutBreasts } from 'pkgs/models/src/index.js'
 import nonHuman from './non-human.js'
 import WithBreastsIcon from 'shared/components/icons/with-breasts.js'
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option.js b/packages/freesewing.shared/components/workbench/menu/design-options/option.js
index 298e8c9e32d..6fd8e646e78 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option.js
@@ -1,4 +1,5 @@
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import PercentOption from 'shared/components/workbench/inputs/design-option-percentage'
 
 const Option = props => {
   return (
@@ -31,6 +32,9 @@ const Option = props => {
           </div>
           <Chevron w={6} m={3}/>
         </summary>
+        {props.pattern.config.options[props.option]?.pct && <PercentOption {...props} />}
+        <pre>{JSON.stringify(props.pattern.config.options[props.option],null,2)}</pre>
+
         fixme
       </details>
     </li>
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index ed479d55e2f..9aee4318ea6 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -148,6 +148,34 @@ summary::-webkit-details-marker {
   display: none;
 }
 
+/* Style for slider track */
+input[type=range]::-webkit-slider-runnable-track {
+  background: #ffffff44;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #ffffff66;
+}
+
+input[type=range]::-moz-range-track {
+  background: #3071a9;
+}
+
+input[type=range]::-ms-track {
+  background: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #2a6495;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #3071a9;
+}
+input[type=range]::-ms-fill-upper {
+  background: #3071a9;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #367ebd;
+}
 /* Style for patterns */
 @import './svg-freesewing-draft.css';