diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index bfbef63b..bd2b27b1 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -2,16 +2,29 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
 
-const AppBar = ({ theme, ...props }) => {
+const AppBar = ({ theme, title, ...props }) => {
   const className = classnames(theme.appBar, {
     [theme.fixed]: props.fixed,
     [theme.flat]: props.flat
   }, props.className);
+  const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
 
   return (
     <header className={className} data-react-toolbox='app-bar'>
+      {leftIcon ? <FontIcon
+        className={classnames(theme.leftIcon)}
+        value={leftIcon}
+        onClick={onLeftIconClick}/> : null
+      }
+      {title ? <h1 className={classnames(theme.title)}>{title}</h1> : null}
       {props.children}
+      {rightIcon ? <FontIcon
+        className={classnames(theme.rightIcon)}
+        value={rightIcon}
+        onClick={onRightIconClick}/> : null
+      }
     </header>
   );
 };
@@ -21,11 +34,25 @@ AppBar.propTypes = {
   className: PropTypes.string,
   fixed: PropTypes.bool,
   flat: PropTypes.bool,
+  leftIcon: PropTypes.oneOfType(
+    PropTypes.string,
+    PropTypes.element
+  ),
+  onLeftIconClick: PropTypes.func,
+  onRightIconClick: PropTypes.func,
+  rightIcon: PropTypes.oneOfType(
+    PropTypes.string,
+    PropTypes.element
+  ),
   theme: PropTypes.shape({
     appBar: PropTypes.string,
+    leftIcon: PropTypes.string,
+    rightIcon: PropTypes.string,
     fixed: PropTypes.string,
-    flat: PropTypes.string
-  })
+    flat: PropTypes.string,
+    title: PropTypes.string
+  }),
+  title: PropTypes.string
 };
 
 AppBar.defaultProps = {
diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
index 35fda69e..634b0171 100644
--- a/components/app_bar/index.d.ts
+++ b/components/app_bar/index.d.ts
@@ -13,6 +13,18 @@ export interface AppBarTheme {
    * Added to the root element when the app bar is flat.
    */
   flat?: string;
+  /**
+   * Used as the app bar title.
+   */
+  title ?: string;
+  /**
+   * Added to the left icon app bar element.
+   */
+  leftIcon?: string;
+  /**
+   * Added to the right icon app bar element.
+   */
+  rightIcon?: string;
 }
 
 interface AppBarProps extends __ReactToolbox.Props {
@@ -30,6 +42,26 @@ interface AppBarProps extends __ReactToolbox.Props {
    * @default false
    */
   flat?: boolean;
+  /**
+   * If it exists it is used as the AppBar title
+   */
+  title?: string;
+  /**
+   * If it exists it is used as the AppBar left icon
+   */
+  leftIcon?: string;
+  /**
+   * Called when the left icon is clicked
+   */
+  onLeftIconClick?: Function;
+  /**
+   * If it exists it is used as the AppBar right icon
+   */
+  rightIcon?: string;
+  /**
+   * Called when the righticon is clicked
+   */
+  onRightIconClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 24eea0e8..5cb3c279 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -15,19 +15,28 @@ const AppBarTest = () => (
 
 If you want to provide a theme via context, the component key is `RTAppBar`.
 
+The `AppBar` component provides properties for the common use cases of `title`, `leftIcon` and `rightIcon`. However, you can also override these with your own content by not specifying these and instead provide children elements, as shown in the example.
+
 ## Properties
 
 | Name          | Type    | Default  | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''`     | Set a class for the root component.|
-| `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
-| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
-| `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
+| `className`        | `String`   | `''`    | Set a class for the root component.|
+| `fixed`            | `Bool`     | `false` | Determine if the bar should have position `fixed` or `relative`.|
+| `flat`             | `Bool`     | `false` | If true, the AppBar shows a shadow.|
+| `theme`            | `Object`   | `null`  | Classnames object defining the component style.|
+| `title`            | `String`   | `null`  | Title used for the appbar.|
+| `leftIcon`         | `String`   | `null`  | Left icon.|
+| `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
+| `rightIcon`        | `String`   | `null`  | Right icon.|
+| `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
 
 ## Theme
 
-| Name     | Description|
-|:---------|:-----------|
-| `appBar` | Used for the component root element.|
-| `fixed`  | Added to the root element when the app bar is fixed.|
-| `flat`   | Added to the root element when the app bar is flat.|
+| Name        | Description|
+|:------------|:-----------|
+| `appBar`    | Used for the component root element.|
+| `fixed`     | Added to the root element when the app bar is fixed.|
+| `title`     | Added to the title element of the app bar.|
+| `leftIcon`  | Added to the left icon element when the app bar.|
+| `rightIcon` | Added to the right icon element when the app bar.|
diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
index 56147f64..f0d55d0c 100644
--- a/components/app_bar/theme.scss
+++ b/components/app_bar/theme.scss
@@ -35,4 +35,25 @@
   a {
     color: $appbar-contrast;
   }
+
+  .title {
+    flex-grow: 1;
+    font-size: 1.8 * $unit;
+    font-weight: bold;
+    > small {
+      font-size: 1.8 * $unit;
+      font-weight: normal;
+    }
+  }
+
+  .leftIcon {
+    padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
+    text-align: left;
+  }
+
+  .rightIcon {
+    padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
+    margin-left: auto;
+    text-align: right;
+  }
 }
diff --git a/spec/components/app_bar.js b/spec/components/app_bar.js
new file mode 100644
index 00000000..ba13fa29
--- /dev/null
+++ b/spec/components/app_bar.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import AppBar from '../../components/app_bar';
+
+const AppBarTest = () => (
+  <section>
+    <h5>AppBar</h5>
+    <br/>
+    <AppBar title='Title' />
+    <br/>
+    <AppBar leftIcon='menu' title='Title' />
+    <br/>
+    <AppBar leftIcon='arrow_back' title='Title' rightIcon='close' />
+    <br/>
+    <AppBar>
+      Custom content
+    </AppBar>
+  </section>
+);
+
+export default AppBarTest;
diff --git a/spec/components/layout.js b/spec/components/layout.js
index 4190a465..6d74aa18 100644
--- a/spec/components/layout.js
+++ b/spec/components/layout.js
@@ -75,17 +75,13 @@ class LayoutTest extends React.Component {
                 <div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
                     <Layout>
                         <NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
-                            <AppBar>
-                                <h5>Drawer</h5>
-                            </AppBar>
+                          <AppBar title='Drawer'/>
                             <ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
                                 {drawerItems}
                             </ul>
                         </NavDrawer>
                         <Panel>
-                            <AppBar>
-                                <IconButton icon='menu' inverse onClick={this.toggleDrawer}/>
-                            </AppBar>
+                            <AppBar leftIcon='menu' onLeftIconClick={this.toggleDrawer}/>
                             <div style={{ flex: 1, overflowY: 'auto' }}>
                                 <div style={{ display: 'flex', flexDirection: 'row' }}>
                                     <section style={{ margin: '1.8rem'}}>
diff --git a/spec/root.js b/spec/root.js
index ee5c3303..ddf1a6b9 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -3,6 +3,7 @@ import '../components/commons.scss';
 import React from 'react';
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
+import AppBarTest from './components/app_bar';
 import Avatar from './components/avatar';
 import FontIcon from './components/font_icon';
 import Button from './components/button';
@@ -29,19 +30,24 @@ import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
 import style from './style';
 
+const RootAppBar = () => (
+  <AppBar className={style.appbar} fixed flat>
+    <h1>React Toolbox <small>Spec {VERSION}</small></h1>
+    <ButtonToolbox
+      accent
+      className={style.github}
+      icon='web'
+      floating
+      onClick={() => {window.href = 'http://react-toolbox';}}
+    />
+  </AppBar>
+);
+
 const Root = () => (
   <div className={style.app}>
-    <AppBar className={style.appbar} fixed flat>
-      <h1>React Toolbox <small>Spec {VERSION}</small></h1>
-      <ButtonToolbox
-        accent
-        className={style.github}
-        icon='web'
-        floating
-        onClick={() => {window.href = 'http://react-toolbox';}}
-      />
-    </AppBar>
+    <RootAppBar />
     <Autocomplete />
+    <AppBarTest />
     <Avatar />
     <FontIcon />
     <Button />