diff --git a/src/components/AtlasPreview/AtlasPreview.js b/src/components/AtlasPreview/AtlasPreview.js
index fed976715..4ee8cc4ca 100644
--- a/src/components/AtlasPreview/AtlasPreview.js
+++ b/src/components/AtlasPreview/AtlasPreview.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import moment from 'moment';
 import Link from 'react-router/lib/Link';
 
+import DocumentPreview from 'components/DocumentPreview';
+
 import styles from './AtlasPreview.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
@@ -20,10 +21,7 @@ class AtlasPreview extends React.Component {
         { data.recentDocuments.length > 0 ?
           data.recentDocuments.map(document => {
             return (
-              <Link to={ `/documents/${document.id}` } className={ styles.documentPreview }>
-                <h3>{ document.title }</h3>
-                <span>{ moment(document.updatedAt).fromNow() }</span>
-              </Link>)
+              <DocumentPreview document={ document } />)
           })
         : (
           <div className={ styles.description }>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>
diff --git a/src/components/AtlasPreview/AtlasPreview.scss b/src/components/AtlasPreview/AtlasPreview.scss
index 170da6368..995678e16 100644
--- a/src/components/AtlasPreview/AtlasPreview.scss
+++ b/src/components/AtlasPreview/AtlasPreview.scss
@@ -17,25 +17,3 @@
 .description {
   color: #aaa;
 }
-
-.documentPreview {
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-
-  margin-bottom: 20px;
-  text-decoration: none;
-
-  h3 {
-    font-weight: normal;
-    font-size: 15px;
-    color: $textColor;
-
-    margin: 0;
-  }
-
-  span {
-    font-size: 13px;
-    color: #ccc;
-  }
-}
\ No newline at end of file
diff --git a/src/components/DocumentPreview/DocumentPreview.js b/src/components/DocumentPreview/DocumentPreview.js
new file mode 100644
index 000000000..52ce56cdb
--- /dev/null
+++ b/src/components/DocumentPreview/DocumentPreview.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import moment from 'moment';
+import Link from 'react-router/lib/Link';
+
+import styles from './documentPreview.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+class documentPreview extends React.Component {
+  static propTypes = {
+    document: React.PropTypes.object.isRequired,
+  }
+
+  render() {
+    const document = this.props.document;
+
+    return (
+      <Link to={ `/documents/${document.id}` } className={ styles.documentPreview }>
+        <h3>{ document.title }</h3>
+        <span>{ moment(document.updatedAt).fromNow() }</span>
+      </Link>
+    );
+  }
+};
+
+export default documentPreview;
\ No newline at end of file
diff --git a/src/components/DocumentPreview/DocumentPreview.scss b/src/components/DocumentPreview/DocumentPreview.scss
new file mode 100644
index 000000000..424932b33
--- /dev/null
+++ b/src/components/DocumentPreview/DocumentPreview.scss
@@ -0,0 +1,23 @@
+@import '../../utils/constants.scss';
+
+.documentPreview {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  margin-bottom: 20px;
+  text-decoration: none;
+}
+
+h3 {
+  font-weight: normal;
+  font-size: 15px;
+  color: $textColor;
+
+  margin: 0;
+}
+
+span {
+  font-size: 13px;
+  color: #ccc;
+}
\ No newline at end of file
diff --git a/src/components/DocumentPreview/index.js b/src/components/DocumentPreview/index.js
new file mode 100644
index 000000000..5f1c08523
--- /dev/null
+++ b/src/components/DocumentPreview/index.js
@@ -0,0 +1,2 @@
+import DocumentPreview from './DocumentPreview';
+export default DocumentPreview;
\ No newline at end of file