diff --git a/src/js/index.js b/src/js/index.js
index 56578a0fa..646ce8051 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -81,6 +81,9 @@ app.config(['$routeProvider', function ($routeProvider) {
     }).when('/email', {
         controller: 'EmailsController',
         templateUrl: 'views/emails.html?<%= revision %>'
+    }).when('/emails-eventlog', {
+        controller: 'EmailsEventlogController',
+        templateUrl: 'views/emails-eventlog.html?<%= revision %>'
     }).when('/email/:domain', {
         controller: 'EmailController',
         templateUrl: 'views/email.html?<%= revision %>'
diff --git a/src/theme.scss b/src/theme.scss
index b3339951d..2c8c7414c 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -557,6 +557,9 @@ multiselect {
 
 .maillog-filter {
     display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 2px;
 
     .form-control {
         display: inline-block;
diff --git a/src/views/emails-eventlog.html b/src/views/emails-eventlog.html
new file mode 100644
index 000000000..09ccdc947
--- /dev/null
+++ b/src/views/emails-eventlog.html
@@ -0,0 +1,87 @@
+<div>
+  <a href="/#/email" class="back-to-view-link"><i class="fas fa-arrow-left"></i> {{ 'email.backAction' | tr }}</a>
+
+  <div class="col-md-8 col-md-offset-2">
+    <h1>
+      {{ 'emails.eventlog.title' | tr }}
+
+      <a class="btn btn-default btn-outline pull-right" href="/logs.html?id=mail" target="_blank">Raw Logs</a>
+    </h1>
+  </div>
+</div>
+
+<div>
+  <div class="col-md-8 col-md-offset-2">
+    <div class="maillog-filter">
+      <input class="form-control" style="width: 200px;" placeholder="{{ 'main.searchPlaceholder' | tr }}" type="text" ng-model="activity.search" ng-model-options="{ debounce: 1000 }" ng-change="activity.updateFilter()" />
+      <multiselect ng-model="activity.selectedTypes" ms-header="{{ 'emails.typeFilterHeader' | tr }}" options="a.name for a in activityTypes" data-multiple="true"  ng-change="activity.updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
+      <select class="form-control" ng-model="activity.pageItems" ng-options="a.name for a in pageItemCount" ng-change="activity.updateFilter(true)"></select>
+    </div>
+    <div class="pagination pull-right">
+      <button class="btn btn-default btn-outline" ng-click="activity.refresh()"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
+      <button class="btn btn-default btn-outline" ng-click="activity.showPrevPage()" ng-disabled="activity.busy || activity.currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
+      <button class="btn btn-default btn-outline" ng-click="activity.showNextPage()" ng-disabled="activity.busy || activity.perPage > activity.eventLogs.length">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="col-md-8 col-md-offset-2">
+    <div class="card card-block" style="max-width: 100%">
+      <div>
+        <center ng-show="activity.busy"><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center>
+        <table ng-hide="activity.busy" class="table table-hover" style="margin: 0;">
+          <thead>
+            <tr>
+              <th style="width:  5%"><!-- Icon --></th>
+              <th style="width: 20%">{{ 'emails.eventlog.time' | tr }}</th>
+              <th style="width: 75%">{{ 'emails.eventlog.details' | tr }}</th>
+            </tr>
+          </thead>
+          <tbody ng-hide="activity.eventLogs.length">
+            <tr>
+              <td colspan="4" class="text-center">
+                <br>
+                <br>
+                {{ 'emails.eventlog.empty' | tr }}
+                <br>
+                <br>
+              </td>
+            </tr>
+          </tbody>
+          <tbody ng-show="activity.eventLogs.length" ng-repeat="eventlog in activity.eventLogs">
+            <tr ng-click="activity.showEventLogDetails(eventlog)" class="hand">
+              <td class="no-wrap">
+                <i class="fas fa-arrow-circle-left" ng-show="eventlog.type === 'delivered'" uib-tooltip="{{ 'emails.eventlog.type.outgoing' | tr }}"></i>
+                <i class="fas fa-history" ng-show="eventlog.type === 'deferred'" uib-tooltip="{{ 'emails.eventlog.type.deferred' | tr }}"></i>
+                <i class="fas fa-arrow-circle-right" ng-show="eventlog.type === 'received'" uib-tooltip="{{ 'emails.eventlog.type.incoming' | tr }}"></i>
+                <i class="fas fa-align-justify" ng-show="eventlog.type === 'queued'" uib-tooltip="{{ 'emails.eventlog.type.queued' | tr }}"></i>
+                <i class="fas fa-minus-circle" ng-show="eventlog.type === 'denied'" uib-tooltip="{{ 'emails.eventlog.type.denied' | tr }}"></i>
+                <i class="fas fa-hand-paper" ng-show="eventlog.type === 'bounce'" uib-tooltip="{{ 'emails.eventlog.type.bounce' | tr }}"></i>
+                <i class="fas fa-filter" ng-show="eventlog.type === 'spam-learn'" uib-tooltip="{{ 'emails.eventlog.type.spamFilterTrained' | tr }}"></i>
+              </td>
+              <td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
+              <td>
+                <span ng-show="eventlog.type === 'bounce'">{{ 'emails.eventlog.type.bounceInfo' | tr:eventlog }}</span>
+                <span ng-show="eventlog.type === 'deferred'">{{ 'emails.eventlog.type.deferredInfo' | tr:eventlog }}</span>
+                <span ng-show="eventlog.type === 'queued'">
+                  <span ng-show="eventlog.direction === 'inbound'">{{ 'emails.eventlog.type.inboundInfo' | tr:eventlog }}</span>
+                  <span ng-show="eventlog.direction === 'outbound'">{{ 'emails.eventlog.type.outboundInfo' | tr:eventlog }}</span>
+                </span>
+                <span ng-show="eventlog.type === 'received'">{{ 'emails.eventlog.type.receivedInfo' | tr:eventlog }}</span>
+                <span ng-show="eventlog.type === 'delivered'">{{ 'emails.eventlog.type.deliveredInfo' | tr:eventlog }}</span>
+                <span ng-show="eventlog.type === 'denied'">{{ 'emails.eventlog.type.deniedInfo' | tr:eventlog }}</span>
+                <span ng-show="eventlog.type === 'spam-learn'">{{ 'emails.eventlog.type.spamFilterTrainedInfo' | tr:eventlog }}</span>
+              </td>
+            </tr>
+            <tr ng-show="activity.activeEventLog === eventlog">
+              <td colspan="6">
+                <pre class="eventlog-details">{{ eventlog | json }}</pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/views/emails-eventlog.js b/src/views/emails-eventlog.js
new file mode 100644
index 000000000..d9df4c245
--- /dev/null
+++ b/src/views/emails-eventlog.js
@@ -0,0 +1,81 @@
+'use strict';
+
+/* global $ */
+/* global angular */
+
+angular.module('Application').controller('EmailsEventlogController', ['$scope', '$location', '$translate', '$timeout', 'Client', function ($scope, $location, $translate, $timeout, Client) {
+    Client.onReady(function () { if (!Client.getUserInfo().isAtLeastOwner) $location.path('/'); });
+
+    $scope.ready = false;
+    $scope.config = Client.getConfig();
+    $scope.user = Client.getUserInfo();
+
+    $scope.pageItemCount = [
+        { name: $translate.instant('main.pagination.perPageSelector', { n: 20 }), value: 20 },
+        { name: $translate.instant('main.pagination.perPageSelector', { n: 50 }), value: 50 },
+        { name: $translate.instant('main.pagination.perPageSelector', { n: 100 }), value: 100 }
+    ];
+
+    $scope.activityTypes = [
+        { name: 'Bounce', value: 'bounce' },
+        { name: 'Deferred', value: 'deferred' },
+        { name: 'Delivered', value: 'delivered' },
+        { name: 'Denied', value: 'denied' },
+        { name: 'Queued', value: 'queued' },
+        { name: 'Received', value: 'received' },
+    ];
+
+    $scope.activity = {
+        busy: true,
+        eventLogs: [],
+        activeEventLog: null,
+        currentPage: 1,
+        perPage: 20,
+        pageItems: $scope.pageItemCount[0],
+        selectedTypes: [],
+        search: '',
+
+        refresh: function () {
+            $scope.activity.busy = true;
+
+            var types = $scope.activity.selectedTypes.map(function (a) { return a.value; }).join(',');
+
+            Client.getMailEventLogs($scope.activity.search, types, $scope.activity.currentPage, $scope.activity.pageItems.value, function (error, result) {
+                if (error) return console.error('Failed to fetch mail eventlogs.', error);
+
+                $scope.activity.busy = false;
+
+                $scope.activity.eventLogs = result;
+            });
+        },
+
+        showNextPage: function () {
+            $scope.activity.currentPage++;
+            $scope.activity.refresh();
+        },
+
+        showPrevPage: function () {
+            if ($scope.activity.currentPage > 1) $scope.activity.currentPage--;
+            else $scope.activity.currentPage = 1;
+            $scope.activity.refresh();
+        },
+
+        showEventLogDetails: function (eventLog) {
+            if ($scope.activity.activeEventLog === eventLog) $scope.activity.activeEventLog = null;
+            else $scope.activity.activeEventLog = eventLog;
+        },
+
+        updateFilter: function (fresh) {
+            if (fresh) $scope.activity.currentPage = 1;
+            $scope.activity.refresh();
+        }
+    };
+
+    Client.onReady(function () {
+        $scope.ready = true;
+
+        $scope.activity.refresh();
+    });
+
+    $('.modal-backdrop').remove();
+}]);
diff --git a/src/views/emails.html b/src/views/emails.html
index d378888a4..0f6dbd1f2 100644
--- a/src/views/emails.html
+++ b/src/views/emails.html
@@ -166,7 +166,7 @@
       {{ 'emails.title' | tr }}
 
       <div class="btn-group btn-group-sm pull-right" role="group">
-        <a class="btn btn-sm btn-default" href="/logs.html?id=mail" target="_blank" uib-tooltip="{{ 'app.logsActionTooltip' | tr }}" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-align-left"></i></a>
+        <a class="btn btn-sm btn-default" href="#/emails-eventlog" uib-tooltip="Email Eventlog" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-align-left"></i></a>
         <a class="btn btn-sm btn-default" ng-disabled="user.role !== 'owner'" href="/filemanager.html?id=mail&type=mail" target="_blank" uib-tooltip="{{ 'app.filemanagerActionTooltip' | tr }}" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-folder"></i></a>
       </div>
     </h1>
@@ -275,95 +275,4 @@
     </div>
   </div>
 
-  <br/>
-
-  <div class="text-left" ng-show="user.role === 'owner'">
-    <h3>{{ 'emails.eventlog.title' | tr }}</h3>
-  </div>
-
-  <div class="row" ng-show="user.role === 'owner'">
-    <div class="col-md-12">
-      <div class="maillog-filter">
-        <input class="form-control" style="width: 200px;" placeholder="{{ 'main.searchPlaceholder' | tr }}" type="text" ng-model="activity.search" ng-model-options="{ debounce: 1000 }" ng-change="activity.updateFilter()" />
-        <multiselect ng-model="activity.selectedTypes" ms-header="{{ 'emails.typeFilterHeader' | tr }}" options="a.name for a in activityTypes" data-multiple="true"  ng-change="activity.updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
-        <select class="form-control" ng-model="activity.pageItems" ng-options="a.name for a in pageItemCount" ng-change="activity.updateFilter(true)"></select>
-      </div>
-      <div class="pull-right">
-        <button class="btn btn-default btn-outline" ng-click="activity.refresh()"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
-        <button class="btn btn-default btn-outline" ng-click="activity.showPrevPage()" ng-disabled="activity.busy || activity.currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
-        <button class="btn btn-default btn-outline" ng-click="activity.showNextPage()" ng-disabled="activity.busy || activity.perPage > activity.eventLogs.length">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
-      </div>
-    </div>
-  </div>
-
-  <div class="card card-large" style="margin-top: 10px; margin-bottom: 15px;" ng-show="user.role === 'owner'">
-    <div class="row ng-hide" ng-hide="ready">
-      <div class="col-lg-12 text-center">
-        <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
-      </div>
-    </div>
-    <div class="row animateMeOpacity ng-hide" ng-show="ready">
-      <div class="col-xs-12">
-        <table class="table table-hover" style="margin: 0;">
-          <thead>
-            <tr>
-              <th style="width:  5%"><!-- Icon --></th>
-              <th style="width: 20%">{{ 'emails.eventlog.time' | tr }}</th>
-              <th style="width: 75%">{{ 'emails.eventlog.details' | tr }}</th>
-            </tr>
-          </thead>
-          <tbody ng-show="activity.busy">
-            <tr>
-              <td colspan="4" class="text-center">
-                <i class="fa fa-circle-notch fa-spin"></i>
-              </td>
-            </tr>
-          </tbody>
-          <tbody ng-hide="activity.eventLogs.length || activity.busy">
-            <tr>
-              <td colspan="4" class="text-center">
-                <br>
-                <br>
-                {{ 'emails.eventlog.empty' | tr }}
-                <br>
-                <br>
-              </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-arrow-circle-left" ng-show="eventlog.type === 'delivered'" uib-tooltip="{{ 'emails.eventlog.type.outgoing' | tr }}"></i>
-                <i class="fas fa-history" ng-show="eventlog.type === 'deferred'" uib-tooltip="{{ 'emails.eventlog.type.deferred' | tr }}"></i>
-                <i class="fas fa-arrow-circle-right" ng-show="eventlog.type === 'received'" uib-tooltip="{{ 'emails.eventlog.type.incoming' | tr }}"></i>
-                <i class="fas fa-align-justify" ng-show="eventlog.type === 'queued'" uib-tooltip="{{ 'emails.eventlog.type.queued' | tr }}"></i>
-                <i class="fas fa-minus-circle" ng-show="eventlog.type === 'denied'" uib-tooltip="{{ 'emails.eventlog.type.denied' | tr }}"></i>
-                <i class="fas fa-hand-paper" ng-show="eventlog.type === 'bounce'" uib-tooltip="{{ 'emails.eventlog.type.bounce' | tr }}"></i>
-                <i class="fas fa-filter" ng-show="eventlog.type === 'spam-learn'" uib-tooltip="{{ 'emails.eventlog.type.spamFilterTrained' | tr }}"></i>
-              </td>
-              <td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
-              <td>
-                <span ng-show="eventlog.type === 'bounce'">{{ 'emails.eventlog.type.bounceInfo' | tr:eventlog }}</span>
-                <span ng-show="eventlog.type === 'deferred'">{{ 'emails.eventlog.type.deferredInfo' | tr:eventlog }}</span>
-                <span ng-show="eventlog.type === 'queued'">
-                  <span ng-show="eventlog.direction === 'inbound'">{{ 'emails.eventlog.type.inboundInfo' | tr:eventlog }}</span>
-                  <span ng-show="eventlog.direction === 'outbound'">{{ 'emails.eventlog.type.outboundInfo' | tr:eventlog }}</span>
-                </span>
-                <span ng-show="eventlog.type === 'received'">{{ 'emails.eventlog.type.receivedInfo' | tr:eventlog }}</span>
-                <span ng-show="eventlog.type === 'delivered'">{{ 'emails.eventlog.type.deliveredInfo' | tr:eventlog }}</span>
-                <span ng-show="eventlog.type === 'denied'">{{ 'emails.eventlog.type.deniedInfo' | tr:eventlog }}</span>
-                <span ng-show="eventlog.type === 'spam-learn'">{{ 'emails.eventlog.type.spamFilterTrainedInfo' | tr:eventlog }}</span>
-              </td>
-            </tr>
-            <tr ng-show="activity.activeEventLog === eventlog">
-              <td colspan="6">
-                <pre class="eventlog-details">{{ eventlog | json }}</pre>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-
 </div>
diff --git a/src/views/emails.js b/src/views/emails.js
index fdfefe9e9..d7ce487c6 100644
--- a/src/views/emails.js
+++ b/src/views/emails.js
@@ -10,67 +10,6 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
     $scope.user = Client.getUserInfo();
     $scope.domains = [];
 
-    $scope.pageItemCount = [
-        { name: $translate.instant('main.pagination.perPageSelector', { n: 20 }), value: 20 },
-        { name: $translate.instant('main.pagination.perPageSelector', { n: 50 }), value: 50 },
-        { name: $translate.instant('main.pagination.perPageSelector', { n: 100 }), value: 100 }
-    ];
-
-    $scope.activityTypes = [
-        { name: 'Bounce', value: 'bounce' },
-        { name: 'Deferred', value: 'deferred' },
-        { name: 'Delivered', value: 'delivered' },
-        { name: 'Denied', value: 'denied' },
-        { name: 'Queued', value: 'queued' },
-        { name: 'Received', value: 'received' },
-    ];
-
-    $scope.activity = {
-        busy: true,
-        eventLogs: [],
-        activeEventLog: null,
-        currentPage: 1,
-        perPage: 20,
-        pageItems: $scope.pageItemCount[0],
-        selectedTypes: [],
-        search: '',
-
-        refresh: function () {
-            $scope.activity.busy = true;
-
-            var types = $scope.activity.selectedTypes.map(function (a) { return a.value; }).join(',');
-
-            Client.getMailEventLogs($scope.activity.search, types, $scope.activity.currentPage, $scope.activity.pageItems.value, function (error, result) {
-                if (error) return console.error('Failed to fetch mail eventlogs.', error);
-
-                $scope.activity.busy = false;
-
-                $scope.activity.eventLogs = result;
-            });
-        },
-
-        showNextPage: function () {
-            $scope.activity.currentPage++;
-            $scope.activity.refresh();
-        },
-
-        showPrevPage: function () {
-            if ($scope.activity.currentPage > 1) $scope.activity.currentPage--;
-            else $scope.activity.currentPage = 1;
-            $scope.activity.refresh();
-        },
-
-        showEventLogDetails: function (eventLog) {
-            if ($scope.activity.activeEventLog === eventLog) $scope.activity.activeEventLog = null;
-            else $scope.activity.activeEventLog = eventLog;
-        },
-
-        updateFilter: function (fresh) {
-            if (fresh) $scope.activity.currentPage = 1;
-            $scope.activity.refresh();
-        }
-    };
-
     // this is required because we need to rewrite the MAIL_SERVER_NAME env var
     $scope.reconfigureEmailApps = function () {
         var installedApps = Client.getInstalledApps();
@@ -421,8 +360,6 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
             $scope.domains = domains;
             $scope.ready = true;
 
-            if ($scope.user.role === 'owner') $scope.activity.refresh();
-
             $scope.mailLocation.refresh();
             $scope.maxEmailSize.refresh();
             $scope.spamConfig.refresh();