diff --git a/dashboard/src/utils.js b/dashboard/src/utils.js
index 45ddb1048..6e827f1e8 100644
--- a/dashboard/src/utils.js
+++ b/dashboard/src/utils.js
@@ -155,11 +155,6 @@ function eventlogDetails(eventLog, app = null, appIdContext = '') {
     return pre + (app.label || app.fqdn || app.subdomain) + ' (' + app.manifest.title + ') ';
   }
 
-  function eventBy() {
-    if (eventLog.source && eventLog.source.username) return ' by ' + eventLog.source.username;
-    return '';
-  }
-
   switch (eventLog.action) {
     case ACTION_ACTIVATE:
       return 'Cloudron was activated';
@@ -234,7 +229,7 @@ function eventlogDetails(eventLog, app = null, appIdContext = '') {
 
     case ACTION_APP_INSTALL:
       if (!data.app) return '';
-      return data.app.manifest.title + ' (package v' + data.app.manifest.version + ') was installed ' + appName('at', data.app) + eventBy();
+      return data.app.manifest.title + ' (package v' + data.app.manifest.version + ') was installed ' + appName('at', data.app);
 
     case ACTION_APP_RESTORE:
       if (!data.app) return '';
diff --git a/dashboard/src/views/EventlogView.vue b/dashboard/src/views/EventlogView.vue
index dea92fe6e..f30712ca9 100644
--- a/dashboard/src/views/EventlogView.vue
+++ b/dashboard/src/views/EventlogView.vue
@@ -2,7 +2,7 @@
 
 import { ref, reactive, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { Button, TextInput, MultiSelect } from '@cloudron/pankow';
-import { useDebouncedRef, copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
+import { useDebouncedRef, copyToClipboard, prettyLongDate, prettyShortDate } from '@cloudron/pankow/utils';
 import AppsModel from '../models/AppsModel.js';
 import EventlogsModel from '../models/EventlogsModel.js';
 import { eventlogDetails, eventlogSource } from '../utils.js';
@@ -189,32 +189,19 @@ onUnmounted(() => {
         </div>
       </h1>
       <div class="section-body" ref="eventlogContainer" style="overflow: auto; margin-top: 10px; padding-top: 0px" @scroll="onScroll">
-        <table class="eventlog-table">
-          <thead>
-            <tr>
-              <th style="width: 160px">{{ $t('eventlog.time') }}</th>
-              <th style="width: 100px">{{ $t('eventlog.source') }}</th>
-              <th>{{ $t('eventlog.details') }}</th>
-              <th style="width: 50px"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <template v-for="eventlog in eventlogs" :key="eventlog.id">
-              <tr @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
-                <td style="white-space: nowrap;">{{ prettyLongDate(eventlog.raw.creationTime) }}</td>
-                <td>{{ eventlog.source }}</td>
-                <td class="elide-table-cell" v-html="eventlog.details"></td>
-                <td><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="`/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></td>
-              </tr>
-              <tr v-show="eventlog.isOpen">
-                <td colspan="4" class="eventlog-details">
-                  <div v-if="eventlog.raw.source.ip" class="eventlog-source">Source IP: <span @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</span></div>
-                  <pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
+        <div class="eventlog-item" v-for="eventlog in eventlogs" :key="eventlog.id" :class="{ 'active': eventlog.isOpen }" @click="eventlog.isOpen = !eventlog.isOpen">
+          <div class="eventlog-summary">
+            <div style="width: 160px; flex-shrink: 0;" class="pankow-no-mobile">{{ prettyLongDate(eventlog.raw.creationTime) }}</div>
+            <div style="width: 80px; flex-shrink: 0;" class="pankow-no-desktop">{{ prettyShortDate(eventlog.raw.creationTime) }}</div>
+            <div style="width: 160px; flex-shrink: 0; font-weight: bold; overflow: hidden; text-overflow: ellipsis;" class="pankow-no-mobile">{{ eventlog.source }}</div>
+            <div style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-html="eventlog.details"></div>
+            <!-- <div style="width: 160px; flex-shrink: 0; cursor: copy; overflow: hidden; text-overflow: ellipsis;" v-if="eventlog.raw.source.ip" @click="onCopySource(eventlog)">{{ eventlog.raw.source.ip }}</div> -->
+            <div style="width: 40px; flex-shrink: 0;"><Button v-if="eventlog.raw.data.taskId" @click.stop plain small tool :href="`/logs.html?taskId=${eventlog.raw.data.taskId}`" target="_blank">Logs</Button></div>
+          </div>
+          <div v-show="eventlog.isOpen" class="eventlog-details" @click.stop>
+            <pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -222,5 +209,28 @@ onUnmounted(() => {
 
 <style scoped>
 
+.eventlog-item {
+  border-radius: var(--pankow-border-radius);
+  cursor: pointer;
+  /*padding: 5px 10px;*/
+}
+
+.eventlog-item.active,
+.eventlog-item:hover {
+  background-color: var(--pankow-color-background-hover);
+}
+
+.eventlog-summary {
+  display: flex;
+  padding: 5px 10px;
+}
+
+.eventlog-details {
+  background-color: color-mix(in oklab, var(--pankow-color-background-hover), black 5%);
+  cursor: auto;
+  position: relative;
+  border-radius: var(--pankow-border-radius);
+  padding: 5px 0;
+}
 
 </style>