diff --git a/server/models/Document.js b/server/models/Document.js
index 11342f834..b689773f8 100644
--- a/server/models/Document.js
+++ b/server/models/Document.js
@@ -4,6 +4,7 @@ import {
 } from '../sequelize';
 import Atlas from './Atlas';
 import Team from './Team';
+import User from './User';
 
 const Document = sequelize.define('document', {
   id: { type: DataTypes.UUID, defaultValue: DataTypes.UUIDV4, primaryKey: true },
@@ -13,5 +14,6 @@ const Document = sequelize.define('document', {
 
 Document.belongsTo(Atlas, { as: 'atlas' });
 Document.belongsTo(Team);
+Document.belongsTo(User);
 
 export default Document;
diff --git a/server/presenters.js b/server/presenters.js
index 3dfe4ad04..353c93822 100644
--- a/server/presenters.js
+++ b/server/presenters.js
@@ -69,6 +69,9 @@ export async function presentDocument(document, includeAtlas=false) {
   if (includeAtlas) {
     const atlas = await document.getAtlas();
     data.atlas = await presentAtlas(atlas, false);
+
+    const user = await document.getUser();
+    data.user = await presentUser(user, false);
   }
 
   return data;
diff --git a/src/components/Document/Document.js b/src/components/Document/Document.js
new file mode 100644
index 000000000..dc0697675
--- /dev/null
+++ b/src/components/Document/Document.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import moment from 'moment';
+
+import { Avatar } from 'rebass';
+import Flex from 'components/Flex';
+
+import styles from './Document.scss';
+
+const Document = (props) => {
+  return (
+    <div className={ styles.container }>
+      <Flex align="center" className={ styles.user }>
+        <Avatar src={ props.document.user.avatarUrl } size={ 24 } />
+        <span className={ styles.userName }>
+          { props.document.user.name } published { moment(document.createdAt).fromNow() }
+        </span>
+      </Flex>
+
+      <div dangerouslySetInnerHTML={{ __html: props.document.html }} />
+    </div>
+  );
+};
+
+export default Document;
diff --git a/src/components/Document/Document.scss b/src/components/Document/Document.scss
new file mode 100644
index 000000000..a29cb514d
--- /dev/null
+++ b/src/components/Document/Document.scss
@@ -0,0 +1,11 @@
+.container {
+  padding: 20px 0;
+}
+
+.user {
+  margin-bottom: 40px;
+}
+
+.userName {
+  margin: 0 0 0 10px;
+}
\ No newline at end of file
diff --git a/src/scenes/Document/index.js b/src/components/Document/index.js
similarity index 58%
rename from src/scenes/Document/index.js
rename to src/components/Document/index.js
index ea7ca13ca..afe6c39c3 100644
--- a/src/scenes/Document/index.js
+++ b/src/components/Document/index.js
@@ -1,2 +1,2 @@
 import Document from './Document';
-export default Document;
\ No newline at end of file
+export default Document;
diff --git a/src/index.js b/src/index.js
index bfb8342b4..c6295b3e5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,7 +23,7 @@ import Home from 'scenes/Home';
 import Editor from 'scenes/Editor';
 import Dashboard from 'scenes/Dashboard';
 import Atlas from 'scenes/Atlas';
-import Document from 'scenes/Document';
+import DocumentScene from 'scenes/DocumentScene';
 import SlackAuth from 'scenes/SlackAuth';
 
 // Redux
@@ -52,7 +52,7 @@ persistStore(store, {
           <Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
           <Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
           <Route path="/atlas/:id/new" component={ Editor } onEnter={ requireAuth } />
-          <Route path="/documents/:id" component={ Document } onEnter={ requireAuth } />
+          <Route path="/documents/:id" component={ DocumentScene } onEnter={ requireAuth } />
 
           <Route path="/auth/slack" component={SlackAuth} />
         </Route>
diff --git a/src/scenes/Document/Document.js b/src/scenes/DocumentScene/DocumentScene.js
similarity index 85%
rename from src/scenes/Document/Document.js
rename to src/scenes/DocumentScene/DocumentScene.js
index 745d35d30..8e156f4a3 100644
--- a/src/scenes/Document/Document.js
+++ b/src/scenes/DocumentScene/DocumentScene.js
@@ -6,10 +6,11 @@ import { fetchDocumentAsync } from 'actions/DocumentActions';
 import Layout from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
+import Document from 'components/Document';
 
-import styles from './Document.scss';
+import styles from './DocumentScene.scss';
 
-class Document extends React.Component {
+class DocumentScene extends React.Component {
   componentDidMount = () => {
     const documentId = this.props.routeParams.id;
     this.props.fetchDocumentAsync(documentId);
@@ -30,7 +31,7 @@ class Document extends React.Component {
           { this.props.isLoading || !document ? (
             <AtlasPreviewLoading />
           ) : (
-            <div dangerouslySetInnerHTML={{ __html: document.html }} />
+            <Document document={ document } />
           ) }
         </CenteredContent>
       </Layout>
@@ -55,4 +56,4 @@ const mapDispatchToProps = (dispatch) => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Document);
+)(DocumentScene);
diff --git a/src/scenes/Document/Document.scss b/src/scenes/DocumentScene/DocumentScene.scss
similarity index 100%
rename from src/scenes/Document/Document.scss
rename to src/scenes/DocumentScene/DocumentScene.scss
diff --git a/src/scenes/DocumentScene/index.js b/src/scenes/DocumentScene/index.js
new file mode 100644
index 000000000..42f5befad
--- /dev/null
+++ b/src/scenes/DocumentScene/index.js
@@ -0,0 +1,2 @@
+import DocumentScene from './DocumentScene';
+export default DocumentScene;
\ No newline at end of file