diff --git a/src/assets/lang/de-CH.yaml b/src/assets/lang/de-CH.yaml
index 6be44a0..263f0ba 100644
--- a/src/assets/lang/de-CH.yaml
+++ b/src/assets/lang/de-CH.yaml
@@ -116,3 +116,5 @@ expiration: Ablauf
 never: Nie
 responsibles: Verantwortliche
 comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
diff --git a/src/assets/lang/de-DE.yaml b/src/assets/lang/de-DE.yaml
index e18b22e..437fc8d 100644
--- a/src/assets/lang/de-DE.yaml
+++ b/src/assets/lang/de-DE.yaml
@@ -116,3 +116,5 @@ expiration: Ablauf
 never: Nie
 responsibles: Verantwortliche
 comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
diff --git a/src/assets/lang/en-US.yaml b/src/assets/lang/en-US.yaml
index 0cac9f1..0da10e6 100644
--- a/src/assets/lang/en-US.yaml
+++ b/src/assets/lang/en-US.yaml
@@ -116,3 +116,5 @@ expiration: Expiration
 never: Never
 responsibles: Responsibles
 comment: Comment
+dark_mode: Dark-Mode
+light_mode: Light-Mode
diff --git a/src/vueLib/dialog/DialogFrame.vue b/src/vueLib/dialog/DialogFrame.vue
index 6a41d7c..1c3b205 100644
--- a/src/vueLib/dialog/DialogFrame.vue
+++ b/src/vueLib/dialog/DialogFrame.vue
@@ -7,10 +7,10 @@
     :no-refocus="!minMaxState"
     :seamless="!minMaxState"
   >
-    <q-card class="layout" :style="cardStyle">
+    <q-card class="layout bg-surface text-on-surface" :style="cardStyle">
       <!-- Draggable Header -->
       <div
-        class="dialog-header row items-center justify-between bg-grey-1"
+        class="dialog-header row items-center justify-between bg-transparent"
         v-touch-pan.mouse.prevent.stop="handlePan"
       >
         <div v-if="headerTitle" class="text-left text-bold text-caption q-mx-sm">
@@ -139,13 +139,11 @@ const cardStyle = computed(() => {
   display: flex;
   flex-direction: column;
   border-radius: 10px;
-  background-color: white;
 }
 
 /* Draggable header */
 .dialog-header {
   padding: 8px 0;
-  background: #f5f5f5;
   cursor: move;
   user-select: none;
 }