diff --git a/packages/components/package.json b/packages/components/package.json
index 2ddf941439e..a7b60f319c2 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -31,6 +31,9 @@
     "@freesewing/pattern-info": "^2.0.0-beta.3",
     "@freesewing/mui-theme": "^2.0.0-beta.3",
     "@freesewing/css-theme": "^2.0.0-beta.3",
+    "@freesewing/core": "^2.0.0-beta.3",
+    "@freesewing/examples": "^2.0.0-beta.3",
+    "@freesewing/rendertest": "^2.0.0-beta.3",
     "typeface-roboto-condensed": "latest",
     "@freesewing/i18n": "^2.0.0-beta.3",
     "@freesewing/utils": "^2.0.0-beta.3",
diff --git a/packages/components/src/Example/index.js b/packages/components/src/Example/index.js
new file mode 100644
index 00000000000..946c1a3ea66
--- /dev/null
+++ b/packages/components/src/Example/index.js
@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import examples from "@freesewing/examples";
+import rendertest from "@freesewing/rendertest";
+import i18nPlugin from "@freesewing/plugin-i18n";
+import Draft from "../Draft";
+import Design from "../Workbench/Design";
+import { FormattedMessage } from "react-intl";
+
+const Example = props => {
+  const [design, setDesign] = useState(false);
+  const [focus, setFocus] = useState(null);
+
+  const raiseEvent = (type, data) => {
+    if (type === "clearFocusAll") return setFocus(null);
+    let f = {};
+    if (focus !== null) f = { ...focus };
+    if (typeof f[data.part] === "undefined")
+      f[data.part] = { paths: [], points: [], coords: [] };
+    if (type === "point") f[data.part].points.push(data.name);
+    else if (type === "path") f[data.part].paths.push(data.name);
+    else if (type === "coords") f[data.part].coords.push(data.coords);
+    else if (type === "clearFocus") {
+      let i = focus[data.part][data.type].indexOf(data.name);
+      f[data.part][data.type].splice(i, 1);
+    }
+
+    setFocus(f);
+  };
+
+  let focusCount = 0;
+  if (focus !== null) {
+    for (let p of Object.keys(focus)) {
+      for (let i in focus[p].points) focusCount++;
+      for (let i in focus[p].paths) focusCount++;
+      for (let i in focus[p].coords) focusCount++;
+    }
+  }
+
+  const patterns = {
+    examples,
+    rendertest
+  };
+  const settings = { options: { ...props.options } };
+  if (props.part !== "") settings.only = [props.part];
+  const pattern = new patterns[props.pattern](settings);
+
+  const styles = {
+    paragraph: {
+      padding: "0 1rem"
+    }
+  };
+
+  pattern.draft();
+  const patternProps = pattern.getRenderProps();
+  return (
+    <figure className={design ? "design" : ""}>
+      <Draft
+        {...patternProps}
+        design={design}
+        focus={focus}
+        raiseEvent={raiseEvent}
+      />
+      <figcaption>
+        {props.caption}&nbsp;|&nbsp;
+        {design ? (
+          <React.Fragment>
+            <FormattedMessage id="cfp.designModeIsOn" />
+            &nbsp; (
+            <a href="#logo" onClick={() => setDesign(false)}>
+              <FormattedMessage id="cfp.turnOff" />
+            </a>
+            )
+            {focusCount > 0 ? (
+              <React.Fragment>
+                &ensp; (
+                <a
+                  href="#logo"
+                  onClick={() => raiseEvent("clearFocusAll", null)}
+                >
+                  <FormattedMessage id="app.reset" />
+                </a>
+                )
+              </React.Fragment>
+            ) : null}
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <FormattedMessage id="cfp.designModeIsOff" />
+            &nbsp; (
+            <a href="#logo" onClick={() => setDesign(true)}>
+              <FormattedMessage id="cfp.turnOn" />
+            </a>
+            )
+          </React.Fragment>
+        )}
+        {design ? (
+          <div className="design">
+            <Design
+              focus={focus}
+              design={design}
+              raiseEvent={raiseEvent}
+              parts={patternProps.parts}
+            />
+          </div>
+        ) : null}
+      </figcaption>
+    </figure>
+  );
+};
+
+Example.propTypes = {
+  pattern: PropTypes.string,
+  design: PropTypes.bool,
+  caption: PropTypes.string,
+  part: PropTypes.string,
+  options: PropTypes.obj
+};
+
+Example.defaultProps = {
+  pattern: "examples",
+  design: false,
+  caption: "",
+  options: {},
+  part: ""
+};
+
+export default Example;
diff --git a/packages/components/src/Navbar/index.js b/packages/components/src/Navbar/index.js
index 69e0f9dd7c5..bd472e59d71 100644
--- a/packages/components/src/Navbar/index.js
+++ b/packages/components/src/Navbar/index.js
@@ -55,7 +55,6 @@ const Navbar = props => {
       <a {...homeProps}>{props.emblem}</a>
     </div>
   );
-  console.log(props);
   return (
     <header className="navbar">
       <div>
diff --git a/packages/components/src/Workbench/Design/index.js b/packages/components/src/Workbench/Design/index.js
index 2951d184583..5fb198f58e7 100644
--- a/packages/components/src/Workbench/Design/index.js
+++ b/packages/components/src/Workbench/Design/index.js
@@ -132,10 +132,10 @@ const Design = props => {
     container: {
       padding: "0 1rem"
     },
-    h3: {
+    h5: {
       margin: "0.5rem 0"
     },
-    h4: {
+    h6: {
       margin: "0.25rem 0 0 0.5rem"
     },
     ul: {
@@ -152,21 +152,21 @@ const Design = props => {
   let info = [];
   for (let part of Object.keys(props.focus)) {
     info.push(
-      <h3 key={"part-" + part} style={styles.h3}>
+      <h5 key={"part-" + part} style={styles.h5}>
         parts.<b>{part}</b>
-      </h3>
+      </h5>
     );
     for (let i in props.focus[part].paths) {
       let name = props.focus[part].paths[i];
       let path = props.parts[part].paths[name];
       info.push(
-        <h4
+        <h6
           key={"patitle-" + name}
-          style={styles.h4}
+          style={styles.h6}
           className={"path c" + (i % 4)}
         >
           path.<b>{name}</b>
-        </h4>
+        </h6>
       );
       info.push(
         <ul className="links" key={"ops-" + name} style={styles.ul}>
@@ -183,13 +183,13 @@ const Design = props => {
       let name = props.focus[part].points[i];
       let point = props.parts[part].points[name];
       info.push(
-        <h4
+        <h6
           key={"potitle-" + name}
-          style={styles.h4}
+          style={styles.h6}
           className={"point c" + (i % 4)}
         >
           point.<b>{name}</b>
-        </h4>
+        </h6>
       );
       info.push(
         <ul className="links" key={"pdata-" + name} style={styles.ul}>
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 051d1f05c51..e8bae3090c0 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -2,6 +2,7 @@ export { default as Blockquote } from "./Blockquote";
 export { default as Draft } from "./Draft";
 export { default as DraftConfigurator } from "./DraftConfigurator";
 export { default as Emblem } from "./Emblem";
+export { default as Example } from "./Example";
 export { default as Footer } from "./Footer";
 export { default as Icon } from "./Icon";
 export { default as Logo } from "./Logo";