diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js
index f0dad31ee2..e0ac1a10a5 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js
@@ -1,4 +1,4 @@
-/**
+/**
 @ngdoc directive
 @name umbraco.directives.directive:umbCodeSnippet
 @restrict E
@@ -47,7 +47,8 @@
         controllerAs: 'vm',
         transclude: true,
         bindings: {
-            language: '<'
+            language: '<',
+            wrap: '<?'
         }
     };
 
@@ -77,9 +78,14 @@
                     case "css":
                         vm.language = "CSS";
                         break;
+                    case "js":
                     case "javascript":
                         vm.language = "JavaScript";
                         break;
+                    case "txt":
+                    case "text":
+                        vm.language = "Text/Plain";
+                        break;
                 }
             }
             
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index 60020066c0..6b8c0a8622 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -133,14 +133,6 @@
     box-sizing: border-box;
     visibility: hidden;
     border-radius: @baseBorderRadius;
-
-    &.umb-overlay--small {
-        width: 420px;
-    }
-
-    &.umb-overlay--medium {
-        width: 520px;
-    }
 }
 
 .umb-overlay.umb-overlay-target .umb-overlay-header {
@@ -249,6 +241,24 @@
     font-size: 12px;
 }
 
+.umb-overlay.umb-overlay-target,
+.umb-overlay.umb-overlay-left,
+.umb-overlay.umb-overlay-right {
+
+    &.umb-overlay--small {
+      width: 500px;
+    }
+
+    &.umb-overlay--medium {
+      width: 800px;
+    }
+
+    &.umb-overlay--large {
+      max-width: 1600px;
+      width: calc(100% - 50px);
+    }
+}
+
 /*ensures dialogs doesnt have side-by-side labels*/
 .umb-overlay .control-label,
 .umb-overlay .form-horizontal .control-label,
@@ -261,7 +271,6 @@
     float: none;
 }
 
-
 .umb-overlay .controls-row,
 .umb-overlay .form-horizontal .controls,
 .form-horizontal .umb-overlay .controls {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
index 96b4fc08c8..8f58845780 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
@@ -1,4 +1,4 @@
-.umb-code-snippet {
+.umb-code-snippet {
 
     .umb-code-snippet__header {
         box-sizing: content-box;
@@ -41,4 +41,15 @@
             white-space: nowrap;
         }
     }
+
+    &--wrap {
+        pre {
+            word-wrap: break-word;
+
+            code {
+                white-space: pre-wrap;
+                word-wrap: break-word;
+            }
+        }
+    }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
index 199d7dec56..7a0ed5f540 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
@@ -1,4 +1,4 @@
-<div class="umb-code-snippet">
+<div class="umb-code-snippet" ng-class="{ 'umb-code-snippet--wrap': vm.wrap === true }">
     <div class="umb-code-snippet__header">
         <span class="language" ng-if="vm.language">{{vm.language}}</span>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html b/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html
index 20c62cbd77..c190921dcb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html
+++ b/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html
@@ -64,7 +64,7 @@
                         action="vm.submit(model)">
                     </umb-button>
                 </umb-editor-footer-content-right>
-            </umb-editor-footer>     
+            </umb-editor-footer>
         </umb-editor-view>
 
     </form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js
index b278638e34..c6b45530d8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js
@@ -1,7 +1,7 @@
 (function () {
   "use strict";
 
-  function WebhookLogController($q, webhooksResource, overlayService) {
+  function WebhookLogController($q, webhooksResource, editorService, userService, dateHelper) {
 
     const vm = this;
 
@@ -25,20 +25,33 @@
       return webhooksResource.getLogs()
         .then(data => {
           vm.logs = data.items;
+          vm.logs.forEach(log => {
+            formatDatesToLocal(log);
+          });
         });
     }
 
+    function formatDatesToLocal(log) {
+      userService.getCurrentUser().then(currentUser => {
+        log.formattedLogDate = dateHelper.getLocalDate(log.date, currentUser.locale, "LLL");
+      });
+    }
+
     function openLogOverlay(log) {
-      overlayService.open({
+
+      const dialog = {
         view: "views/webhooks/overlays/details.html",
         title: 'Details',
         position: 'right',
+        size: 'medium',
         log,
         currentUser: this.currentUser,
         close: () => {
-          overlayService.close();
+          editorService.close();
         }
-      });
+      };
+
+      editorService.open(dialog);
     }
 
     function isChecked(log) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html
index f2db3096af..9eec01ce05 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html
@@ -20,7 +20,7 @@
           </umb-checkmark>
         </td>
         <td>{{ log.webhookKey }}</td>
-        <td>{{ log.date }}</td>
+        <td>{{ log.formattedLogDate }}</td>
         <td>{{ log.url }}</td>
         <td>{{ log.eventAlias }}</td>
         <td>{{ log.retryCount }}</td>
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js
new file mode 100644
index 0000000000..39d25c0205
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js
@@ -0,0 +1,33 @@
+(function () {
+  "use strict";
+  function DetailsController($scope) {
+    const vm = this;
+
+    vm.close = close;
+    vm.formatData = formatData;
+
+    function formatData(data) {
+
+      let obj = data;
+
+      if (data.detectIsJson()) {
+        try {
+          obj = Utilities.fromJson(data)
+        } catch (err) {
+          obj = data;
+        }
+      }
+
+      return obj;
+    }
+
+    function close() {
+      if ($scope.model && $scope.model.close) {
+        $scope.model.close();
+      }
+    }
+
+  }
+
+  angular.module("umbraco").controller("Umbraco.Editors.Webhooks.DetailsController", DetailsController);
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html
index d66c1463e7..d1ce18477e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html
@@ -1,43 +1,85 @@
-<div class="headless-webhook-log-entry-details-overlay" style="margin-top: 20px;">
-  <div class="control-group">
-    <div class="flex items-center">
-      <div class="flx-g0 flx-s0" style="flex-basis: 40px;">
-        <umb-checkmark checked="true" size="m" style="cursor: default"></umb-checkmark>
-        <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="model.webhookLogEntry.response.isSuccess === false"></umb-icon>
-      </div>
-      <div class="flx-g1 flx-s1 flx-b2" ng-if="model.webhookLogEntry.responseStatus.description || model.webhookLogEntry.response.statusCode">{{model.webhookLogEntry.response.statusDescription}} ({{model.webhookLogEntry.response.statusCode}})</div>
-    </div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Date</span>
-    <div class="controls controls-row">{{model.log.date}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Url</span>
-    <div class="controls controls-row">{{model.log.url}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Status code</span>
-    <div class="controls controls-row">{{model.log.statusCode}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Event</span>
-    <div class="controls controls-row">{{model.log.eventAlias}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Retry count</span>
-    <div class="controls controls-row">{{model.log.retryCount}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Request</span>
-    <pre>{{model.log.requestHeaders}}
----
-{{model.log.requestBody}}</pre>
-  </div>
-  <div class="control-group">
-    <span class="bold">Response</span>
-    <pre>{{model.log.responseHeaders}}
----
-{{model.log.responseBody}}</pre>
-  </div>
+<div ng-controller="Umbraco.Editors.Webhooks.DetailsController as vm" class="headless-webhook-log-entry-details-overlay" style="margin-top: 20px;">
+
+  <umb-editor-view>
+
+    <umb-editor-header
+        name="model.title"
+        name-locked="true"
+        hide-alias="true"
+        hide-icon="true"
+        hide-description="true">
+    </umb-editor-header>
+
+    <umb-editor-container>
+
+       <umb-box>
+          <umb-box-header title-key="general_general"></umb-box-header>
+          <umb-box-content class="block-form">
+              
+              <umb-control-group>
+                <div class="flex items-center">
+                  <div class="flx-g0 flx-s0" style="flex-basis: 40px;">
+                    <umb-checkmark checked="true" size="m" style="cursor: default"></umb-checkmark>
+                    <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="model.webhookLogEntry.response.isSuccess === false"></umb-icon>
+                  </div>
+                  <div class="flx-g1 flx-s1 flx-b2" ng-if="model.webhookLogEntry.responseStatus.description || model.webhookLogEntry.response.statusCode">{{model.webhookLogEntry.response.statusDescription}} ({{model.webhookLogEntry.response.statusCode}})</div>
+                </div>
+              </umb-control-group>
+              
+              <umb-control-group label="@general_date">
+                  <div>{{model.log.formattedLogDate}}</div>
+              </umb-control-group>
+
+              <umb-control-group label="@general_url">
+                  <div>{{model.log.url}}</div>
+              </umb-control-group>
+
+              <umb-control-group label="Status code">
+                <div>{{model.log.statusCode}}</div>
+              </umb-control-group>
+
+              <umb-control-group label="Event">
+                <div>{{model.log.eventAlias}}</div>
+              </umb-control-group>
+
+              <umb-control-group label="Retry count">
+                <div>{{model.log.retryCount}}</div>
+              </umb-control-group>
+
+          </umb-box-content>
+
+        </umb-box>
+
+        <umb-box>
+          <umb-box-header title="Request"></umb-box-header>
+          <umb-box-content class="block-form">
+            <pre class="code">{{model.log.requestHeaders}}</pre>
+            <umb-code-snippet language="'JSON'" wrap="true">{{vm.formatData(model.log.requestBody) | json}}</umb-code-snippet>
+          </umb-box-content>
+        </umb-box>
+
+        <umb-box>
+          <umb-box-header title="Response"></umb-box-header>
+          <umb-box-content class="block-form">
+            <pre class="code">{{model.log.responseHeaders}}</pre>
+            <umb-code-snippet language="'TEXT'" wrap="true">{{vm.formatData(model.log.responseBody) | json}}</umb-code-snippet>
+          </umb-box-content>
+        </umb-box>
+
+    </umb-editor-container>
+
+    <umb-editor-footer>
+        <umb-editor-footer-content-right>
+            <umb-button
+                type="button"
+                button-style="link"
+                label-key="general_close"
+                shortcut="esc"
+                action="vm.close()">
+            </umb-button>
+        </umb-editor-footer-content-right>
+    </umb-editor-footer>
+
+  </umb-editor-view>
+
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js
index 298cb95bd8..baa816146a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js
@@ -10,13 +10,13 @@
 
     $scope.headerModel = { key: "", value: "" };
 
-    function submit () {
+    function submit() {
       if ($scope.headerModel.key && $scope.headerModel.value) {
         $scope.model.submit($scope.headerModel);
       }
     }
 
-    function close () {
+    function close() {
       $scope.model.close();
     }
   }
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js
index 10a0f51c08..ff4e214596 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js
@@ -1,7 +1,7 @@
 (function () {
   "use strict";
 
-  function WebhookController($q, $timeout, $location, $routeParams, webhooksResource, navigationService, notificationsService, editorService, overlayService, contentTypeResource, mediaTypeResource, memberTypeResource) {
+  function WebhookController($q, $timeout, $location, $routeParams, webhooksResource, navigationService, notificationsService, overlayService, contentTypeResource, mediaTypeResource, memberTypeResource) {
 
     const vm = this;