diff --git a/.jsbeautifyrc b/.jsbeautifyrc
index 2bdd9abc..0606d31e 100644
--- a/.jsbeautifyrc
+++ b/.jsbeautifyrc
@@ -38,8 +38,10 @@
 		"brace_style": "collapse-preserve-inline",
 		"keep_function_indentation": false,
 		"space_after_anon_function": false,
+		"space_before_anon_function": false,
 		"space_before_conditional": true,
 		"space_in_empty_paren": false,
+		"space_before_func_paren": false,
 		"space_in_paren": false
 	},
 	"sql": {
@@ -47,4 +49,4 @@
 		"indent_level": 0,
 		"indent_with_tabs": true
 	}
-}
\ No newline at end of file
+}
diff --git a/app/app/components/document/document-sidebar-edits.js b/app/app/components/document/document-activity.js
similarity index 74%
rename from app/app/components/document/document-sidebar-edits.js
rename to app/app/components/document/document-activity.js
index 957fea8a..04c1b9fb 100644
--- a/app/app/components/document/document-sidebar-edits.js
+++ b/app/app/components/document/document-activity.js
@@ -12,18 +12,28 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-	document: {},
-	meta: [],
-	pages: [],
+	sortedItems: [],
 
 	didReceiveAttrs() {
-		let editors = this.get('meta.editors');
+		let editors = this.get('activity.editors');
+		let viewers = this.get('activity.viewers');
 		let toc = this.get('pages');
+		let sorted = [];
 
 		if (is.null(editors)) {
-			return;
+			editors = [];
 		}
 
+		if (is.null(viewers)) {
+			viewers = [];
+		}
+
+		viewers.forEach((item) => {
+			Ember.set(item, 'changeLabel', "viewed");
+			Ember.set(item, "viewed", true);
+			sorted.pushObject({ date: item.created, item: item });
+		});
+
 		editors.forEach(function (item) {
 			Ember.set(item, "added", item.action === "add-page");
 			Ember.set(item, "changed", item.action === "update-page");
@@ -32,6 +42,7 @@ export default Ember.Component.extend({
 			let page = _.findWhere(toc, {
 				id: item.pageId
 			});
+
 			let title = "";
 
 			if (is.not.undefined(page)) {
@@ -59,6 +70,10 @@ export default Ember.Component.extend({
 					Ember.set(item, 'changeLabel', "removed section");
 				}
 			}
+
+			sorted.pushObject({ date: item.created, item: item });
 		});
+
+		this.set('sortedItems', _.sortBy(sorted, 'date').reverse());
 	}
 });
diff --git a/app/app/components/document/document-sidebar-close-action.js b/app/app/components/document/document-sidebar-close-action.js
deleted file mode 100644
index 172a15f1..00000000
--- a/app/app/components/document/document-sidebar-close-action.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-    actions: {
-		close() {
-			this.attrs.close();
-		}
-    }
-});
diff --git a/app/app/components/document/document-sidebar-viewers.js b/app/app/components/document/document-sidebar-viewers.js
deleted file mode 100644
index 47a2a6c9..00000000
--- a/app/app/components/document/document-sidebar-viewers.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under 
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>. 
-//
-// https://documize.com
-
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-    document: {},
-    meta: [],
-});
\ No newline at end of file
diff --git a/app/app/pods/document/activity/route.js b/app/app/pods/document/activity/route.js
index bfbe4ae6..abc90a07 100644
--- a/app/app/pods/document/activity/route.js
+++ b/app/app/pods/document/activity/route.js
@@ -16,17 +16,43 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 	documentService: Ember.inject.service('document'),
 	folderService: Ember.inject.service('folder'),
 	userService: Ember.inject.service('user'),
-
-	beforeModel(transition) {
-	},
+	pages: [],
 
 	model() {
+		this.audit.record("viewed-document-activity");
+
+		let folders = this.get('store').peekAll('folder');
+		let folder = this.get('store').peekRecord('folder', this.paramsFor('document').folder_id);
+
+		this.set('folders', folders);
+		this.set('folder', folder);
+
+		return this.modelFor('document');
 	},
 
 	afterModel(model) {
+		let self = this;
+
+		let pages = this.get('store').peekAll('page').filter((page) => {
+			return page.get('documentId') === model.get('id');
+		});
+
+		this.set('pages', pages);
+
+		return new Ember.RSVP.Promise(function (resolve) {
+			self.get('documentService').getMeta(model.get('id')).then(function (activity) {
+				self.set('activity', activity);
+				resolve();
+			});
+		});
 	},
 
 	setupController(controller, model) {
 		controller.set('model', model);
+		controller.set('folder', this.get('folder'));
+		controller.set('folders', this.get('folders').rejectBy('id', 0));
+		controller.set('isEditor', this.get('folderService').get('canEditCurrentFolder'));
+		controller.set('activity', this.get('activity'));
+		controller.set('pages', this.get('pages'));
 	}
 });
diff --git a/app/app/pods/document/activity/template.hbs b/app/app/pods/document/activity/template.hbs
index f8e916b9..59a9841a 100644
--- a/app/app/pods/document/activity/template.hbs
+++ b/app/app/pods/document/activity/template.hbs
@@ -1 +1 @@
-activity
+{{document/document-activity document=model pages=pages activity=activity}}
diff --git a/app/app/styles/view/document/activity.scss b/app/app/styles/view/document/activity.scss
new file mode 100644
index 00000000..4ba5476b
--- /dev/null
+++ b/app/app/styles/view/document/activity.scss
@@ -0,0 +1,108 @@
+.document-activity {
+	> .items {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		white-space: nowrap;
+
+		> .item {
+			padding: 20px 0;
+			width: 100%;
+			border-bottom: 1px solid $color-border;
+
+			> .avatar-box {
+				display: inline-block;
+				margin: 3px 10px 0 0;
+				width: 5%;
+			}
+
+			> .name {
+				display: inline-block;
+				font-size: 1rem;
+				font-family: $font-light;
+				color: $color-off-black;
+				width: 25%;
+			}
+
+			> .detail {
+				display: inline-block;
+				font-size: 1rem;
+				font-family: $font-regular;
+				color: $color-off-black;
+				width: 45%;
+
+				.viewed {
+					color: $color-goldy;
+				}
+
+				.added {
+					color: $color-green;
+				}
+
+				.changed {
+					color: $color-blue;
+				}
+
+				.deleted {
+					color: $color-red;
+				}
+			}
+
+			> .date {
+				display: inline-block;
+				font-family: $font-light;
+				font-size: 1rem;
+				float: right;
+				width: 15%;
+				padding-top: 10px;
+			}
+		}
+	}
+}
+
+.meta-editors {
+	position: relative;
+
+	> .items {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		white-space: nowrap;
+
+		> .item {
+			margin: 15px 0;
+			overflow-x: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			width: 90%;
+
+			.avatar-box {
+				display: inline-block;
+				margin: 3px 10px 0 0;
+				vertical-align: top;
+			}
+
+			.detail {
+				display: inline-block;
+
+				.name {
+					font-size: 1rem;
+					color: $color-off-black;
+				}
+
+				.changed {
+					font-size: 0.9rem;
+				}
+
+				.deleted {
+					font-size: 0.9rem;
+					color: $color-red;
+				}
+
+				.date {
+					font-size: 0.8rem;
+				}
+			}
+		}
+	}
+}
diff --git a/app/app/styles/view/document/all.scss b/app/app/styles/view/document/all.scss
index ee438da5..3274d65d 100644
--- a/app/app/styles/view/document/all.scss
+++ b/app/app/styles/view/document/all.scss
@@ -1,3 +1,4 @@
+@import "activity.scss";
 @import "content.scss";
 @import "edit-tools.scss";
 @import "editor.scss";
diff --git a/app/app/styles/view/document/sidebar.scss b/app/app/styles/view/document/sidebar.scss
index 98efcd6e..a34c25b6 100644
--- a/app/app/styles/view/document/sidebar.scss
+++ b/app/app/styles/view/document/sidebar.scss
@@ -113,86 +113,3 @@
 		}
 	}
 }
-
-.meta-viewers {
-	> .items {
-		list-style-type: none;
-		margin: 0;
-		padding: 0;
-		white-space: nowrap;
-
-		> .item {
-			margin: 15px 0;
-			overflow-x: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			width: 90%;
-
-			> .avatar-box {
-				display: inline-block;
-				margin: 3px 10px 0 0;
-				vertical-align: top;
-			}
-
-			> .detail {
-				display: inline-block;
-
-				> .name {
-					font-size: 1rem;
-					color: $color-off-black;
-				}
-
-				> .date {
-					font-size: 0.8rem;
-				}
-			}
-		}
-	}
-}
-
-.meta-editors {
-	position: relative;
-
-	> .items {
-		list-style-type: none;
-		margin: 0;
-		padding: 0;
-		white-space: nowrap;
-
-		> .item {
-			margin: 15px 0;
-			overflow-x: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			width: 90%;
-
-			.avatar-box {
-				display: inline-block;
-				margin: 3px 10px 0 0;
-				vertical-align: top;
-			}
-
-			.detail {
-				display: inline-block;
-
-				.name {
-					font-size: 1rem;
-					color: $color-off-black;
-				}
-
-				.changed {
-					font-size: 0.9rem;
-				}
-
-				.deleted {
-					font-size: 0.9rem;
-					color: $color-red;
-				}
-
-				.date {
-					font-size: 0.8rem;
-				}
-			}
-		}
-	}
-}
diff --git a/app/app/templates/components/document/document-activity.hbs b/app/app/templates/components/document/document-activity.hbs
new file mode 100644
index 00000000..045472fe
--- /dev/null
+++ b/app/app/templates/components/document/document-activity.hbs
@@ -0,0 +1,27 @@
+<div class="document-activity">
+    <ul class="items">
+        {{#each sortedItems as |e|}}
+            <li class="item">
+                <div class="avatar-box">
+                    <div class="avatar">{{user-initials e.item.firstname e.item.lastname}}</div>
+                </div>
+				<div class="name">{{e.item.firstname}} {{e.item.lastname}}</div>
+                <div class="detail">
+                    {{#if e.item.deleted}}
+                        <div class="deleted">{{e.item.changeLabel}}</div>
+						{{/if}}
+					{{#if e.item.changed}}
+                        <div class="changed">{{e.item.changeLabel}}</div>
+                    {{/if}}
+					{{#if e.item.added}}
+                        <div class="added">{{e.item.changeLabel}}</div>
+                    {{/if}}
+					{{#if e.item.viewed}}
+                        <div class="viewed">{{e.item.changeLabel}}</div>
+                    {{/if}}
+                </div>
+				<div class="date">{{time-ago e.date}}</div>
+            </li>
+        {{/each}}
+    </ul>
+</div>
diff --git a/app/app/templates/components/document/document-sidebar-close-action.hbs b/app/app/templates/components/document/document-sidebar-close-action.hbs
deleted file mode 100644
index b27ae2a4..00000000
--- a/app/app/templates/components/document/document-sidebar-close-action.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="close-action">
-	<div class="round-button-mono" {{action 'close'}}>
-		<i class="material-icons">clear</i>
-	</div>
-</div>
-<div class="clearfix"></div>
diff --git a/app/app/templates/components/document/document-sidebar-edits.hbs b/app/app/templates/components/document/document-sidebar-edits.hbs
deleted file mode 100644
index 115f53d1..00000000
--- a/app/app/templates/components/document/document-sidebar-edits.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="meta-editors">
-    <ul class="items">
-        {{#each meta.editors as |edit|}}
-            <li class="item">
-                <div class="avatar-box">
-                    <div class="avatar">{{user-initials edit.firstname edit.lastname}}</div>
-                </div>
-                <div class="detail">
-                    <div class="name">{{edit.firstname}} {{edit.lastname}}</div>
-                    {{#if edit.deleted}}
-                        <div class="deleted">{{edit.changeLabel}}</div>
-                    {{else}}
-                        <a class="changed">{{edit.changeLabel}}</a>
-                    {{/if}}
-                    <div class="date">{{time-ago edit.created}}</div>
-                </div>
-            </li>
-        {{/each}}
-    </ul>
-</div>
diff --git a/app/app/templates/components/document/document-sidebar-viewers.hbs b/app/app/templates/components/document/document-sidebar-viewers.hbs
deleted file mode 100644
index 276c7e75..00000000
--- a/app/app/templates/components/document/document-sidebar-viewers.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="meta-viewers">
-    <ul class="items">
-        {{#each meta.viewers as |viewer|}}
-            <li class="item">
-                <div class="avatar-box">
-                    <div class="avatar">{{user-initials viewer.firstname viewer.lastname}}</div>
-                </div>
-                <div class="detail">
-                    <div class="name">{{viewer.firstname}} {{viewer.lastname}}</div>
-                    <div class="date">{{time-ago viewer.created}}</div>
-                </div>
-            </li>
-        {{/each}}
-    </ul>
-</div>