diff --git a/ui/src/components/checkbox/story.js b/ui/src/components/checkbox/story.js
new file mode 100644
index 00000000..bdbebdab
--- /dev/null
+++ b/ui/src/components/checkbox/story.js
@@ -0,0 +1,18 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Checkbox = require('./');
+
+storiesOf('Checkbox', module)
+  .add('Default', () => (
+    <Checkbox />
+  ))
+  .add('Checked', () => (
+    <Checkbox checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Checkbox disabled />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/close/story.js b/ui/src/components/close/story.js
new file mode 100644
index 00000000..2776d6e2
--- /dev/null
+++ b/ui/src/components/close/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Close = require('./');
+
+storiesOf('Close', module)
+  .add('Default', () => (
+    <Base
+      style={{
+        position: 'relative',
+        width: 60
+      }}
+    >
+      <Close onClick={function noop() {}} />
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/input/story.js b/ui/src/components/input/story.js
new file mode 100644
index 00000000..af8538db
--- /dev/null
+++ b/ui/src/components/input/story.js
@@ -0,0 +1,35 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Input = require('./');
+
+storiesOf('Input', module)
+  .add('Default', () => (
+    <Base>
+      <Input placeholder="I am the placeholder" />
+    </Base>
+  ))
+  .add('type=email', () => (
+    <Base>
+      <Input
+        label='Email Address'
+        placeholder='Enter email'
+        type='email'
+      >
+        <small>We&apos;ll never share your email with anyone else.</small>
+      </Input>
+    </Base>
+  ))
+  .add('Error', () => (
+    <Base>
+      <Input
+        error="Somethings missing"
+        placeholder="There was an error"
+        value="alexw/makeusproud.com"
+      />
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/modal/story.js b/ui/src/components/modal/story.js
new file mode 100644
index 00000000..74a142fc
--- /dev/null
+++ b/ui/src/components/modal/story.js
@@ -0,0 +1,17 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Modal = require('./');
+
+storiesOf('Modal', module)
+  .add('Default', () => (
+    <Base>
+      <Modal>
+        <h2>This is the Modal</h2>
+      </Modal>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/notification/story.js b/ui/src/components/notification/story.js
new file mode 100644
index 00000000..5c126b90
--- /dev/null
+++ b/ui/src/components/notification/story.js
@@ -0,0 +1,34 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Notificaton = require('./');
+
+storiesOf('Notificaton', module)
+  .add('Default', () => (
+    <Base>
+      <Notificaton>
+        <span>This is the default content</span>
+      </Notificaton>
+    </Base>
+  ))
+  .add('Success', () => (
+    <Base>
+      <Notificaton
+        close={function noop() {}}
+        type="success"
+      >
+        <span>This is a success notification that is closable</span>
+      </Notificaton>
+    </Base>
+  ))
+  .add('Alert', () => (
+    <Base>
+      <Notificaton type="alert">
+        <span>This is the alert content</span>
+      </Notificaton>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/pagination/story.js b/ui/src/components/pagination/story.js
new file mode 100644
index 00000000..284fb49e
--- /dev/null
+++ b/ui/src/components/pagination/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Pagination = require('./');
+
+storiesOf('Pagination', module)
+  .add('Default', () => (
+    <Pagination>
+      <a>
+        <span>&laquo;</span>
+        <span>Previous</span>
+      </a>
+      <a>1</a>
+      <a active>2</a>
+      <a>3</a>
+    </Pagination>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/radio-group/story.js b/ui/src/components/radio-group/story.js
new file mode 100644
index 00000000..09d7b34f
--- /dev/null
+++ b/ui/src/components/radio-group/story.js
@@ -0,0 +1,27 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const RadioGroup = require('./');
+const Radio = require('./item');
+
+
+storiesOf('Radio Group', module)
+  .add('Default', () => (
+    <Base>
+      <RadioGroup>
+        <Radio name='hello' value='default'>
+          Video killed the radio star
+        </Radio>
+        <Radio name='hello' value='fancy'>
+          Video killed the radio star
+        </Radio>
+        <Radio name='hello' value='none'>
+          Video killed the radio star
+        </Radio>
+      </RadioGroup>
+    </Base>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/radio/story.js b/ui/src/components/radio/story.js
new file mode 100644
index 00000000..ed9697ad
--- /dev/null
+++ b/ui/src/components/radio/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Radio = require('./');
+
+storiesOf('Radio', module)
+  .add('Default', () => (
+    <Radio>
+      Video killed the radio star
+    </Radio>
+  ))
+  .add('Checked', () => (
+    <Radio checked onChange={function noop() {}} />
+  ))
+  .add('Disabled', () => (
+    <Radio disabled />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/range-slider/story.js b/ui/src/components/range-slider/story.js
new file mode 100644
index 00000000..21e479f5
--- /dev/null
+++ b/ui/src/components/range-slider/story.js
@@ -0,0 +1,12 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const RangeSlider = require('./');
+
+storiesOf('Range Slider', module)
+  .add('Default', () => (
+    <RangeSlider />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/select-custom/story.js b/ui/src/components/select-custom/story.js
new file mode 100644
index 00000000..7763f7fa
--- /dev/null
+++ b/ui/src/components/select-custom/story.js
@@ -0,0 +1,28 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  selectData
+} = require('../../shared/fake-data');
+
+const SelectCustom = require('./');
+
+storiesOf('Select Custom', module)
+  .add('Default', () => (
+    <SelectCustom
+      label="This is the label"
+      onChange={function noop() {}}
+      options={selectData}
+    />
+  ))
+  .add('Multiple', () => (
+    <SelectCustom
+      label="This is the label"
+      multi
+      onChange={function noop() {}}
+      options={selectData}
+    />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/select/story.js b/ui/src/components/select/story.js
new file mode 100644
index 00000000..871941c3
--- /dev/null
+++ b/ui/src/components/select/story.js
@@ -0,0 +1,26 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Select = require('./');
+
+storiesOf('Select', module)
+  .add('Default', () => (
+    <Select label='example select'>
+      <option>Apple</option>
+      <option>Banana</option>
+      <option>Pear</option>
+      <option>Orange</option>
+    </Select>
+  ))
+  .add('multiple', () => (
+    <Select label='example multiple select' multiple>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </Select>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/tabs/story.js b/ui/src/components/tabs/story.js
new file mode 100644
index 00000000..f23bb076
--- /dev/null
+++ b/ui/src/components/tabs/story.js
@@ -0,0 +1,20 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Tabs = require('./');
+const Tab = require('./tab');
+
+storiesOf('Tabs', module)
+  .add('Default', () => (
+    <Tabs name='my-tab-group'>
+      <Tab title='Containers'>
+        <h1>Containers</h1>
+      </Tab>
+      <Tab title='Users'>
+        <h1>User</h1>
+      </Tab>
+    </Tabs>
+  ));
\ No newline at end of file
diff --git a/ui/src/components/toggle/story.js b/ui/src/components/toggle/story.js
new file mode 100644
index 00000000..6af792bc
--- /dev/null
+++ b/ui/src/components/toggle/story.js
@@ -0,0 +1,30 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Toggle = require('./');
+
+storiesOf('Toggle', module)
+  .add('default', () => (
+    <Toggle checked />
+  ))
+  .add('checked', () => (
+    <Toggle
+      defaultChecked
+      options={[
+        {
+          label: 'Topology',
+          checked: true
+        },
+        {
+          label: 'List',
+          checked: false
+        }
+      ]}
+    />
+  ))
+  .add('no props', () => (
+    <Toggle />
+  ));
\ No newline at end of file
diff --git a/ui/src/components/tooltip/story.js b/ui/src/components/tooltip/story.js
new file mode 100644
index 00000000..260d6120
--- /dev/null
+++ b/ui/src/components/tooltip/story.js
@@ -0,0 +1,29 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Tooltip = require('./');
+
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <Tooltip>
+      <li>One</li>
+      <li>Two</li>
+      <li>Three</li>
+    </Tooltip>
+  ))
+  .add('custom position', () => {
+    const arrowPosition = {
+      left: '90%',
+      bottom: '100%'
+    };
+    return (
+      <Tooltip arrowPosition={arrowPosition}>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+      </Tooltip>
+    );
+  });
\ No newline at end of file
diff --git a/ui/src/components/widget/story.js b/ui/src/components/widget/story.js
new file mode 100644
index 00000000..a2fbe982
--- /dev/null
+++ b/ui/src/components/widget/story.js
@@ -0,0 +1,24 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Widget = require('./');
+
+storiesOf('Widget', module)
+  .add('single', () => (
+    <Widget
+      checked
+      name='flag'
+      selectable='single'
+      value='flag_1'
+    >
+      <img
+        alt='england flag'
+        // eslint-disable-next-line max-len
+        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
+      />
+      <p>Some text</p>
+    </Widget>
+  ));
\ No newline at end of file
diff --git a/ui/stories/index.js b/ui/stories/index.js
index ed0100c8..f49080cb 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -8,10 +8,8 @@ const {
 const {
   Base,
   Container,
-  Checkbox,
   Row,
   Column,
-  Close,
   AddMetric: {
     AddMetricButton,
     AddMetricDescription,
@@ -19,7 +17,6 @@ const {
     AddMetricTile,
     AddMetricTitle
   },
-  Input,
   List: {
     ListItemDescription,
     ListItemHeader,
@@ -39,27 +36,8 @@ const {
     MiniMetricSubtitle,
     MiniMetricView
   },
-  Modal,
-  Notificaton,
-  Pagination,
-  RangeSlider,
-  Select,
-  SelectCustom,
-  Tabs,
-  Tab,
-  Toggle,
-  Tooltip,
-  Widget,
-  Radio,
-  RadioGroup
 } = require('../src/');
 
-const fakeData = require('../src/shared/fake-data');
-
-const {
-	selectData
-} = fakeData;
-
 const styles = {
   base: {
     backgroundColor: '#FFEBEE'
@@ -148,245 +126,6 @@ storiesOf('Add Metric', module)
     </Base>
   ));
 
-storiesOf('Checkbox', module)
-  .add('Default', () => (
-    <Checkbox />
-  ))
-  .add('Checked', () => (
-    <Checkbox checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Checkbox disabled />
-  ));
-
-storiesOf('Radio', module)
-  .add('Default', () => (
-    <Radio>
-     Video killed the radio star
-    </Radio>
-  ))
-  .add('Checked', () => (
-    <Radio checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Radio disabled />
-  ));
-
-storiesOf('Input', module)
-  .add('Default', () => (
-    <Base>
-      <Input placeholder="I am the placeholder" />
-    </Base>
-  ))
-  .add('type=email', () => (
-    <Base>
-      <Input
-        label='Email Address'
-        placeholder='Enter email'
-        type='email'
-      >
-        <small>We&apos;ll never share your email with anyone else.</small>
-      </Input>
-    </Base>
-  ))
-  .add('Error', () => (
-    <Base>
-      <Input
-        error="Somethings missing"
-        placeholder="There was an error"
-        value="alexw/makeusproud.com"
-      />
-    </Base>
-  ));
-
-storiesOf('Modal', module)
-  .add('Default', () => (
-    <Modal>
-      <h2>This is the Modal</h2>
-    </Modal>
-  ));
-
-storiesOf('Notificaton', module)
-  .add('Default', () => (
-    <Base>
-      <Notificaton>
-        <span>This is the default content</span>
-      </Notificaton>
-    </Base>
-  ))
-  .add('Success', () => (
-    <Base>
-      <Notificaton
-        close={function noop() {}}
-        type="success"
-      >
-        <span>This is a success notification that is closable</span>
-      </Notificaton>
-    </Base>
-  ))
-  .add('Alert', () => (
-    <Base>
-      <Notificaton type="alert">
-        <span>This is the alert content</span>
-      </Notificaton>
-    </Base>
-  ));
-
-storiesOf('Pagination', module)
-  .add('Default', () => (
-    <Pagination>
-      <a>
-        <span>&laquo;</span>
-        <span>Previous</span>
-      </a>
-      <a>1</a>
-      <a active>2</a>
-      <a>3</a>
-    </Pagination>
-  ));
-
-storiesOf('Radio Group', module)
-  .add('Default', () => (
-    <RadioGroup>
-      <Radio name='hello' value='default'>
-       Video killed the radio star
-      </Radio>
-      <Radio name='hello' value='fancy'>
-       Video killed the radio star
-      </Radio>
-      <Radio name='hello' value='none'>
-       Video killed the radio star
-      </Radio>
-    </RadioGroup>
-  ));
-
-storiesOf('RangeSlider', module)
-  .add('Default', () => (
-    <RangeSlider />
-  ));
-
-storiesOf('Select', module)
-  .add('Default', () => (
-    <Select label='example select'>
-      <option>Apple</option>
-      <option>Banana</option>
-      <option>Pear</option>
-      <option>Orange</option>
-    </Select>
-  ))
-  .add('multiple', () => (
-    <Select label='example multiple select' multiple>
-      <option>1</option>
-      <option>2</option>
-      <option>3</option>
-      <option>4</option>
-      <option>5</option>
-    </Select>
-  ));
-
-storiesOf('Select Custom', module)
-  .add('Default', () => (
-    <SelectCustom
-      label="This is the label"
-      onChange={function noop() {}}
-      options={selectData}
-    />
-  ))
-  .add('Multiple', () => (
-    <SelectCustom
-      label="This is the label"
-      multi
-      onChange={function noop() {}}
-      options={selectData}
-    />
-  ));
-
-storiesOf('Tabs', module)
-  .add('Default', () => (
-    <Tabs name='my-tab-group'>
-      <Tab title='Containers'>
-        <h1>Containers</h1>
-      </Tab>
-      <Tab title='Users'>
-        <h1>User</h1>
-      </Tab>
-    </Tabs>
-  ));
-
-storiesOf('Close', module)
-  .add('Default', () => (
-    <Base
-      style={{
-        position: 'relative',
-        width: 60
-      }}
-    >
-      <Close onClick={function noop() {}} />
-    </Base>
-  ));
-
-storiesOf('Toggle', module)
-  .add('default', () => (
-    <Toggle checked />
-  ))
-  .add('checked', () => (
-    <Toggle
-      defaultChecked
-      options={[
-        {
-          label: 'Topology',
-          checked: true
-        },
-        {
-          label: 'List',
-          checked: false
-        }
-      ]}
-    />
-  ))
-  .add('no props', () => (
-    <Toggle />
-  ));
-
-storiesOf('Tooltip', module)
-  .add('default', () => (
-    <Tooltip>
-      <li>One</li>
-      <li>Two</li>
-      <li>Three</li>
-    </Tooltip>
-  ))
-  .add('custom position', () => {
-    const arrowPosition = {
-      left: '90%',
-      bottom: '100%'
-    };
-    return (
-      <Tooltip arrowPosition={arrowPosition}>
-        <li>One</li>
-        <li>Two</li>
-        <li>Three</li>
-      </Tooltip>
-    );
-  });
-
-storiesOf('Widget', module)
-  .add('single', () => (
-    <Widget
-      checked
-      name='flag'
-      selectable='single'
-      value='flag_1'
-    >
-      <img
-        alt='england flag'
-        // eslint-disable-next-line max-len
-        src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
-      />
-      <p>Some text</p>
-    </Widget>
-  ));
-
 const minMetricData = [{
   firstQuartile: 15,
   thirdQuartile: 15,