diff --git a/ui/.eslintignore b/ui/.eslintignore
index b1d4c644..a6f80ca9 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -1,3 +1,5 @@
 /node_modules
 coverage
-.nyc_output
\ No newline at end of file
+.nyc_output
+docs/static
+static
\ No newline at end of file
diff --git a/ui/docs/components.js b/ui/docs/components.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/src/base/index.js b/ui/src/components/base/index.js
similarity index 100%
rename from ui/src/base/index.js
rename to ui/src/components/base/index.js
diff --git a/ui/src/components/base/readme.md b/ui/src/components/base/readme.md
new file mode 100644
index 00000000..b698ffc7
--- /dev/null
+++ b/ui/src/components/base/readme.md
@@ -0,0 +1 @@
+# `<Base>`
diff --git a/ui/src/button/index.js b/ui/src/components/button/index.js
similarity index 100%
rename from ui/src/button/index.js
rename to ui/src/components/button/index.js
diff --git a/ui/src/button/readme.md b/ui/src/components/button/readme.md
similarity index 100%
rename from ui/src/button/readme.md
rename to ui/src/components/button/readme.md
diff --git a/ui/src/button/style.css b/ui/src/components/button/style.css
similarity index 100%
rename from ui/src/button/style.css
rename to ui/src/components/button/style.css
diff --git a/ui/src/container/index.js b/ui/src/components/container/index.js
similarity index 100%
rename from ui/src/container/index.js
rename to ui/src/components/container/index.js
diff --git a/ui/src/components/container/readme.md b/ui/src/components/container/readme.md
new file mode 100644
index 00000000..bd33d693
--- /dev/null
+++ b/ui/src/components/container/readme.md
@@ -0,0 +1 @@
+# `<Container>`
diff --git a/ui/src/docs.js b/ui/src/docs.js
index 029813ac..225bfb3b 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -1,3 +1,10 @@
 module.exports = {
-  Button: require('./button/readme.md')
+  components: {
+    Base: require('./components/base/readme.md'),
+    Container: require('./components/container/readme.md'),
+    Button: require('./components/button/readme.md')
+  },
+  guidelines: {
+    Overview: require('./guidelines/overview.md')
+  }
 };
diff --git a/ui/src/faq.md b/ui/src/faq.md
new file mode 100644
index 00000000..109af79b
--- /dev/null
+++ b/ui/src/faq.md
@@ -0,0 +1 @@
+# faq
\ No newline at end of file
diff --git a/ui/src/getting-started.md b/ui/src/getting-started.md
new file mode 100644
index 00000000..a6a564a0
--- /dev/null
+++ b/ui/src/getting-started.md
@@ -0,0 +1 @@
+# getting started
\ No newline at end of file
diff --git a/ui/src/guidelines/overview.md b/ui/src/guidelines/overview.md
new file mode 100644
index 00000000..aed49439
--- /dev/null
+++ b/ui/src/guidelines/overview.md
@@ -0,0 +1 @@
+# overview
\ No newline at end of file
diff --git a/ui/src/index.js b/ui/src/index.js
index a405120e..17f7cd30 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,5 +1,5 @@
 module.exports = {
-  Button: require('./button'),
-  Container: require('./container'),
-  Base: require('./base')
+  Button: require('./components/button'),
+  Container: require('./components/container'),
+  Base: require('./components/base')
 };
diff --git a/ui/test/index.js b/ui/test/index.js
index 4f016c6c..c5415ec3 100644
--- a/ui/test/index.js
+++ b/ui/test/index.js
@@ -7,7 +7,7 @@ const {
 } = enzyme;
 
 test('renders <Button> without exploding', (t) => {
-  const Button = require('../src/button');
+  const Button = require('../src/components/button');
   const wrapper = shallow(<Button />);
   t.deepEqual(wrapper.length, 1);
 });
diff --git a/ui/webpack/base.js b/ui/webpack/base.js
new file mode 100644
index 00000000..bfd6d6ad
--- /dev/null
+++ b/ui/webpack/base.js
@@ -0,0 +1,85 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const webpack = require('webpack');
+const path = require('path');
+
+const plugins = {
+  'no-errors-plugin': new webpack.NoErrorsPlugin(),
+  'extract-text-plugin': new ExtractTextPlugin({
+    filename: '[name].css',
+    allChunks: true
+  }),
+  'loader-options-plugin': new webpack.LoaderOptionsPlugin({
+    options: {
+      postcss: {
+        plugins: () => {
+          return [
+            require('postcss-cssnext')
+          ];
+        }
+      },
+      'embed-markdown-loader': {
+        // don't detach yet (has a bug in the production config)
+        // webpackConfigFullpath: path.join(__dirname, 'index.js')
+      }
+    }
+  })
+};
+
+exports.config = {
+  context: path.join(__dirname, '../'),
+  output: {
+    path: path.join(__dirname, '../static'),
+    publicPath: '/static/',
+    filename: '[name].js'
+  },
+  plugins: [
+    plugins['no-errors-plugin'],
+    plugins['extract-text-plugin'],
+    plugins['loader-options-plugin']
+  ],
+  resolveLoader: {
+    alias: {
+      'embed-markdown-loader': path.join(__dirname, './embed-markdown-loader')
+    }
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, '../src'),
+        path.join(__dirname, '../docs')
+      ],
+      loader: 'babel'
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, '../src'),
+        path.join(__dirname, '../docs')
+      ],
+      loader: 'json'
+    }, {
+      test: /\.md?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, '../src'),
+        path.join(__dirname, '../docs')
+      ],
+      loader: 'html-loader!embed-markdown-loader'
+    }, {
+      test: /\.css?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, '../src'),
+        path.join(__dirname, '../docs')
+      ],
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: 'style-loader',
+        loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+      })
+    }]
+  }
+};
+
+exports.plugins = plugins;