diff --git a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js
index 12f1632ff09..33ec31fc870 100644
--- a/packages/components/src/DraftConfigurator/DraftSettingSa/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js
@@ -102,7 +102,7 @@ const DraftSettingSa = (props) => {
       </React.Fragment>
     )
   return (
-    <li>
+    <li className={expanded ? 'expanded' : 'collapsed'}>
       <OptionPreamble
         dflt={saDfltToggle}
         designDflt={'dflt'}
diff --git a/packages/components/src/DraftConfigurator/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js
index 75383157b81..9d809992e04 100644
--- a/packages/components/src/DraftConfigurator/DraftSettings/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js
@@ -114,13 +114,13 @@ const DraftSettings = ({
 
   return (
     <>
-      <ul className="config l2 nogroups">
+      <ul className="config level-1 nogroups">
         <DraftSettingSa {...addProps('sa')} />
         <DraftSettingPaperless {...addProps('paperless')} />
         <DraftSettingAdvanced {...addProps('advanced')} />
       </ul>
       {data.settings.advanced && (
-        <ul className="config l2">
+        <ul className="config level-1">
           {Object.keys(groups).map((group) => {
             let open = true
             if (expanded.indexOf(group) === -1) open = false
diff --git a/packages/components/src/DraftConfigurator/OptionGroup/index.js b/packages/components/src/DraftConfigurator/OptionGroup/index.js
index 500b37b9384..eb87fbdb82f 100644
--- a/packages/components/src/DraftConfigurator/OptionGroup/index.js
+++ b/packages/components/src/DraftConfigurator/OptionGroup/index.js
@@ -10,6 +10,7 @@ import optionDefault from '@freesewing/utils/optionDefault'
 import { FormattedMessage } from 'react-intl'
 import { injectIntl } from 'react-intl'
 import RightIcon from '@material-ui/icons/KeyboardArrowRight'
+import OptionSubGroup from '../OptionSubGroup'
 
 const OptionGroup = (props) => {
   const renderOption = (name, sub = false) => {
@@ -74,13 +75,11 @@ const OptionGroup = (props) => {
             let children = []
             for (let option of name[subGroup]) children.push(renderOption(option, true))
             output.push(
-              <li>
-                <span key={subGroup + '-title'} className="subheading">
-                  <RightIcon className="icon-col-exp expanded" />
-                  <FormattedMessage id={'optiongroups.' + subGroup} />
-                </span>
-                <ul className="config l4">{children}</ul>
-              </li>
+              <OptionSubGroup
+                title={<FormattedMessage id={'optiongroups.' + subGroup} />}
+                children={children}
+                key={subGroup}
+              />
             )
           }
         } else output.push(renderOption(name))
diff --git a/packages/components/src/DraftConfigurator/OptionSubGroup.js b/packages/components/src/DraftConfigurator/OptionSubGroup.js
new file mode 100644
index 00000000000..c95f4100b56
--- /dev/null
+++ b/packages/components/src/DraftConfigurator/OptionSubGroup.js
@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import RightIcon from '@material-ui/icons/KeyboardArrowRight'
+
+const OptionSubGroup = ({ title, children }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <li>
+      <span className="subheading" onClick={() => setOpen(!open)}>
+        <RightIcon className={`icon-col-exp ${open ? 'expanded' : ''}`} />
+        {title}
+      </span>
+      {open && <ul className="config level-3">{children}</ul>}
+    </li>
+  )
+}
+
+export default OptionSubGroup
diff --git a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js
index 1cf1facc273..d31bf3e0538 100644
--- a/packages/components/src/DraftConfigurator/PatternOptionBool/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js
@@ -35,7 +35,7 @@ const PatternOptionBool = (props) => {
     />
   )
   return (
-    <li>
+    <li className={expanded ? 'expanded' : 'collapsed'}>
       <OptionPreamble
         dflt={props.dflt}
         designDflt={props.designDflt}
diff --git a/packages/components/src/DraftConfigurator/PatternOptionList/index.js b/packages/components/src/DraftConfigurator/PatternOptionList/index.js
index 7804ab4b983..648c00dbeec 100644
--- a/packages/components/src/DraftConfigurator/PatternOptionList/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionList/index.js
@@ -44,7 +44,7 @@ const PatternOptionList = (props) => {
     />
   )
   return (
-    <li>
+    <li className={expanded ? 'expanded' : 'collapsed'}>
       <OptionPreamble
         dflt={props.dflt}
         value={value}
diff --git a/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
index 2d9c532acd6..6a16cea33f2 100644
--- a/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
@@ -57,7 +57,7 @@ const PatternOptionMillimeter = ({
   )
 
   return (
-    <li>
+    <li className={expanded ? 'expanded' : 'collapsed'}>
       <OptionPreamble
         dflt={dflt}
         value={val}
diff --git a/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
index 4bba5c848bf..0095008357b 100644
--- a/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
@@ -68,7 +68,7 @@ const PatternOptionPctDegCount = ({
   )
 
   return (
-    <li>
+    <li className={expanded ? 'expanded' : 'collapsed'}>
       <OptionPreamble
         dflt={dflt}
         designDflt={designDflt}
diff --git a/packages/components/src/DraftConfigurator/PatternOptions/index.js b/packages/components/src/DraftConfigurator/PatternOptions/index.js
index 77cfb9314b8..e2fb4f8bf13 100644
--- a/packages/components/src/DraftConfigurator/PatternOptions/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptions/index.js
@@ -20,7 +20,7 @@ const PatternOptions = (props) => {
     let children = null
     if (expanded.indexOf(group) !== -1)
       children = (
-        <ul className="config l3">
+        <ul className="config level-2">
           <OptionGroup
             noDocs={props.noDocs}
             key={group + '-group'}
@@ -54,7 +54,7 @@ const PatternOptions = (props) => {
     }
   }
 
-  return <ul className="config l2">{children}</ul>
+  return <ul className="config level-1">{children}</ul>
 }
 
 export default PatternOptions
diff --git a/packages/components/src/DraftConfigurator/index.js b/packages/components/src/DraftConfigurator/index.js
index 1d8eb43fd5d..8aeb8a3e6af 100644
--- a/packages/components/src/DraftConfigurator/index.js
+++ b/packages/components/src/DraftConfigurator/index.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import PatternOptions from './PatternOptions'
 import DraftSettings from './DraftSettings'
+import TuneIcon from '@material-ui/icons/Tune'
+import WrenchIcon from '@material-ui/icons/Build'
 
 const DraftConfigurator = ({
   noDocs = false,
@@ -21,9 +23,10 @@ const DraftConfigurator = ({
     raiseEvent
   }
   return (
-    <ul className="config l1">
+    <ul id="draft-config">
       <li>
         <span>
+          <TuneIcon />
           <FormattedMessage id="app.designOptions" />
         </span>
         <PatternOptions
@@ -33,6 +36,7 @@ const DraftConfigurator = ({
       </li>
       <li>
         <span>
+          <WrenchIcon />
           <FormattedMessage id="app.patternOptions" />
         </span>
         <DraftSettings