diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index df6ee2f0a..87261f476 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -83,8 +83,8 @@ app.config(['$routeProvider', function ($routeProvider) {
         // controller: 'EmailsController',
         // templateUrl: 'views/emails.html?' + window.VITE_CACHE_ID
     }).when('/emails-eventlog', {
-        controller: 'EmailsEventlogController',
-        templateUrl: 'views/emails-eventlog.html?' + window.VITE_CACHE_ID
+        // controller: 'EmailsEventlogController',
+        // templateUrl: 'views/emails-eventlog.html?' + window.VITE_CACHE_ID
     }).when('/emails-queue', {
         controller: 'EmailsQueueController',
         templateUrl: 'views/emails-queue.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index b6b5c62d9..70ade6198 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -9,6 +9,7 @@ import BackupsView from './views/BackupsView.vue';
 import BrandingView from './views/BrandingView.vue';
 import DomainsView from './views/DomainsView.vue';
 import EmailsView from './views/EmailsView.vue';
+import EmailsEventlogView from './views/EmailsEventlogView.vue';
 import EventlogView from './views/EventlogView.vue';
 import NetworkView from './views/NetworkView.vue';
 import ProfileView from './views/ProfileView.vue';
@@ -28,6 +29,7 @@ const VIEWS = {
   BRANDING: 'branding',
   DOMAINS: 'domains',
   EMAILS: 'email',
+  EMAILS_EVENTLOG: 'emails-eventlog',
   EVENTLOG: 'eventlog',
   NETWORK: 'network',
   PROFILE: 'profile',
@@ -59,6 +61,8 @@ function onHashChange() {
     view.value = VIEWS.DOMAINS;
   } else if (v === VIEWS.EMAILS) {
     view.value = VIEWS.EMAILS;
+  } else if (v === VIEWS.EMAILS_EVENTLOG) {
+    view.value = VIEWS.EMAILS_EVENTLOG;
   } else if (v === VIEWS.EVENTLOG) {
     view.value = VIEWS.EVENTLOG;
   } else if (v === VIEWS.NETWORK) {
@@ -110,6 +114,7 @@ onMounted(async () => {
     <BrandingView v-else-if="view === VIEWS.BRANDING" />
     <DomainsView v-else-if="view === VIEWS.DOMAINS" />
     <EmailsView v-else-if="view === VIEWS.EMAILS" />
+    <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
     <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
     <NetworkView v-else-if="view === VIEWS.NETWORK" />
     <ProfileView v-else-if="view === VIEWS.PROFILE" />
diff --git a/dashboard/src/models/MailModel.js b/dashboard/src/models/MailModel.js
index 91217de27..9248a318d 100644
--- a/dashboard/src/models/MailModel.js
+++ b/dashboard/src/models/MailModel.js
@@ -236,7 +236,18 @@ function create() {
 
       if (result.status !== 202) return [result];
       return [null];
-    }
+    },
+    async eventlog(types, search, page, perPage) {
+      let result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/mailserver/eventlog`, { page, types, per_page: perPage, search, access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.eventlogs];
+    },
   };
 }
 
diff --git a/dashboard/src/views/EmailsEventlogView.vue b/dashboard/src/views/EmailsEventlogView.vue
new file mode 100644
index 000000000..026810713
--- /dev/null
+++ b/dashboard/src/views/EmailsEventlogView.vue
@@ -0,0 +1,171 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, reactive, onMounted, watch } from 'vue';
+import { Button, ButtonGroup, Dropdown, Spinner, TextInput, MultiSelect } from 'pankow';
+import { useDebouncedRef, prettyDate, prettyLongDate, prettyEmailAddresses } from 'pankow/utils';
+import MailModel from '../models/MailModel.js';
+
+const mailModel = MailModel.create();
+
+const availableTypes = [
+  { id: 'bounce', name: 'Bounce'  },
+  { id: 'deferred', name: 'Deferred'  },
+  { id: 'delivered', name: 'Delivered'  },
+  { id: 'denied', name: 'Denied'  },
+  { id: 'queued', name: 'Queued'  },
+  { id: 'quota', name: 'Quota'  },
+  { id: 'received', name: 'Received'  },
+  { id: 'spam', name: 'Spam'  },
+];
+
+const perPageOptions = [
+  { name: t('main.pagination.perPageSelector', { n: 20 }), value: 20 },
+  { name: t('main.pagination.perPageSelector', { n: 50 }), value: 50 },
+  { name: t('main.pagination.perPageSelector', { n: 100 }), value: 100 }
+];
+
+const busy = ref(false);
+const refreshBusy = ref(false);
+const eventlogs = ref([]);
+const activeId = ref('');
+const search = useDebouncedRef('');
+const page = ref(1);
+const perPage = ref(20);
+const types = reactive([]);
+
+async function onRefresh() {
+  refreshBusy.value = true;
+
+  const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
+  if (error) return console.error(error);
+
+  eventlogs.value = result;
+
+  refreshBusy.value = false;
+}
+
+function onEventLogDetails(id) {
+  if (activeId.value === id) activeId.value = '';
+  else activeId.value = id;
+}
+
+async function onPrevPage() {
+  if (page.value > 1) page.value--;
+  else page.value = 1;
+  await onRefresh();
+}
+
+async function onNextPage() {
+  page.value++;
+  await onRefresh();
+}
+
+watch(perPage, onRefresh);
+watch(types, onRefresh);
+watch(search, onRefresh);
+
+onMounted(async () => {
+  busy.value = true;
+
+  await onRefresh();
+
+  busy.value = false;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <h1>{{ $t('emails.eventlog.title') }}</h1>
+
+    <div class="eventlog-filter">
+      <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
+
+      <MultiSelect v-model="types" :options="availableTypes" option-key="id" option-label="name" :selected-label="types.length ? $t('main.multiselect.selected', { n: types.length }) : $t('emails.typeFilterHeader')"/>
+      <Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
+
+      <ButtonGroup>
+        <Button tool @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
+        <Button tool @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
+        <Button tool @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
+      </ButtonGroup>
+    </div>
+
+    <center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
+    <table v-show="!busy" class="table table-condensed table-hover">
+      <thead>
+        <tr>
+          <th style="width:  5%"><!-- Icon --></th>
+          <th style="width: 15%">{{ $t('emails.eventlog.time') }}</th>
+          <th style="width: 25%">{{ $t('emails.eventlog.mailFrom') }}</th>
+          <th style="width: 25%">{{ $t('emails.eventlog.rcptTo') }}</th>
+          <th style="width: 30%">{{ $t('emails.eventlog.details') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="eventlog in eventlogs" :key="eventlog.uuid">
+          <tr @click="onEventLogDetails(eventlog.uuid)" class="hand" >
+            <td class="no-wrap">
+              <i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'delivered'" v-tooltip="$t('emails.eventlog.type.outgoing')"></i>
+              <i class="fas fa-history" v-if="eventlog.type === 'deferred'" v-tooltip="$t('emails.eventlog.type.deferred')"></i>
+              <i class="fas fa-arrow-circle-right" v-if="eventlog.type === 'received'" v-tooltip="$t('emails.eventlog.type.incoming')"></i>
+              <i class="fas fa-align-justify" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') !== 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
+              <i class="fas fa-trash" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') === 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
+              <i class="fas fa-minus-circle" v-if="eventlog.type === 'denied'" v-tooltip="$t('emails.eventlog.type.denied')"></i>
+              <i class="fas fa-hand-paper" v-if="eventlog.type === 'bounce'" v-tooltip="$t('emails.eventlog.type.bounce')"></i>
+              <i class="fas fa-filter" v-if="eventlog.type === 'spam-learn'" v-tooltip="$t('emails.eventlog.type.spamFilterTrained')"></i>
+              <i class="fas fa-fill-drip" v-if="eventlog.type === 'quota'" v-tooltip="$t('emails.eventlog.type.quota')"></i>
+            </td>
+            <td class="no-wrap"><span v-tooltip="prettyLongDate(eventlog.ts)" class="arrow">{{ prettyDate(eventlog.ts) }}</span></td>
+            <td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.mailFrom) || '-' }}</td>
+            <td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.rcptTo) || eventlog.mailbox || '-' }}</td>
+            <td>
+              <span v-if="eventlog.type === 'bounce'">{{ $t('emails.eventlog.type.bounceInfo') }}. {{ eventlog.message || eventlog.reason }}</span>
+              <span v-if="eventlog.type === 'deferred'">{{ $t('emails.eventlog.type.deferredInfo', { delay:eventlog.delay }) }}. {{ eventlog.message || eventlog.reason }} </span>
+              <span v-if="eventlog.type === 'queued'">
+                <span v-if="eventlog.direction === 'inbound'">{{ $t('emails.eventlog.type.inboundInfo') }}</span>
+                <span v-if="eventlog.direction === 'outbound'">{{ $t('emails.eventlog.type.outboundInfo') }}</span>
+              </span>
+              <span v-if="eventlog.type === 'received'">{{ $t('emails.eventlog.type.receivedInfo') }}</span>
+              <span v-if="eventlog.type === 'delivered'">{{ $t('emails.eventlog.type.deliveredInfo') }}</span>
+              <span v-if="eventlog.type === 'denied'">{{ $t('emails.eventlog.type.deniedInfo') }}. {{ eventlog.message || eventlog.reason }} </span>
+              <span v-if="eventlog.type === 'spam-learn'">{{ $t('emails.eventlog.type.spamFilterTrainedInfo') }}</span>
+              <span v-if="eventlog.type === 'quota'">
+                <span v-if="eventlog.quotaPercent > 0">{{ $t('emails.eventlog.type.overQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: eventlog.quotaPercent }) }}</span>
+                <span v-if="eventlog.quotaPercent < 0">{{ $t('emails.eventlog.type.underQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: -eventlog.quotaPercent }) }}</span>
+              </span>
+            </td>
+          </tr>
+          <tr v-if="activeId === eventlog.uuid">
+            <td colspan="6">
+              <pre class="eventlog-details">{{ JSON.stringify(eventlog, null, 4) }}</pre>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+
+.eventlog-filter {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin: 20px 0;
+}
+
+.eventlog-details {
+  white-space: pre-wrap;
+  color: var(--pankow-text-color);
+  background-color: var(--pankow-input-background-color);
+  border: none;
+  border-radius: var(--pankow-border-radius);
+}
+
+</style>
diff --git a/dashboard/src/views/EventlogView.vue b/dashboard/src/views/EventlogView.vue
index ac99570cf..a139b09cf 100644
--- a/dashboard/src/views/EventlogView.vue
+++ b/dashboard/src/views/EventlogView.vue
@@ -104,7 +104,7 @@ const actions = reactive([]);
 
 async function onRefresh() {
   refreshBusy.value = true;
-  const [error, result] = await eventlogsModel.search(actions.map(a => a.id).join(','), search.value, page.value, perPage.value);
+  const [error, result] = await eventlogsModel.search(actions.join(','), search.value, page.value, perPage.value);
   if (error) return console.error(error);
 
   eventlogs.value = result.map(e => {