diff --git a/packages/components/src/DraftActions/index.js b/packages/components/src/DraftActions/index.js
deleted file mode 100644
index 464d2511488..00000000000
--- a/packages/components/src/DraftActions/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { gistDefaults } from "../utils";
-import { patternInfo, patternList } from "@freesewing/patterns";
-import { FormattedMessage } from "react-intl";
-import List from "@material-ui/core/List";
-import DraftSettingSa from "../DraftSettingSa";
-import DraftSettingMargin from "../DraftSettingMargin";
-import DraftSettingComplete from "../DraftSettingComplete";
-import DraftSettingPaperless from "../DraftSettingPaperless";
-import DraftSettingUnits from "../DraftSettingUnits";
-import DraftSettingLanguage from "../DraftSettingLanguage";
-import DraftSettingOnly from "../DraftSettingOnly";
-import DownIcon from "@material-ui/icons/KeyboardArrowDown";
-
-const DraftActions = props => {
-  const [expanded, setExpanded] = useState([]);
-
-  const toggleGroup = group => {
-    let shown = expanded.slice(0);
-    let index = shown.indexOf(group);
-    if (index === -1) shown.push(group);
-    else shown.splice(index, 1);
-    setExpanded(shown);
-  };
-
-  let paperSizes = ["A4", "Letter", "A3", "Tabloid", "A2", "A1", "A0"];
-  let groups = {
-    saveDraft: [
-      <li>
-        <FormattedMessage id="app.saveDraftToYourAccount" />
-      </li>,
-      <li>
-        <FormattedMessage id="app.saveGistAsJSON" />
-      </li>,
-      <li>
-        <FormattedMessage id="app.saveGistAsYAML" />
-      </li>,
-      <li>
-        <FormattedMessage id="app.saveSvg" />
-      </li>
-    ],
-    exportDraft: [
-      <li>
-        <FormattedMessage id="app.exportDraft" />: PDF
-      </li>,
-      paperSizes.map(size => (
-        <li>
-          <FormattedMessage id="app.exportTiledPdf" />: {size}
-        </li>
-      ))
-    ]
-  };
-
-  return (
-    <ul className="nav l2">
-      {Object.keys(groups).map(group => {
-        let open = true;
-        if (expanded.indexOf(group) === -1) open = false;
-        let children = null;
-        if (open) children = groups[group].map(component => component);
-        return (
-          <React.Fragment>
-            <li
-              className={open ? "expanded" : "collapsed"}
-              key={group + "-ghead"}
-            >
-              <h3 onClick={() => toggleGroup(group)}>
-                <DownIcon
-                  className={
-                    "icon-col-exp " + (open ? "expanded" : "collapsed")
-                  }
-                />
-                <FormattedMessage id={"app." + group} />
-              </h3>
-            </li>
-            {children}
-          </React.Fragment>
-        );
-      })}
-    </ul>
-  );
-};
-
-DraftActions.propTypes = {};
-
-DraftActions.defaultProps = {};
-
-export default DraftActions;
diff --git a/packages/components/src/DraftSettingComplete/index.js b/packages/components/src/DraftConfigurator/DraftSettingComplete/index.js
similarity index 100%
rename from packages/components/src/DraftSettingComplete/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingComplete/index.js
diff --git a/packages/components/src/DraftSettingComplete/stories.js b/packages/components/src/DraftConfigurator/DraftSettingComplete/stories.js
similarity index 89%
rename from packages/components/src/DraftSettingComplete/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingComplete/stories.js
index 98c8aa6faf2..6fa01b8fa47 100644
--- a/packages/components/src/DraftSettingComplete/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingComplete/stories.js
@@ -14,6 +14,6 @@ const props = {
   labels: ["No", "Yes"]
 };
 
-storiesOf("DraftSettingComplete", module).add("Basic", () => (
+storiesOf("Low level/DraftSettingComplete", module).add("Basic", () => (
   <Complete {...props} />
 ));
diff --git a/packages/components/src/DraftSettingLanguage/index.js b/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js
similarity index 72%
rename from packages/components/src/DraftSettingLanguage/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js
index eed59874f81..a3fe1a5e095 100644
--- a/packages/components/src/DraftSettingLanguage/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js
@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../FormFieldList";
+import FormFieldList from "../../form/FormFieldList";
 import OptionPreamble from "../OptionPreamble";
+import { injectIntl } from "react-intl";
+import { i18n as languages } from "@freesewing/i18n";
 
 const DraftSettingLanguage = props => {
-  const [value, setValue] = useState(props.dflt);
+  const [value, setValue] = useState(props.intl.locale);
   const [expanded, setExpanded] = useState(false);
 
   const update = (name, newValue, evt) => {
@@ -13,33 +15,32 @@ const DraftSettingLanguage = props => {
   };
 
   const reset = () => {
-    setValue(props.dflt);
-    props.updateValue(props.name, props.dflt);
+    setValue(props.intl.locale);
+    props.updateValue(props.name, props.intl.locale);
   };
-
   const toggleExpanded = () => setExpanded(!expanded);
 
   const option = (
     <FormFieldList
       name={props.name}
       value={value}
-      dflt={props.dflt}
+      dflt={props.intl.locale}
       onChange={update}
       label={"po-list-" + props.name}
       updateValue={update}
-      list={props.languages}
+      list={languages[props.intl.locale]}
     />
   );
 
   return (
     <li>
       <OptionPreamble
-        dflt={props.dflt}
+        dflt={props.intl.locale}
         value={value}
         desc={props.desc}
         title={props.title}
         id={"po-list-" + props.name}
-        displayValue={props.languages[value]}
+        displayValue={languages[props.intl.locale][value]}
         reset={reset}
         toggleExpanded={toggleExpanded}
         expanded={expanded}
@@ -59,13 +60,9 @@ DraftSettingLanguage.propTypes = {
   triggerAction: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
-  dflt: PropTypes.oneOfType([
-    PropTypes.number.isRequired,
-    PropTypes.string.isRequired
-  ]),
   title: PropTypes.node.isRequired,
   desc: PropTypes.node.isRequired,
   list: PropTypes.object.isRequired
 };
 
-export default DraftSettingLanguage;
+export default injectIntl(DraftSettingLanguage);
diff --git a/packages/components/src/DraftSettingLanguage/stories.js b/packages/components/src/DraftConfigurator/DraftSettingLanguage/stories.js
similarity index 91%
rename from packages/components/src/DraftSettingLanguage/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingLanguage/stories.js
index 9812253c2ae..539c8105c39 100644
--- a/packages/components/src/DraftSettingLanguage/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingLanguage/stories.js
@@ -22,6 +22,6 @@ const props = {
   }
 };
 
-storiesOf("DraftSettingLanguage", module).add("Basic", () => (
+storiesOf("Low level/DraftSettingLanguage", module).add("Basic", () => (
   <Lang {...props} />
 ));
diff --git a/packages/components/src/DraftSettingMargin/index.js b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js
similarity index 71%
rename from packages/components/src/DraftSettingMargin/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingMargin/index.js
index 86fba0074fc..5d189d0b6e2 100644
--- a/packages/components/src/DraftSettingMargin/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingMargin/index.js
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../FormFieldList";
-import FormFieldSlider from "../FormFieldSlider";
-import { formatMm, roundMm, defaultSa, sliderStep } from "../utils";
+import FormFieldList from "../../form/FormFieldList";
+import FormFieldSlider from "../../form/FormFieldSlider";
+import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingMargin = props => {
   const [value, setValue] = useState(props.dflt);
+  const [expanded, setExpanded] = useState(false);
 
   const update = (name, newValue, evt) => {
     newValue = roundMm(newValue);
@@ -27,8 +28,23 @@ const DraftSettingMargin = props => {
     props.updateValue("margin", props.dflt);
   };
 
+  const toggleExpanded = () => setExpanded(!expanded);
+
+  let option = (
+    <FormFieldSlider
+      name="customSa"
+      value={value}
+      dflt={props.dflt}
+      label="po-slider-margin"
+      updateValue={update}
+      min={0}
+      max={25.4}
+      step={sliderStep[props.units]}
+    />
+  );
+
   return (
-    <div className={"pattern-option list"}>
+    <li>
       <OptionPreamble
         dflt={props.dflt}
         value={value}
@@ -37,24 +53,17 @@ const DraftSettingMargin = props => {
         id="po-slider-margin"
         displayValue={formatMm(value, props.units)}
         reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
         showHelp={() =>
           props.triggerAction("showHelp", {
             type: "draftSetting",
             value: "margin"
           })
         }
+        option={option}
       />
-      <FormFieldSlider
-        name="customSa"
-        value={value}
-        dflt={props.dflt}
-        label="po-slider-margin"
-        updateValue={update}
-        min={0}
-        max={25.4}
-        step={sliderStep[props.units]}
-      />
-    </div>
+    </li>
   );
 };
 
diff --git a/packages/components/src/DraftSettingMargin/stories.js b/packages/components/src/DraftConfigurator/DraftSettingMargin/stories.js
similarity index 93%
rename from packages/components/src/DraftSettingMargin/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingMargin/stories.js
index 4c15cb96c50..86cbfe276d3 100644
--- a/packages/components/src/DraftSettingMargin/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingMargin/stories.js
@@ -14,6 +14,6 @@ const props = {
     "This is the margin description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it."
 };
 
-storiesOf("DraftSettingMargin", module)
+storiesOf("Low level/DraftSettingMargin", module)
   .add("Metric", () => <Margin {...props} units="metric" />)
   .add("Imperial", () => <Margin {...props} units="imperial" />);
diff --git a/packages/components/src/DraftSettingOnly/index.js b/packages/components/src/DraftConfigurator/DraftSettingOnly/index.js
similarity index 88%
rename from packages/components/src/DraftSettingOnly/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingOnly/index.js
index be348937932..94415bfcf4d 100644
--- a/packages/components/src/DraftSettingOnly/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingOnly/index.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import FormFieldChecks from "../FormFieldChecks";
-import FormFieldList from "../FormFieldList";
-import FormFieldSlider from "../FormFieldSlider";
-import { formatMm, roundMm, defaultSa, sliderStep } from "../utils";
+import FormFieldChecks from "../../form/FormFieldChecks";
+import FormFieldList from "../../form/FormFieldList";
+import FormFieldSlider from "../../form/FormFieldSlider";
+import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingOnly = props => {
diff --git a/packages/components/src/DraftSettingOnly/stories.js b/packages/components/src/DraftConfigurator/DraftSettingOnly/stories.js
similarity index 95%
rename from packages/components/src/DraftSettingOnly/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingOnly/stories.js
index 78b712086a9..19bc951439b 100644
--- a/packages/components/src/DraftSettingOnly/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingOnly/stories.js
@@ -24,7 +24,7 @@ const props = {
   }
 };
 
-storiesOf("DraftSettingOnly", module)
+storiesOf("Low level/DraftSettingOnly", module)
   .add("Default", () => <Sa {...props} />)
   .add("Default, all parts preselected", () => (
     <Sa {...props} customDflt={Object.keys(props.parts)} />
diff --git a/packages/components/src/DraftSettingPaperless/index.js b/packages/components/src/DraftConfigurator/DraftSettingPaperless/index.js
similarity index 100%
rename from packages/components/src/DraftSettingPaperless/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingPaperless/index.js
diff --git a/packages/components/src/DraftSettingPaperless/stories.js b/packages/components/src/DraftConfigurator/DraftSettingPaperless/stories.js
similarity index 89%
rename from packages/components/src/DraftSettingPaperless/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingPaperless/stories.js
index daf59c2d351..2fdedc014b3 100644
--- a/packages/components/src/DraftSettingPaperless/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingPaperless/stories.js
@@ -15,6 +15,6 @@ const props = {
   labels: ["No", "Yes"]
 };
 
-storiesOf("DraftSettingPaperless", module).add("Basic", () => (
+storiesOf("Low level/DraftSettingPaperless", module).add("Basic", () => (
   <Paperless {...props} />
 ));
diff --git a/packages/components/src/DraftSettingSa/index.js b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js
similarity index 94%
rename from packages/components/src/DraftSettingSa/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingSa/index.js
index 2fc06657c8d..6ef1bca4f07 100644
--- a/packages/components/src/DraftSettingSa/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingSa/index.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../FormFieldList";
-import FormFieldSlider from "../FormFieldSlider";
-import { formatMm, roundMm, defaultSa, sliderStep } from "../utils";
+import FormFieldList from "../../form/FormFieldList";
+import FormFieldSlider from "../../form/FormFieldSlider";
+import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingSa = props => {
diff --git a/packages/components/src/DraftSettingSa/stories.js b/packages/components/src/DraftConfigurator/DraftSettingSa/stories.js
similarity index 94%
rename from packages/components/src/DraftSettingSa/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingSa/stories.js
index a87d23c2f2c..879a65d0248 100644
--- a/packages/components/src/DraftSettingSa/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingSa/stories.js
@@ -19,6 +19,6 @@ const props = {
   }
 };
 
-storiesOf("DraftSettingSa", module)
+storiesOf("Low level/DraftSettingSa", module)
   .add("Metric", () => <Sa {...props} units="metric" />)
   .add("Imperial", () => <Sa {...props} units="imperial" />);
diff --git a/packages/components/src/DraftSettingUnits/index.js b/packages/components/src/DraftConfigurator/DraftSettingUnits/index.js
similarity index 95%
rename from packages/components/src/DraftSettingUnits/index.js
rename to packages/components/src/DraftConfigurator/DraftSettingUnits/index.js
index 6a47603f324..aa08689731d 100644
--- a/packages/components/src/DraftSettingUnits/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingUnits/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import FormFieldList from "../FormFieldList";
+import FormFieldList from "../../form/FormFieldList";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingUnits = props => {
diff --git a/packages/components/src/DraftSettingUnits/stories.js b/packages/components/src/DraftConfigurator/DraftSettingUnits/stories.js
similarity index 87%
rename from packages/components/src/DraftSettingUnits/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettingUnits/stories.js
index 6b2d6cdd28a..90eab10b40e 100644
--- a/packages/components/src/DraftSettingUnits/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettingUnits/stories.js
@@ -18,4 +18,4 @@ const props = {
   }
 };
 
-storiesOf("DraftSettingUnits", module).add("Basic", () => <Units {...props} />);
+storiesOf("Low level/DraftSettingUnits", module).add("Basic", () => <Units {...props} />);
diff --git a/packages/components/src/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js
similarity index 95%
rename from packages/components/src/DraftSettings/index.js
rename to packages/components/src/DraftConfigurator/DraftSettings/index.js
index 7c42a9a0eb7..5101b4094f4 100644
--- a/packages/components/src/DraftSettings/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { gistDefaults } from "../utils";
+import { gistDefaults } from "../../utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
 import List from "@material-ui/core/List";
@@ -89,11 +89,7 @@ const DraftSettings = props => {
         dflt={props.units}
         list={units}
       />,
-      <DraftSettingLanguage
-        {...addProps("locale")}
-        dflt={props.language}
-        languages={props.languages}
-      />
+      <DraftSettingLanguage {...addProps("locale")} />
     ]
   };
 
diff --git a/packages/components/src/DraftActions/stories.js b/packages/components/src/DraftConfigurator/DraftSettings/stories.js
similarity index 94%
rename from packages/components/src/DraftActions/stories.js
rename to packages/components/src/DraftConfigurator/DraftSettings/stories.js
index 6b39d8c0c0e..f88aba1ecdd 100644
--- a/packages/components/src/DraftActions/stories.js
+++ b/packages/components/src/DraftConfigurator/DraftSettings/stories.js
@@ -22,7 +22,7 @@ const props = {
   language: "en"
 };
 
-storiesOf("DraftActions", module)
+storiesOf("Low level/DraftSettings", module)
   .add("Simon metric", () => (
     <DraftSettings pattern="simon" gist={false} units="metric" {...props} />
   ))
diff --git a/packages/components/src/OptionGroup/index.js b/packages/components/src/DraftConfigurator/OptionGroup/index.js
similarity index 95%
rename from packages/components/src/OptionGroup/index.js
rename to packages/components/src/DraftConfigurator/OptionGroup/index.js
index 93645b4b80a..4c789a22c1a 100644
--- a/packages/components/src/OptionGroup/index.js
+++ b/packages/components/src/DraftConfigurator/OptionGroup/index.js
@@ -6,12 +6,11 @@ import Mm from "../PatternOptionMillimeter";
 import Bool from "../PatternOptionBool";
 import List from "../PatternOptionList";
 import Count from "../PatternOptionCount";
-import { optionType } from "../utils";
+import { optionType } from "../../utils";
 import { FormattedMessage } from "react-intl";
 import { injectIntl } from "react-intl";
 
 const OptionGroup = props => {
-  const update = (name, value) => props.updateValue("option", name, value);
 
   const renderOption = (name, sub=false) => {
     let option = props.pattern.config.options[name];
@@ -21,7 +20,7 @@ const OptionGroup = props => {
       name,
       dflt: props.dflts.options[name],
       units: props.units,
-      updateValue: update,
+      updateValue: props.updateValue,
       triggerAction: props.triggerAction,
       title: <FormattedMessage id={stringKey + "title"} />,
       desc: <FormattedMessage id={stringKey + "description"} />,
diff --git a/packages/components/src/OptionGroup/stories.js b/packages/components/src/DraftConfigurator/OptionGroup/stories.js
similarity index 93%
rename from packages/components/src/OptionGroup/stories.js
rename to packages/components/src/DraftConfigurator/OptionGroup/stories.js
index 096c66ba18b..4c5f4db8721 100644
--- a/packages/components/src/OptionGroup/stories.js
+++ b/packages/components/src/DraftConfigurator/OptionGroup/stories.js
@@ -35,6 +35,6 @@ const props = {
   options: Object.keys(options)
 };
 
-storiesOf("OptionGroup", module).add("Simon metric", () => (
+storiesOf("Low level/OptionGroup", module).add("Simon metric", () => (
   <OptionGroup pattern="simon" {...props} units="metric" />
 ));
diff --git a/packages/components/src/OptionPreamble/index.js b/packages/components/src/DraftConfigurator/OptionPreamble/index.js
similarity index 100%
rename from packages/components/src/OptionPreamble/index.js
rename to packages/components/src/DraftConfigurator/OptionPreamble/index.js
diff --git a/packages/components/src/OptionPreamble/stories.js b/packages/components/src/DraftConfigurator/OptionPreamble/stories.js
similarity index 88%
rename from packages/components/src/OptionPreamble/stories.js
rename to packages/components/src/DraftConfigurator/OptionPreamble/stories.js
index a237140ccc0..7e805d03f64 100644
--- a/packages/components/src/OptionPreamble/stories.js
+++ b/packages/components/src/DraftConfigurator/OptionPreamble/stories.js
@@ -15,6 +15,6 @@ const props = {
     "This is the description. I'm wrapped in a p tag. This component is used within other components, and not very useful on its own."
 };
 
-storiesOf("OptionPreamble", module).add("Preamble", () => (
+storiesOf("Low level/OptionPreamble", module).add("Preamble", () => (
   <Preamble {...props} />
 ));
diff --git a/packages/components/src/PatternOptionBool/index.js b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js
similarity index 96%
rename from packages/components/src/PatternOptionBool/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionBool/index.js
index 498ef33f653..0c3ebcd7056 100644
--- a/packages/components/src/PatternOptionBool/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionBool/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldBool from "../FormFieldBool";
+import FormFieldBool from "../../form/FormFieldBool";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionBool = props => {
diff --git a/packages/components/src/PatternOptionBool/stories.js b/packages/components/src/DraftConfigurator/PatternOptionBool/stories.js
similarity index 94%
rename from packages/components/src/PatternOptionBool/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionBool/stories.js
index 48fc57237d7..fb173a5f3bd 100644
--- a/packages/components/src/PatternOptionBool/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionBool/stories.js
@@ -16,6 +16,6 @@ const props = {
   labels: ["No", "Yes"]
 };
 
-storiesOf("PatternOptionBool", module)
+storiesOf("Low level/PatternOptionBool", module)
   .add("Basic", () => <Bool {...props} />)
   .add("Yes as default", () => <Bool {...props} dflt={true} />);
diff --git a/packages/components/src/PatternOptionCount/index.js b/packages/components/src/DraftConfigurator/PatternOptionCount/index.js
similarity index 100%
rename from packages/components/src/PatternOptionCount/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionCount/index.js
diff --git a/packages/components/src/PatternOptionCount/stories.js b/packages/components/src/DraftConfigurator/PatternOptionCount/stories.js
similarity index 94%
rename from packages/components/src/PatternOptionCount/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionCount/stories.js
index 655552a2d23..3d286de2426 100644
--- a/packages/components/src/PatternOptionCount/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionCount/stories.js
@@ -15,7 +15,7 @@ const props = {
     "This is the description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it."
 };
 
-storiesOf("PatternOptionCount", module)
+storiesOf("Low level/PatternOptionCount", module)
   .add("Basic", () => <Count {...props} />)
   .add("From 20 to 80", () => <Count {...props} min={20} max={80} />)
   .add("Step: 5", () => <Count {...props} step={5} />);
diff --git a/packages/components/src/PatternOptionDegree/index.js b/packages/components/src/DraftConfigurator/PatternOptionDegree/index.js
similarity index 100%
rename from packages/components/src/PatternOptionDegree/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionDegree/index.js
diff --git a/packages/components/src/PatternOptionDegree/stories.js b/packages/components/src/DraftConfigurator/PatternOptionDegree/stories.js
similarity index 94%
rename from packages/components/src/PatternOptionDegree/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionDegree/stories.js
index fd39483b60f..4ea06839ab2 100644
--- a/packages/components/src/PatternOptionDegree/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionDegree/stories.js
@@ -16,7 +16,7 @@ const props = {
     "This is the description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it."
 };
 
-storiesOf("PatternOptionDegree", module)
+storiesOf("Low level/PatternOptionDegree", module)
   .add("Basic", () => <Pct {...props} />)
   .add("From 30 to 45", () => <Pct {...props} min={30} max={45} />)
   .add("Step: 10", () => <Pct {...props} step={10} max={180} dflt={90} />);
diff --git a/packages/components/src/PatternOptionList/index.js b/packages/components/src/DraftConfigurator/PatternOptionList/index.js
similarity index 97%
rename from packages/components/src/PatternOptionList/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionList/index.js
index 82c51cd586f..15f14a8dbe2 100644
--- a/packages/components/src/PatternOptionList/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionList/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../FormFieldList";
+import FormFieldList from "../../form/FormFieldList";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionList = props => {
diff --git a/packages/components/src/PatternOptionList/stories.js b/packages/components/src/DraftConfigurator/PatternOptionList/stories.js
similarity index 88%
rename from packages/components/src/PatternOptionList/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionList/stories.js
index 126a1bc8843..fa5ff73dcf6 100644
--- a/packages/components/src/PatternOptionList/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionList/stories.js
@@ -20,4 +20,4 @@ const props = {
   }
 };
 
-storiesOf("PatternOptionList", module).add("Basic", () => <List {...props} />);
+storiesOf("Low level/PatternOptionList", module).add("Basic", () => <List {...props} />);
diff --git a/packages/components/src/PatternOptionMillimeter/index.js b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
similarity index 97%
rename from packages/components/src/PatternOptionMillimeter/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
index f704629cdea..80db0205a5b 100644
--- a/packages/components/src/PatternOptionMillimeter/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
@@ -6,8 +6,8 @@ import {
   roundMmUp,
   roundMmDown,
   formatMm
-} from "../utils";
-import FormFieldSlider from "../FormFieldSlider";
+} from "../../utils";
+import FormFieldSlider from "../../form/FormFieldSlider";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionMillimeter = props => {
diff --git a/packages/components/src/PatternOptionMillimeter/stories.js b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/stories.js
similarity index 97%
rename from packages/components/src/PatternOptionMillimeter/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionMillimeter/stories.js
index 8450efa534e..f12efdd5181 100644
--- a/packages/components/src/PatternOptionMillimeter/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionMillimeter/stories.js
@@ -21,7 +21,7 @@ const maxNotOnStep =
 const minNotOnStep =
   "Since our step is 0.1mm and our min value is 24.06 mm, it falls in between two steps (24mm and 24.1mm). Picking the min value would result in the rounded min value of 24mm, which is outside our min boundary. So we always round the min value up to the closest step. Also note that while the displayed value rounds to mm, under the hood we use 1/10th of a mm and the actual value passed for the min here is not 2.4cm but 24.1mm (2.41cm)";
 
-storiesOf("PatternOptionMillimeter", module)
+storiesOf("Low level/PatternOptionMillimeter", module)
   .add("Metric", () => <Mm {...props} />)
   .add("Max: 12.486 cm", () => (
     <Mm {...props} max={124.86} desc={maxNotOnStep} />
diff --git a/packages/components/src/PatternOptionPctDegCount/index.js b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
similarity index 97%
rename from packages/components/src/PatternOptionPctDegCount/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
index f2e06d2edc4..1f7587ab573 100644
--- a/packages/components/src/PatternOptionPctDegCount/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldSlider from "../FormFieldSlider";
+import FormFieldSlider from "../../form/FormFieldSlider";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionPctDegCount = props => {
diff --git a/packages/components/src/PatternOptionPctDegCount/stories.js b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/stories.js
similarity index 75%
rename from packages/components/src/PatternOptionPctDegCount/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionPctDegCount/stories.js
index 7cf07f74480..b13e2f545ff 100644
--- a/packages/components/src/PatternOptionPctDegCount/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionPctDegCount/stories.js
@@ -14,12 +14,12 @@ const props = {
     "This is the description. I'm wrapped in a p tag. This component is the base for the percentage, degree, and count pattern options."
 };
 
-storiesOf("PatternOptionPctDegCount", module).add("Percentage", () => (
+storiesOf("Low level/PatternOptionPctDegCount", module).add("Percentage", () => (
   <PctDegCount {...props} type="pct" />
 ));
-storiesOf("PatternOptionPctDegCount", module).add("Degree", () => (
+storiesOf("Low level/PatternOptionPctDegCount", module).add("Degree", () => (
   <PctDegCount {...props} type="deg" />
 ));
-storiesOf("PatternOptionPctDegCount", module).add("Count", () => (
+storiesOf("Low level/PatternOptionPctDegCount", module).add("Count", () => (
   <PctDegCount {...props} type="count" />
 ));
diff --git a/packages/components/src/PatternOptionPercentage/index.js b/packages/components/src/DraftConfigurator/PatternOptionPercentage/index.js
similarity index 100%
rename from packages/components/src/PatternOptionPercentage/index.js
rename to packages/components/src/DraftConfigurator/PatternOptionPercentage/index.js
diff --git a/packages/components/src/PatternOptionPercentage/stories.js b/packages/components/src/DraftConfigurator/PatternOptionPercentage/stories.js
similarity index 93%
rename from packages/components/src/PatternOptionPercentage/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptionPercentage/stories.js
index 7a7af619eb3..13d789c3a0c 100644
--- a/packages/components/src/PatternOptionPercentage/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptionPercentage/stories.js
@@ -15,7 +15,7 @@ const props = {
     "This is the description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it."
 };
 
-storiesOf("PatternOptionPercentage", module)
+storiesOf("Low level/PatternOptionPercentage", module)
   .add("Basic", () => <Pct {...props} />)
   .add("From 20 to 80", () => <Pct {...props} min={20} max={80} />)
   .add("Step: 5", () => <Pct {...props} step={5} />);
diff --git a/packages/components/src/PatternOptions/index.js b/packages/components/src/DraftConfigurator/PatternOptions/index.js
similarity index 96%
rename from packages/components/src/PatternOptions/index.js
rename to packages/components/src/DraftConfigurator/PatternOptions/index.js
index ff6217ca3b1..091eaf352eb 100644
--- a/packages/components/src/PatternOptions/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptions/index.js
@@ -5,7 +5,7 @@ import Deg from "../PatternOptionDegree";
 import Mm from "../PatternOptionMillimeter";
 import Bool from "../PatternOptionBool";
 import OptionGroup from "../OptionGroup";
-import { optionType, defaultGist, gistDefaults } from "../utils";
+import { optionType, defaultGist, gistDefaults } from "../../utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
 import List from "@material-ui/core/List";
diff --git a/packages/components/src/PatternOptions/stories.js b/packages/components/src/DraftConfigurator/PatternOptions/stories.js
similarity index 93%
rename from packages/components/src/PatternOptions/stories.js
rename to packages/components/src/DraftConfigurator/PatternOptions/stories.js
index a386ef12f44..e861780ce62 100644
--- a/packages/components/src/PatternOptions/stories.js
+++ b/packages/components/src/DraftConfigurator/PatternOptions/stories.js
@@ -14,7 +14,7 @@ const props = {
   }
 };
 
-storiesOf("PatternOptions", module)
+storiesOf("Low level/PatternOptions", module)
   .add("Simon metric", () => (
     <PatternOptions pattern="simon" gist={false} units="metric" {...props} />
   ))
diff --git a/packages/components/src/GistConfigurator/index.js b/packages/components/src/DraftConfigurator/index.js
similarity index 57%
rename from packages/components/src/GistConfigurator/index.js
rename to packages/components/src/DraftConfigurator/index.js
index d5146d97231..742a810bc79 100644
--- a/packages/components/src/GistConfigurator/index.js
+++ b/packages/components/src/DraftConfigurator/index.js
@@ -1,23 +1,22 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import Pct from "../PatternOptionPercentage";
-import Deg from "../PatternOptionDegree";
-import Mm from "../PatternOptionMillimeter";
-import Bool from "../PatternOptionBool";
-import OptionGroup from "../OptionGroup";
+import Pct from "./PatternOptionPercentage";
+import Deg from "./PatternOptionDegree";
+import Mm from "./PatternOptionMillimeter";
+import Bool from "./PatternOptionBool";
+import OptionGroup from "./OptionGroup";
 import { optionType, gistDefaults } from "../utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
-import { FormattedMessage, injectIntl } from "react-intl";
-import { i18n as languages } from "@freesewing/i18n";
+import { FormattedMessage } from "react-intl";
 import CollapsedIcon from "@material-ui/icons/ArrowDropDown";
 import ExpandedIcon from "@material-ui/icons/ArrowRight";
-import PatternOptions from "../PatternOptions";
-import DraftSettings from "../DraftSettings";
-import DraftActions from "../DraftActions";
+import PatternOptions from "./PatternOptions";
+import DraftSettings from "./DraftSettings";
+//import DraftActions from "DraftActions";
+import withGist from "../withGist";
 
-const GistConfigurator = props => {
-  console.log(languages);
-  const [gist, setGist] = useState(props.gist);
+const DraftConfigurator = props => {
+  const [gist, setGist] = useState(props.gist.get);
   const [expanded, setExpanded] = useState([]);
 
   const update = (type, name, value) => {
@@ -31,9 +30,8 @@ const GistConfigurator = props => {
     else shown.splice(index, 1);
     setExpanded(shown);
   };
-
   let pattern = patternInfo[props.pattern];
-  let dflts = gistDefaults(pattern.config, props.gist);
+  let dflts = gistDefaults(pattern.config, props.gist.get);
 
   return (
     <ul className="nav l1">
@@ -44,7 +42,7 @@ const GistConfigurator = props => {
         <PatternOptions
           pattern={props.pattern}
           units={props.units}
-          updateValue={update}
+          updateValue={(name, value) => props.gist.set(value, 'settings', 'options', name)}
           triggerAction={props.triggerAction}
         />
       </li>
@@ -55,27 +53,19 @@ const GistConfigurator = props => {
         <DraftSettings
           pattern={props.pattern}
           units={props.units}
-          updateValue={update}
+          updateValue={(name, value) => props.gist.set(value, 'settings', name)}
           triggerAction={props.triggerAction}
-          language={props.intl.locale}
-          languages={languages[props.intl.locale]}
         />
       </li>
-      <li>
-        <h2>
-          <FormattedMessage id="app.save" />
-        </h2>
-        <DraftActions />
-      </li>
     </ul>
   );
 };
 
-GistConfigurator.propTypes = {
+DraftConfigurator.propTypes = {
   pattern: PropTypes.oneOf(patternList),
   units: PropTypes.oneOf(["metric", "imperial"]).isRequired
 };
 
-GistConfigurator.defaultProps = {};
+DraftConfigurator.defaultProps = {};
 
-export default injectIntl(GistConfigurator);
+export default withGist(DraftConfigurator, {gist: {}, store: "yes"});
diff --git a/packages/components/src/GistConfigurator/stories.js b/packages/components/src/DraftConfigurator/stories.js
similarity index 87%
rename from packages/components/src/GistConfigurator/stories.js
rename to packages/components/src/DraftConfigurator/stories.js
index bfdf9beb59b..25dbca47987 100644
--- a/packages/components/src/GistConfigurator/stories.js
+++ b/packages/components/src/DraftConfigurator/stories.js
@@ -9,14 +9,9 @@ const props = {
     console.log(`Action of type ${type} triggered, data passed is`, data),
   updateValue: (type, data) =>
     console.log(`Update ${type} with new value`, data),
-  gist: {
-    settings: {
-      options: {}
-    }
-  }
 };
 
-storiesOf("GistConfigurator", module)
+storiesOf("DraftConfigurator", module)
   .add("Simon metric", () => (
     <GistConfigurator pattern="simon" {...props} units="metric" />
   ))
diff --git a/packages/components/src/DraftSettings/stories.js b/packages/components/src/DraftSettings/stories.js
deleted file mode 100644
index de352ae483e..00000000000
--- a/packages/components/src/DraftSettings/stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import DraftSettings from ".";
-
-const props = {
-  triggerAction: (type, data) =>
-    console.log(`Action of type ${type} triggered, data passed is`, data),
-  updateValue: (type, data) =>
-    console.log(`Update ${type} with new value`, data),
-  gist: {
-    settings: {
-      options: {}
-    }
-  },
-  languages: {
-    de: "German",
-    en: "English",
-    es: "Spanish",
-    fr: "French",
-    nl: "Dutch"
-  },
-  language: "en"
-};
-
-storiesOf("DraftSettings", module)
-  .add("Simon metric", () => (
-    <DraftSettings pattern="simon" gist={false} units="metric" {...props} />
-  ))
-  .add("Trayvon imperial", () => (
-    <DraftSettings pattern="trayvon" gist={false} units="imperial" {...props} />
-  ));
diff --git a/packages/components/src/Emblem/index.js b/packages/components/src/Emblem/index.js
index d16e9cd8238..3d59cd9a059 100644
--- a/packages/components/src/Emblem/index.js
+++ b/packages/components/src/Emblem/index.js
@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 
 const Emblem = props => (
   <React.Fragment>
-    <span className="emb" style={{color: props.c1}}>{props.t1}</span>
-    <span className="lem" style={{color: props.c2}}>{props.t2}</span>
+    <span className="emb" style={{color: props.c1, fontSize: props.size+"px"}}>{props.t1}</span>
+    <span className="lem" style={{color: props.c2, fontSize: props.size+"px"}}>{props.t2}</span>
   </React.Fragment>
 );
 
@@ -17,11 +17,11 @@ Emblem.propTypes = {
 };
 
 Emblem.defaultProps = {
-  size: 24,
+  size: 36,
   c1: "#111111",
   c2: "#111111",
   t1: "",
-  t2: ""
+  t2: "",
 };
 
 export default Emblem;
diff --git a/packages/components/src/Navbar/index.js b/packages/components/src/Navbar/index.js
new file mode 100644
index 00000000000..7b43fd90d4b
--- /dev/null
+++ b/packages/components/src/Navbar/index.js
@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Logo from "../Logo";
+import Emblem from "../Emblem";
+import { FormattedMessage } from "react-intl";
+
+const Navbar = props => {
+
+  const renderNav = nav => {
+    let title = nav.title || nav.text;
+    let text = typeof nav.text === "string"
+      ? <FormattedMessage id={nav.text} />
+      : nav.text
+    if (nav.type === "component") return nav.component
+    return <a href={nav.href} className="nav" title={nav.title}>{text}</a>
+  }
+
+  return (
+    <header className="navbar">
+      <div>
+        <div className="logo">{props.logo}</div>
+        <div className="emblem">{props.emblem}</div>
+        {props.navs.left.map(nav => renderNav(nav))}
+        <div className="spread" />
+        {props.navs.right.map(nav => renderNav(nav))}
+      </div>
+    </header>
+  );
+};
+
+Navbar.propTypes = {
+  navs: PropTypes.object,
+  logo: PropTypes.node,
+  emblem: PropTypes.node,
+};
+
+Navbar.defaultProps = {
+  navs: {left:[], right: []},
+  logo: <Logo size={32} />,
+  emblem: <Emblem t1="Free" t2="Sewing" size={20} c1="#74c0fc" c2="#e9ecef"/>
+};
+export default Navbar;
diff --git a/packages/components/src/Navbar/stories.js b/packages/components/src/Navbar/stories.js
new file mode 100644
index 00000000000..bc34d79997e
--- /dev/null
+++ b/packages/components/src/Navbar/stories.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Navbar from ".";
+import LanguageIcon from "@material-ui/icons/Translate";
+import DarkModeIcon from "@material-ui/icons/Brightness3";
+import Avatar from '@material-ui/core/Avatar';
+
+const props = {
+  triggerAction: (type, data) =>
+    console.log(`Action of type ${type} triggered, data passed is`, data),
+  updateValue: (type, data) =>
+    console.log(`Update ${type} with new value`, data),
+};
+const navs = {
+  left: [
+    {
+      type: "link",
+      href: "https://freesewing.org/",
+      text: "app.patterns"
+    },
+    {
+      type: "link",
+      href: "https://freesewing.org/",
+      text: "app.docs"
+    },
+    {
+      type: "link",
+      href: "https://freesewing.org/",
+      text: "app.community"
+    },
+  ],
+  right: [
+    {
+      type: "link",
+      href: "https://freesewing.org/",
+      text: "app.account",
+    },
+    {
+      type: "link",
+      href: "https://freesewing.org/",
+      text: <LanguageIcon className="nav-icon"/>,
+      title: 'Languages'
+    },
+    {
+      type: "link",
+      href: "https://freesewing.org/",
+      text: <DarkModeIcon className="nav-icon moon"/>,
+      title: 'Dark mode'
+    },
+  ],
+}
+
+
+storiesOf("Navbar", module)
+  .add("Basic", () => <Navbar navs={navs}/>)
diff --git a/packages/components/src/FormFieldBool/index.js b/packages/components/src/form/FormFieldBool/index.js
similarity index 100%
rename from packages/components/src/FormFieldBool/index.js
rename to packages/components/src/form/FormFieldBool/index.js
diff --git a/packages/components/src/FormFieldBool/stories.js b/packages/components/src/form/FormFieldBool/stories.js
similarity index 92%
rename from packages/components/src/FormFieldBool/stories.js
rename to packages/components/src/form/FormFieldBool/stories.js
index 78d8e402d73..a1d7474647b 100644
--- a/packages/components/src/FormFieldBool/stories.js
+++ b/packages/components/src/form/FormFieldBool/stories.js
@@ -9,7 +9,7 @@ const props = {
 };
 const noyes = ["No", "Yes"];
 
-storiesOf("FormFieldBool", module)
+storiesOf("Low level/Form/FormFieldBool", module)
   .add("Basic", () => <FormFieldBool {...props} />)
   .add("False", () => <FormFieldBool {...props} dflt={false} />)
   .add("True", () => <FormFieldBool {...props} dflt={true} />)
diff --git a/packages/components/src/FormFieldChecks/index.js b/packages/components/src/form/FormFieldChecks/index.js
similarity index 100%
rename from packages/components/src/FormFieldChecks/index.js
rename to packages/components/src/form/FormFieldChecks/index.js
diff --git a/packages/components/src/FormFieldChecks/stories.js b/packages/components/src/form/FormFieldChecks/stories.js
similarity index 92%
rename from packages/components/src/FormFieldChecks/stories.js
rename to packages/components/src/form/FormFieldChecks/stories.js
index 0a523a0dad6..57081652161 100644
--- a/packages/components/src/FormFieldChecks/stories.js
+++ b/packages/components/src/form/FormFieldChecks/stories.js
@@ -14,7 +14,7 @@ const props = {
   dflt: []
 };
 
-storiesOf("FormFieldChecks", module)
+storiesOf("Low level/Form/FormFieldChecks", module)
   .add("Basic", () => <FormFieldChecks {...props} />)
   .add("Apple", () => <FormFieldChecks {...props} dflt={["apple"]} />)
   .add("Banana", () => <FormFieldChecks {...props} dflt={["banana"]} />)
diff --git a/packages/components/src/FormFieldList/index.js b/packages/components/src/form/FormFieldList/index.js
similarity index 100%
rename from packages/components/src/FormFieldList/index.js
rename to packages/components/src/form/FormFieldList/index.js
diff --git a/packages/components/src/FormFieldList/stories.js b/packages/components/src/form/FormFieldList/stories.js
similarity index 92%
rename from packages/components/src/FormFieldList/stories.js
rename to packages/components/src/form/FormFieldList/stories.js
index c5c14563152..a9595144d07 100644
--- a/packages/components/src/FormFieldList/stories.js
+++ b/packages/components/src/form/FormFieldList/stories.js
@@ -13,7 +13,7 @@ const props = {
   }
 };
 
-storiesOf("FormFieldList", module)
+storiesOf("Low level/Form/FormFieldList", module)
   .add("Basic", () => <FormFieldList {...props} />)
   .add("Apple", () => <FormFieldList {...props} dflt="apple" />)
   .add("Banana", () => <FormFieldList {...props} dflt="banana" />)
diff --git a/packages/components/src/FormFieldSlider/index.js b/packages/components/src/form/FormFieldSlider/index.js
similarity index 100%
rename from packages/components/src/FormFieldSlider/index.js
rename to packages/components/src/form/FormFieldSlider/index.js
diff --git a/packages/components/src/FormFieldSlider/stories.js b/packages/components/src/form/FormFieldSlider/stories.js
similarity index 91%
rename from packages/components/src/FormFieldSlider/stories.js
rename to packages/components/src/form/FormFieldSlider/stories.js
index 9ea40d50460..e632bf98f02 100644
--- a/packages/components/src/FormFieldSlider/stories.js
+++ b/packages/components/src/form/FormFieldSlider/stories.js
@@ -8,7 +8,7 @@ const props = {
   name: "exampleSliderOption"
 };
 
-storiesOf("FormFieldSlider", module)
+storiesOf("Low level/Form/FormFieldSlider", module)
   .add("Basic", () => <FormFieldSlider {...props} />)
   .add("From 1 to 10", () => <FormFieldSlider {...props} min={1} max={10} />)
   .add("Step: 1", () => (
diff --git a/packages/components/src/utils/index.js b/packages/components/src/utils/index.js
index c69c6fa3a0d..03ad71f98ae 100644
--- a/packages/components/src/utils/index.js
+++ b/packages/components/src/utils/index.js
@@ -159,3 +159,28 @@ export const optionDefault = option => {
       return option[type];
   }
 };
+
+export const storage = {
+  set: (key, value, raw) => {
+    if (typeof localStorage === "undefined")
+      throw(new Error("No localStorage support. And we need it. Bailing out."));
+
+    const _key = "fs_" + key;
+
+    if (typeof value === "undefined" || value === null)
+      localStorage.removeItem(_key);
+    else localStorage.setItem(_key, raw ? value : JSON.stringify(value));
+
+    return value;
+  },
+  get: (key, raw) => {
+    if (typeof localStorage === "undefined")
+      throw(new Error("No localStorage support. And we need it. Bailing out."));
+
+    const value = localStorage.getItem("fs_"+key);
+
+    return raw ? value : JSON.parse(value);
+  }
+}
+
+export const cloneObject = src => Object.assign({}, src);
diff --git a/packages/components/src/withGist/index.js b/packages/components/src/withGist/index.js
new file mode 100644
index 00000000000..16adc3bbdb8
--- /dev/null
+++ b/packages/components/src/withGist/index.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { storage, cloneObject } from "../utils";
+
+const withGist = (WrappedComponent, settings={gist:{}, store:false}) => {
+
+	return class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.update = this.update.bind(this);
+      this.state = settings.gist || {};
+    }
+
+    update(value, l1 = false, l2 = false, l3 = false) {
+      console.log('update', value, l1, l2, l3, this.state);
+      if (!l1) return;
+      let gist = this.state;
+
+      if(typeof gist === "undefined") gist = {};
+      if(l1 && typeof gist[l1] === "undefined") gist[l1] = {};
+      if(l2 && typeof gist[l1][l2] === "undefined") gist[l1][l2] = {};
+      if(l3 && typeof gist[l1][l2][l3] === "undefined") gist[l1][l2][l3] = {};
+
+      if (l3) gist[l1][l2][l3] = value;
+      else if (l2) gist[l1][l2] = value;
+      else if (l1) gist[l1] = value;
+      this.setState(gist, () => {
+        if (settings.store) storage.set(settings.store, this.state);
+        console.log(this.state);
+      });
+
+    }
+
+    render() {
+      return <WrappedComponent gist={{get: this.state.gist, set: this.update}} {...this.props} />;
+    }
+  };
+}
+
+export default withGist;
diff --git a/packages/css-theme/src/_components.scss b/packages/css-theme/src/_components.scss
index a3c0855b858..7ea69a572c6 100644
--- a/packages/css-theme/src/_components.scss
+++ b/packages/css-theme/src/_components.scss
@@ -1,3 +1,3 @@
 @import "components/emblem";
-@import "components/pattern-option";
-@import "components/pattern-options";
+@import "components/navbar";
+@import "components/draft-configurator";
diff --git a/packages/css-theme/src/_variables.scss b/packages/css-theme/src/_variables.scss
index c372c9d773e..d391f29672a 100644
--- a/packages/css-theme/src/_variables.scss
+++ b/packages/css-theme/src/_variables.scss
@@ -1,6 +1,13 @@
+$fc-text-light: $oc-gray-9;
+$fc-text-dark: $oc-gray-0;
 $fc-bg-light: $oc-gray-0;
 $fc-bg-dark: $oc-gray-9;
 $fc-notice-light: $oc-yellow-7;
 $fc-notice-dark: $oc-lime-3;
 $fc-hoverbg-light: $oc-gray-1;
 $fc-hoverbg-dark: $oc-gray-8;
+$fc-accentbg-light: $oc-teal-5;
+$fc-accentbg-dark: $oc-teal-8;
+$fc-link-light: $oc-teal-8;
+$fc-link-dark: $oc-blue-3;
+
diff --git a/packages/css-theme/src/components/_pattern-options.scss b/packages/css-theme/src/components/_draft-configurator.scss
similarity index 96%
rename from packages/css-theme/src/components/_pattern-options.scss
rename to packages/css-theme/src/components/_draft-configurator.scss
index d71e749707e..e15a27f538e 100644
--- a/packages/css-theme/src/components/_pattern-options.scss
+++ b/packages/css-theme/src/components/_draft-configurator.scss
@@ -65,7 +65,8 @@ svg.icon-col-exp.expanded {
 }
 
 ul.nav.l2 div.col-exp,
-ul.nav.l3 div.col-exp {
+ul.nav.l3 div.col-exp,
+ul.nav.l4 div.col-exp {
   margin: 0 27px;
 }
 
diff --git a/packages/css-theme/src/components/_navbar.scss b/packages/css-theme/src/components/_navbar.scss
new file mode 100644
index 00000000000..c69124066fd
--- /dev/null
+++ b/packages/css-theme/src/components/_navbar.scss
@@ -0,0 +1,65 @@
+header.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 64px;
+  width: calc(100% - 52px);
+  margin: 0;
+  padding: 0 26px;
+  background: $fc-bg-dark;
+
+  div.logo {
+    height: 64px;
+    padding: 0;
+    margin: 0;
+    margin-right: 13px;
+    display: flex;
+    align-items: center;
+    color: $oc-gray-2;
+  }
+  div.emblem {
+    margin-right: 26px;
+  }
+  div.spread { flex-grow: 1}
+  a.nav,
+  button {
+    @include title-font;
+    margin: 0;
+    padding: 0 13px;
+    height: 60px;
+    color: $fc-text-dark;
+    border: 0;
+    line-height: 64px;
+    border-bottom: 4px solid $fc-bg-dark;
+    font-size: 18px;
+    text-decoration: none;
+    transition: color 0.2s ease, border-color 0.2s ease-in-out;
+    background:none;
+  }
+  button {
+    /* For buttons, border does not count for height */
+    height: 64px;
+  }
+  button:hover,
+  a.nav:hover {
+    cursor: pointer;
+    color: $fc-link-dark;
+    border-color: $fc-link-dark;
+  }
+  a.nav.active {
+    border-color: $fc-link-dark;
+  }
+  svg.nav-icon {
+    margin-right: 5px;
+    margin-bottom: -6px;
+  }
+  svg.nav-icon.moon {
+    transform: rotate(26deg);
+  }
+}
+
+header.navbar > div {
+  display: flex;
+  align-items: center;
+}
+
diff --git a/packages/css-theme/src/components/_pattern-option.scss b/packages/css-theme/src/components/_pattern-option.scss
deleted file mode 100644
index b02d5c31eb8..00000000000
--- a/packages/css-theme/src/components/_pattern-option.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-div.pattern-option {
-  .po-custom {
-    color: $fc-notice-light;
-  }
-  label.po-list-item:hover {
-    background: $fc-hoverbg-light;
-  }
-}
-
-body.dark {
-  div.pattern-option {
-    .po-custom {
-      color: $fc-notice-dark;
-    }
-    label.po-list-item:hover {
-      background: $fc-hoverbg-dark;
-    }
-  }
-}
diff --git a/packages/workbench/src/utils/storage.js b/packages/workbench/src/utils/storage.js
index 56c20f30817..2af82e3f659 100644
--- a/packages/workbench/src/utils/storage.js
+++ b/packages/workbench/src/utils/storage.js
@@ -1,5 +1,5 @@
 export default class Storage {
-  set(key, value, isJson) {
+  set(key, value, raw = false) {
     if (typeof localStorage === "undefined") {
       return;
     }
@@ -9,13 +9,13 @@ export default class Storage {
     if (typeof value === "undefined" || value === null) {
       localStorage.removeItem(_key);
     } else {
-      localStorage.setItem(_key, isJson ? JSON.stringify(value) : value);
+      localStorage.setItem(_key, raw ? value : JSON.stringify(value));
     }
 
     return value;
   }
 
-  get(key, isJson) {
+  get(key, raw = false) {
     if (typeof localStorage === "undefined") {
       return;
     }
@@ -24,6 +24,6 @@ export default class Storage {
 
     const value = localStorage.getItem(_key);
 
-    return isJson ? JSON.parse(value) : value;
+    return raw ? value : JSON.parse(value);
   }
 }