diff --git a/app/app/styles/view/document/activity.scss b/app/app/styles/view/document/activity.scss
index 9513bdcd..a5f3c595 100644
--- a/app/app/styles/view/document/activity.scss
+++ b/app/app/styles/view/document/activity.scss
@@ -1,4 +1,31 @@
 .document-activity {
+	> .metrics {
+		list-style-type: none;
+		margin: 0 0 30px;
+		padding: 0;
+		width: 100%;
+		text-align: center;
+
+		> .metric {
+			padding: 0 30px;
+			display: inline-block;
+			text-align: center;
+
+			.label {
+				padding: 0 0 10px;
+				font-family: $font-regular;
+				font-size: 0.9rem;
+				color: $color-gray;
+			}
+
+			.number {
+				font-family: $font-light;
+				font-size: 2rem;
+				color: $color-off-black;
+			}
+		}
+	}
+
 	> .items {
 		list-style-type: none;
 		margin: 0;
diff --git a/app/app/templates/components/document/document-activity.hbs b/app/app/templates/components/document/document-activity.hbs
index 045472fe..15aae77e 100644
--- a/app/app/templates/components/document/document-activity.hbs
+++ b/app/app/templates/components/document/document-activity.hbs
@@ -1,4 +1,18 @@
 <div class="document-activity">
+	<ul class="metrics">
+		<li class="metric">
+			<div class="label">created</div>
+			<div class="number">{{time-ago document.created}}</div>
+		</li>
+		<li class="metric">
+			<div class="label">viewers</div>
+			<div class="number">{{activity.viewers.length}}</div>
+		</li>
+		<li class="metric">
+			<div class="label">actions</div>
+			<div class="number">{{activity.editors.length}}</div>
+		</li>
+	</ul>
     <ul class="items">
         {{#each sortedItems as |e|}}
             <li class="item">