diff --git a/.directory b/.directory
index a60bc5dc81bb0b60fe2428a29d5bfc1e907b4fd9..0f5e886848c102d211b009d6a77577d346339e8b 100644
--- a/.directory
+++ b/.directory
@@ -1,6 +1,3 @@
 [Dolphin]
-Timestamp=2019,4,9,16,57,35
+Timestamp=2019,4,18,13,0,59
 Version=3
-
-[Settings]
-HiddenFilesShown=true
diff --git a/editors/default/package.json b/editors/default/package.json
index c6d39e4583aa7caf70584045a0c490f3534a8d86..53882e300d68438ca54c8128f2a5e74259fc6b54 100644
--- a/editors/default/package.json
+++ b/editors/default/package.json
@@ -9,7 +9,8 @@
     "wax-prosemirror-core": "0.0.1",
     "wax-prosemirror-schema": "0.0.1",
     "wax-prosemirror-themes": "0.0.1",
-    "wax-prosemirror-layouts": "0.0.1"
+    "wax-prosemirror-layouts": "0.0.1",
+    "wax-prosemirror-components": "0.0.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
diff --git a/editors/default/src/Default.js b/editors/default/src/Default.js
index 7289f7c1a7b21ad2052490059d976034d60cfd38..ab2c492462d0d54ea9de5badeb9a94822db9115b 100644
--- a/editors/default/src/Default.js
+++ b/editors/default/src/Default.js
@@ -1,6 +1,9 @@
 import React, { Component } from "react";
+import styled from "styled-components";
+
 import { Wax, createSchema } from "wax-prosemirror-core";
 import { defaultSchema } from "wax-prosemirror-schema";
+import { MainMenuBar } from "wax-prosemirror-components";
 import "wax-prosemirror-layouts/defaultLayout.css";
 import "wax-prosemirror-themes/defaultTheme.css";
 
@@ -11,6 +14,19 @@ const options = {
   schema: new createSchema(defaultSchema)
 };
 
+const MainEditor = styled.div`
+  ${"" /* style override*/};
+`;
+
+const menuItems = [
+  "undo",
+  "redo",
+  "strong",
+  "image",
+  "table",
+  "tableDropDownOptions"
+];
+
 class Default extends Component {
   render() {
     return (
@@ -21,6 +37,12 @@ class Default extends Component {
         theme="default"
         layout="default"
         debug
+        renderLayout={({ editor, ...props }) => (
+          <React.Fragment>
+            <MainMenuBar menuItems={menuItems} {...props} />
+            <MainEditor className="main-editor">{editor}</MainEditor>
+          </React.Fragment>
+        )}
       />
     );
   }
diff --git a/wax-prosemirror-components/menu/HeadingsDropDown.js b/wax-prosemirror-components/components/HeadingsDropDown.js
similarity index 100%
rename from wax-prosemirror-components/menu/HeadingsDropDown.js
rename to wax-prosemirror-components/components/HeadingsDropDown.js
diff --git a/wax-prosemirror-components/menu/ImageUpload.js b/wax-prosemirror-components/components/ImageUpload.js
similarity index 100%
rename from wax-prosemirror-components/menu/ImageUpload.js
rename to wax-prosemirror-components/components/ImageUpload.js
diff --git a/wax-prosemirror-components/menu/TableDropDown.js b/wax-prosemirror-components/components/TableDropDown.js
similarity index 100%
rename from wax-prosemirror-components/menu/TableDropDown.js
rename to wax-prosemirror-components/components/TableDropDown.js
diff --git a/wax-prosemirror-components/menu/Button.js b/wax-prosemirror-components/components/button/Button.js
similarity index 93%
rename from wax-prosemirror-components/menu/Button.js
rename to wax-prosemirror-components/components/button/Button.js
index ea014794a27be603bb683eac7405f8dfa0cfce0d..de880ccd8b8f58f6e6f37838206cc4177ebd0cdb 100644
--- a/wax-prosemirror-components/menu/Button.js
+++ b/wax-prosemirror-components/components/button/Button.js
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import classnames from "classnames";
-import classes from "../../css/MenuBar.css";
+import classes from "./button.css";
 
 const ButtonStyled = styled.button`
   display: ${props => (props.select ? "inline" : "none")};
diff --git a/wax-prosemirror-components/menu/MenuBar.css b/wax-prosemirror-components/components/button/button.css
similarity index 76%
rename from wax-prosemirror-components/menu/MenuBar.css
rename to wax-prosemirror-components/components/button/button.css
index 216538ea6f7b4dfedfa1eb4de66bde8f24af7da0..9f6b6ef1b7fa7e840ed446507042761457a8b50c 100644
--- a/wax-prosemirror-components/menu/MenuBar.css
+++ b/wax-prosemirror-components/components/button/button.css
@@ -1,10 +1,3 @@
-.main-toolbar {
-  position: fixed;
-  display: flex;
-  margin: 0;
-  z-index: 999;
-}
-
 button {
   background: #fff;
   border: none;
diff --git a/wax-prosemirror-components/icons.js b/wax-prosemirror-components/icons/icons.js
similarity index 100%
rename from wax-prosemirror-components/icons.js
rename to wax-prosemirror-components/icons/icons.js
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6bdee14c2b1d4ebacdc0f40b1da2a18f2c771b2c 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -0,0 +1 @@
+export { default as MainMenuBar } from "./mainMenuBar/MainMenuBar";
diff --git a/wax-prosemirror-components/menu/MainMenuBar.js b/wax-prosemirror-components/mainMenuBar/MainMenuBar.js
similarity index 89%
rename from wax-prosemirror-components/menu/MainMenuBar.js
rename to wax-prosemirror-components/mainMenuBar/MainMenuBar.js
index ad8102fdbad56cd71c915e01b114052632befa7a..b828b56bea457c5b475500220ba465d27f71b0b4 100644
--- a/wax-prosemirror-components/menu/MainMenuBar.js
+++ b/wax-prosemirror-components/mainMenuBar/MainMenuBar.js
@@ -1,7 +1,7 @@
 import React from "react";
 import map from "lodash/map";
-import classes from "../../css/MenuBar.css";
-import menu from "../../config/menu";
+import classes from "./MenuBar.css";
+import menu from "./menu";
 
 const filtered = (menu, menuItems) =>
   Object.keys(menu)
diff --git a/wax-prosemirror-components/mainMenuBar/MenuBar.css b/wax-prosemirror-components/mainMenuBar/MenuBar.css
new file mode 100644
index 0000000000000000000000000000000000000000..9ba4c92bad0cba526b42d5b1b170578147397324
--- /dev/null
+++ b/wax-prosemirror-components/mainMenuBar/MenuBar.css
@@ -0,0 +1,6 @@
+.main-toolbar {
+  position: fixed;
+  display: flex;
+  margin: 0;
+  z-index: 999;
+}
diff --git a/wax-prosemirror-components/menu.js b/wax-prosemirror-components/mainMenuBar/menu.js
similarity index 52%
rename from wax-prosemirror-components/menu.js
rename to wax-prosemirror-components/mainMenuBar/menu.js
index 05632479e74c81e71fd9654674c259f21424029a..f8ee629e949e5f474725007a52fd7e9fdae1122e 100644
--- a/wax-prosemirror-components/menu.js
+++ b/wax-prosemirror-components/mainMenuBar/menu.js
@@ -15,12 +15,12 @@ import { addColumnBefore } from "prosemirror-tables";
 import { redo, undo } from "prosemirror-history";
 import { wrapInList } from "prosemirror-schema-list";
 
-import icons from "./icons";
+import icons from "../icons/icons";
 //Components
-import Button from "../components/menu/Button";
-import TableDropDown from "../components/menu/TableDropDown";
-import ImageUpload from "../components/menu/ImageUpload";
-import HeadingsDropDown from "../components/menu/HeadingsDropDown";
+import Button from "../components/button/Button";
+import TableDropDown from "../components/TableDropDown";
+import ImageUpload from "../components/ImageUpload";
+import HeadingsDropDown from "../components/HeadingsDropDown";
 
 const markActive = type => state => {
   const { from, $from, to, empty } = state.selection;
@@ -90,94 +90,7 @@ export default {
     select: state => true,
     menu: props => <HeadingsDropDown key={uuid()} {...props} />
   },
-  heading1: {
-    title: "Change to Title",
-    content: "Title",
-    // active: blockActive(schema.nodes.heading, { level: 1 }),
-    // enable: setBlockType(schema.nodes.heading, { level: 1 }),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.heading, { level: 1 })(
-        state,
-        dispatch
-      );
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  subtitle: {
-    title: "Change to Subtilte",
-    content: "Subtilte",
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.subtitle)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  epigraph: {
-    title: "Change to Epigraph",
-    content: "Epigraph",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.epigraph)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  heading2: {
-    title: "Change to heading level 1",
-    content: "Heading 1",
-    // active: blockActive(schema.nodes.heading, { level: 1 }),
-    // enable: setBlockType(schema.nodes.heading, { level: 1 }),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.heading, { level: 2 })(
-        state,
-        dispatch
-      );
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  heading3: {
-    title: "Change to heading level 2",
-    content: "Heading 2",
-    // active: blockActive(schema.nodes.heading, { level: 1 }),
-    // enable: setBlockType(schema.nodes.heading, { level: 1 }),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.heading, { level: 3 })(
-        state,
-        dispatch
-      );
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  heading4: {
-    title: "Change to heading level 3",
-    content: "Heading 3",
-    // active: blockActive(schema.nodes.heading, { level: 1 }),
-    // enable: setBlockType(schema.nodes.heading, { level: 1 }),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.heading, { level: 3 })(
-        state,
-        dispatch
-      );
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  heading5: {
-    title: "Change to heading level 4",
-    content: "Heading 4",
-    // active: blockActive(schema.nodes.heading, { level: 1 }),
-    // enable: setBlockType(schema.nodes.heading, { level: 1 }),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.heading, { level: 4 })(
-        state,
-        dispatch
-      );
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
+
   plain: {
     title: "Change to General Text",
     // content: icons.paragraph,
@@ -191,86 +104,7 @@ export default {
     select: state => true,
     menu: props => <Button key={uuid()} {...props} />
   },
-  imageTitle: {
-    title: "Change to Image Title",
-    // content: icons.paragraph,
-    content: "Image Title",
-    // active: blockActive(schema.nodes.paragraph),
-    // enable: setBlockType(schema.nodes.paragraph),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.figureTitle)(state, dispatch);
-    },
 
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  imageCaption: {
-    title: "Change to Image Caption",
-    // content: icons.paragraph,
-    content: "Image Caption",
-    // active: blockActive(schema.nodes.paragraph),
-    // enable: setBlockType(schema.nodes.paragraph),
-    run(state, dispatch) {
-      setBlockType(state.config.schema.nodes.figureCaption)(state, dispatch);
-    },
-
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  quote: {
-    title: "Change to Quote",
-    content: "Quote",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.quote)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  special: {
-    title: "Change to Special",
-    content: "Special",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.special)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  important: {
-    title: "Change to Important",
-    content: "Important",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.important)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  recommended: {
-    title: "Change to Recommended",
-    content: "Recommended",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.recommended)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  caution: {
-    title: "Change to Caution",
-    content: "Caution",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.caution)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  tip: {
-    title: "Change to tip",
-    content: "Tip",
-    run(state, dispatch) {
-      wrapIn(state.config.schema.nodes.tip)(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
   em: {
     title: "Toggle emphasis",
     content: icons.em,
@@ -396,17 +230,7 @@ export default {
     select: state => true,
     menu: props => <Button key={uuid()} {...props} />
   },
-  footnote: {
-    title: "Insert footnote",
-    content: icons.footnote,
-    // enable: canInsert(schema.nodes.footnote),
-    select: state => true,
-    run: (state, dispatch) => {
-      const footnote = state.config.schema.nodes.footnote.create();
-      dispatch(state.tr.replaceSelectionWith(footnote));
-    },
-    menu: props => <Button key={uuid()} {...props} />
-  },
+
   blockquote: {
     title: "Wrap in block quote",
     content: icons.blockquote,
@@ -464,55 +288,5 @@ export default {
     select: state => true,
     run: option => true,
     menu: props => <ImageUpload key={uuid()} {...props} />
-  },
-
-  table: {
-    title: "Insert table",
-    content: icons.table,
-    // enable: canInsert(schema.nodes.table),
-    run: (state, dispatch) => {
-      // const { from } = state.selection
-      let rowCount = window && window.prompt("How many rows?", 2);
-      let colCount = window && window.prompt("How many columns?", 2);
-
-      const cells = [];
-      while (colCount--) {
-        cells.push(state.config.schema.nodes.table_cell.createAndFill());
-      }
-
-      const rows = [];
-      while (rowCount--) {
-        rows.push(
-          state.config.schema.nodes.table_row.createAndFill(null, cells)
-        );
-      }
-
-      const table = state.config.schema.nodes.table.createAndFill(null, rows);
-      dispatch(state.tr.replaceSelectionWith(table));
-
-      // const tr = state.tr.replaceSelectionWith(table)
-      // tr.setSelection(Selection.near(tr.doc.resolve(from)))
-      // dispatch(tr.scrollIntoView())
-      // view.focus()
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
-  },
-  tableDropDownOptions: {
-    content: "table",
-    run: option => true,
-    title: "Select Options",
-    select: state => addColumnBefore(state),
-    menu: props => <TableDropDown key={uuid()} {...props} />
-  },
-  selectParentNode: {
-    title: "Toggle strong",
-    content: "FindP",
-    // active: markActive(schema.marks.strong),
-    run(state, dispatch) {
-      selectParentNode(state, dispatch);
-    },
-    select: state => true,
-    menu: props => <Button key={uuid()} {...props} />
   }
 };