diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
index ff9bdf79a2..9fb066dbb6 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function ContentNodeInfoDirective($timeout, $location) {
+    function ContentNodeInfoDirective($timeout, $location, logResource) {
 
         function link(scope, element, attrs, ctrl) {
             
@@ -22,117 +22,8 @@
                     }
                 };
 
-                scope.auditTrail = [
-                    {
-                        "date": "03 December 2016 17:58PM",
-                        "action": "publish",
-                        "description": "Content was performed today by user",
-                        "user": {
-                            "name": "Zsolt Laszlo",
-                            "avatars": []
-                        }
-                    },
-                    {
-                        "date": "24 December 2016 20:18PM",
-                        "action": "unpublish",
-                        "description": "Content was performed by user",
-                        "user": {
-                            "name": "Mads Rasmussen",
-                            "avatars": [
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=30",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=60",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=90",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=150",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=300"
-                            ]
-                        }
-                    },
-                    {
-                        "date": "19 November 2016 21:11AM",
-                        "action": "save",
-                        "description": "Content was performed yesteraday by user",
-                        "user": {
-                            "name": "Zsolt Laszlo",
-                            "avatars": []
-                        }
-                    },
-                    {
-                        "date": "10 November 2016 10:41AM",
-                        "action": "save",
-                        "description": "Content was performed last week by user",
-                        "user": {
-                            "name": "Mads Rasmussen",
-                            "avatars": [
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=30",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=60",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=90",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=150",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=300"
-                            ]
-                        }
-                    },
-                    {
-                        "date": "02 November 2016 03:44PM",
-                        "action": "save",
-                        "description": "Content was performed last week by user",
-                        "user": {
-                            "name": "Zsolt Laszlo",
-                            "avatars": []
-                        }
-                    },
-                    {
-                        "date": "19 September 2016 18:21AM",
-                        "action": "publish",
-                        "description": "Content was performed two weeks ago by user",
-                        "user": {
-                            "name": "Mads Rasmussen",
-                            "avatars": [
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=30",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=60",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=90",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=150",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=300"
-                            ]
-                        }
-                    },
-                    {
-                        "date": "19 September 2016 08:51AM",
-                        "action": "save",
-                        "description": "Content was performed last month by user",
-                        "user": {
-                            "name": "Mads Rasmussen",
-                            "avatars": [
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=30",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=60",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=90",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=150",
-                                "https://www.gravatar.com/avatar/bc196379513a5efe165b9e1571b8d5a8?d=404&s=300"
-                            ]
-                        }
-                    },
-                    {
-                        "date": "11 September 2016 13:28AM",
-                        "action": "save",
-                        "description": "Content was performed by user",
-                        "user": {
-                            "name": "Zsolt Laszlo",
-                            "avatars": []
-                        }
-                    },
-                    {
-                        "date": "01 September 2016 23:19AM",
-                        "action": "save",
-                        "description": "Content was performed by user",
-                        "user": {
-                            "name": "Zsolt Laszlo",
-                            "avatars": []
-                        }
-                    }
-                ];
-
-                scope.pagination = {
-                    "pageNumber": 1,
-                    "totalPages": 5
+                scope.auditTrailOptions = {
+                    "id": scope.node.id
                 };
 
                 scope.template = {
@@ -149,25 +40,13 @@
                 // get document type details
                 scope.documentType = getDocumentType(scope.node);
 
-                // get the auditTrail - fake loading
-                scope.loadingAuditTrail = true;
-                $timeout(function () {
-                    setAuditTrailActionColor(scope.auditTrail);
-                    scope.loadingAuditTrail = false;
-                }, 2000);
+                loadAuditTrail();
 
             }
 
-            scope.nextPage = function (pageNumber) {
-                alert("next page" + pageNumber);
-            };
-
-            scope.prevPage = function (pageNumber) {
-                alert("previous page" + pageNumber);
-            };
-
-            scope.goToPage = function (pageNumber) {
-                alert("go to page" + pageNumber);
+            scope.auditTrailPageChange = function(pageNumber) {
+                scope.auditTrailOptions.pageNumber = pageNumber;
+                loadAuditTrail();
             };
 
             scope.openDocumentType = function (documentType) {
@@ -208,6 +87,23 @@
                 clearUnpublishDate();
             };
 
+            function loadAuditTrail() {
+
+                scope.loadingAuditTrail = true;
+
+                logResource.getPagedEntityLog(scope.auditTrailOptions)
+                    .then(function (data) {
+                        scope.auditTrail = data.items;
+                        scope.auditTrailOptions.pageNumber = data.pageNumber;
+                        scope.auditTrailOptions.pageSize = data.pageSize;
+                        scope.auditTrailOptions.totalItems = data.totalItems;
+                        scope.auditTrailOptions.totalPages = data.totalPages;
+
+                        scope.loadingAuditTrail = false;
+                    });
+
+            }
+
             function setAuditTrailActionColor(auditTrail) {
                 angular.forEach(auditTrail, function (item) {
                     switch (item.action) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
index e05e283252..e9e6020d5d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
@@ -18,31 +18,32 @@
 
         <umb-box>
             <umb-box-header title-key="general_history"></umb-box-header>
-            <umb-box-content class="block-form" style="position: relative;">
+            <umb-box-content class="block-form">
+                
+                <div style="position: relative;">
 
-                <umb-load-indicator ng-if="loadingAuditTrail"></umb-load-indicator>
-
-                <div ng-if="!loadingAuditTrail">
+                    <div ng-if="loadingAuditTrail" style="background: rgba(255, 255, 255, 0.8); position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
+                    <umb-load-indicator ng-if="loadingAuditTrail"></umb-load-indicator>
+                    
                     <div class="history-item" ng-repeat="item in auditTrail" ng-class="{'last-history-item': $last}">
                         <div class="history-row">
                         
+                            <div class="history-item__break">
+                                <div class="history-item__avatar">
+                                    <umb-avatar
+                                        color="secondary"
+                                        size="xs"
+                                        name="{{item.userName}}"
+                                        img-src="{{item.userAvatars[3]}}"
+                                        img-srcset="{{item.userAvatars[4]}} 2x, {{item.userAvatars[4]}} 3x">
+                                    </umb-avatar>
+                                </div>
 
-                        <div class="history-item__break">
-                            <div class="history-item__avatar">
-                                <umb-avatar
-                                    color="secondary"
-                                    size="xs"
-                                    name="{{item.user.name}}"
-                                    img-src="{{item.user.avatars[3]}}"
-                                    img-srcset="{{item.user.avatars[4]}} 2x, {{item.user.avatars[4]}} 3x">
-                                </umb-avatar>
+                                <div class="name-date-container">
+                                    <div>{{ item.userName }}</div>
+                                    <div class="history-item__date">{{ item.timestamp | amDateFormat:'MMMM Do YYYY, HH:mm' }}</div>
+                                </div>
                             </div>
-
-                            <div class="name-date-container">
-                            <div>{{ item.user.name }}</div>
-                            <div class="history-item__date">{{ item.date }}</div>
-                            </div>
-                        </div>
                             
                             <div class="history-item__break">
                                 <umb-badge
@@ -50,22 +51,21 @@
                                     color="{{item.actionColor}}">
                                     {{ item.action }}
                                 </umb-badge>
-                                <span>{{ item.description }}</span>
+                                <span>{{ item.comment }}</span>
                             </div>
                         </div>
                         <div class="history-line"></div>
                     </div>
 
-                    <div class="flex justify-center">
-                        <umb-pagination
-                            page-number="pagination.pageNumber"
-                            total-pages="pagination.totalPages"
-                            on-next="nextPage"
-                            on-prev="prevPage"
-                            on-go-to-page="goToPage">
-                        </umb-pagination>
-                    </div>
+                </div>
 
+                <div class="flex justify-center">
+                    <umb-pagination
+                        ng-if="auditTrailOptions.totalPages > 1"
+                        page-number="auditTrailOptions.pageNumber"
+                        total-pages="auditTrailOptions.totalPages"
+                        on-change="auditTrailPageChange(pageNumber)">
+                    </umb-pagination>
                 </div>
 
             </umb-box-content>    
@@ -150,7 +150,7 @@
             <umb-box-content class="block-form">
                 
                 <umb-control-group label="Created">
-                    {{node.createDate | amDateFormat:'DD'}} {{ node.createDate | amDateFormat:'MMM'}} {{ node.createDate | amDateFormat:'YYYY'}}, {{node.createDate | amDateFormat:'h:mmA'}} by {{ node.owner.name }}
+                    {{node.createDate | amDateFormat:'MMMM Do YYYY, HH:mm'}} by {{ node.owner.name }}
                 </umb-control-group>
             <!-- 
                 <umb-control-group label="Created" description="Date/time this document was created">