diff --git a/dashboard/eslint.config.js b/dashboard/eslint.config.js
index ee9b080cf..61e82d972 100644
--- a/dashboard/eslint.config.js
+++ b/dashboard/eslint.config.js
@@ -8,7 +8,8 @@ export default [
         rules: {
             "semi": "error",
             "prefer-const": "error",
-            "vue/no-reserved-component-names": "off"
+            "vue/no-reserved-component-names": "off",
+            "vue/multi-word-component-names": "off",
         }
     }
 ];
diff --git a/dashboard/index.html b/dashboard/index.html
index 89acb8c54..9c4f1e6eb 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -226,7 +226,7 @@
 
       <div style="display: flex; flex-direction: column; flex-grow: 1; overflow: auto;">
         <div ng-view id="ng-view" class="layout-content"></div>
-        <div id="vueapp" style="background: white;"></div>
+        <div id="vueapp"></div>
       </div>
     </div>
 
diff --git a/dashboard/src/components/Card.vue b/dashboard/src/components/Card.vue
new file mode 100644
index 000000000..0c7998e43
--- /dev/null
+++ b/dashboard/src/components/Card.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="card">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Card'
+};
+
+</script>
+
+<style scoped>
+
+.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/SupportView.vue b/dashboard/src/components/SupportView.vue
index 7ab4ef47e..29e343180 100644
--- a/dashboard/src/components/SupportView.vue
+++ b/dashboard/src/components/SupportView.vue
@@ -3,18 +3,22 @@
     <h1 class="section-header">{{ $t('support.title') }}</h1>
 
     <h3 class="section-header">{{ $t('support.help.title') }}</h3>
-    <div v-html="description"></div>
+    <Card>
+      <div v-html="description"></div>
+    </Card>
 
     <h3 class="section-header">{{ $t('support.remoteSupport.title') }}</h3>
-    <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>
-      <b>{{ $t('support.remoteSupport.warning') }}</b>
-      <br/>
-      <br/>
-      <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>
+      <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>
+        <b>{{ $t('support.remoteSupport.warning') }}</b>
+        <br/>
+        <br/>
+        <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>
   </div>
 </template>
 
@@ -23,13 +27,16 @@
 import { fetcher, Button } from 'pankow';
 import { marked } from 'marked';
 
+import Card from  './Card.vue';
+
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 const accessToken = localStorage.token;
 
 export default {
   name: 'SupportView',
   components: {
-    Button
+    Button,
+    Card
   },
   data() {
     return {
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index fd943b92f..6896be931 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -58,6 +58,17 @@ $state-danger-border:                       $brand-danger;
 html {
     // --accent-color: $brand-primary;
     --accent-color: #9141ac;
+    --card-background: #f0f2f5;
+    --navbar-background: #f8f8f8;
+    --body-background: white;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        --card-background: #181e2a;
+        --navbar-background: #11161f;
+        --body-background: #0b0e14;
+    }
 }
 
 // ----------------------------
@@ -196,7 +207,7 @@ html, body {
     height: 100%;
     width: 100%;
     padding: 0;
-    background-color: white;
+    background-color: var(--body-background);
 }
 
 .view-header-filter-bar {
@@ -341,7 +352,7 @@ html, body {
     display: block;
     width: 100%;
     flex-grow: 0;
-    background-color: #f8f8f8;
+    background-color: var(--navbar-background);
     border-color: white;
 
     @media(min-width:768px) {
@@ -1273,7 +1284,7 @@ multiselect {
 
 .card {
     position: relative;
-    background-color: #f8f8f8;
+    background-color: var(--card-background);
     // background-color: #ebebeb;
     // max-width: 720px;
     // margin: 0 auto;
@@ -2394,7 +2405,7 @@ tag-input {
 
     body, .modal-content, .setup {
         color: $textColor;
-        background-color: $backgroundLight;
+        // background-color: $backgroundLight;
     }
 
     .view-header-filter-bar {
@@ -2410,8 +2421,8 @@ tag-input {
     }
 
     .navbar-default {
-        background-color: $backgroundDark;
-        border-color: $backgroundDark;
+        // background-color: $backgroundDark;
+        border-color: var(--navbar-background);
     }
 
     .navbar-collapse.collapse.in {