diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index 386c97b815..e3e9e6e5ce 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -17,6 +17,7 @@
     $scope.page.buttonGroupState = "init";
     $scope.allowOpen = true;
 
+
     function init(content) {
 
       $scope.auditTrail = [
@@ -384,14 +385,8 @@
       alert("go to page" + pageNumber);
     };
 
-    $scope.openTemplate = function(template) {
-      alert("you opened template");
-      console.log("this is not the doctype");
-    };
-
     $scope.openDocType = function(docType) {
-      alert("you opened docType");
-      console.log("this is not the template");
+      console.log("doctype has been clicked");
     };
 
     $scope.updateTemplate = function(templateAlias) {
diff --git a/src/Umbraco.Web.UI.Client/src/less/properties.less b/src/Umbraco.Web.UI.Client/src/less/properties.less
index 3a177d686a..39422eb2ea 100644
--- a/src/Umbraco.Web.UI.Client/src/less/properties.less
+++ b/src/Umbraco.Web.UI.Client/src/less/properties.less
@@ -1,11 +1,10 @@
 //----- SCHEDULED PUBLISH ------
 
-
 .place-holder {
     height: 60px;
     width: 60px;
     margin: 15px auto;
-    background-color: grey;
+    background-color: @gray-8;
 }
 
 .date-wrapper {
@@ -21,26 +20,27 @@
 .date-wrapper__number{
     font-size: 48px;
     line-height: 50px;
-    color: #2e2e32;
+    color: @gray-2;
     font-weight: 900;
 }
 
 .date-wrapper__title {
     font-size: 16px;
     font-weight: 700;
-    color: #514f53;
+    color: @gray-3;
     margin: 0 0 15px 0;
 }
 
 .date-wrapper__date{
     font-size: 13px;
-    color: #a2a0a5;
+    color: @gray-6;
     margin: 0;
 }
 
-.date-container h4{
+.data-wrapper__add{
     font-size: 18px;
-    color: #d7d6d8;
+    line-height: 10px;
+    color: @gray-8;
     font-weight: 900;
     margin: 0;
 }
@@ -49,7 +49,7 @@
     height: 120px;
     margin: 15px 0 0 0;
     width: 2px;
-    background-color: #d7d6d8;
+    background-color: @gray-8;
 }
 
 //--------- HISTORY ----------
@@ -59,7 +59,7 @@
     width: 2px;
     height: 24px;
     margin: 0 0 0 14px;
-    background-color: #d7d6d8;
+    background-color: @gray-8;
 }
 
 .history-row {
@@ -72,8 +72,8 @@
 }
 
 .history-item__date {
-    font-size: 13px;;
-    color: #817f85;
+    font-size: 13px;
+    color: @gray-5;
 }
 
 .name-date-container {
@@ -81,24 +81,10 @@
     height: 30px;
 }
 
-.history-indicator__publish {
-    padding: 7px;
-    height: 14px;
-    background-color: #eafff5;
-    border: 1px solid #35c685;
-}
-
 .last-history-item .history-line {
     display: none;
 }
 
-/* pagination */
-
-.umb-box-content .umb-pagination ul {
-    float: none;
-    display: inline;
-    margin: 0 auto;
-}
 //--------- META DATA --------
 .meta-data-section {
     display: flex;
@@ -107,20 +93,40 @@
 
 .meta-data-title {
     font-size: 15px;
-    color: #000;
+    color: @black;
     font-weight: bold;
     line-height: 20px;
 }
 
 .meta-data-description {
     font-size: 13px;
-    color: #817f85;
+    color: @gray-5;
 }
 
 .meta-data {
     font-size: 15px;
-    color: #303033;
+    color: @gray-2;
     line-height: 20px;
 }
 
-//----------- LINKS ----------
\ No newline at end of file
+/*  RESPONSIVE  */
+
+.history-item__break {
+    display: flex;
+    align-items: center;
+}
+@media (max-width: 979px) {
+    
+    .history-row {
+        display: block;
+        padding: 10px 0;
+    }
+
+    .history-item__break {
+        padding: 7px 0;
+    }
+
+    .history-line {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
index 6d4a85a723..3333fa2c88 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
@@ -46,23 +46,33 @@
                                         <div ng-if="!loadingAuditTrail">
                                             <div class="history-item" ng-repeat="item in auditTrail" ng-class="{'last-history-item': $last}">
                                                 <div class="history-row">
-                                                    <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">
-                                                    <span>{{ item.user.name }}</span>
-                                                    <span class="date">{{ item.date }}</span>
+                                                
+
+                                                <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>
+
+                                                    <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
                                                             size="s"
                                                             color="{{item.actionColor}}">
                                                             {{ item.action }}
                                                         </umb-badge>
-                                                <span>{{ item.description }}</span>
+                                                        <span>{{ item.description }}</span>
+                                                    </div>
                                                 </div>
                                                 <div class="history-line"></div>
                                             </div>
@@ -98,10 +108,10 @@
                                             <div class="date-container">
                                                 <div class="date-wrapper__title">Unpublish date</div>
                                                 <div class="place-holder"></div>
-                                                <h4>ADD DATE</h4>
+                                                <div class="data-wrapper__add">ADD</div>
                                             </div>
                                         </div>
-                                    </umb-box-content>    
+                                    </umb-box-content>
                                 </umb-box>
                                 <umb-box>
                                     <umb-box-header title="Meta data"></umb-box-header>
@@ -128,7 +138,7 @@
 
                                         <umb-control-group label="{{ idSection.name }}">
                                             <div>{{ content.id }}</div>
-                                            <small class="muted">{{ content.key }}</small>
+                                            <small>{{ content.key }}</small>
                                         </umb-control-group>
                                     </umb-box-content>    
                                 </umb-box>
@@ -165,7 +175,11 @@
             </umb-editor-footer-content-left>
 
 
-            <umb-editor-footer-content-right>
+            <umb-editor-footer-content-right>              
+                
+                <span ng-if="content.removeDate != null && content.releaseDate != null">Publish and unpublish date: <i class="icon-calendar"></i>{{ content.releaseDate }} and {{ content.removeDate }}</span>
+                <span ng-if="content.removeDate == null && content.releaseDate != null">Publish date only: <i class="icon-calendar"></i> {{ content.releaseDate }}</span>
+                <span ng-if="content.removeDate != null && content.releaseDate == null">Remove date only: <i class="icon-calendar"></i> {{ content.removeDate }}</span>
 
                <umb-button
                   ng-if="page.listViewPath"