diff --git a/docs/balloons.stories.js b/docs/balloons.stories.js
new file mode 100644
index 0000000..a031a98
--- /dev/null
+++ b/docs/balloons.stories.js
@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/html';
+
+import '../css/nes.css';
+
+storiesOf('Balloons', module)
+  .add('.balloon.from-left', () => '<div class="balloon from-left"> <p>Hello NES.css</p> </div>')
+  .add('.balloon.from-right', () => '<div class="balloon from-right"> <p>Hello NES.css</p> </div>');
diff --git a/docs/buttons.stories.js b/docs/buttons.stories.js
new file mode 100644
index 0000000..ad7e0ed
--- /dev/null
+++ b/docs/buttons.stories.js
@@ -0,0 +1,10 @@
+import { storiesOf } from '@storybook/html';
+
+import '../css/nes.css';
+
+storiesOf('Buttons', module)
+  .add('button.btn', () => ' <button type="button" class="btn">Normal</button>')
+  .add('button.btn.is-primary', () => '<button type="button" class="btn is-primary">Primary</button>')
+  .add('button.btn.is-success', () => '<button type="button" class="btn is-success">Success</button>')
+  .add('button.btn.is-warning', () => '<button type="button" class="btn is-warning">Warning</button>')
+  .add('button.btn.is-error', () => '<button type="button" class="btn is-error">Error</button>');
diff --git a/docs/containers.stories.js b/docs/containers.stories.js
new file mode 100644
index 0000000..a17022e
--- /dev/null
+++ b/docs/containers.stories.js
@@ -0,0 +1,37 @@
+import { storiesOf } from '@storybook/html';
+
+import '../css/nes.css';
+
+storiesOf('Containers', module)
+  .add('.container.with-title', () => `<div class="container with-title">
+          <p class="title">Container</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+      </div>`)
+  .add('.container.with-title.is-center', () => `<div class="container with-title is-center">
+          <p class="title">Container.is-center</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+      </div>`)
+  .add('.container.with-title.is-right', () => `<div class="container with-title is-right">
+          <p class="title">Container.is-right</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+        </div>`)
+  .add('.container.with-title.is_dark', () => `<div class="container with-title is-dark">
+          <p class="title">Container</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+      </div>`)
+  .add('.container.with-title.is-center.is-dark', () => `<div class="container with-title is-center is-dark">
+          <p class="title">Container.is-center</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+      </div>`)
+  .add('.container.with-title.is-right.is-dark', () => `<div class="container with-title is-right is-dark">
+          <p class="title">Container.is-right</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+        </div>`)
+  .add('.container.is-rounded', () => `<div class="container is-rounded">
+          <p class="title">Container.is-right</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+        </div>`)
+  .add('.container.is-rounded.is-dark', () => `<div class="container is-rounded is-dark">
+          <p class="title">Container.is-right</p>
+          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+        </div>`);
diff --git a/docs/icons.stories.js b/docs/icons.stories.js
new file mode 100644
index 0000000..a52c649
--- /dev/null
+++ b/docs/icons.stories.js
@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/html';
+
+import '../css/nes.css';
+
+storiesOf('Icons', module)
+  .add('icon.twitter', () => '<i class="icon twitter"></i>')
+  .add('icon.twitter.is-medium', () => '<i class="icon twitter is-medium"></i>')
+  .add('icon.twitter.is-large', () => '<i class="icon twitter is-large"></i>')
+  .add('icon.facebook', () => '<i class="icon facebook"></i>')
+  .add('icon.facebook.is-medium', () => '<i class="icon facebook is-medium"></i>')
+  .add('icon.facebook.is-large', () => '<i class="icon facebook is-large"></i>')
+  .add('icon.github', () => '<i class="icon github"></i>')
+  .add('icon.github.is-medium', () => '<i class="icon github is-medium"></i>')
+  .add('icon.github.is-large', () => '<i class="icon github is-large"></i>')
+  .add('icon.youtube', () => '<i class="icon youtube"></i>')
+  .add('icon.youtube.is-medium', () => '<i class="icon youtube is-medium"></i>')
+  .add('icon.youtube.is-large', () => '<i class="icon youtube is-large"></i>')
+  .add('icon.close', () => '<i class="icon close"></i>')
+  .add('icon.close.is-medium', () => '<i class="icon close is-medium"></i>')
+  .add('icon.close.is-large', () => '<i class="icon close is-large"></i>')
+  .add('octocat animate', () => '<i class="octocat animate"></i>')
+  .add('icon.trophy', () => '<i class="icon trophy"></i>')
+  .add('icon.trophy is-medium', () => '<i class="icon trophy is-medium"></i>')
+  .add('icon.trophy is-large', () => '<i class="icon trophy is-large"></i>')
+  .add('nes-logo', () => '<i class="nes-logo"></i>')
+  .add('nes-jp-logo', () => '<i class="nes-jp-logo"></i>')
+  .add('snes-logo', () => '<i class="snes-logo"></i>')
+  .add('snes-jp-logo', () => '<i class="snes-jp-logo"></i>');
diff --git a/docs/index.stories.js b/docs/index.stories.js
deleted file mode 100644
index 820f386..0000000
--- a/docs/index.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { storiesOf } from '@storybook/html';
-
-import '../css/nes.css';
-
-storiesOf('Containers', module)
-  .add('default', () => `<div class="container with-title">
-          <p class="title">Container</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-      </div>`)
-  .add('.is-center', () => `<div class="container with-title is-center">
-          <p class="title">Container.is-center</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-      </div>`)
-  .add('.is-right', () => `<div class="container with-title is-right">
-          <p class="title">Container.is-right</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>`);
diff --git a/docs/inputs.stories.js b/docs/inputs.stories.js
new file mode 100644
index 0000000..7ca0f9b
--- /dev/null
+++ b/docs/inputs.stories.js
@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/html';
+
+import '../css/nes.css';
+
+storiesOf('Inputs', module)
+  .add('input.radio', () => `
+      <label>
+        <input type="radio" class="radio" name="answer" checked />
+        <span>Yes</span>
+      </label> <label>
+        <input type="radio" class="radio" name="answer" />
+        <span>No</span>
+      </label>`)
+  .add('input.checkbox', () => `
+      <label>
+        <input type="checkbox" class="checkbox" checked />
+        <span>Enable</span>
+      </label>`)
+  .add('input.input', () => `
+        <input type="text" id="name_field" class="input">`)
+  .add('input.input.is-success', () => `
+        <input type="text" class="input is-success" placeholder="NES.css">`)
+  .add('input.input.is-warning', () => `
+        <input type="text" class="input is-warning" placeholder="8bit.css">`)
+  .add('input.input.is-error', () => `
+        <input type="text" class="input is-error" placeholder="awesome.css">`);
diff --git a/docs/table.stories.js b/docs/table.stories.js
new file mode 100644
index 0000000..3d6e650
--- /dev/null
+++ b/docs/table.stories.js
@@ -0,0 +1,72 @@
+import { storiesOf } from '@storybook/html';
+
+import '../css/nes.css';
+
+storiesOf('Tables', module)
+  .add('table.table', () => `
+      <table class="table" style="margin:15px 4px 5px 4px">
+        <thead>
+          <tr>
+            <th>Table</th>
+            <th>Table.is-bordered</th>
+            <th>Table.is-centered</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+        </tbody>
+      </table>`)
+  .add('table.table.is-bordered', () => `
+      <table class="table is-bordered" style="margin:15px 4px 5px 4px">
+        <thead>
+          <tr>
+            <th>Table</th>
+            <th>Table.is-bordered</th>
+            <th>Table.is-centered</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+        </tbody>
+      </table>`)
+  .add('table.table.is-bordered.is-centered', () => `
+      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
+        <thead>
+          <tr>
+            <th>Table</th>
+            <th>Table.is-bordered</th>
+            <th>Table.is-centered</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+        </tbody>
+      </table>
+  `);