diff --git a/dashboard/src/components/Section.vue b/dashboard/src/components/Section.vue
index b5e3eb6b9..ca49d36fe 100644
--- a/dashboard/src/components/Section.vue
+++ b/dashboard/src/components/Section.vue
@@ -56,6 +56,12 @@ body.has-background .section {
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 25px;
+  margin-top: 0;
+}
+
+.section-header > div {
+  display: flex;
+  gap: 6px;
 }
 
 .section-divider {
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 577adcea5..6c9ab1504 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -180,22 +180,6 @@ tr:hover .table-actions {
   font-size: 12px;
 }
 
-.section-header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 50px;
-  margin-left: 10px;
-  margin-right: 10px;
-  gap: 5px;
-}
-
-.section-header > div {
-  display: flex;
-  gap: 6px;
-}
-
 .view-header {
   display: flex;
   flex-wrap: wrap;
diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue
index 27932d964..56564c02c 100644
--- a/dashboard/src/views/AppsView.vue
+++ b/dashboard/src/views/AppsView.vue
@@ -204,7 +204,7 @@ onUnmounted(() => {
   <div class="content">
     <ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
 
-    <h1 class="section-header">
+    <h1 class="view-header">
       {{ $t('apps.title') }}
       <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
         <TextInput v-model="filter" placeholder="Filter ..." />
diff --git a/dashboard/src/views/EmailView.vue b/dashboard/src/views/EmailView.vue
index 12553aa8d..3a2d50a95 100644
--- a/dashboard/src/views/EmailView.vue
+++ b/dashboard/src/views/EmailView.vue
@@ -375,15 +375,12 @@ onMounted(async () => {
       </form>
     </Dialog>
 
-    <h1 class="section-header">
-      {{ $t('emails.title') }}
-      <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
-        <Button href="#/emails-eventlog">{{ $t('eventlog.title') }}</Button>
-      </div>
-    </h1>
-
     <!-- <Section :title="$t('emails.domains.title')"> -->
-    <Section>
+    <Section :title="$t('emails.title')">
+      <template #header-buttons>
+        <Button href="#/emails-eventlog">{{ $t('eventlog.title') }}</Button>
+      </template>
+
       <TableView :columns="columns" :model="domains" :busy="busy">
         <template #status="domain">
           <StateLED :busy="!domain.statusCheckDone" :state="domain.status ? 'success' : 'danger'"/>
diff --git a/dashboard/src/views/EmailsEventlogView.vue b/dashboard/src/views/EmailsEventlogView.vue
index 283d7c535..683e4c207 100644
--- a/dashboard/src/views/EmailsEventlogView.vue
+++ b/dashboard/src/views/EmailsEventlogView.vue
@@ -7,6 +7,7 @@ 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 Section from '../components/Section.vue';
 import MailModel from '../models/MailModel.js';
 
 const mailModel = MailModel.create();
@@ -80,79 +81,80 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <h1 class="section-header">
-      {{ $t('emails.eventlog.title') }}
-      <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
+    <Section :title="$t('emails.eventlog.title')">
+      <template #header-buttons>
+        <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')"/>
         <Button href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
+      </template>
+
+<!-- TODO replace with fetch more on scroll -->
+      <div class="eventlog-filter">
+
+        <Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
+
+        <ButtonGroup>
+          <Button tool secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
+          <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
+          <Button tool secondary @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
+        </ButtonGroup>
       </div>
-    </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 secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
-        <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
-        <Button tool secondary @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>
+<!-- TODO style table -->
+      <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>
-          <tr v-if="activeId === eventlog.uuid">
-            <td colspan="6">
-              <pre class="eventlog-details">{{ JSON.stringify(eventlog, null, 4) }}</pre>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+        </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>
+    </Section>
   </div>
 </template>
 
diff --git a/dashboard/src/views/EventlogView.vue b/dashboard/src/views/EventlogView.vue
index 84011a959..7a7d3c36a 100644
--- a/dashboard/src/views/EventlogView.vue
+++ b/dashboard/src/views/EventlogView.vue
@@ -3,6 +3,7 @@
 import { ref, reactive, onMounted, watch } from 'vue';
 import { Button, Spinner, TextInput, MultiSelect } from 'pankow';
 import { useDebouncedRef, prettyDate, prettyLongDate } from 'pankow/utils';
+import Section from '../components/Section.vue';
 import AppsModel from '../models/AppsModel.js';
 import EventlogsModel from '../models/EventlogsModel.js';
 import { eventlogDetails, eventlogSource } from '../utils.js';
@@ -149,42 +150,41 @@ onMounted(async () => {
 
 <template>
   <div class="content" style="overflow: hidden; display: flex; flex-direction: column;">
-    <h1 class="view-header">
-      {{ $t('eventlog.title') }}
-      <div style="">
+    <Section :title="$t('eventlog.title')">
+      <template #header-buttons>
         <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
         <MultiSelect v-model="actions" :options="availableActions" option-label="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
         <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
-      </div>
-    </h1>
+      </template>
 
-    <center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
-    <div style="overflow: auto; position: relative; margin-bottom: 10px;" @scroll="onScroll">
-      <table v-show="!busy" class="eventlog-table">
-        <thead>
-          <tr>
-            <th>{{ $t('eventlog.time') }}</th>
-            <th>{{ $t('eventlog.source') }}</th>
-            <th>{{ $t('eventlog.details') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="eventlog in eventlogs" :key="eventlog.id">
-            <tr @click="onEventLogDetails(eventlog.id)" :class="{ 'active': activeId === eventlog.id }" >
-              <td style="white-space: nowrap;"><span v-tooltip="prettyLongDate(eventlog.raw.creationTime)" class="arrow">{{ prettyDate(eventlog.raw.creationTime) }}</span></td>
-              <td>{{ eventlog.source }}</td>
-              <td v-html="eventlog.details"></td>
+      <center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
+      <div style="overflow: auto; position: relative; margin-bottom: 10px;" @scroll="onScroll">
+        <table v-show="!busy" class="eventlog-table">
+          <thead>
+            <tr>
+              <th>{{ $t('eventlog.time') }}</th>
+              <th>{{ $t('eventlog.source') }}</th>
+              <th>{{ $t('eventlog.details') }}</th>
             </tr>
-            <tr v-show="activeId === eventlog.id">
-              <td colspan="4" class="eventlog-details">
-                <p v-show="eventlog.raw.source.ip">Source IP: <code>{{ eventlog.raw.source.ip }}</code></p>
-                <pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
+          </thead>
+          <tbody>
+            <template v-for="eventlog in eventlogs" :key="eventlog.id">
+              <tr @click="onEventLogDetails(eventlog.id)" :class="{ 'active': activeId === eventlog.id }" >
+                <td style="white-space: nowrap;"><span v-tooltip="prettyLongDate(eventlog.raw.creationTime)" class="arrow">{{ prettyDate(eventlog.raw.creationTime) }}</span></td>
+                <td>{{ eventlog.source }}</td>
+                <td v-html="eventlog.details"></td>
+              </tr>
+              <tr v-show="activeId === eventlog.id">
+                <td colspan="4" class="eventlog-details">
+                  <p v-show="eventlog.raw.source.ip">Source IP: <code>{{ eventlog.raw.source.ip }}</code></p>
+                  <pre>{{ JSON.stringify(eventlog.raw.data, null, 4) }}</pre>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </Section>
   </div>
 </template>
 
diff --git a/dashboard/src/views/NetworkView.vue b/dashboard/src/views/NetworkView.vue
index 023cb6738..c51b7019e 100644
--- a/dashboard/src/views/NetworkView.vue
+++ b/dashboard/src/views/NetworkView.vue
@@ -27,7 +27,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <h1>{{ $t('network.title') }}</h1>
+    <h1 class="view-header">{{ $t('network.title') }}</h1>
 
     <Ipv4Config />
     <Ipv6Config />
diff --git a/dashboard/src/views/SupportView.vue b/dashboard/src/views/SupportView.vue
index b84946e60..c6b9dada8 100644
--- a/dashboard/src/views/SupportView.vue
+++ b/dashboard/src/views/SupportView.vue
@@ -42,8 +42,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <h1 class="section-header">{{ $t('support.title') }}</h1>
-
     <Section :title="$t('support.help.title')">
       <div v-html="description"></div>
     </Section>