9 files changed, 83 insertions, 2 deletions
diff --git a/docs/api/components.md b/docs/api/components.md
index 6f7be53..f56f582 100644
--- a/docs/api/components.md
+++ b/docs/api/components.md
@@ -19,6 +19,7 @@ Custom roles can be use for interopability with other plugins, but GitBook and t
 
 | Role | Description | Props |
 | ---- | ----------- | ----- |
+| `page:container` | DIV container for the page's content | `{ page: Page }` |
 | `summary:container` | DIV container for the whole summary | `{ summary: Summary }` |
 | `summary:parts` | DIV container for summary's parts | `{ parts: List<SummaryPart> }` |
 | `summary:part` | DIV for a specific part | `{ part: SummaryPart }` |
diff --git a/packages/gitbook-core/src/components/Button.js b/packages/gitbook-core/src/components/Button.js
new file mode 100644
index 0000000..7368d01
--- /dev/null
+++ b/packages/gitbook-core/src/components/Button.js
@@ -0,0 +1,23 @@
+const React = require('react');
+//const classNames = require('classnames');
+
+const Button = React.createClass({
+    propTypes: {
+        active:    React.PropTypes.bool,
+        href:      React.PropTypes.string,
+        className: React.PropTypes.string,
+        children:  React.PropTypes.node,
+        onClick:   React.PropTypes.func
+    },
+
+    render() {
+        const { children, active, onClick, className } = this.props;
+        /*const className = classNames('GitBook//Button', this.props.className, {
+            active
+        });*/
+
+        return <button className={className} onClick={onClick}>{children}</button>;
+    }
+});
+
+module.exports = Button;
diff --git a/packages/gitbook-core/src/components/Icon.js b/packages/gitbook-core/src/components/Icon.js
new file mode 100644
index 0000000..fac446a
--- /dev/null
+++ b/packages/gitbook-core/src/components/Icon.js
@@ -0,0 +1,28 @@
+const React = require('react');
+
+const Icon = React.createClass({
+    propTypes: {
+        id:        React.PropTypes.string,
+        type:      React.PropTypes.string,
+        className: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            type: 'fa'
+        };
+    },
+
+    render() {
+        const { id, type } = this.props;
+        let { className } = this.props;
+
+        if (id) {
+            className = type + ' ' + type + '-' + id;
+        }
+
+        return <i className={className}/>;
+    }
+});
+
+module.exports = Icon;
diff --git a/packages/gitbook-core/src/index.js b/packages/gitbook-core/src/index.js
index f002d9e..7ae4841 100644
--- a/packages/gitbook-core/src/index.js
+++ b/packages/gitbook-core/src/index.js
@@ -6,6 +6,8 @@ const { InjectedComponent, InjectedComponentSet } = require('./components/Inject
 const { ImportLink, ImportScript, ImportCSS } = require('./components/Import');
 const HTMLContent = require('./components/HTMLContent');
 const Link = require('./components/Link');
+const Icon = require('./components/Icon');
+const Button = require('./components/Button');
 
 const { registerComponent } = require('./actions/components');
 const ACTIONS = require('./actions/TYPES');
@@ -41,6 +43,8 @@ module.exports = {
     FlexLayout: Flex,
     FlexBox: Box,
     Link,
+    Icon,
+    Button,
     // Utilities
     Shapes
 };
diff --git a/packages/gitbook-plugin-theme-default/less/Page.less b/packages/gitbook-plugin-theme-default/less/Page.less
new file mode 100644
index 0000000..979377c
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/less/Page.less
@@ -0,0 +1,15 @@
+.Page {
+    position: relative;
+    outline: none;
+    width: 100%;
+    max-width: @page-width;
+    margin: 0px auto;
+    padding: 20px 15px 40px 15px;
+
+    .gitbook-markdown(@md-color: @page-color, @md-line-height: @page-line-height);
+
+    .glossary-term {
+        cursor: help;
+        text-decoration: underline;
+    }
+}
diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less
index 957d229..8acbdf8 100644
--- a/packages/gitbook-plugin-theme-default/less/main.less
+++ b/packages/gitbook-plugin-theme-default/less/main.less
@@ -1,10 +1,12 @@
 @import "../node_modules/preboot/less/preboot.less";
+@import "../node_modules/gitbook-markdown-css/less/mixin.less";
 
 @import "reset.less";
 @import "variables.less";
 
 @import "Sidebar.less";
 @import "Summary.less";
+@import "Page.less";
 
 body, html {
     margin: 0px;
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index a988847..ff46cfc 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -7,3 +7,7 @@
 @summary-article-padding-h:   15px;
 @summary-article-color:       hsl(207, 15%, 25%);
 @summary-article-hover-color: hsl(207, 100%, 50%);
+// Page
+@page-width:                  800px;
+@page-color:                  #333333;
+@page-line-height:            1.7;
diff --git a/packages/gitbook-plugin-theme-default/src/components/Page.js b/packages/gitbook-plugin-theme-default/src/components/Page.js
index dda8eba..a7d8ef7 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Page.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Page.js
@@ -11,7 +11,9 @@ const Page = React.createClass({
 
         return (
             <div className="Page page-wrapper">
-                <GitBook.HTMLContent html={page.content} />
+                <GitBook.InjectedComponent matching={{ role: 'page:container' }} props={this.props}>
+                    <GitBook.HTMLContent html={page.content} />
+                </GitBook.InjectedComponent>
             </div>
         );
     }
diff --git a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
index de89f97..9a60ff4 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
@@ -16,7 +16,9 @@ const Toolbar = React.createClass({
     render() {
         return (
             <div className="Toolbar book-toolbar">
-                <button onClick={this.onToggle}>Toggle</button>
+                <GitBook.Button onClick={this.onToggle}>
+                    <GitBook.Icon id="align-justify" />
+                </GitBook.Button>
                 <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} />
                 <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} />
             </div>