diff --git a/packages/devui/src/Button/Button.stories.js b/packages/devui/src/Button/Button.stories.js
index f9da801d..447a6b23 100644
--- a/packages/devui/src/Button/Button.stories.js
+++ b/packages/devui/src/Button/Button.stories.js
@@ -4,7 +4,7 @@ import { MdFiberManualRecord } from 'react-icons/md';
 import Button from './';
 
 export default {
-  title: 'Components/Button',
+  title: 'Button',
   component: Button,
 };
 
diff --git a/packages/devui/src/ContextMenu/ContextMenu.stories.js b/packages/devui/src/ContextMenu/ContextMenu.stories.js
new file mode 100644
index 00000000..4ff20129
--- /dev/null
+++ b/packages/devui/src/ContextMenu/ContextMenu.stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import ContextMenu from './';
+import { items } from './data';
+
+export default {
+  title: 'ContextMenu',
+  component: ContextMenu,
+};
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Template = (args) => (
+  <Container>
+    <ContextMenu {...args} />
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  visible: true,
+  x: 100,
+  y: 100,
+  items,
+};
+Default.argTypes = {
+  visible: { table: { disable: true } },
+  items: { table: { disable: true } },
+  onClick: { table: { disable: true } },
+};
diff --git a/packages/devui/src/ContextMenu/stories/data.js b/packages/devui/src/ContextMenu/data.js
similarity index 100%
rename from packages/devui/src/ContextMenu/stories/data.js
rename to packages/devui/src/ContextMenu/data.js
diff --git a/packages/devui/src/ContextMenu/stories/index.js b/packages/devui/src/ContextMenu/stories/index.js
deleted file mode 100644
index 6e358132..00000000
--- a/packages/devui/src/ContextMenu/stories/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { withKnobs, number } from '@storybook/addon-knobs';
-import ContextMenu from '../';
-import { items } from './data';
-
-export const Container = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-
-storiesOf('ContextMenu', module)
-  .addDecorator(withKnobs)
-  .add('default', () => (
-    <Container>
-      <ContextMenu
-        visible
-        onClick={action('menu item clicked')}
-        x={number('x', 100)}
-        y={number('y', 100)}
-        items={items}
-      />
-    </Container>
-  ));
diff --git a/packages/devui/src/Dialog/Dialog.stories.js b/packages/devui/src/Dialog/Dialog.stories.js
new file mode 100644
index 00000000..8c0fb275
--- /dev/null
+++ b/packages/devui/src/Dialog/Dialog.stories.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import Dialog from './';
+import { schema, uiSchema, formData } from '../Form/stories/schema';
+
+export default {
+  title: 'Dialog',
+  component: Dialog,
+};
+
+const Template = (args) => <Dialog {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Dialog Title',
+  submitText: 'Submit!',
+  open: true,
+  noHeader: false,
+  noFooter: false,
+  modal: false,
+  fullWidth: false,
+  children: 'Hello Dialog!',
+};
+
+export const WithForm = Template.bind({});
+WithForm.args = {
+  open: true,
+  noHeader: false,
+  noFooter: false,
+  fullWidth: false,
+  submitText: 'Submit!',
+  formData,
+  schema,
+  uiSchema,
+};
+// storiesOf('Dialog', module)
+//   .addDecorator(withKnobs)
+//   .add('default', () => (
+//     <Dialog
+//       title={text('title', 'Dialog Title')}
+//       submitText={text('submitText', 'Submit!')}
+//       open={boolean('open', true)}
+//       noHeader={boolean('noHeader', false)}
+//       noFooter={boolean('noFooter', false)}
+//       modal={boolean('modal', false)}
+//       fullWidth={boolean('fullWidth', false)}
+//       onDismiss={action('dialog dismissed')}
+//       onSubmit={action('dialog submitted')}
+//     >
+//       {text('children', 'Hello Dialog!')}
+//     </Dialog>
+//   ))
+//   .add('with form', () => (
+//     <Dialog
+//       open={boolean('open', true)}
+//       noHeader={boolean('noHeader', false)}
+//       noFooter={boolean('noFooter', false)}
+//       fullWidth={boolean('fullWidth', false)}
+//       submitText={text('submitText', 'Submit!')}
+//       formData={object('formData', formData)}
+//       schema={object('schema', schema)}
+//       uiSchema={object('uiSchema', uiSchema)}
+//       onChange={action('form changed')}
+//       onSubmit={action('form submitted')}
+//       onDismiss={action('dialog dismissed')}
+//     />
+//   ));
diff --git a/packages/devui/src/Dialog/stories/index.js b/packages/devui/src/Dialog/stories/index.js
deleted file mode 100755
index 9f1abe6e..00000000
--- a/packages/devui/src/Dialog/stories/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean, object } from '@storybook/addon-knobs';
-import Dialog from '../';
-import { schema, uiSchema, formData } from '../../Form/stories/schema';
-
-storiesOf('Dialog', module)
-  .addDecorator(withKnobs)
-  .add('default', () => (
-    <Dialog
-      title={text('title', 'Dialog Title')}
-      submitText={text('submitText', 'Submit!')}
-      open={boolean('open', true)}
-      noHeader={boolean('noHeader', false)}
-      noFooter={boolean('noFooter', false)}
-      modal={boolean('modal', false)}
-      fullWidth={boolean('fullWidth', false)}
-      onDismiss={action('dialog dismissed')}
-      onSubmit={action('dialog submitted')}
-    >
-      {text('children', 'Hello Dialog!')}
-    </Dialog>
-  ))
-  .add('with form', () => (
-    <Dialog
-      open={boolean('open', true)}
-      noHeader={boolean('noHeader', false)}
-      noFooter={boolean('noFooter', false)}
-      fullWidth={boolean('fullWidth', false)}
-      submitText={text('submitText', 'Submit!')}
-      formData={object('formData', formData)}
-      schema={object('schema', schema)}
-      uiSchema={object('uiSchema', uiSchema)}
-      onChange={action('form changed')}
-      onSubmit={action('form submitted')}
-      onDismiss={action('dialog dismissed')}
-    />
-  ));