diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
index 1864860add75b3..bbae460cb3e7c1 100644
--- a/docs/src/app/app-routes.jsx
+++ b/docs/src/app/app-routes.jsx
@@ -25,7 +25,7 @@ import AutoComplete from './components/pages/components/auto-complete';
 import AvatarPage from './components/pages/components/Avatar/Page';
 import BadgePage from './components/pages/components/Badge/Page';
 import Buttons from './components/pages/components/buttons';
-import CardsPage from './components/pages/components/Cards/Page';
+import CardPage from './components/pages/components/Card/Page';
 import DatePicker from './components/pages/components/date-picker';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
@@ -84,7 +84,7 @@ const AppRoutes = (
       <Route path="avatar" component={AvatarPage} />
       <Route path="badge" component={BadgePage} />
       <Route path="buttons" component={Buttons} />
-      <Route path="cards" component={CardsPage} />
+      <Route path="card" component={CardPage} />
       <Route path="date-picker" component={DatePicker} />
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
diff --git a/docs/src/app/components/MarkdownElement.jsx b/docs/src/app/components/MarkdownElement.jsx
index 64aaba970d7c99..b84f1a7d7b8bdb 100644
--- a/docs/src/app/components/MarkdownElement.jsx
+++ b/docs/src/app/components/MarkdownElement.jsx
@@ -7,8 +7,8 @@ require('./mui-github-markdown.css');
 
 const styles = {
   root: {
-    marginTop: 10,
-    marginBottom: 14,
+    marginTop: 20,
+    marginBottom: 20,
     padding: '0 10px',
   },
 };
diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx
index 88ded05f19c73c..57d8aa32316ff3 100644
--- a/docs/src/app/components/pages/components.jsx
+++ b/docs/src/app/components/pages/components.jsx
@@ -10,7 +10,7 @@ export default class Components extends React.Component {
       {route: '/components/avatar', text: 'Avatar'},
       {route: '/components/badge', text: 'Badge'},
       {route: '/components/buttons', text: 'Buttons'},
-      {route: '/components/cards', text: 'Cards'},
+      {route: '/components/card', text: 'Card'},
       {route: '/components/date-picker', text: 'Date Picker'},
       {route: '/components/dialog', text: 'Dialog'},
       {route: '/components/divider', text: 'Divider'},
diff --git a/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx
index b4f6cd8bbcd0fd..f71254000f8d9e 100644
--- a/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx
+++ b/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx
@@ -1,15 +1,11 @@
 import React from 'react';
 import AppBar from 'material-ui/lib/app-bar';
 
-const AppBarExampleIcon = React.createClass({
-  render() {
-    return (
-      <AppBar
-        title="Title"
-        iconClassNameRight="muidocs-icon-navigation-expand-more"
-      />
-    );
-  },
-});
+const AppBarExampleIcon = () => (
+  <AppBar
+    title="Title"
+    iconClassNameRight="muidocs-icon-navigation-expand-more"
+  />
+);
 
 export default AppBarExampleIcon;
diff --git a/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx
index 6fda172e7b6696..1d6e8f18fb73ac 100644
--- a/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx
+++ b/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx
@@ -14,16 +14,12 @@ const styles = {
   },
 };
 
-const AppBarExampleIconButton = React.createClass({
-  render() {
-    return (
-      <AppBar
-        title={<span style={styles.title} onTouchTap={handleTouchTap}>Title</span>}
-        iconElementLeft={<IconButton><NavigationClose /></IconButton>}
-        iconElementRight={<FlatButton label="Save" />}
-      />
-   );
-  },
-});
+const AppBarExampleIconButton = () => (
+  <AppBar
+    title={<span style={styles.title} onTouchTap={handleTouchTap}>Title</span>}
+    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+    iconElementRight={<FlatButton label="Save" />}
+  />
+);
 
 export default AppBarExampleIconButton;
diff --git a/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx
index 33b670ccc4e4a9..38f79eacbc3d52 100644
--- a/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx
+++ b/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx
@@ -6,28 +6,24 @@ import IconMenu from 'material-ui/lib/menus/icon-menu';
 import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
 import MenuItem from 'material-ui/lib/menus/menu-item';
 
-const AppBarExampleIconMenu = React.createClass({
-  render() {
-    return (
-      <AppBar
-        title="Title"
-        iconElementLeft={<IconButton><NavigationClose /></IconButton>}
-        iconElementRight={
-          <IconMenu
-            iconButtonElement={
-              <IconButton><MoreVertIcon /></IconButton>
-            }
-            targetOrigin={{horizontal: 'right', vertical: 'top'}}
-            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
-          >
-            <MenuItem primaryText="Refresh" />
-            <MenuItem primaryText="Help" />
-            <MenuItem primaryText="Sign out" />
-          </IconMenu>
+const AppBarExampleIconMenu = () => (
+  <AppBar
+    title="Title"
+    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+    iconElementRight={
+      <IconMenu
+        iconButtonElement={
+          <IconButton><MoreVertIcon /></IconButton>
         }
-      />
-    );
-  },
-});
+        targetOrigin={{horizontal: 'right', vertical: 'top'}}
+        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
+      >
+        <MenuItem primaryText="Refresh" />
+        <MenuItem primaryText="Help" />
+        <MenuItem primaryText="Sign out" />
+      </IconMenu>
+    }
+  />
+);
 
 export default AppBarExampleIconMenu;
diff --git a/docs/src/app/components/pages/components/AppBar/Page.jsx b/docs/src/app/components/pages/components/AppBar/Page.jsx
index d02144b19ae044..fd7ba57483ef47 100644
--- a/docs/src/app/components/pages/components/AppBar/Page.jsx
+++ b/docs/src/app/components/pages/components/AppBar/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import appBarReadmeText from './README';
 import AppBarExampleIcon from './ExampleIcon';
 import appBarExampleIconCode from '!raw!./ExampleIcon';
@@ -11,23 +12,20 @@ import AppBarExampleIconMenu from './ExampleIconMenu';
 import appBarExampleIconMenuCode from '!raw!./ExampleIconMenu';
 import appBarCode from '!raw!material-ui/lib/app-bar';
 
-export default class AppBarPage extends React.Component {
+const AppBarPage = () => (
+  <div>
+    <MarkdownElement text={appBarReadmeText} />
+    <CodeExample code={appBarExampleIconCode}>
+      <AppBarExampleIcon />
+    </CodeExample>
+    <CodeExample code={appBarExampleIconButtonCode}>
+      <AppBarExampleIconButton />
+    </CodeExample>
+    <CodeExample code={appBarExampleIconMenuCode}>
+      <AppBarExampleIconMenu />
+    </CodeExample>
+    <PropTypeDescription code={appBarCode}/>
+  </div>
+);
 
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={appBarReadmeText} />
-        <CodeExample code={appBarExampleIconCode}>
-          <AppBarExampleIcon />
-        </CodeExample>
-        <CodeExample code={appBarExampleIconButtonCode}>
-          <AppBarExampleIconButton />
-        </CodeExample>
-        <CodeExample code={appBarExampleIconMenuCode}>
-          <AppBarExampleIconMenu />
-        </CodeExample>
-        <PropTypeDescription code={appBarCode}/>
-      </div>
-    );
-  }
-}
+export default AppBarPage;
diff --git a/docs/src/app/components/pages/components/AppBar/README.md b/docs/src/app/components/pages/components/AppBar/README.md
index 4cbf97ae3f9ee9..282b20a32945b5 100644
--- a/docs/src/app/components/pages/components/AppBar/README.md
+++ b/docs/src/app/components/pages/components/AppBar/README.md
@@ -1,7 +1,6 @@
 ## App Bar
 
-App bars are a collection of components placed as a static header for an application.
-It is used for navigation, search branding, and actions.
-An app bar is also referred to as the primary toolbar or action bar for Android.
+The [app bar](https://www.google.com/design/spec/layout/structure.html#structure-app-bar), formerly known as the action bar in Android,
+is a special kind of toolbar that’s used for branding, navigation, search, and actions.
 
 ### Examples
diff --git a/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx b/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx
index 4e32f1a80181fe..1122f14d2f5386 100644
--- a/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx
+++ b/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx
@@ -8,80 +8,76 @@ import ListItem from 'material-ui/lib/lists/list-item';
 
 const colors = styles.Colors;
 
-const AvatarExampleSimple = React.createClass({
-  render() {
-    return (
-      <List>
-        <ListItem
-          disabled={true}
-          leftAvatar={
-            <Avatar src="images/uxceo-128.jpg" />
-          }
+const AvatarExampleSimple = () => (
+  <List>
+    <ListItem
+      disabled={true}
+      leftAvatar={
+        <Avatar src="images/uxceo-128.jpg" />
+      }
+    >
+      Image Avatar
+    </ListItem>
+    <ListItem
+      disabled={true}
+      leftAvatar={
+        <Avatar icon={<FileFolder />} />
+      }
+    >
+      SvgIcon Avatar
+    </ListItem>
+    <ListItem
+      disabled={true}
+      leftAvatar={
+        <Avatar
+          icon={<FileFolder />}
+          color={colors.orange200}
+          backgroundColor={colors.pink400}
+        />
+      }
+    >
+      SvgIcon Avatar with custom colors
+    </ListItem>
+    <ListItem
+      disabled={true}
+      leftAvatar={
+        <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
+      }
+    >
+      FontIcon Avatar
+    </ListItem>
+    <ListItem
+      disabled={true}
+      leftAvatar={
+        <Avatar
+          icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
+          color={colors.blue300}
+          backgroundColor={colors.indigo900}
+        />
+      }
+    >
+      FontIcon Avatar with custom colors
+    </ListItem>
+    <ListItem
+      disabled={true}
+      leftAvatar={<Avatar>A</Avatar>}
+    >
+      Letter Avatar
+    </ListItem>
+    <ListItem
+      disabled={true}
+      leftAvatar={
+        <Avatar
+          color={colors.deepOrange300}
+          backgroundColor={colors.purple500}
         >
-          Image Avatar
-        </ListItem>
-        <ListItem
-          disabled={true}
-          leftAvatar={
-            <Avatar icon={<FileFolder />} />
-          }
-        >
-          SvgIcon Avatar
-        </ListItem>
-        <ListItem
-          disabled={true}
-          leftAvatar={
-            <Avatar
-              icon={<FileFolder />}
-              color={colors.orange200}
-              backgroundColor={colors.pink400}
-            />
-          }
-        >
-          SvgIcon Avatar with custom colors
-        </ListItem>
-        <ListItem
-          disabled={true}
-          leftAvatar={
-            <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
-          }
-        >
-          FontIcon Avatar
-        </ListItem>
-        <ListItem
-          disabled={true}
-          leftAvatar={
-            <Avatar
-              icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
-              color={colors.blue300}
-              backgroundColor={colors.indigo900}
-            />
-          }
-        >
-          FontIcon Avatar with custom colors
-        </ListItem>
-        <ListItem
-          disabled={true}
-          leftAvatar={<Avatar>A</Avatar>}
-        >
-          Letter Avatar
-        </ListItem>
-        <ListItem
-          disabled={true}
-          leftAvatar={
-            <Avatar
-              color={colors.deepOrange300}
-              backgroundColor={colors.purple500}
-            >
-              A
-            </Avatar>
-          }
-        >
-          Letter Avatar with custom colors
-        </ListItem>
-      </List>
-    );
-  },
-});
+          A
+        </Avatar>
+      }
+    >
+      Letter Avatar with custom colors
+    </ListItem>
+  </List>
+);
 
 export default AvatarExampleSimple;
diff --git a/docs/src/app/components/pages/components/Avatar/Page.jsx b/docs/src/app/components/pages/components/Avatar/Page.jsx
index f1f1652a7bd449..925e8ea5ded713 100644
--- a/docs/src/app/components/pages/components/Avatar/Page.jsx
+++ b/docs/src/app/components/pages/components/Avatar/Page.jsx
@@ -2,21 +2,20 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import avatarReadmeText from './README';
 import AvatarExampleSimple from './ExampleSimple';
 import avatarExampleSimpleCode from '!raw!./ExampleSimple';
 import avatarCode from '!raw!material-ui/lib/avatar';
 
-export default class AvatarsPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={avatarReadmeText} />
-        <CodeExample code={avatarExampleSimpleCode}>
-          <AvatarExampleSimple />
-        </CodeExample>
-        <PropTypeDescription code={avatarCode}/>
-      </div>
-    );
-  }
-}
+const AvatarsPage = () => (
+  <div>
+    <MarkdownElement text={avatarReadmeText} />
+    <CodeExample code={avatarExampleSimpleCode}>
+      <AvatarExampleSimple />
+    </CodeExample>
+    <PropTypeDescription code={avatarCode}/>
+  </div>
+);
+
+export default AvatarsPage;
diff --git a/docs/src/app/components/pages/components/Badge/Page.jsx b/docs/src/app/components/pages/components/Badge/Page.jsx
index d701ad4a512e85..ff7d457e061df2 100644
--- a/docs/src/app/components/pages/components/Badge/Page.jsx
+++ b/docs/src/app/components/pages/components/Badge/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import badgeReadmeText from './README';
 import BadgeExampleSimple from './ExampleSimple';
 import badgeExampleSimpleCode from '!raw!./ExampleSimple';
@@ -9,19 +10,17 @@ import BadgeExampleContent from './ExampleContent';
 import badgeExampleContentCode from '!raw!./ExampleContent';
 import badgeCode from '!raw!material-ui/lib/badge';
 
-const BadgePage = () => {
-  return (
-    <div>
-      <MarkdownElement text={badgeReadmeText} />
-      <CodeExample code={badgeExampleSimpleCode}>
-        <BadgeExampleSimple />
-      </CodeExample>
-      <CodeExample code={badgeExampleContentCode}>
-        <BadgeExampleContent />
-      </CodeExample>
-      <PropTypeDescription code={badgeCode}/>
-    </div>
-  );
-};
+const BadgePage = () => (
+  <div>
+    <MarkdownElement text={badgeReadmeText} />
+    <CodeExample code={badgeExampleSimpleCode}>
+      <BadgeExampleSimple />
+    </CodeExample>
+    <CodeExample code={badgeExampleContentCode}>
+      <BadgeExampleContent />
+    </CodeExample>
+    <PropTypeDescription code={badgeCode}/>
+  </div>
+);
 
 export default BadgePage;
diff --git a/docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx b/docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx
similarity index 100%
rename from docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx
rename to docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx
diff --git a/docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx b/docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx
similarity index 100%
rename from docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx
rename to docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx
diff --git a/docs/src/app/components/pages/components/Cards/Page.jsx b/docs/src/app/components/pages/components/Card/Page.jsx
similarity index 54%
rename from docs/src/app/components/pages/components/Cards/Page.jsx
rename to docs/src/app/components/pages/components/Card/Page.jsx
index 548b641cc849f4..a8b1668bc66d07 100644
--- a/docs/src/app/components/pages/components/Cards/Page.jsx
+++ b/docs/src/app/components/pages/components/Card/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import cardReadmeText from './README';
 import cardExampleWithAvatarCode from '!raw!./ExampleWithAvatar';
 import CardExampleWithAvatar from './ExampleWithAvatar';
@@ -9,19 +10,17 @@ import cardExampleWithoutAvatarCode from '!raw!./ExampleWithoutAvatar';
 import CardExampleWithoutAvatar from './ExampleWithoutAvatar';
 import cardCode from '!raw!material-ui/lib/card/card';
 
-export default class CardPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={cardReadmeText} />
-        <CodeExample code={cardExampleWithAvatarCode}>
-          <CardExampleWithAvatar />
-        </CodeExample>
-        <CodeExample code={cardExampleWithoutAvatarCode}>
-          <CardExampleWithoutAvatar />
-        </CodeExample>
-        <PropTypeDescription code={cardCode} />
-      </div>
-    );
-  }
-}
+const CardPage = () => (
+  <div>
+    <MarkdownElement text={cardReadmeText} />
+    <CodeExample code={cardExampleWithAvatarCode}>
+      <CardExampleWithAvatar />
+    </CodeExample>
+    <CodeExample code={cardExampleWithoutAvatarCode}>
+      <CardExampleWithoutAvatar />
+    </CodeExample>
+    <PropTypeDescription code={cardCode} />
+  </div>
+);
+
+export default CardPage;
diff --git a/docs/src/app/components/pages/components/Cards/README.md b/docs/src/app/components/pages/components/Card/README.md
similarity index 100%
rename from docs/src/app/components/pages/components/Cards/README.md
rename to docs/src/app/components/pages/components/Card/README.md
diff --git a/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx
index 5e2958e897b41d..fd2e64d913c3a8 100644
--- a/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx
+++ b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx
@@ -3,19 +3,21 @@ import Dialog from 'material-ui/lib/dialog';
 import FlatButton from 'material-ui/lib/flat-button';
 import RaisedButton from 'material-ui/lib/raised-button';
 
-const DialogExampleModal = React.createClass({
+export default class DialogExampleModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+    };
+  }
 
-  getInitialState() {
-    return {open: false};
-  },
-
-  handleOpen() {
+  handleOpen = () => {
     this.setState({open: true});
-  },
+  }
 
-  handleClose() {
+  handleClose = () => {
     this.setState({open: false});
-  },
+  }
 
   render() {
     const actions = [
@@ -31,7 +33,8 @@ const DialogExampleModal = React.createClass({
     ];
 
     return (
-      <RaisedButton label="Modal Dialog" onTouchTap={this.handleOpen}>
+      <div>
+        <RaisedButton label="Modal Dialog" onTouchTap={this.handleOpen} />
         <Dialog
           title="Dialog With Actions"
           actions={actions}
@@ -39,9 +42,7 @@ const DialogExampleModal = React.createClass({
           open={this.state.open}>
           Only actions can close this dialog.
         </Dialog>
-      </RaisedButton>
+      </div>
     );
-  },
-});
-
-export default DialogExampleModal;
+  }
+}
diff --git a/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx
index d3b35f779b045f..78b529c481769b 100644
--- a/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx
+++ b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx
@@ -3,19 +3,21 @@ import Dialog from 'material-ui/lib/dialog';
 import FlatButton from 'material-ui/lib/flat-button';
 import RaisedButton from 'material-ui/lib/raised-button';
 
-const DialogExampleSimple = React.createClass({
+export default class DialogExampleSimple extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+    };
+  }
 
-  getInitialState() {
-    return {open: false};
-  },
-
-  handleOpen() {
+  handleOpen = () => {
     this.setState({open: true});
-  },
+  }
 
-  handleClose() {
+  handleClose = () => {
     this.setState({open: false});
-  },
+  }
 
   render() {
     const actions = [
@@ -31,7 +33,8 @@ const DialogExampleSimple = React.createClass({
     ];
 
     return (
-      <RaisedButton label="Dialog With Actions" onTouchTap={this.handleOpen}>
+      <div>
+        <RaisedButton label="Dialog With Actions" onTouchTap={this.handleOpen} />
         <Dialog
           title="Dialog With Actions"
           actions={actions}
@@ -40,9 +43,7 @@ const DialogExampleSimple = React.createClass({
           onRequestClose={this.handleClose}>
           The actions in this window were passed in as an array of react objects.
         </Dialog>
-      </RaisedButton>
+      </div>
     );
-  },
-});
-
-export default DialogExampleSimple;
+  }
+}
diff --git a/docs/src/app/components/pages/components/Dialog/Page.jsx b/docs/src/app/components/pages/components/Dialog/Page.jsx
index 4df50c48dd48b9..db21080e83dd02 100644
--- a/docs/src/app/components/pages/components/Dialog/Page.jsx
+++ b/docs/src/app/components/pages/components/Dialog/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import dialogReadmeText from './README';
 import DialogExampleSimple from './ExampleSimple';
 import DialogExampleSimpleCode from '!raw!./ExampleSimple';
@@ -9,19 +10,17 @@ import DialogExampleModal from './ExampleModal';
 import DialogExampleModalCode from '!raw!./ExampleModal';
 import dialogCode from '!raw!material-ui/lib/dialog';
 
-export default class DialogPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={dialogReadmeText} />
-        <CodeExample code={DialogExampleSimpleCode}>
-          <DialogExampleSimple />
-        </CodeExample>
-        <CodeExample code={DialogExampleModalCode}>
-          <DialogExampleModal />
-        </CodeExample>
-        <PropTypeDescription code={dialogCode}/>
-      </div>
-    );
-  }
-}
+const DialogPage = () => (
+  <div>
+    <MarkdownElement text={dialogReadmeText} />
+    <CodeExample code={DialogExampleSimpleCode}>
+      <DialogExampleSimple />
+    </CodeExample>
+    <CodeExample code={DialogExampleModalCode}>
+      <DialogExampleModal />
+    </CodeExample>
+    <PropTypeDescription code={dialogCode}/>
+  </div>
+);
+
+export default DialogPage;
diff --git a/docs/src/app/components/pages/components/Dialog/README.md b/docs/src/app/components/pages/components/Dialog/README.md
index c06dbad31c4cf6..7a39c812bd094f 100644
--- a/docs/src/app/components/pages/components/Dialog/README.md
+++ b/docs/src/app/components/pages/components/Dialog/README.md
@@ -1,7 +1,8 @@
 ## Dialog
 
-For more information on the `Dialog` please visit the Material Design's
-specifications [here](https://www.google.com/design/spec/components/dialogs.html).
+[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text
+and UI controls focused on a specific task. They inform users about critical information,
+require users to make decisions, or involve multiple tasks.
 
 Dialog can only be a controlled component.
 You must provide the open prop and handle `onRequestClose` in order to use this component.
diff --git a/docs/src/app/components/pages/components/Divider/Page.jsx b/docs/src/app/components/pages/components/Divider/Page.jsx
index b61f35d04dee49..eb3028213a674a 100644
--- a/docs/src/app/components/pages/components/Divider/Page.jsx
+++ b/docs/src/app/components/pages/components/Divider/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import dividerReadmeText from './README';
 import DividerExampleForm from './ExampleForm';
 import dividerExampleFormCode from '!raw!./ExampleForm';
diff --git a/docs/src/app/components/pages/components/DropDownMenu/Page.jsx b/docs/src/app/components/pages/components/DropDownMenu/Page.jsx
index 0c4d714002d324..d74bca18cbefa1 100644
--- a/docs/src/app/components/pages/components/DropDownMenu/Page.jsx
+++ b/docs/src/app/components/pages/components/DropDownMenu/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import dropDownMenuReadmeText from './README';
 import DropDownMenuSimpleExample from './ExampleSimple';
 import dropDownMenuSimpleExampleCode from '!raw!./ExampleSimple';
@@ -11,22 +12,20 @@ import DropDownMenuLabeledExample from './ExampleLabeled';
 import dropDownMenuLabeledExampleCode from '!raw!./ExampleLabeled';
 import dropDownMenuCode from '!raw!material-ui/lib/DropDownMenu/DropDownMenu';
 
-export default class LeftNavPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={dropDownMenuReadmeText} />
-        <CodeExample code={dropDownMenuSimpleExampleCode}>
-          <DropDownMenuSimpleExample />
-        </CodeExample>
-        <CodeExample code={dropDownMenuLongMenuExampleCode}>
-          <DropDownMenuLongMenuExample />
-        </CodeExample>
-        <CodeExample code={dropDownMenuLabeledExampleCode}>
-          <DropDownMenuLabeledExample />
-        </CodeExample>
-        <PropTypeDescription code={dropDownMenuCode}/>
-      </div>
-    );
-  }
-}
+const DropDownMenuPage = () => (
+  <div>
+    <MarkdownElement text={dropDownMenuReadmeText} />
+    <CodeExample code={dropDownMenuSimpleExampleCode}>
+      <DropDownMenuSimpleExample />
+    </CodeExample>
+    <CodeExample code={dropDownMenuLongMenuExampleCode}>
+      <DropDownMenuLongMenuExample />
+    </CodeExample>
+    <CodeExample code={dropDownMenuLabeledExampleCode}>
+      <DropDownMenuLabeledExample />
+    </CodeExample>
+    <PropTypeDescription code={dropDownMenuCode}/>
+  </div>
+);
+
+export default DropDownMenuPage;
diff --git a/docs/src/app/components/pages/components/LeftNav/Page.jsx b/docs/src/app/components/pages/components/LeftNav/Page.jsx
index fee9ff44ef0988..e93271870ab1e1 100644
--- a/docs/src/app/components/pages/components/LeftNav/Page.jsx
+++ b/docs/src/app/components/pages/components/LeftNav/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import leftNavReadmeText from './README';
 import LeftNavSimpleExample from './ExampleSimple';
 import leftNavSimpleExampleCode from '!raw!./ExampleSimple';
@@ -11,22 +12,20 @@ import LeftNavOpenRightExample from './ExampleOpenRight';
 import leftNavOpenRightExampleCode from '!raw!./ExampleOpenRight';
 import leftNavCode from '!raw!material-ui/lib/left-nav';
 
-export default class LeftNavPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={leftNavReadmeText} />
-        <CodeExample code={leftNavSimpleExampleCode}>
-          <LeftNavSimpleExample />
-        </CodeExample>
-        <CodeExample code={leftNavUndockedExampleCode}>
-          <LeftNavUndockedExample />
-        </CodeExample>
-        <CodeExample code={leftNavOpenRightExampleCode}>
-          <LeftNavOpenRightExample />
-        </CodeExample>
-        <PropTypeDescription code={leftNavCode}/>
-      </div>
-    );
-  }
-}
+const LeftNavPage = () => (
+  <div>
+    <MarkdownElement text={leftNavReadmeText} />
+    <CodeExample code={leftNavSimpleExampleCode}>
+      <LeftNavSimpleExample />
+    </CodeExample>
+    <CodeExample code={leftNavUndockedExampleCode}>
+      <LeftNavUndockedExample />
+    </CodeExample>
+    <CodeExample code={leftNavOpenRightExampleCode}>
+      <LeftNavOpenRightExample />
+    </CodeExample>
+    <PropTypeDescription code={leftNavCode}/>
+  </div>
+);
+
+export default LeftNavPage;
diff --git a/docs/src/app/components/pages/components/LeftNav/README.md b/docs/src/app/components/pages/components/LeftNav/README.md
index 22f34efda8b096..7c5eae7e883368 100644
--- a/docs/src/app/components/pages/components/LeftNav/README.md
+++ b/docs/src/app/components/pages/components/LeftNav/README.md
@@ -1,7 +1,7 @@
 ## Left Nav
 
-To find out more about the `LeftNav` component please visit the Material Design's
-specifications [here](https://www.google.com/design/spec/patterns/navigation-drawer.html).
+The [Left Nav](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left.
+It is a common pattern found in Google apps and follows the keylines and metrics for lists.
 
 The API of `LeftNav` has been changed to be declarative and composable.
 The methods `close()`, `open()` and `toggle()` have been deprecated.
diff --git a/docs/src/app/components/pages/components/Snackbar/Page.jsx b/docs/src/app/components/pages/components/Snackbar/Page.jsx
index d8f867b20142b6..343b45fa7b3786 100644
--- a/docs/src/app/components/pages/components/Snackbar/Page.jsx
+++ b/docs/src/app/components/pages/components/Snackbar/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import SnackbarReadmeText from './README';
 import SnackbarExampleSimple from './ExampleSimple';
 import SnackbarExampleSimpleCode from '!raw!./ExampleSimple';
diff --git a/docs/src/app/components/pages/components/Tabs/Page.jsx b/docs/src/app/components/pages/components/Tabs/Page.jsx
index ef12302d19ad94..2920b27b5bba02 100644
--- a/docs/src/app/components/pages/components/Tabs/Page.jsx
+++ b/docs/src/app/components/pages/components/Tabs/Page.jsx
@@ -14,27 +14,25 @@ import tabsText from './Tabs';
 import tabCode from '!raw!material-ui/lib/tabs/tab';
 import tabText from './Tab';
 
-const TabsPage = () => {
-  return (
-    <div>
-      <MarkdownElement text={tabsReadmeText} />
-      <CodeExample code={tabsExampleSimpleCode}>
-        <TabsExampleSimple />
-      </CodeExample>
-      <CodeExample code={tabsExampleControlledCode}>
-        <TabsExampleControlled />
-      </CodeExample>
-      <CodeExample code={tabsExampleSwipeableCode}>
-        <TabsExampleSwipeable />
-      </CodeExample>
-      <PropTypeDescription
-        code={tabsCode}
-        header={tabsText} />
-      <PropTypeDescription
-        code={tabCode}
-        header={tabText} />
-    </div>
-  );
-};
+const TabsPage = () => (
+  <div>
+    <MarkdownElement text={tabsReadmeText} />
+    <CodeExample code={tabsExampleSimpleCode}>
+      <TabsExampleSimple />
+    </CodeExample>
+    <CodeExample code={tabsExampleControlledCode}>
+      <TabsExampleControlled />
+    </CodeExample>
+    <CodeExample code={tabsExampleSwipeableCode}>
+      <TabsExampleSwipeable />
+    </CodeExample>
+    <PropTypeDescription
+      code={tabsCode}
+      header={tabsText} />
+    <PropTypeDescription
+      code={tabCode}
+      header={tabText} />
+  </div>
+);
 
 export default TabsPage;
diff --git a/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx
index ea374856128197..98ec4d7b4c9516 100644
--- a/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx
+++ b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx
@@ -11,38 +11,34 @@ import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
 import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator';
 import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
 
-const ToolbarsExamplesSimple = React.createClass({
-  render() {
-    return (
-      <Toolbar>
-        <ToolbarGroup firstChild={true} float="left">
-          <DropDownMenu value={3}>
-            <MenuItem value={1} primaryText="All Broadcasts" />
-            <MenuItem value={2} primaryText="All Voice" />
-            <MenuItem value={3} primaryText="All Text" />
-            <MenuItem value={4} primaryText="Complete Voice" />
-            <MenuItem value={5} primaryText="Complete Text" />
-            <MenuItem value={6} primaryText="Active Voice" />
-            <MenuItem value={7} primaryText="Active Text" />
-          </DropDownMenu>
-        </ToolbarGroup>
-        <ToolbarGroup float="right">
-          <ToolbarTitle text="Options" />
-          <FontIcon className="muidocs-icon-custom-sort" />
-          <IconMenu iconButtonElement={
-            <IconButton touch={true}>
-              <NavigationExpandMoreIcon />
-            </IconButton>
-          }>
-            <MenuItem primaryText="Download" />
-            <MenuItem primaryText="More Info" />
-          </IconMenu>
-          <ToolbarSeparator />
-          <RaisedButton label="Create Broadcast" primary={true} />
-        </ToolbarGroup>
-      </Toolbar>
-    );
-  },
-});
+const ToolbarsExamplesSimple = () => (
+  <Toolbar>
+    <ToolbarGroup firstChild={true} float="left">
+      <DropDownMenu value={3}>
+        <MenuItem value={1} primaryText="All Broadcasts" />
+        <MenuItem value={2} primaryText="All Voice" />
+        <MenuItem value={3} primaryText="All Text" />
+        <MenuItem value={4} primaryText="Complete Voice" />
+        <MenuItem value={5} primaryText="Complete Text" />
+        <MenuItem value={6} primaryText="Active Voice" />
+        <MenuItem value={7} primaryText="Active Text" />
+      </DropDownMenu>
+    </ToolbarGroup>
+    <ToolbarGroup float="right">
+      <ToolbarTitle text="Options" />
+      <FontIcon className="muidocs-icon-custom-sort" />
+      <IconMenu iconButtonElement={
+        <IconButton touch={true}>
+          <NavigationExpandMoreIcon />
+        </IconButton>
+      }>
+        <MenuItem primaryText="Download" />
+        <MenuItem primaryText="More Info" />
+      </IconMenu>
+      <ToolbarSeparator />
+      <RaisedButton label="Create Broadcast" primary={true} />
+    </ToolbarGroup>
+  </Toolbar>
+);
 
 export default ToolbarsExamplesSimple;
diff --git a/docs/src/app/components/pages/components/Toolbars/Page.jsx b/docs/src/app/components/pages/components/Toolbars/Page.jsx
index 127accdd8a7ab5..9aebab76f05217 100644
--- a/docs/src/app/components/pages/components/Toolbars/Page.jsx
+++ b/docs/src/app/components/pages/components/Toolbars/Page.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import CodeExample from '../../../CodeExample';
 import PropTypeDescription from '../../../PropTypeDescription';
 import MarkdownElement from '../../../MarkdownElement';
+
 import toolbarsReadmeText from './README';
 import toolbarsExampleSimpleCode from '!raw!./ExampleSimple';
 import ToolbarsExampleSimple from './ExampleSimple';
@@ -14,27 +15,25 @@ import toolbarSeparatorReadmeText from './ToolbarSeparator';
 import toolbarTitleCode from '!raw!material-ui/toolbar/toolbar-title';
 import toolbarTitleReadmeText from './ToolbarTitle';
 
-export default class ToolbarPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <MarkdownElement text={toolbarsReadmeText} />
-        <CodeExample code={toolbarsExampleSimpleCode}>
-          <ToolbarsExampleSimple />
-        </CodeExample>
-        <PropTypeDescription
-          code={toolbarCode}
-          header={toolbarReadmeText} />
-        <PropTypeDescription
-          code={toolbarGroupCode}
-          header={toolbarGroupReadmeText} />
-        <PropTypeDescription
-          code={toolbarSeparatorCode}
-          header={toolbarSeparatorReadmeText} />
-        <PropTypeDescription
-          code={toolbarTitleCode}
-          header={toolbarTitleReadmeText} />
-      </div>
-    );
-  }
-}
+const ToolbarPage = () => (
+  <div>
+    <MarkdownElement text={toolbarsReadmeText} />
+    <CodeExample code={toolbarsExampleSimpleCode}>
+      <ToolbarsExampleSimple />
+    </CodeExample>
+    <PropTypeDescription
+      code={toolbarCode}
+      header={toolbarReadmeText} />
+    <PropTypeDescription
+      code={toolbarGroupCode}
+      header={toolbarGroupReadmeText} />
+    <PropTypeDescription
+      code={toolbarSeparatorCode}
+      header={toolbarSeparatorReadmeText} />
+    <PropTypeDescription
+      code={toolbarTitleCode}
+      header={toolbarTitleReadmeText} />
+  </div>
+);
+
+export default ToolbarPage;
diff --git a/docs/src/app/components/pages/components/Toolbars/README.md b/docs/src/app/components/pages/components/Toolbars/README.md
index 30316bb014b72c..30e633f3c119dc 100644
--- a/docs/src/app/components/pages/components/Toolbars/README.md
+++ b/docs/src/app/components/pages/components/Toolbars/README.md
@@ -1,6 +1,6 @@
 ## Toolbars
 
-Toolbars are collections of components stacked horizontally against each other.
+[Toolbars](https://www.google.com/design/spec/layout/structure.html#structure-toolbars) are collections of components stacked horizontally against each other.
 Toolbars provide greater versatility than AppBars which are a subset of toolbars.
 The following toolbar components can help organize your layout.