diff --git a/.storybook/config.js b/.storybook/config.js
index f86e966a7e01..b63aabdaa7ab 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,5 @@
 import { configure } from '@kadira/storybook';
 
 configure(function () {
-  require('../styles.css');
   require('../src/stories/Story');
 }, module);
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index b729b721602a..115532575ea6 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -15,6 +15,11 @@ const config = {
         loaders: ['style', 'raw'],
         include: path.resolve(__dirname, '../'),
       },
+      {
+        test: /\.json?$/,
+        loaders: ['json'],
+        include: path.resolve(__dirname, '../'),
+      }
     ],
   },
 };
diff --git a/package.json b/package.json
index c8fabe08f435..ef44fe19ae4e 100644
--- a/package.json
+++ b/package.json
@@ -18,32 +18,33 @@
     "publish-storybook": "bash .scripts/publish_storybook.sh"
   },
   "devDependencies": {
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0",
+    "@kadira/storybook": "^1.31.0",
+    "babel-cli": "^6.5.0",
     "babel-core": "^6.5.0",
+    "babel-eslint": "^6.0.2",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.5.0",
     "babel-polyfill": "^6.5.0",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-plugin-transform-runtime": "^6.5.0",
-    "babel-cli": "^6.5.0",
+    "chai": "^3.5.0",
+    "enzyme": "^2.2.0",
     "eslint": "^2.7.0",
-    "babel-eslint": "^6.0.2",
     "eslint-config-airbnb": "^7.0.0",
     "eslint-plugin-babel": "^3.2.0",
+    "eslint-plugin-jsx-a11y": "^0.6.2",
     "eslint-plugin-react": "^4.3.0",
-    "mocha": "^2.4.5",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.3",
-    "enzyme": "^2.2.0",
-    "react-addons-test-utils": "^15.0.0",
+    "git-url-parse": "^6.0.1",
     "jsdom": "^8.3.1",
-    "eslint-plugin-jsx-a11y": "^0.6.2",
-    "@kadira/storybook": "^1.31.0",
-    "style-loader": "^0.13.1",
+    "json-loader": "^0.5.4",
+    "mocha": "^2.4.5",
     "raw-loader": "^0.5.1",
-    "git-url-parse": "^6.0.1"
+    "react": "^15.0.0",
+    "react-addons-test-utils": "^15.0.0",
+    "react-dom": "^15.0.0",
+    "sinon": "^1.17.3",
+    "style-loader": "^0.13.1"
   },
   "peerDependencies": {
     "react": "^0.14.7 || ^15.0.0"
@@ -51,6 +52,7 @@
   "dependencies": {
     "babel-runtime": "^6.5.0",
     "markdown-modest": "github:markdowncss/modest",
+    "markdown-to-react-components": "^0.2.0",
     "react-addons-create-fragment": "^15.1.0",
     "react-remarkable": "^1.1.1"
   },
diff --git a/src/components/Story.js b/src/components/Story.js
index a8b6b2765822..9ee42878554a 100644
--- a/src/components/Story.js
+++ b/src/components/Story.js
@@ -1,7 +1,21 @@
 import React from 'react';
-import Remarkable from 'react-remarkable';
+import MTRC from 'markdown-to-react-components';
 import PropTable from './PropTable';
-import Node from './Node.js';
+import Node from './Node';
+import {H1, H2, H3, H4, H5, H6, Code, Pre, P, Small, A} from './markdown'
+
+MTRC.configure({
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  code: Code,
+  pre: Pre,
+  p: P,
+  a: A,
+});
 
 export default class Story extends React.Component {
   static displayName = 'Story';
@@ -48,6 +62,18 @@ export default class Story extends React.Component {
       padding: '0 40px',
       overflow: 'auto',
     },
+    infoBody: {
+      fontSize: "16px",
+    },
+    infoBody: {
+      color: '#444',
+      fontFamily: "'Open Sans Condensed', sans-serif",
+      fontWeight: 300,
+      margin: '0 auto',
+      maxWidth: '48rem',
+      lineHeight: 1.45,
+      padding: '.25rem',
+    }
   }
 
   constructor(...args) {
@@ -63,11 +89,17 @@ export default class Story extends React.Component {
   }
 
   _renderInline() {
+    const infoBodyInlineStyle = {
+      borderTop: 'solid 1px #fafafa',
+      marginTop: '1.5em',
+    }
+    const infoBodyStyle = Object.assign(this.stylesheet.infoBody, infoBodyInlineStyle);
+
     return (
       <div>
         { this.props.children }
-        <div className='storybook-story-info-page'>
-          <div className='storybook-story-info-body storybook-story-info-body-inline'>
+        <div style={this.stylesheet.infoPage}>
+          <div style={infoBodyStyle} >
             { this._getInfoContent() }
             { this._getSourceCode() }
             { this._getPropTables() }
@@ -103,8 +135,8 @@ export default class Story extends React.Component {
         <a style={linkStyle} onClick={openOverlay}>?</a>
         <div style={infoStyle}>
           <a style={linkStyle} onClick={closeOverlay}>×</a>
-          <div className='storybook-story-info-page'>
-            <div className='storybook-story-info-body'>
+          <div style={this.stylesheet.infoPage}>
+            <div style={this.stylesheet.infoBody}>
               { this._getInfoHeader() }
               { this._getInfoContent() }
               { this._getSourceCode() }
@@ -143,7 +175,7 @@ export default class Story extends React.Component {
       padding = matches[0].length;
     }
     const source = lines.map(s => s.slice(padding)).join('\n');
-    return <Remarkable source={source}></Remarkable>;
+    return MTRC(source).tree;
   }
 
   _getSourceCode() {
@@ -153,12 +185,12 @@ export default class Story extends React.Component {
 
     return (
       <div>
-        <h3>Example Source</h3>
-        <pre>
+        <H3>Example Source</H3>
+        <Pre>
         {React.Children.map(this.props.children, (root, idx) => (
           <Node key={idx} depth={0} node={root}></Node>
         ))}
-        </pre>
+        </Pre>
       </div>
     );
   }
diff --git a/src/components/markdown/code.js b/src/components/markdown/code.js
new file mode 100644
index 000000000000..ef9d4b6c8340
--- /dev/null
+++ b/src/components/markdown/code.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+export class Code extends React.Component {
+  render() {
+    const style = {
+      fontSize: '1.88em',
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      backgroundColor: '#fafafa',
+    };
+
+    return <code style={style}>{this.props.children}</code>;
+  }
+}
+
+export class Pre extends React.Component {
+  render() {
+    const style = {
+      fontSize: '.88em',
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      backgroundColor: '#fafafa',
+      padding: '.5rem',
+      lineHeight: 1.5,
+      overflowX: 'scroll',
+    };
+
+    return <pre style={style}>{this.props.children}</pre>;
+  }
+}
+
+export class Blockquote extends React.Component {
+  render() {
+    const style = {
+      fontSize: '1.88em',
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      borderLeft: '8px solid #fafafa',
+      padding: '1rem',
+    };
+
+    return <blockquote style={style}>{this.props.children}</blockquote>;
+  }
+}
diff --git a/src/components/markdown/htags.js b/src/components/markdown/htags.js
new file mode 100644
index 000000000000..73bf22b652a7
--- /dev/null
+++ b/src/components/markdown/htags.js
@@ -0,0 +1,92 @@
+import React from 'react';
+
+export class H1 extends React.Component {
+  render() {
+    const styles = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      color: '#777',
+      borderBottom: '2px solid #fafafa',
+      marginBottom: '1.15rem',
+      paddingBottom: '.5rem',
+      margin: '1.414rem 0 .5rem',
+      fontWeight: 'inherit',
+      lineHeight: 1.42,
+      textAlign: 'center',
+      marginTop: 0,
+      fontSize: '3.998rem',
+    };
+
+    return <h1 id={this.props.id} style={styles}>{this.props.children}</h1>;
+  }
+}
+
+export class H2 extends React.Component {
+  render() {
+    const styles = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      borderBottom: '2px solid #fafafa',
+      marginBottom: '1.15rem',
+      paddingBottom: '.5rem',
+      margin: '1.414rem 0 .5rem',
+      fontWeight: 'inherit',
+      lineHeight: 1.42,
+      fontSize: '2.827rem',
+    };
+
+    return <h2 id={this.props.id} style={styles}>{this.props.children}</h2>;
+  }
+}
+
+export class H3 extends React.Component {
+  render() {
+    const styles = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      borderBottom: '2px solid #fafafa',
+      marginBottom: '1.15rem',
+      paddingBottom: '.5rem',
+      margin: '1.414rem 0 .5rem',
+      fontWeight: 'inherit',
+      lineHeight: 1.42,
+      fontSize: '1.999rem',
+    };
+
+    return <h3 id={this.props.id} style={styles}>{this.props.children}</h3>;
+  }
+}
+
+export class H4 extends React.Component {
+  render() {
+    const styles = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      color: '#444',
+      margin: '1.414rem 0 .5rem',
+      fontWeight: 'inherit',
+      lineHeight: 1.42,
+      fontSize: '1.414rem',
+    };
+
+    return <h4 id={this.props.id} style={styles}>{this.props.children}</h4>;
+  }
+}
+
+export class H5 extends React.Component {
+  render() {
+    const styles = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      fontSize: '1.121rem',
+    };
+
+    return <h5 id={this.props.id} style={styles}>{this.props.children}</h5>;
+  }
+}
+
+export class H6 extends React.Component {
+  render() {
+    const styles = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      fontSize: '.88rem',
+    };
+
+    return <h6 id={this.props.id} style={styles}>{this.props.children}</h6>;
+  }
+}
diff --git a/src/components/markdown/index.js b/src/components/markdown/index.js
new file mode 100644
index 000000000000..0d5c24501d44
--- /dev/null
+++ b/src/components/markdown/index.js
@@ -0,0 +1,3 @@
+export { H1, H2, H3, H4, H5, H6 } from './htags';
+export { Code, Pre } from './code';
+export { P, Small, A } from './text';
diff --git a/src/components/markdown/text.js b/src/components/markdown/text.js
new file mode 100644
index 000000000000..16f9f3d168c4
--- /dev/null
+++ b/src/components/markdown/text.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export class P extends React.Component {
+  render() {
+    const style = {
+      fontFamily: 'Arimo, Helvetica, sans-serif',
+      fontSize: '1rem',
+      marginBottom: '1.3rem',
+      color: '#444',
+    };
+    return <p style={style}>{this.props.children}</p>;
+  }
+}
+
+export class Small extends React.Component {
+  render() {
+    const style = {};
+
+    return <ul style={style}>{this.props.children}</ul>;
+  }
+}
+
+export class A extends React.Component {
+  render() {
+    const style = {
+      color: '#3498db',
+    };
+
+    return <a href={this.props.href} style={style}>{this.props.children}</a>;
+  }
+}
+
diff --git a/styles.css b/styles.css
deleted file mode 100644
index 6e02f50a8d8c..000000000000
--- a/styles.css
+++ /dev/null
@@ -1,238 +0,0 @@
-/* https://github.com/markdowncss/modest */
-
-@media print {
-  .storybook-story-info-body *,
-  .storybook-story-info-body *:before,
-  .storybook-story-info-body *:after {
-    background: transparent !important;
-    color: #000 !important;
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  .storybook-story-info-body a,
-  .storybook-story-info-body a:visited {
-    text-decoration: underline;
-  }
-
-  .storybook-story-info-body a[href]:after {
-    content: " (" attr(href) ")";
-  }
-
-  .storybook-story-info-body abbr[title]:after {
-    content: " (" attr(title) ")";
-  }
-
-  .storybook-story-info-body a[href^="#"]:after,
-  .storybook-story-info-body a[href^="javascript:"]:after {
-    content: "";
-  }
-
-  .storybook-story-info-body pre,
-  .storybook-story-info-body blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  .storybook-story-info-body thead {
-    display: table-header-group;
-  }
-
-  .storybook-story-info-body tr,
-  .storybook-story-info-body img {
-    page-break-inside: avoid;
-  }
-
-  .storybook-story-info-body img {
-    max-width: 100% !important;
-  }
-
-  .storybook-story-info-body p,
-  .storybook-story-info-body h2,
-  .storybook-story-info-body h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  .storybook-story-info-body h2,
-  .storybook-story-info-body h3 {
-    page-break-after: avoid;
-  }
-}
-
-.storybook-story-info-body pre,
-.storybook-story-info-body code {
-  font-size: .88em;
-  font-family: Menlo, Monaco, "Courier New", monospace;
-}
-
-.storybook-story-info-body pre {
-  padding: .5rem;
-  line-height: 1.5;
-  overflow-x: scroll;
-}
-
-.storybook-story-info-body a,
-.storybook-story-info-body a:visited {
-  color: #3498db;
-}
-
-.storybook-story-info-body a:hover,
-.storybook-story-info-body a:focus,
-.storybook-story-info-body a:active {
-  color: #2980b9;
-}
-
-.storybook-story-info-body .modest-no-decoration {
-  text-decoration: none;
-}
-
-.storybook-story-info-page {
-  font-size: 12px;
-}
-
-@media screen and (min-width: 32rem) and (max-width: 48rem) {
-  .storybook-story-info-page {
-    font-size: 15px;
-  }
-}
-
-@media screen and (min-width: 48rem) {
-  .storybook-story-info-page {
-    font-size: 16px;
-  }
-}
-
-.storybook-story-info-body {
-  line-height: 1.85;
-}
-
-.storybook-story-info-body p,
-.storybook-story-info-body .modest-p {
-  font-size: 1rem;
-  margin-bottom: 1.3rem;
-}
-
-.storybook-story-info-body h1,
-.storybook-story-info-body .modest-h1,
-.storybook-story-info-body h2,
-.storybook-story-info-body .modest-h2,
-.storybook-story-info-body h3,
-.storybook-story-info-body .modest-h3,
-.storybook-story-info-body h4,
-.storybook-story-info-body .modest-h4 {
-  margin: 1.414rem 0 .5rem;
-  font-weight: inherit;
-  line-height: 1.42;
-}
-
-.storybook-story-info-body h1,
-.storybook-story-info-body .modest-h1 {
-  margin-top: 0;
-  font-size: 3.998rem;
-}
-
-.storybook-story-info-body h2,
-.storybook-story-info-body .modest-h2 {
-  font-size: 2.827rem;
-}
-
-.storybook-story-info-body h3,
-.storybook-story-info-body .modest-h3 {
-  font-size: 1.999rem;
-}
-
-.storybook-story-info-body h4,
-.storybook-story-info-body .modest-h4 {
-  font-size: 1.414rem;
-}
-
-.storybook-story-info-body h5,
-.storybook-story-info-body .modest-h5 {
-  font-size: 1.121rem;
-}
-
-.storybook-story-info-body h6,
-.storybook-story-info-body .modest-h6 {
-  font-size: .88rem;
-}
-
-.storybook-story-info-body small,
-.storybook-story-info-body .modest-small {
-  font-size: .707em;
-}
-
-/* https://github.com/mrmrs/fluidity */
-
-.storybook-story-info-body img,
-.storybook-story-info-body canvas,
-.storybook-story-info-body iframe,
-.storybook-story-info-body video,
-.storybook-story-info-body svg,
-.storybook-story-info-body select,
-.storybook-story-info-body textarea {
-  max-width: 100%;
-}
-
-@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
-@import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic);
-
-.storybook-story-info-page {
-  font-size: 18px;
-  max-width: 100%;
-}
-
-.storybook-story-info-body {
-  color: #444;
-  font-family: 'Open Sans Condensed', sans-serif;
-  font-weight: 300;
-  margin: 0 auto;
-  max-width: 48rem;
-  line-height: 1.45;
-  padding: .25rem;
-}
-
-.storybook-story-info-body-inline {
-  max-width: inherit;
-  border-top: solid 1px #fafafa;
-  margin-top: 1.5em;
-}
-
-.storybook-story-info-body h1,
-.storybook-story-info-body h2,
-.storybook-story-info-body h3,
-.storybook-story-info-body h4,
-.storybook-story-info-body h5,
-.storybook-story-info-body h6 {
-  font-family: Arimo, Helvetica, sans-serif;
-}
-
-.storybook-story-info-body h1,
-.storybook-story-info-body h2,
-.storybook-story-info-body h3 {
-  border-bottom: 2px solid #fafafa;
-  margin-bottom: 1.15rem;
-  padding-bottom: .5rem;
-}
-
-.storybook-story-info-body h1 {
-  text-align: center;
-}
-
-.storybook-story-info-body blockquote {
-  border-left: 8px solid #fafafa;
-  padding: 1rem;
-}
-
-.storybook-story-info-body pre,
-.storybook-story-info-body code {
-  background-color: #fafafa;
-}
-
-.storybook-story-info-body table {
-  width: 100%;
-}
-
-.storybook-story-info-body th {
-  text-align: left;
-}