diff --git a/public/img/desktop/background-dark.svg b/public/img/desktop/background-dark.svg
new file mode 100644
index 00000000..051b728b
--- /dev/null
+++ b/public/img/desktop/background-dark.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<svg width="750" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <g class="layer">
+  <title>Layer 1</title>
+  <path d="m2.38122,215.61524l748.61878,-113.11523l0,197.99999l-750,0l1.38122,-84.88476z" fill="#111111" id="svg_3" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="null"/>
+  <g id="BACKGROUND"/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index b0678293..73ff123b 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -6,9 +6,12 @@
         </div>
         <v-row no-gutters class="auth-wrapper">
             <v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
-                <div class="d-flex auth-img-footer">
+                <div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
                     <v-img src="/img/desktop/background.svg"/>
                 </div>
+                <div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
+                    <v-img src="/img/desktop/background-dark.svg"/>
+                </div>
                 <div class="d-flex align-center justify-center w-100 pt-10">
                     <v-img max-width="600px" src="/img/desktop/people1.svg"/>
                 </div>
@@ -145,6 +148,8 @@
 </template>
 
 <script>
+import { useTheme } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
@@ -180,7 +185,6 @@ export default {
             }
         };
     },
-
     computed: {
         ...mapStores(useRootStore, useSettingsStore, useExchangeRatesStore),
         version() {
@@ -202,6 +206,11 @@ export default {
                 return !this.passcode;
             }
         },
+        currentTheme: {
+            get: function () {
+                return this.globalTheme.global.name.value;
+            }
+        },
         currentLanguageName() {
             const currentLocale = this.$i18n.locale;
             let lang = this.$locale.getLanguageInfo(currentLocale);
@@ -213,6 +222,13 @@ export default {
             return lang.displayName;
         }
     },
+    setup() {
+        const theme = useTheme();
+
+        return {
+            globalTheme: theme
+        };
+    },
     methods: {
         login() {
             const self = this;
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 7a1c4af3..10e69b58 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -6,9 +6,12 @@
         </div>
         <v-row no-gutters class="auth-wrapper">
             <v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
-                <div class="d-flex auth-img-footer">
+                <div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
                     <v-img src="/img/desktop/background.svg"/>
                 </div>
+                <div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
+                    <v-img src="/img/desktop/background-dark.svg"/>
+                </div>
                 <div class="d-flex align-center justify-center w-100 pt-10">
                     <v-img max-width="600px" src="/img/desktop/people3.svg"/>
                 </div>
@@ -92,6 +95,8 @@
 </template>
 
 <script>
+import { useTheme } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
@@ -122,6 +127,11 @@ export default {
                 && this.$user.getWebAuthnCredentialId()
                 && webauthn.isSupported();
         },
+        currentTheme: {
+            get: function () {
+                return this.globalTheme.global.name.value;
+            }
+        },
         currentLanguageName() {
             const currentLocale = this.$i18n.locale;
             let lang = this.$locale.getLanguageInfo(currentLocale);
@@ -133,6 +143,13 @@ export default {
             return lang.displayName;
         }
     },
+    setup() {
+        const theme = useTheme();
+
+        return {
+            globalTheme: theme
+        };
+    },
     methods: {
         unlockByWebAuthn() {
             const self = this;