diff --git a/ang/mjwshared/PaymentprocessorWebhook.html b/ang/mjwshared/PaymentprocessorWebhook.html
index 23e743eb2ef8a2465b82769f3431074153cd8c7c..b8f1a6bac3bc614323ffc6584fa72f71fe829a65 100644
--- a/ang/mjwshared/PaymentprocessorWebhook.html
+++ b/ang/mjwshared/PaymentprocessorWebhook.html
@@ -57,18 +57,26 @@
     </thead>
     <tbody>
       <tr ng-repeat="(idx, row) in $ctrl.events" ng-class="{selected: (row.id == $ctrl.selectedRow)}">
-        <td ng-class="row['status']">{{row['status']}}</td>
+        <td ng-class="row['status'] + ' text-center'" title="{{ $ctrl.statusMap[row['status']].title }}">{{ $ctrl.statusMap[row['status']].content }}</td>
         <td><span title="Date received">{{row['created_date']}}</span> <span ng-if="row['processed_date']" title="Date processed">| {{row['processed_date']}}</span></td>
-        <td>{{row['payment_processor.name']}}</td>
+        <td><span title="Test processor" ng-if="row['payment_processor.is_test'] == 1" >🧪 </span>{{row['payment_processor.name']}}</td>
         <td>{{row['event_id']}}</td>
         <td>{{$ctrl.abbreviate(row['message'])}}</td>
         <td>
           <a href ng-click="$ctrl.selectedRow = row.id" ng-if="$ctrl.selectedRow != row.id">Details</a>
-          <a href ng-click="$ctrl.selectedRow = null" ng-if="$ctrl.selectedRow == row.id">Hide details</a>
-          <a href ng-click="$ctrl.delete(row.id)">Delete</a>
+          <a href ng-click="$ctrl.selectedRow = null" ng-if="$ctrl.selectedRow == row.id">Hide details</a> &nbsp;
+          <a href ng-click="$ctrl.delete(row.id)">Delete</a> &nbsp;
           <a href ng-click="$ctrl.retry(row.id)">Retry</a>
 
           <div class="details" ng-if="$ctrl.selectedRow == row.id">
+            <p>
+              Payment Processor:
+              <em>{{row['payment_processor.name']}}</em>
+              (<strong ng-if="row['payment_processor.is_test'] == 1" >Test</strong>
+              <strong ng-if="row['payment_processor.is_test'] != 1" >Live</strong>
+              ID: <code>{{row['payment_processor_id']}}</code>)
+            </p>
+            <p>Status: {{ $ctrl.statusMap[row['status']].title }}</p>
             <p>
               Identifier: <code>{{row.identifier}}</code>
               Type: <code>{{row.trigger}}</code>
diff --git a/ang/mjwshared/PaymentprocessorWebhook.js b/ang/mjwshared/PaymentprocessorWebhook.js
index 58a63c2119c572ce24f08bb98d0bf4e9dae275bb..3d90fcf3c52232a4c63ba4de13d6a11ca86bba31 100644
--- a/ang/mjwshared/PaymentprocessorWebhook.js
+++ b/ang/mjwshared/PaymentprocessorWebhook.js
@@ -34,13 +34,20 @@
     this.resultsCount = 0;
     this.lastQuery = '';
 
+    this.statusMap = {
+      'new': {content : '🔵 ' + ts('New'), title: ts('This event is awaiting processing')},
+      'processing': {content : '🟡 ' + ts('Processing'), title: ts('This event is currently being processed by the Scheduled Job')},
+      'success': {content : '🟢 ' + ts('Success'), title: ts('This event was successfully processed.')},
+      'error': {content : '🔴 ' + ts('Success'), title: ts('This event was successfully processed.')},
+    };
+
     this.abbreviate = function (text) {
      return text.replace(/^(.{80}).+$/s, '$1 ...');
     }
 
     this.load = function() {
       const params = {
-          select: ["*", 'row_count', "payment_processor.name"],
+          select: ["*", 'row_count', "payment_processor.name", "payment_processor.is_test"],
           join: [["PaymentProcessor AS payment_processor", true, null, ["payment_processor_id", "=", "payment_processor.id"]]],
           where: [],
           orderBy: {"id":"DESC"}
@@ -66,7 +73,6 @@
       return crmStatus(
         // Status messages. For defaults, just use "{}"
         {start: ts('Loading...'), success: ts('Loaded')},
-        // The save action. Note that crmApi() returns a promise.
         crmApi4('PaymentprocessorWebhook', 'get', params)
         .then(r => {
           ctrl.resultsCount = r.count;