diff --git a/packages/components/src/DraftActions/index.js b/packages/components/src/DraftActions/index.js
new file mode 100644
index 00000000000..464d2511488
--- /dev/null
+++ b/packages/components/src/DraftActions/index.js
@@ -0,0 +1,89 @@
+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/DraftActions/stories.js b/packages/components/src/DraftActions/stories.js
new file mode 100644
index 00000000000..6b39d8c0c0e
--- /dev/null
+++ b/packages/components/src/DraftActions/stories.js
@@ -0,0 +1,31 @@
+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("DraftActions", 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/DraftSettingLanguage/index.js b/packages/components/src/DraftSettingLanguage/index.js
index 7a4ebba385e..eed59874f81 100644
--- a/packages/components/src/DraftSettingLanguage/index.js
+++ b/packages/components/src/DraftSettingLanguage/index.js
@@ -5,6 +5,7 @@ import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingLanguage = props => {
   const [value, setValue] = useState(props.dflt);
+  const [expanded, setExpanded] = useState(false);
 
   const update = (name, newValue, evt) => {
     props.updateValue(props.name, newValue);
@@ -16,8 +17,22 @@ const DraftSettingLanguage = props => {
     props.updateValue(props.name, props.dflt);
   };
 
+  const toggleExpanded = () => setExpanded(!expanded);
+
+  const option = (
+    <FormFieldList
+      name={props.name}
+      value={value}
+      dflt={props.dflt}
+      onChange={update}
+      label={"po-list-" + props.name}
+      updateValue={update}
+      list={props.languages}
+    />
+  );
+
   return (
-    <div className={"pattern-option list"}>
+    <li>
       <OptionPreamble
         dflt={props.dflt}
         value={value}
@@ -26,23 +41,17 @@ const DraftSettingLanguage = props => {
         id={"po-list-" + props.name}
         displayValue={props.languages[value]}
         reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
         showHelp={() =>
           props.triggerAction("showHelp", {
             type: "draftSetting",
             value: props.name
           })
         }
+        option={option}
       />
-      <FormFieldList
-        name={props.name}
-        value={value}
-        dflt={props.dflt}
-        onChange={update}
-        label={"po-list-" + props.name}
-        updateValue={update}
-        list={props.languages}
-      />
-    </div>
+    </li>
   );
 };
 
diff --git a/packages/components/src/DraftSettingOnly/index.js b/packages/components/src/DraftSettingOnly/index.js
index 81cfef1c500..be348937932 100644
--- a/packages/components/src/DraftSettingOnly/index.js
+++ b/packages/components/src/DraftSettingOnly/index.js
@@ -8,6 +8,7 @@ import OptionPreamble from "../OptionPreamble";
 const DraftSettingOnly = props => {
   const [value, setValue] = useState(props.dflt);
   const [parts, setParts] = useState([]);
+  const [expanded, setExpanded] = useState(false);
 
   const update = (name, newValue, evt) => {
     setValue(newValue);
@@ -26,38 +27,28 @@ const DraftSettingOnly = props => {
     setParts(newValue);
   };
 
+  const toggleExpanded = () => setExpanded(!expanded);
+
   const list = {
     dflt: props.labels.dflt,
     custom: props.labels.custom
   };
 
-  return (
-    <div className={"pattern-option list"}>
-      <OptionPreamble
-        dflt="dflt"
-        value={value}
-        desc={props.desc}
-        title={props.title}
-        id="po-list-only"
-        displayValue={props.labels[value]}
-        reset={reset}
-        showHelp={() =>
-          props.triggerAction("showHelp", {
-            type: "draftSetting",
-            value: "only"
-          })
-        }
-      />
-      <FormFieldList
-        name="only"
-        value={value}
-        dflt={props.dflt}
-        onChange={update}
-        label="po-list-only"
-        updateValue={update}
-        list={list}
-      />
-      {value === "custom" ? (
+  let option = (
+    <FormFieldList
+      name="only"
+      value={value}
+      dflt={props.dflt}
+      onChange={update}
+      label="po-list-only"
+      updateValue={update}
+      list={list}
+    />
+  );
+  if (value === "custom")
+    option = (
+      <React.Fragment>
+        {option}
         <FormFieldChecks
           checks={props.parts}
           name="parts"
@@ -68,10 +59,30 @@ const DraftSettingOnly = props => {
           updateValue={updateCustom}
           list={list}
         />
-      ) : (
-        ""
-      )}
-    </div>
+      </React.Fragment>
+    );
+
+  return (
+    <li>
+      <OptionPreamble
+        dflt="dflt"
+        value={value}
+        desc={props.desc}
+        title={props.title}
+        id="po-list-only"
+        displayValue={props.labels[value]}
+        reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
+        showHelp={() =>
+          props.triggerAction("showHelp", {
+            type: "draftSetting",
+            value: "only"
+          })
+        }
+        option={option}
+      />
+    </li>
   );
 };
 
diff --git a/packages/components/src/DraftSettingSa/index.js b/packages/components/src/DraftSettingSa/index.js
index 015cd308bb8..2fc06657c8d 100644
--- a/packages/components/src/DraftSettingSa/index.js
+++ b/packages/components/src/DraftSettingSa/index.js
@@ -9,6 +9,7 @@ const DraftSettingSa = props => {
   const [value, setValue] = useState("dflt");
   const [saValue, setSaValue] = useState(defaultSa[props.units]);
   const [customValue, setCustomValue] = useState(10);
+  const [expanded, setExpanded] = useState(false);
 
   const update = (name, newValue, evt) => {
     switch (newValue) {
@@ -35,6 +36,7 @@ const DraftSettingSa = props => {
     setSaValue(defaultSa[props.units]);
     props.updateValue("sa", defaultSa[props.units]);
   };
+  const toggleExpanded = () => setExpanded(!expanded);
 
   const updateCustom = (name, newValue, evt) => {
     newValue = roundMm(newValue);
@@ -56,33 +58,21 @@ const DraftSettingSa = props => {
     custom: props.labels.custom
   };
 
-  return (
-    <div className={"pattern-option list"}>
-      <OptionPreamble
-        dflt={"dflt"}
-        value={value}
-        desc={props.desc}
-        title={props.title}
-        id="po-list-sa"
-        displayValue={formatMm(saValue, props.units)}
-        reset={reset}
-        showHelp={() =>
-          props.triggerAction("showHelp", {
-            type: "draftSetting",
-            value: "sa"
-          })
-        }
-      />
-      <FormFieldList
-        name="sa"
-        value={value}
-        dflt={"dflt"}
-        onChange={update}
-        label="po-bool-sa"
-        updateValue={update}
-        list={list}
-      />
-      {value === "custom" ? (
+  let option = (
+    <FormFieldList
+      name="sa"
+      value={value}
+      dflt={"dflt"}
+      onChange={update}
+      label="po-bool-sa"
+      updateValue={update}
+      list={list}
+    />
+  );
+  if (value === "custom")
+    option = (
+      <React.Fragment>
+        {option}
         <FormFieldSlider
           name="customSa"
           value={saValue}
@@ -93,10 +83,30 @@ const DraftSettingSa = props => {
           max={25.4}
           step={sliderStep[props.units]}
         />
-      ) : (
-        ""
-      )}
-    </div>
+      </React.Fragment>
+    );
+
+  return (
+    <li>
+      <OptionPreamble
+        dflt={"dflt"}
+        value={value}
+        desc={props.desc}
+        title={props.title}
+        id="po-list-sa"
+        displayValue={formatMm(saValue, props.units)}
+        reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
+        showHelp={() =>
+          props.triggerAction("showHelp", {
+            type: "draftSetting",
+            value: "sa"
+          })
+        }
+        option={option}
+      />
+    </li>
   );
 };
 
diff --git a/packages/components/src/DraftSettingUnits/index.js b/packages/components/src/DraftSettingUnits/index.js
index f886e5a86a9..6a47603f324 100644
--- a/packages/components/src/DraftSettingUnits/index.js
+++ b/packages/components/src/DraftSettingUnits/index.js
@@ -4,6 +4,7 @@ import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingUnits = props => {
   const [value, setValue] = useState(props.dflt);
+  const [expanded, setExpanded] = useState(false);
 
   const update = (name, newValue, evt) => {
     props.updateValue(props.name, newValue);
@@ -15,8 +16,22 @@ const DraftSettingUnits = props => {
     props.updateValue(props.name, props.dflt);
   };
 
+  const toggleExpanded = () => setExpanded(!expanded);
+
+  let option = (
+    <FormFieldList
+      name="units"
+      value={value}
+      dflt={props.dflt}
+      onChange={update}
+      label="po-bool-units"
+      updateValue={update}
+      list={props.list}
+    />
+  );
+
   return (
-    <div className={"pattern-option list"}>
+    <li>
       <OptionPreamble
         dflt={props.dflt}
         value={value}
@@ -25,23 +40,17 @@ const DraftSettingUnits = props => {
         id="po-list-units"
         displayValue={props.list[value]}
         reset={reset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
         showHelp={() =>
           props.triggerAction("showHelp", {
             type: "draftSetting",
             value: "units"
           })
         }
+        option={option}
       />
-      <FormFieldList
-        name="units"
-        value={value}
-        dflt={props.dflt}
-        onChange={update}
-        label="po-bool-units"
-        updateValue={update}
-        list={props.list}
-      />
-    </div>
+    </li>
   );
 };
 
diff --git a/packages/components/src/DraftSettings/index.js b/packages/components/src/DraftSettings/index.js
index dc101d450c9..7c42a9a0eb7 100644
--- a/packages/components/src/DraftSettings/index.js
+++ b/packages/components/src/DraftSettings/index.js
@@ -4,9 +4,6 @@ import { gistDefaults } from "../utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
 import List from "@material-ui/core/List";
-import ListSubheader from "@material-ui/core/ListSubheader";
-import CollapsedIcon from "@material-ui/icons/KeyboardArrowDown";
-import ExpandedIcon from "@material-ui/icons/ArrowRight";
 import DraftSettingSa from "../DraftSettingSa";
 import DraftSettingMargin from "../DraftSettingMargin";
 import DraftSettingComplete from "../DraftSettingComplete";
@@ -14,6 +11,7 @@ import DraftSettingPaperless from "../DraftSettingPaperless";
 import DraftSettingUnits from "../DraftSettingUnits";
 import DraftSettingLanguage from "../DraftSettingLanguage";
 import DraftSettingOnly from "../DraftSettingOnly";
+import DownIcon from "@material-ui/icons/KeyboardArrowDown";
 
 const DraftSettings = props => {
   const [expanded, setExpanded] = useState([]);
@@ -104,27 +102,24 @@ const DraftSettings = props => {
       {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 key={group + "-ghead"}>
-            <ListSubheader
-              className="optiongroup-heading"
-              className={
-                (open ? "expanded" : "collapsed") + " optiongroup-heading"
-              }
-              onClick={() => toggleGroup(group)}
+          <React.Fragment>
+            <li
+              className={open ? "expanded" : "collapsed"}
+              key={group + "-ghead"}
             >
-              <h3>
-                {open ? (
-                  <CollapsedIcon className="collapse-icon" />
-                ) : (
-                  <ExpandedIcon className="collapse-icon" />
-                )}
+              <h3 onClick={() => toggleGroup(group)}>
+                <DownIcon
+                  className={
+                    "icon-col-exp " + (open ? "expanded" : "collapsed")
+                  }
+                />
                 <FormattedMessage id={"optiongroups." + group} />
               </h3>
-            </ListSubheader>
-            {expanded.indexOf(group) === -1
-              ? null
-              : groups[group].map(component => component)}
+            </li>
+            {children}
           </React.Fragment>
         );
       })}
diff --git a/packages/components/src/GistConfigurator/index.js b/packages/components/src/GistConfigurator/index.js
index 9ee3397d412..d5146d97231 100644
--- a/packages/components/src/GistConfigurator/index.js
+++ b/packages/components/src/GistConfigurator/index.js
@@ -13,6 +13,7 @@ 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";
 
 const GistConfigurator = props => {
   console.log(languages);
@@ -60,6 +61,12 @@ const GistConfigurator = props => {
           languages={languages[props.intl.locale]}
         />
       </li>
+      <li>
+        <h2>
+          <FormattedMessage id="app.save" />
+        </h2>
+        <DraftActions />
+      </li>
     </ul>
   );
 };
diff --git a/packages/components/src/PatternOptions/index.js b/packages/components/src/PatternOptions/index.js
index 90a7d6cf7bd..ff6217ca3b1 100644
--- a/packages/components/src/PatternOptions/index.js
+++ b/packages/components/src/PatternOptions/index.js
@@ -9,7 +9,6 @@ import { optionType, defaultGist, gistDefaults } from "../utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
 import List from "@material-ui/core/List";
-import ListSubheader from "@material-ui/core/ListSubheader";
 import DownIcon from "@material-ui/icons/KeyboardArrowDown";
 
 const PatternOptions = props => {
@@ -48,7 +47,9 @@ const PatternOptions = props => {
     output.push(
       <li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
         <h3 onClick={() => toggleGroup(group)}>
-          <DownIcon className={"icon-col-exp "+ (open ? "expanded" : "collapsed")}/>
+          <DownIcon
+            className={"icon-col-exp " + (open ? "expanded" : "collapsed")}
+          />
           <FormattedMessage id={"optiongroups." + group} />
         </h3>
         {children}
diff --git a/packages/css-theme/src/components/_pattern-options.scss b/packages/css-theme/src/components/_pattern-options.scss
index a06f1abf776..d71e749707e 100644
--- a/packages/css-theme/src/components/_pattern-options.scss
+++ b/packages/css-theme/src/components/_pattern-options.scss
@@ -40,7 +40,7 @@ ul.nav span.custom {
   font-weight: bold;
 }
 .col-exp {
-  transition: max-height 0.3s ease-in-out, opacity 0.2s ease 0.2s;
+  transition: max-height 0.2s ease-in-out, opacity 0.1s cubic-bezier(.55,.06,.68,.19) 0.05s;
 }
 
 .col-exp.expanded {
@@ -64,6 +64,7 @@ svg.icon-col-exp.expanded {
   opacity: 1;
 }
 
+ul.nav.l2 div.col-exp,
 ul.nav.l3 div.col-exp {
   margin: 0 27px;
 }