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 233da4a224..bbae025d3e 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
@@ -111,6 +111,7 @@
                             item.logTypeColor = "success";
                             break;
                         case "UnPublish":
+                        case "Delete":
                             item.logTypeColor = "danger";
                             break;
                         default:
diff --git a/src/Umbraco.Web.UI.Client/src/less/properties.less b/src/Umbraco.Web.UI.Client/src/less/properties.less
index 725105c409..57edbd7266 100644
--- a/src/Umbraco.Web.UI.Client/src/less/properties.less
+++ b/src/Umbraco.Web.UI.Client/src/less/properties.less
@@ -60,21 +60,29 @@
 
 //------------------- HISTORY ------------------
 
+.history {
+    position: relative;
+}
 
 .history-line {
     width: 2px;
-    height: 24px;
+    height: 100%;
     margin: 0 0 0 14px;
     background-color: @gray-8;
+    position: absolute;
+    z-index: 0;
 }
 
-.history-row {
+.history-item {
     display: flex;
     align-items: center;
+    margin-bottom: 24px;
+    position: relative;
+    z-index: 1;
 }
 
-.history-item__avatar{
-    min-width: 30px;
+.history-item__avatar {
+    margin-right: 7px;
 }
 
 .history-item__date {
@@ -82,74 +90,18 @@
     color: @gray-5;
 }
 
-.name-date-container {
-    margin: 0 30px 0 7px;
-    height: 30px;
-    min-width: 170px;
-}
-
-.last-history-item .history-line {
-    display: none;
-}
-
-//--------- META DATA --------
-.meta-data-section {
-    display: flex;
-    flex-direction: column;
-}
-
-.meta-data-title {
-    font-size: 15px;
-    color: @black;
-    font-weight: bold;
-    line-height: 20px;
-}
-
-.meta-data-description {
-    font-size: 13px;
-    color: @gray-5;
-}
-
-.meta-data {
-    font-size: 15px;
-    color: @gray-2;
-    line-height: 20px;
-}
-
-/*  RESPONSIVE  */
-
 .history-item__break {
     display: flex;
     align-items: center;
     min-width: 230px;
+    font-size: 14px;
 }
-@media (max-width: 979px) {
+
+/*  RESPONSIVE  */
+@media (min-width: 1101px) and (max-width: 1365px), (max-width: 979px) {
     
-    .history-row {
+    .history-item {
         display: block;
-        padding: 10px 0;
-    }
-
-    .history-item__break {
-        padding: 7px 0;
-    }
-
-    .history-line {
-        display: none;
-    }
-}
-@media (max-width: 1535px) {
-    
-    .history-line {
-        visibility: hidden;
-    }
-}
-
-@media (min-width: 1101px) and (max-width: 1365px) {
-    
-    .history-row {
-        display: block;
-        padding: 10px 0;
     }
 
     .history-item__break {
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 c65b51588a..28f00ca0e3 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
@@ -36,10 +36,13 @@
                             <localize key="content_noChanges"></localize>
                         </umb-empty-state>
                     </div>
+
+                    <div class="history">
+
+                        <div ng-if="auditTrail.length > 1" class="history-line"></div>                            
                     
-                    <div class="history-item" ng-repeat="item in auditTrail" ng-class="{'last-history-item': $last}">
-                        <div class="history-row">
-                        
+                        <div class="history-item" ng-repeat="item in auditTrail">
+                            
                             <div class="history-item__break">
                                 <div class="history-item__avatar">
                                     <umb-avatar
@@ -51,7 +54,7 @@
                                     </umb-avatar>
                                 </div>
 
-                                <div class="name-date-container">
+                                <div>
                                     <div>{{ item.userName }}</div>
                                     <div class="history-item__date">{{item.timestampFormatted}}</div>
                                 </div>
@@ -59,14 +62,14 @@
                             
                             <div class="history-item__break">
                                 <umb-badge
-                                    size="s"
+                                    size="xs"
                                     color="{{item.logTypeColor}}">
                                     {{ item.logType }}
                                 </umb-badge>
                                 <span>{{ item.comment }}</span>
                             </div>
+                            
                         </div>
-                        <div class="history-line"></div>
                     </div>
 
                 </div>