Adapt mark-up to history teaser, add some styles.

services/web/app/views/project/editor/history.jade

@@ -40,11 +40,41 @@ div#history(ng-show="ui.view == 'history'")
 							ng-click="startFreeTrial('history')"
 						) #{translate("start_free_trial")}
 
-				.message(
+				.message.message-wider(
 					sixpack-when="focused"
 					ng-show="project.owner._id == user.id"
 				)
-					| TODO
+					h4.teaser-title See who changed what. Go back to previous versions.
+					img.teaser-img(
+						src="/img/teasers/history/teaser-history.png"
+						alt="History"
+					)
+					p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
+					.row
+						.col-md-8.col-md-offset-2
+							ul.list-unstyled
+								li 
+									i.fa.fa-check  
+									| Catch up with your collaborators changes
+								
+								li
+									i.fa.fa-check  
+									| See changes over any time period
+								
+								li 
+									i.fa.fa-check  
+									| Revert your documents to previous versions
+								
+								li 
+									i.fa.fa-check  
+									| Restore deleted files
+
+					p.text-center(ng-controller="FreeTrialModalController")
+						a.btn.btn-success(
+							href
+							ng-class="buttonClass"
+							ng-click="startFreeTrial('history')"
+						) #{translate("start_free_trial")}
 
 			.message(ng-show="project.owner._id != user.id")
 				p #{translate("ask_proj_owner_to_upgrade_for_history")}

services/web/public/stylesheets/app/editor/history.less

@@ -25,6 +25,9 @@
 			background-color: white;
 			border-radius: 8px;
 		}
+		.message-wider {
+			width: 600px;
+		}
 	}
 
 	.diff-panel {