diff --git a/dashboard/src/components/Card.vue b/dashboard/src/components/Card.vue
index 0c7998e43..a409c77d9 100644
--- a/dashboard/src/components/Card.vue
+++ b/dashboard/src/components/Card.vue
@@ -1,4 +1,5 @@
 <template>
+  <hr style="border-color: #d8dee4; border-size: 1px"/>
   <div class="card">
     <slot></slot>
   </div>
@@ -16,11 +17,9 @@ export default {
 
 .card {
   position: relative;
-  background-color: var(--card-background);
   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 faab6c11f..66bcbc438 100644
--- a/dashboard/src/components/ProfileView.vue
+++ b/dashboard/src/components/ProfileView.vue
@@ -23,57 +23,58 @@
       </div>
     </Dialog>
 
-    <h1 class="header-with-button">
-      {{ $t('profile.title') }}
-      <Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
-    </h1>
-    <Card>
-      <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>
+    <Section :title="$t('profile.title')">
+      <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>
         </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>
-      </div>
-    </Card>
+      </template>
+    </Section>
 
     <AppPasswords/>
     <ApiTokens v-show="user.isAtLeastAdmin"/>
@@ -95,9 +96,10 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Dropdown, Dialog, InputDialog, Spinner, TextInput } from 'pankow';
+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';
 
diff --git a/dashboard/src/components/Section.vue b/dashboard/src/components/Section.vue
new file mode 100644
index 000000000..9de1a65ad
--- /dev/null
+++ b/dashboard/src/components/Section.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h1 class="section-header">
+      {{ title }}
+      <slot name="header-buttons"></slot>
+    </h1>
+    <hr class="section-divider"/>
+    <div class="section-body">
+      <slot name="body"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Section',
+  props: {
+    title: String,
+  }
+};
+
+</script>
+
+<style scoped>
+
+.section-header {
+}
+
+.section-divider {
+  border-color: #d8dee4;
+  border-width: 1px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.section-body {
+  position: relative;
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  border-radius: 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/VolumesView.vue b/dashboard/src/components/VolumesView.vue
index 93bc5420d..de8c16a9d 100644
--- a/dashboard/src/components/VolumesView.vue
+++ b/dashboard/src/components/VolumesView.vue
@@ -96,11 +96,11 @@
         <template #actions="slotProps">
           <div class="actions">
             <ButtonGroup>
-              <Button tool icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
-              <Button tool icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
-              <Button tool icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
+              <Button tool secondary outline small icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
+              <Button tool secondary outline small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
+              <Button tool secondary outline small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
             </ButtonGroup>
-            <Button tool danger icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
+            <Button tool danger outline small icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
           </div>
         </template>
       </TableView>
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 3577128c1..c99389868 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -1,5 +1,7 @@
 
 html, body {
+  --pankow-color-primary: #0073cf;
+
   font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
   font-family: "Noto Sans";
   font-weight: 300;
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index 5ff462ff1..9899a0f73 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -1336,7 +1336,7 @@ multiselect {
 
 .card {
     position: relative;
-    background-color: var(--card-background);
+    // background-color: var(--card-background);
     // background-color: #ebebeb;
     // max-width: 720px;
     // margin: 0 auto;