diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 08862f591..3eb2983f8 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -306,4 +306,65 @@ fieldset > * {
   padding: 5px;
   border-top: solid 1px var(--pankow-input-border-color);
   border-bottom: solid 1px var(--pankow-input-border-color);
-}
\ No newline at end of file
+}
+
+/* eventlog classes shared in system and email eventlog views */
+.eventlog-table {
+  width: 100%;
+  overflow: auto;
+  border-spacing: 0px;
+}
+
+.eventlog-table thead {
+  background-color: var(--pankow-body-background-color);
+  top: 0;
+  position: sticky;
+  z-index: 1; /* avoids see-through table headers if items in the table have opacity set */
+}
+
+.eventlog-table th {
+  text-align: left;
+}
+
+.eventlog-table tbody tr {
+  cursor: pointer;
+}
+
+.eventlog-table tbody tr.active,
+.eventlog-table tbody tr:hover {
+  background-color: var(--pankow-color-background-hover);
+}
+
+.eventlog-table th,
+.eventlog-table td {
+  padding: 6px;
+}
+
+.eventlog-filter {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin: 20px 0;
+}
+
+.eventlog-details {
+  background-color: color-mix(in oklab, var(--pankow-color-background-hover), black 5%);
+  cursor: auto;
+  position: relative;
+}
+
+.eventlog-source {
+  position: absolute;
+  right: 10px;
+  cursor: copy;
+}
+
+.eventlog-details pre {
+  white-space: pre-wrap;
+  color: var(--pankow-text-color);
+  font-size: 13px;
+  padding: 6px;
+  margin: 0;
+  border: none;
+  border-radius: var(--pankow-border-radius);
+}
diff --git a/dashboard/src/views/EmailEventlogView.vue b/dashboard/src/views/EmailEventlogView.vue
index 0403dbebb..c54322831 100644
--- a/dashboard/src/views/EmailEventlogView.vue
+++ b/dashboard/src/views/EmailEventlogView.vue
@@ -39,11 +39,6 @@ async function onRefresh() {
   refreshBusy.value = false;
 }
 
-function onEventLogDetails(id) {
-  if (activeId.value === id) activeId.value = '';
-  else activeId.value = id;
-}
-
 async function onScroll(event) {
   if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
     page.value++;
@@ -93,7 +88,7 @@ onMounted(async () => {
           </thead>
           <tbody>
             <template v-for="eventlog in eventlogs" :key="eventlog._id">
-              <tr @click="onEventLogDetails(eventlog._id)" :class="{ 'active': activeId === eventlog._id }" >
+              <tr  @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
                 <td class="no-wrap">
                   <i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'sent'" 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>
@@ -126,7 +121,7 @@ onMounted(async () => {
                   </span>
                 </td>
               </tr>
-              <tr v-if="activeId === eventlog._id">
+              <tr v-if="eventlog.isOpen">
                 <td colspan="6" class="eventlog-details">
                   <pre>{{ JSON.stringify(eventlog, null, 4) }}</pre>
                 </td>
@@ -138,64 +133,3 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-
-<style scoped>
-
-.eventlog-table {
-  width: 100%;
-  overflow: auto;
-  border-spacing: 0px;
-}
-
-.eventlog-table thead {
-  background-color: var(--pankow-body-background-color);
-  top: 0;
-  position: sticky;
-  z-index: 1; /* avoids see-through table headers if items in the table have opacity set */
-}
-
-.eventlog-table th {
-  text-align: left;
-}
-
-.eventlog-table tbody tr {
-  cursor: pointer;
-}
-
-.eventlog-table tbody tr.active,
-.eventlog-table tbody tr:hover {
-  background-color: var(--pankow-color-background-hover);
-}
-
-.eventlog-table tbody tr.active {
-  font-weight: bold;
-}
-
-.eventlog-table th,
-.eventlog-table td {
-  padding: 5px;
-}
-
-.eventlog-filter {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  margin: 20px 0;
-}
-
-.eventlog-details {
-  background-color: var(--pankow-color-background-hover);
-  cursor: auto;
-}
-
-.eventlog-details pre {
-  white-space: pre-wrap;
-  color: var(--pankow-text-color);
-  font-size: 13px;
-  padding: 6px;
-  margin: 0;
-  border: none;
-  border-radius: var(--pankow-border-radius);
-}
-
-</style>
diff --git a/dashboard/src/views/EventlogView.vue b/dashboard/src/views/EventlogView.vue
index 1492265ed..2be0ed04e 100644
--- a/dashboard/src/views/EventlogView.vue
+++ b/dashboard/src/views/EventlogView.vue
@@ -202,64 +202,5 @@ onUnmounted(() => {
 
 <style scoped>
 
-.eventlog-table {
-  width: 100%;
-  overflow: auto;
-  border-spacing: 0px;
-}
-
-.eventlog-table thead {
-  background-color: var(--pankow-body-background-color);
-  top: 0;
-  position: sticky;
-  z-index: 1; /* avoids see-through table headers if items in the table have opacity set */
-}
-
-.eventlog-table th {
-  text-align: left;
-}
-
-.eventlog-table tbody tr {
-  cursor: pointer;
-}
-
-.eventlog-table tbody tr.active,
-.eventlog-table tbody tr:hover {
-  background-color: var(--pankow-color-background-hover);
-}
-
-.eventlog-table th,
-.eventlog-table td {
-  padding: 6px;
-}
-
-.eventlog-filter {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  margin: 20px 0;
-}
-
-.eventlog-details {
-  background-color: color-mix(in oklab, var(--pankow-color-background-hover), black 5%);
-  cursor: auto;
-  position: relative;
-}
-
-.eventlog-source {
-  position: absolute;
-  right: 10px;
-  cursor: copy;
-}
-
-.eventlog-details pre {
-  white-space: pre-wrap;
-  color: var(--pankow-text-color);
-  font-size: 13px;
-  padding: 6px;
-  margin: 0;
-  border: none;
-  border-radius: var(--pankow-border-radius);
-}
 
 </style>