diff --git a/dashboard/index.html b/dashboard/index.html
index a26060d14..c27c8ec95 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -193,8 +193,6 @@
     <!-- <footer class="text-center ng-cloak">
       <span class="text-muted" ng-bind-html="config.footer | markdown2html"></span>
     </footer> -->
-
-    <input type="color" class="accent-color-input" value="#9141ac"/>
   </div>
 
 </body>
diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index da3124207..c5b323473 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -856,10 +856,4 @@ app.controller('MainController', ['$scope', '$route', '$timeout', '$location', '
             $(this).find('[autofocus]:first').focus();
         });
     });
-
-    document.getElementsByClassName('accent-color-input')[0].addEventListener('change', (event) => {
-        const root = document.documentElement;
-        console.log('---', event.target.value)
-        root.style.setProperty('--accent-color', event.target.value);
-    });
 }]);
diff --git a/dashboard/src/components/ApiTokens.vue b/dashboard/src/components/ApiTokens.vue
index 83b464c85..ed4aa3aa9 100644
--- a/dashboard/src/components/ApiTokens.vue
+++ b/dashboard/src/components/ApiTokens.vue
@@ -37,12 +37,11 @@
       </div>
     </Dialog>
 
-    <h2 class="header header-with-button">
-      {{ $t('profile.apiTokens.title') }}
-      <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
-    </h2>
+    <Section :title="$t('profile.apiTokens.title')">
+      <template #header-buttons>
+        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+      </template>
 
-    <Card>
       <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
       <table class="table table-hover" style="margin: 0;">
         <thead>
@@ -73,7 +72,7 @@
           </tr>
         </tbody>
       </table>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -89,7 +88,7 @@ import { ref, onMounted, computed, useTemplateRef } from 'vue';
 import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TextInput } from 'pankow';
 import { copyToClipboard, prettyLongDate } from 'pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
-import Card from './Card.vue';
+import Section from './Section.vue';
 import TokensModel from '../models/TokensModel.js';
 
 const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
diff --git a/dashboard/src/components/AppPasswords.vue b/dashboard/src/components/AppPasswords.vue
index 3b6b08cce..fc06480f7 100644
--- a/dashboard/src/components/AppPasswords.vue
+++ b/dashboard/src/components/AppPasswords.vue
@@ -36,11 +36,11 @@
       </div>
     </Dialog>
 
-    <h2 class="header header-with-button">
-      {{ $t('profile.appPasswords.title') }}
-      <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
-    </h2>
-    <Card>
+    <Section :title="$t('profile.appPasswords.title')">
+      <template #header-buttons>
+        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
+      </template>
+
       <p>{{ $t('profile.appPasswords.description') }}</p>
       <table class="table table-hover">
         <thead>
@@ -65,7 +65,7 @@
           </tr>
         </tbody>
       </table>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -80,7 +80,7 @@ const t = i18n.t;
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
 import { Button, Dialog, Dropdown, FormGroup, TextInput, InputDialog } from 'pankow';
 import { prettyLongDate, copyToClipboard } from 'pankow/utils';
-import Card from './Card.vue';
+import Section from './Section.vue';
 import AppPasswordsModel from '../models/AppPasswordsModel.js';
 import AppsModel from '../models/AppsModel.js';
 
diff --git a/dashboard/src/components/Card.vue b/dashboard/src/components/Card.vue
deleted file mode 100644
index a409c77d9..000000000
--- a/dashboard/src/components/Card.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <hr style="border-color: #d8dee4; border-size: 1px"/>
-  <div class="card">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Card'
-};
-
-</script>
-
-<style scoped>
-
-.card {
-  position: relative;
-  margin-bottom: 15px;
-  padding: 10px 15px;
-  border-radius: 10px;
-}
-
-</style>
\ No newline at end of file
diff --git a/dashboard/src/components/ProfileView.vue b/dashboard/src/components/ProfileView.vue
index 66bcbc438..88274d50d 100644
--- a/dashboard/src/components/ProfileView.vue
+++ b/dashboard/src/components/ProfileView.vue
@@ -27,63 +27,61 @@
       <template #header-buttons>
         <Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
       </template>
-      <template #body>
-        <div style="display: flex;">
-          <div style="width: 150px;">
-            <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
-            <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
-              <i class="picture-edit-indicator fa fa-pencil-alt"></i>
-            </div>
-          </div>
-          <div style="flex-grow: 1;">
-            <table style="width: 100%;">
-              <tbody>
-                <tr>
-                  <td class="text-muted">{{ $t('main.username') }}</td>
-                  <td style="width: 100px; height: 34px;">{{ user.username }}</td>
-                  <td style="width: 32px"></td>
-                </tr>
-                <tr>
-                  <td class="text-muted">{{ $t('main.displayName') }}</td>
-                  <td style="white-space: nowrap;">{{ user.displayName }}</td>
-                  <td><Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
-                </tr>
-                <tr>
-                  <td class="text-muted">{{ $t('profile.primaryEmail') }}</td>
-                  <td style="white-space: nowrap;">{{ user.email }}</td>
-                  <td><Button small tool outline @click="onChangeEmail(user.email)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
-                </tr>
-                <tr>
-                  <td class="text-muted">{{ $t('profile.passwordRecoveryEmail') }}</td>
-                  <td style="white-space: nowrap;">{{ user.fallbackEmail }}</td>
-                  <td><Button small tool outline @click="onChangeFallbackEmail(user.fallbackEmail)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
-                </tr>
-                <tr>
-                  <td class="text-muted">{{ $t('profile.language') }}</td>
-                  <td colspan="2" class="text-right"><Dropdown small tool outline v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/></td>
-                </tr>
-                <tr v-show="!user.source">
-                  <td colspan="3" class="text-right">
-                    <!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
-                    <Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
-                    <Button tool v-show="!user.source && !config.external2FA" @click="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+
+      <div style="display: flex;">
+        <div style="width: 150px;">
+          <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
+          <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
+            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
           </div>
         </div>
-      </template>
+        <div style="flex-grow: 1;">
+          <table style="width: 100%;">
+            <tbody>
+              <tr>
+                <td class="text-muted">{{ $t('main.username') }}</td>
+                <td style="width: 100px; height: 34px;">{{ user.username }}</td>
+                <td style="width: 32px"></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('main.displayName') }}</td>
+                <td style="white-space: nowrap;">{{ user.displayName }}</td>
+                <td><Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('profile.primaryEmail') }}</td>
+                <td style="white-space: nowrap;">{{ user.email }}</td>
+                <td><Button small tool outline @click="onChangeEmail(user.email)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('profile.passwordRecoveryEmail') }}</td>
+                <td style="white-space: nowrap;">{{ user.fallbackEmail }}</td>
+                <td><Button small tool outline @click="onChangeFallbackEmail(user.fallbackEmail)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('profile.language') }}</td>
+                <td colspan="2" class="text-right"><Dropdown small tool outline v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/></td>
+              </tr>
+              <tr v-show="!user.source">
+                <td colspan="3" class="text-right">
+                  <!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
+                  <Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
+                  <Button tool v-show="!user.source && !config.external2FA" @click="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </Section>
 
     <AppPasswords/>
     <ApiTokens v-show="user.isAtLeastAdmin"/>
 
-    <h2 class="header">{{ $t('profile.loginTokens.title') }}</h2>
-    <Card>
+    <Section :title="$t('profile.loginTokens.title')">
       <p>{{ $t('profile.loginTokens.description', { webadminTokenCount: webadminTokens.length, cliTokenCount: cliTokens.length }) }}</p>
       <Button danger :loading="revokeTokensBusy" :disabled="revokeTokensBusy" @click="onRevokeAllWebAndCliTokens()">{{ $t('profile.loginTokens.logoutAll') }}</Button>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -100,7 +98,6 @@ import { Button, Dropdown, Dialog, InputDialog, TextInput } from 'pankow';
 import { TOKEN_TYPES } from '../constants.js';
 import AppPasswords from './AppPasswords.vue';
 import Section from './Section.vue';
-import Card from './Card.vue';
 import ApiTokens from './ApiTokens.vue';
 
 import ProfileModel from '../models/ProfileModel.js';
diff --git a/dashboard/src/components/Section.vue b/dashboard/src/components/Section.vue
index 9de1a65ad..c05b51763 100644
--- a/dashboard/src/components/Section.vue
+++ b/dashboard/src/components/Section.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <h1 class="section-header">
+    <h2 class="section-header">
       {{ title }}
       <slot name="header-buttons"></slot>
-    </h1>
+    </h2>
     <hr class="section-divider"/>
     <div class="section-body">
-      <slot name="body"></slot>
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -25,6 +25,8 @@ export default {
 <style scoped>
 
 .section-header {
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 .section-divider {
@@ -34,6 +36,12 @@ export default {
   margin-bottom: 10px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .section-divider {
+    border-color: #495057;
+  }
+}
+
 .section-body {
   position: relative;
   margin-bottom: 15px;
diff --git a/dashboard/src/components/SupportView.vue b/dashboard/src/components/SupportView.vue
index 29e343180..85e9520df 100644
--- a/dashboard/src/components/SupportView.vue
+++ b/dashboard/src/components/SupportView.vue
@@ -2,13 +2,11 @@
   <div class="content">
     <h1 class="section-header">{{ $t('support.title') }}</h1>
 
-    <h3 class="section-header">{{ $t('support.help.title') }}</h3>
-    <Card>
+    <Section :title="$t('support.help.title')">
       <div v-html="description"></div>
-    </Card>
+    </Section>
 
-    <h3 class="section-header">{{ $t('support.remoteSupport.title') }}</h3>
-    <Card>
+    <Section :title="$t('support.remoteSupport.title')">
       <h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
       <div v-show="ready">
         <p>{{ $t('support.remoteSupport.description') }}</p>
@@ -18,7 +16,7 @@
         <b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
         <Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
       </div>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -27,7 +25,7 @@
 import { fetcher, Button } from 'pankow';
 import { marked } from 'marked';
 
-import Card from  './Card.vue';
+import Section from  './Section.vue';
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 const accessToken = localStorage.token;
@@ -36,7 +34,7 @@ export default {
   name: 'SupportView',
   components: {
     Button,
-    Card
+    Section
   },
   data() {
     return {
diff --git a/dashboard/src/components/VolumesView.vue b/dashboard/src/components/VolumesView.vue
index de8c16a9d..b4c9bd3e0 100644
--- a/dashboard/src/components/VolumesView.vue
+++ b/dashboard/src/components/VolumesView.vue
@@ -79,9 +79,11 @@
       </form>
     </Dialog>
 
-    <h1 class="section-header">{{ $t('volumes.title') }} <Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button></h1>
+    <Section :title="$t('volumes.title')">
+      <template #header-buttons>
+        <Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button>
+      </template>
 
-    <Card>
       <div v-html="$t('volumes.description')"></div>
       <br/>
       <TableView :columns="columns" :model="volumes" :busy="busy">
@@ -104,7 +106,7 @@
           </div>
         </template>
       </TableView>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -112,7 +114,7 @@
 
 import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
 
-import Card from  './Card.vue';
+import Section from  './Section.vue';
 
 import { createVolumesModel } from '../models/VolumesModel.js';
 
@@ -126,7 +128,7 @@ export default {
   components: {
     Button,
     ButtonGroup,
-    Card,
+    Section,
     Checkbox,
     Dialog,
     Dropdown,
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index 9899a0f73..fa9833c45 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -68,6 +68,7 @@ html {
         --card-background: #15181f;
         --navbar-background: #11161f;
         --body-background: #0b0e14;
+        --pankow-body-background-color: var(--body-background);
         --pankow-dialog-background-color: var(--navbar-background);
         --pankow-color-background: var(--navbar-background);
         --pankow-text-color: white;