diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
index 4a4f73bc35e280..f8735eb16c43cb 100644
--- a/docs/src/modules/components/AppContent.js
+++ b/docs/src/modules/components/AppContent.js
@@ -4,15 +4,24 @@ import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
-  root: theme.mixins.gutters({
+  root: {
     paddingTop: 80,
     flex: '1 1 100%',
     maxWidth: '100%',
     margin: '0 auto',
-  }),
-  [theme.breakpoints.up('md')]: {
-    root: {
-      maxWidth: theme.breakpoints.values.md,
+    paddingLeft: theme.spacing.unit * 2,
+    paddingRight: theme.spacing.unit * 2,
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing.unit * 4,
+      paddingRight: theme.spacing.unit * 4,
+    },
+    [theme.breakpoints.up('md')]: {
+      maxWidth: 'calc(100% - 160px)',
+    },
+    [theme.breakpoints.up('lg')]: {
+      paddingLeft: theme.spacing.unit * 5,
+      paddingRight: theme.spacing.unit * 9,
+      maxWidth: 'calc(100% - 240px - 160px)',
     },
   },
 });
@@ -20,7 +29,7 @@ const styles = theme => ({
 function AppContent(props) {
   const { className, classes, children } = props;
 
-  return <div className={classNames(classes.root, className)}>{children}</div>;
+  return <main className={classNames(classes.root, className)}>{children}</main>;
 }
 
 AppContent.propTypes = {
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index d45e385459b4ca..9dd1f8ff3ce870 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -14,7 +14,7 @@ import { pageToTitle } from 'docs/src/modules/utils/helpers';
 
 const styles = theme => ({
   paper: {
-    width: 250,
+    width: 240,
     backgroundColor: theme.palette.background.paper,
   },
   title: {
@@ -117,7 +117,7 @@ function AppDrawer(props, context) {
   );
 
   return (
-    <div className={className}>
+    <nav className={className}>
       <Hidden lgUp={!disablePermanent} implementation="js">
         <SwipeableDrawer
           classes={{
@@ -148,7 +148,7 @@ function AppDrawer(props, context) {
           </Drawer>
         </Hidden>
       )}
-    </div>
+    </nav>
   );
 }
 
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index a3c01d16178368..f43d3ee9cdc105 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -60,12 +60,13 @@ const styles = theme => ({
   },
   appBarShift: {
     [theme.breakpoints.up('lg')]: {
-      width: 'calc(100% - 250px)',
+      width: 'calc(100% - 240px)',
     },
   },
   drawer: {
     [theme.breakpoints.up('lg')]: {
-      width: 250,
+      flexShrink: 0,
+      width: 240,
     },
   },
   navIconHide: {
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 04ba13f7251658..e0800edd9b1c9e 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import keycode from 'keycode';
 import compose from 'recompose/compose';
-import pure from 'recompose/pure';
 import EventListener from 'react-event-listener';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
@@ -196,5 +195,4 @@ AppSearch.propTypes = {
 export default compose(
   withStyles(styles),
   withWidth(),
-  pure,
 )(AppSearch);
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
new file mode 100644
index 00000000000000..1a0f6d193c126f
--- /dev/null
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -0,0 +1,183 @@
+/* eslint-disable react/no-danger */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'docs/src/modules/components/Link';
+import marked from 'marked';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
+import EventListener from 'react-event-listener';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import { textToHash } from '@material-ui/docs/MarkdownElement/MarkdownElement';
+
+const renderer = new marked.Renderer();
+
+let itemsServer = null;
+renderer.heading = (text, level) => {
+  if (level === 1 || level > 3) {
+    return;
+  }
+
+  if (level === 2) {
+    itemsServer.push({
+      text,
+      level,
+      hash: textToHash(text),
+      children: [],
+    });
+  }
+
+  if (level === 3) {
+    itemsServer[itemsServer.length - 1].children.push({
+      text,
+      level,
+      hash: textToHash(text),
+    });
+  }
+};
+
+const styles = theme => ({
+  root: {
+    top: 70,
+    width: 160,
+    flexShrink: 0,
+    order: 2,
+    position: 'sticky',
+    wordBreak: 'break-word',
+    height: 'calc(100vh - 70px)',
+    overflowY: 'auto',
+    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit *
+      2}px 0`,
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'block',
+    },
+  },
+  ul: {
+    padding: 0,
+    margin: 0,
+    listStyleType: 'none',
+  },
+  item: {
+    fontSize: 13,
+    padding: `${theme.spacing.unit / 2}px 0`,
+  },
+});
+
+class AppTableOfContents extends React.Component {
+  handleScroll = debounce(() => {
+    this.findActiveIndex();
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
+  constructor(props) {
+    super(props);
+    itemsServer = [];
+    marked(props.contents.join(''), {
+      renderer,
+    });
+  }
+
+  state = {
+    active: null,
+  };
+
+  componentDidMount() {
+    this.itemsClient = [];
+
+    itemsServer.forEach(item2 => {
+      this.itemsClient.push({
+        ...item2,
+        node: document.getElementById(item2.hash),
+      });
+
+      if (item2.children.length > 0) {
+        item2.children.forEach(item3 => {
+          this.itemsClient.push({
+            ...item3,
+            node: document.getElementById(item3.hash),
+          });
+        });
+      }
+    });
+
+    this.findActiveIndex();
+  }
+
+  componentWillUnmount() {
+    this.handleScroll.clear();
+  }
+
+  findActiveIndex = () => {
+    const active = this.itemsClient.find(
+      (item, index) =>
+        document.documentElement.scrollTop < item.node.offsetTop + 100 ||
+        index === this.itemsClient.length - 1,
+    );
+
+    if (active && this.state.active !== active.hash) {
+      this.setState({
+        active: active.hash,
+      });
+    }
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { active } = this.state;
+
+    return (
+      <nav className={classes.root}>
+        {itemsServer.length > 0 ? (
+          <React.Fragment>
+            <Typography variant="body2" gutterBottom>
+              Contents
+            </Typography>
+            <EventListener target="window" onScroll={this.handleScroll} />
+            <ul className={classes.ul}>
+              {itemsServer.map(item2 => (
+                <li key={item2.text}>
+                  <Typography
+                    color={active === item2.hash ? 'textPrimary' : 'textSecondary'}
+                    className={classes.item}
+                    component={linkProps => (
+                      <Link {...linkProps} variant="inherit" href={`#${item2.hash}`} />
+                    )}
+                  >
+                    <span dangerouslySetInnerHTML={{ __html: item2.text }} />
+                  </Typography>
+                  {item2.children.length > 0 ? (
+                    <ul className={classes.ul}>
+                      {item2.children.map(item3 => (
+                        <li key={item3.text}>
+                          <Typography
+                            className={classes.item}
+                            style={{
+                              paddingLeft: 8 * 2,
+                            }}
+                            color={active === item3.hash ? 'textPrimary' : 'textSecondary'}
+                            component={linkProps => (
+                              <Link {...linkProps} variant="inherit" href={`#${item3.hash}`} />
+                            )}
+                          >
+                            <span dangerouslySetInnerHTML={{ __html: item3.text }} />
+                          </Typography>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          </React.Fragment>
+        ) : null}
+      </nav>
+    );
+  }
+}
+
+AppTableOfContents.propTypes = {
+  classes: PropTypes.object.isRequired,
+  contents: PropTypes.array.isRequired,
+};
+
+export default withStyles(styles)(AppTableOfContents);
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
index b3accc8ae1f3de..cf89e07dc69c69 100644
--- a/docs/src/modules/components/Link.js
+++ b/docs/src/modules/components/Link.js
@@ -47,7 +47,13 @@ function Link(props) {
   } = props;
 
   let ComponentRoot;
-  const className = classNames(classes.root, classes[variant], classNameProp);
+  const className = classNames(
+    classes.root,
+    {
+      [classes[variant]]: variant !== 'inherit',
+    },
+    classNameProp,
+  );
   let RootProps;
   let children = childrenProp;
 
@@ -103,7 +109,7 @@ Link.propTypes = {
   router: PropTypes.shape({
     pathname: PropTypes.string.isRequired,
   }).isRequired,
-  variant: PropTypes.oneOf(['default', 'primary', 'secondary', 'button']),
+  variant: PropTypes.oneOf(['default', 'primary', 'secondary', 'button', 'inherit']),
 };
 
 export default compose(
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index bf21716f4fdd2d..ffa57502478f12 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -10,6 +10,7 @@ import AppContent from 'docs/src/modules/components/AppContent';
 import Demo from 'docs/src/modules/components/Demo';
 import Carbon from 'docs/src/modules/components/Carbon';
 import AppFrame from 'docs/src/modules/components/AppFrame';
+import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import {
   getHeaders,
   getContents,
@@ -55,15 +56,30 @@ function MarkdownDocs(props, context) {
     }
   }
 
-  const section = markdownLocation.split('/')[4];
+  if (headers.components.length > 0) {
+    const section = markdownLocation.split('/')[4];
+    contents.push(`
+## API
+
+${headers.components
+      .map(
+        component =>
+          `- [&lt;${component} /&gt;](${section === 'lab' ? '/lab/api' : '/api'}/${kebabCase(
+            component,
+          )})`,
+      )
+      .join('\n')}
+        `);
+  }
 
   return (
     <AppFrame>
+      <Head
+        title={`${headers.title || getTitle(markdown)} - Material-UI`}
+        description={getDescription(markdown)}
+      />
+      <AppTableOfContents contents={contents} />
       <AppContent className={classes.root}>
-        <Head
-          title={`${headers.title || getTitle(markdown)} - Material-UI`}
-          description={getDescription(markdown)}
-        />
         <div className={classes.header}>
           <Button component="a" href={`${SOURCE_CODE_ROOT_URL}${markdownLocation}`}>
             {'Edit this page'}
@@ -94,23 +110,6 @@ function MarkdownDocs(props, context) {
             <MarkdownElement className={classes.markdownElement} key={content} text={content} />
           );
         })}
-        {headers.components.length > 0 ? (
-          <MarkdownElement
-            className={classes.markdownElement}
-            text={`
-## API
-
-${headers.components
-              .map(
-                component =>
-                  `- [&lt;${component} /&gt;](${
-                    section === 'lab' ? '/lab/api' : '/api'
-                  }/${kebabCase(component)})`,
-              )
-              .join('\n')}
-          `}
-          />
-        ) : null}
       </AppContent>
     </AppFrame>
   );
diff --git a/docs/src/pages/demos/lists/lists.md b/docs/src/pages/demos/lists/lists.md
index 771ed2ce315b26..e853c14b93d871 100644
--- a/docs/src/pages/demos/lists/lists.md
+++ b/docs/src/pages/demos/lists/lists.md
@@ -9,23 +9,23 @@ components: Collapse, Divider, List, ListItem, ListItemAvatar, ListItemIcon, Lis
 
 [Lists](https://material.io/design/components/lists.html) are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
 
-### Simple List
+## Simple List
 
 {{"demo": "pages/demos/lists/SimpleList.js"}}
 
-### Folder List
+## Folder List
 
 {{"demo": "pages/demos/lists/FolderList.js"}}
 
-### Inset List
+## Inset List
 
 {{"demo": "pages/demos/lists/InsetList.js"}}
 
-### Nested List
+## Nested List
 
 {{"demo": "pages/demos/lists/NestedList.js"}}
 
-### Pinned Subheader List
+## Pinned Subheader List
 
 Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.
 
diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md
index 130d11e519240b..3e31efd6dceb35 100644
--- a/docs/src/pages/getting-started/faq/faq.md
+++ b/docs/src/pages/getting-started/faq/faq.md
@@ -69,13 +69,13 @@ You can use the same solution with them.
 
 There are a number of different options:
 
-### `withTheme` option:
+**`withTheme` option:**
 
 ```js
 export default withStyles(styles, { withTheme: true })(Modal);
 ```
 
-### `compose()` helper function:
+**`compose()` helper function:**
 
 ```js
 import { compose } from 'recompose';
@@ -86,7 +86,7 @@ export default compose(
 )(Modal);
 ```
 
-### raw function chaining:
+**raw function chaining:**
 
 ```js
 export default withTheme()(withStyles(styles)(Modal));
diff --git a/docs/src/pages/premium-themes/PremiumThemes.js b/docs/src/pages/premium-themes/PremiumThemes.js
index d5d68421881dd4..6a3cce88bb8379 100644
--- a/docs/src/pages/premium-themes/PremiumThemes.js
+++ b/docs/src/pages/premium-themes/PremiumThemes.js
@@ -63,8 +63,8 @@ function PremiumThemes(props) {
   return (
     <Grid container spacing={16}>
       {themes.map(theme => (
-        <Grid item xs={12} sm={6}>
-          <Card key={theme.name} className={classes.card}>
+        <Grid key={theme.name} item xs={12} sm={6}>
+          <Card className={classes.card}>
             <CardMedia
               component="a"
               href={theme.href}
diff --git a/docs/src/pages/style/icons/icons.md b/docs/src/pages/style/icons/icons.md
index 9ddd2a6ffdbb4e..577145d0eaf0de 100644
--- a/docs/src/pages/style/icons/icons.md
+++ b/docs/src/pages/style/icons/icons.md
@@ -104,7 +104,9 @@ Optionally, you can set the icon color using one of the theme color properties:
 
 {{"demo": "pages/style/icons/Icons.js"}}
 
-### [Font Awesome](https://fontawesome.com/icons)
+### Font Awesome
+
+[Font Awesome](https://fontawesome.com/icons) can be used with the `Icon` component as follow:
 
 {{"demo": "pages/style/icons/FontAwesome.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/style/typography/typography.md b/docs/src/pages/style/typography/typography.md
index e87c5a5ce2c0af..169f2c76ed64cf 100644
--- a/docs/src/pages/style/typography/typography.md
+++ b/docs/src/pages/style/typography/typography.md
@@ -22,9 +22,9 @@ Shown below is a sample link markup used to load the Roboto font from a CDN.
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 ```
 
-## Install with [npm](https://www.npmjs.com/package/typeface-roboto)
+## Install with npm
 
-You can install it by typing the below command in your terminal:
+You can [install it](https://www.npmjs.com/package/typeface-roboto) by typing the below command in your terminal:
 
 `npm install typeface-roboto --save`
 
diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
index a1c22d6571d52f..19b22a3126943a 100644
--- a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
+++ b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
@@ -18,6 +18,13 @@ marked.Lexer.prototype.lex = function lex(src) {
 
 const renderer = new marked.Renderer();
 
+export function textToHash(text) {
+  return text
+    .toLowerCase()
+    .replace(/=&gt;|&lt;| \/&gt;|<code>|<\/code>/g, '')
+    .replace(/[^\w]+/g, '-');
+}
+
 renderer.heading = (text, level) => {
   // Small title. No need for an anchor.
   // It's reducing the risk of duplicated id and it's less elements in the DOM.
@@ -41,7 +48,7 @@ renderer.heading = (text, level) => {
   );
 };
 
-marked.setOptions({
+const markedOptions = {
   gfm: true,
   tables: true,
   breaks: false,
@@ -75,7 +82,7 @@ marked.setOptions({
     return prism.highlight(code, language);
   },
   renderer,
-});
+};
 
 const styles = theme => ({
   root: {
@@ -258,7 +265,7 @@ function MarkdownElement(props) {
   return (
     <div
       className={classNames(classes.root, 'markdown-body', className)}
-      dangerouslySetInnerHTML={{ __html: marked(text) }}
+      dangerouslySetInnerHTML={{ __html: marked(text, markedOptions) }}
       {...other}
     />
   );