diff --git a/package-lock.json b/package-lock.json
index ba36e81..7005c23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@vue/compat": "^3.3.9",
         "@vuelidate/core": "^2.0.0",
         "@vuelidate/validators": "^2.0.2",
-        "@webitel/ui-sdk": "^23.12.46",
+        "@webitel/ui-sdk": "^23.12.81",
         "axios": "^0.27.2",
         "core-js": "^3.8.3",
         "deep-equal": "^2.2.1",
@@ -5377,9 +5377,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "23.12.46",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.46.tgz",
-      "integrity": "sha512-laYMGzrwmRQUb1rmhsn1BSixH9lInBgP/LPzmoKVs2dlcl7/TUxYeIypumCGifb0Xhc2Vbywaw4vCxuOCfW8dg==",
+      "version": "23.12.81",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.81.tgz",
+      "integrity": "sha512-vEA+yj2EYmngRCYu4iiulOlQOKUUa4E3A35COD1xhjdYwwS8NBIwsRk5Zaf//ovMUxn38FDonZOEWoK+sAOQPA==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@vuelidate/core": "^2.0.3",
@@ -28348,9 +28348,9 @@
       }
     },
     "@webitel/ui-sdk": {
-      "version": "23.12.46",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.46.tgz",
-      "integrity": "sha512-laYMGzrwmRQUb1rmhsn1BSixH9lInBgP/LPzmoKVs2dlcl7/TUxYeIypumCGifb0Xhc2Vbywaw4vCxuOCfW8dg==",
+      "version": "23.12.81",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-23.12.81.tgz",
+      "integrity": "sha512-vEA+yj2EYmngRCYu4iiulOlQOKUUa4E3A35COD1xhjdYwwS8NBIwsRk5Zaf//ovMUxn38FDonZOEWoK+sAOQPA==",
       "requires": {
         "@floating-ui/vue": "^1.0.1",
         "@vuelidate/core": "^2.0.3",
diff --git a/package.json b/package.json
index e1a10ec..aee026e 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@vue/compat": "^3.3.9",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.2",
-    "@webitel/ui-sdk": "^23.12.46",
+    "@webitel/ui-sdk": "^23.12.81",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "deep-equal": "^2.2.1",
diff --git a/src/app/components/the-crm-workspace.vue b/src/app/components/the-crm-workspace.vue
index 2e270aa..6ed62c4 100644
--- a/src/app/components/the-crm-workspace.vue
+++ b/src/app/components/the-crm-workspace.vue
@@ -4,6 +4,7 @@
       <wt-app-header>
         <wt-notifications-bar></wt-notifications-bar>
         <wt-navigation-bar :current-app="currentApp" :nav="nav"></wt-navigation-bar>
+        <wt-dark-mode-switcher />
         <wt-app-navigator :apps="apps" :current-app="currentApp"></wt-app-navigator>
         <wt-header-actions
           :build-info="{ release, build }"
@@ -27,6 +28,7 @@ import authAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/auth';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import WtDarkModeSwitcher from '@webitel/ui-sdk/src/modules/Appearance/components/wt-dark-mode-switcher.vue';
 
 const release = process.env.VUE_APP_PACKAGE_VERSION;
 const build = process.env.VUE_APP_BUILD_NUMBER;
@@ -130,7 +132,7 @@ onMounted(() => {
   min-height: 0;
 }
 
-.wt-navigation-bar {
+.wt-dark-mode-switcher {
   margin-right: auto;
 }
 </style>
diff --git a/src/app/css/main.scss b/src/app/css/main.scss
index 317f84f..b97374b 100644
--- a/src/app/css/main.scss
+++ b/src/app/css/main.scss
@@ -6,12 +6,12 @@ body {
   display: flex;
   min-width: 100%;
   min-height: 100%;
+  color: var(--text-main-color);
 }
 
 .wt-page-wrapper {
   flex-grow: 1;
   display: flex;
-  background-color: var(--page-bg-color);
   max-height: 100%;
 
   :deep(.wt-page-wrapper__main) {
diff --git a/src/app/store/index.js b/src/app/store/index.js
index 104e018..76ed2f4 100644
--- a/src/app/store/index.js
+++ b/src/app/store/index.js
@@ -1,6 +1,7 @@
 import { createStore } from 'vuex';
 import contacts from '../../modules/contacts/store/contacts';
 import userinfo from '../../modules/userinfo/store/userinfo';
+import appearance from '../../modules/appearance/store/appearance';
 
 export default createStore({
   actions: {
@@ -11,5 +12,6 @@ export default createStore({
   modules: {
     contacts,
     userinfo,
+    appearance,
   },
 });
diff --git a/src/modules/appearance/store/appearance.js b/src/modules/appearance/store/appearance.js
new file mode 100644
index 0000000..685b384
--- /dev/null
+++ b/src/modules/appearance/store/appearance.js
@@ -0,0 +1,4 @@
+import AppearanceStoreModule
+  from '@webitel/ui-sdk/src/modules/Appearance/store/AppearanceStoreModule';
+
+export default new AppearanceStoreModule().getModule();