diff --git a/src/js/index.js b/src/js/index.js
index 5b27e778e..be2119881 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -460,6 +460,14 @@ app.filter('prettyShortDate', function () {
     };
 });
 
+app.filter('prettyEmailAddresses', function () {
+    return function prettyEmailAddresses(addresses) {
+        if (!addresses) return '';
+        if (Array.isArray(addresses)) return addresses.map(function (a) { return a.slice(1, -1); }).join(', ');
+        return addresses.slice(1, -1);
+    };
+});
+
 app.filter('markdown2html', function () {
     var converter = new showdown.Converter({
         extensions: [],
diff --git a/src/views/emails.html b/src/views/emails.html
index 768389d30..8d52658a3 100644
--- a/src/views/emails.html
+++ b/src/views/emails.html
@@ -96,21 +96,36 @@
         <table class="table table-hover" style="margin: 0;">
           <thead>
             <tr>
-              <th class="col-md-2">Time</th>
-              <th class="col-md-3">Type</th>
-              <th class="col-md-7">Details</th>
+              <th style="width:  5%"><!-- Direction --></th>
+              <th style="width: 15%">Time</th>
+              <th style="width: 10%">Type</th>
+              <th style="width: 30%">From</th>
+              <th style="width: 30%">To</th>
             </tr>
           </thead>
-          <tbody>
-            <tr ng-repeat="eventlog in activity.eventlogs">
-              <tr ng-click="showEventLogDetails(eventLog)" class="hand">
-                <td><span uib-tooltip="{{ eventlog.ts }}" class="arrow">{{ eventlog.ts }}</span></td>
-                <td>{{ eventlog.type }}</td>
-                <td ng-bind-html="eventlog.details"></td>
-              </tr>
-              <tr ng-show="activeEventLog === eventlog">
-                <td colspan="4"><pre class="eventlog-details">{{ eventlog.raw.data | json }}</pre></td>
-              </tr>
+          <tbody ng-show="activity.busy">
+            <tr>
+              <td colspan="5" class="text-center">
+                <i class="fa fa-circle-notch fa-spin"></i>
+              </td>
+            </tr>
+          </tbody>
+          <tbody ng-repeat="eventlog in activity.eventLogs" ng-hide="activity.busy">
+            <tr ng-click="activity.showEventLogDetails(eventlog)" class="hand">
+              <td class="no-wrap">
+                <i class="fas fa-upload" ng-show="eventlog.direction === 'outbound'" uib-tooltip="Outgoing"></i>
+                <i class="fas fa-download" ng-show="eventlog.direction === 'inbound'" uib-tooltip="Incoming"></i>
+              </td>
+              <td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
+              <td>{{ eventlog.type }}</td>
+              <td class="elide-table-cell">{{ eventlog.mailFrom | prettyEmailAddresses }}</td>
+              <td class="elide-table-cell">{{ eventlog.rcptTo | prettyEmailAddresses }}</td>
+            </tr>
+            <tr ng-show="activity.activeEventLog === eventlog">
+              <td colspan="5">
+                <pre class="eventlog-details">{{ eventlog.details | json }}</pre>
+              </td>
+            </tr>
           </tbody>
         </table>
 
diff --git a/src/views/emails.js b/src/views/emails.js
index 4f24e7d76..40c8530a4 100644
--- a/src/views/emails.js
+++ b/src/views/emails.js
@@ -12,14 +12,22 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
     $scope.domains = [];
 
     $scope.activity = {
-        eventlogs: [],
+        busy: true,
+        eventLogs: [],
+        activeEventLog: null,
         currentPage: 1,
-        perPage: 20,
+        perPage: 1000,
 
         fetchEventLogs: function () {
+            $scope.activity.busy = true;
+
             Client.getMailEventLogs($scope.activity.currentPage, $scope.activity.perPage, function (error, result) {
-                if (error) return console.error(error);
-                $scope.activity.eventlogs = result;
+                if (error) return console.error('Failed to fetch mail eventlogs.', error);
+
+                $scope.activity.busy = false;
+
+                // FIXME reverse should come from the server
+                $scope.activity.eventLogs = result.reverse();
             });
         },
 
@@ -32,10 +40,14 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
             if ($scope.activity.currentPage > 1) $scope.activity.currentPage--;
             else $scope.activity.currentPage = 1;
             $scope.activity.fetchEventLogs();
+        },
+
+        showEventLogDetails: function (eventLog) {
+            if ($scope.activity.activeEventLog === eventLog) $scope.activity.activeEventLog = null;
+            else $scope.activity.activeEventLog = eventLog;
         }
     };
 
-
     $scope.testEmail = {
         busy: false,
         error: {},
@@ -84,8 +96,6 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
 
                 domain.status = result;
                 domain.statusOk = result.rbl.status && result.relay.status && result.dns.dkim.status && result.dns.dmarc.status && result.dns.mx.status && result.dns.ptr.status && result.dns.spf.status;
-
-                console.log(domain)
             });
         });
     }