diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js
index 0621b6d427..6831ba4e36 100644
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@@ -62,6 +62,7 @@ define([
                                     --sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
                                     --sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f7f7f7;
                                     --sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
+                                    --sk-background-toolbar-header-slide: #BE664F; --sk-background-toolbar-header-cell: #40865c;
                                     --sk-background-toolbar-tab: rgba(0,0,0,.15); --sk-background-toolbar-button: #d8dadc;
                                     --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
                                     --sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
@@ -77,6 +78,7 @@ define([
                     css: `.loadmask {--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
                                     --sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
                                     --sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
+                                    --sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c;
                                     --sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
                                     --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
                                     --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@@ -94,6 +96,7 @@ define([
                                 --sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
                                 --sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
                                 --sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
+                                --sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
                                 --sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
                                 --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
                                 --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@@ -115,6 +118,7 @@ define([
                                 --sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
                                 --sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
                                 --sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
+                                --sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
                                 --sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
                                 --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
                                 --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@@ -135,6 +139,7 @@ define([
                     css: `.loadmask {--sk-height-toolbar-controls: 66px;--sk-layout-padding-toolbar: 0;
                                     --sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
                                     --sk-background-toolbar-header-word: #f7f7f7; --sk-background-toolbar-header-pdf: #f7f7f7;
+                                    --sk-background-toolbar-header-slide: #f7f7f7;--sk-background-toolbar-header-cell: #f7f7f7;
                                     --sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
                                     --sk-background-toolbar-tab: #e0e0e0; --sk-background-toolbar-button: #e0e0e0;
                                     --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 349b5f4b50..0a23b4f7f9 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -99,7 +99,7 @@
 
         .pdf-form .loadmask > .brendpanel {
             background: #AA5252;
-            background: var(--sk-background-toolbar-header-pdf, #AA5252);
+            background: var(--sk-background-toolbar-header-pdf);
         }
 
         .loadmask > .brendpanel .underline {
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index f661ec9b8e..92f7a65dfb 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -52,7 +52,7 @@
 
         .pdf-form .loadmask > .brendpanel {
             background: #AA5252;
-            background: var(--sk-background-toolbar-header-pdf, #AA5252);
+            background: var(--sk-background-toolbar-header-pdf);
         }
 
         .loadmask > .brendpanel .underline {
diff --git a/apps/pdfeditor/main/app/controller/Viewport.js b/apps/pdfeditor/main/app/controller/Viewport.js
index 4767134fbb..a764796ea0 100644
--- a/apps/pdfeditor/main/app/controller/Viewport.js
+++ b/apps/pdfeditor/main/app/controller/Viewport.js
@@ -85,7 +85,7 @@ define([
                             me.header.btnPrintQuick[value ? 'show' : 'hide']();*/
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                        me.viewport.vlayout.getItem('toolbar').height = state ? 
                                 Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
                     },
                     'undo:disabled' : function (state) {
@@ -111,6 +111,7 @@ define([
             });
             Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this));
             Common.NotificationCenter.on('tabbackground:changed', this.onTabBackgroundChange.bind(this));
+            Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
             this._initEditing = true;
         },
 
@@ -362,6 +363,25 @@ define([
             this.viewport.vlayout.getItem('toolbar').el.toggleClass('style-off-tabs', background==='toolbar');
         },
 
+        onThemeChanged: function () {
+            if (Common.UI.Themes.available()) {
+                var _intvars = Common.Utils.InternalSettings;
+                var $filemenu = $('.toolbar-fullview-panel');
+
+                const computed_style = window.getComputedStyle(document.body);
+                _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
+                _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
+                $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
+
+                this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
+                    _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
+
+                this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
+
+                Common.NotificationCenter.trigger('layout:changed', 'toolbar');
+            }
+        },
+
         textFitPage: 'Fit to Page',
         textFitWidth: 'Fit to Width',
         txtDarkMode: 'Dark mode'
diff --git a/apps/pdfeditor/main/app/template/StatusBar.template b/apps/pdfeditor/main/app/template/StatusBar.template
index 9462a31f47..be267e3a33 100644
--- a/apps/pdfeditor/main/app/template/StatusBar.template
+++ b/apps/pdfeditor/main/app/template/StatusBar.template
@@ -1,7 +1,7 @@
 
-<div class="statusbar" style="display:table;">
+<div class="statusbar">
     <div class="status-group dropup">
-        <label id="label-pages" class="status-label dropdown-toggle margin-top-large" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
+        <label id="label-pages" class="status-label dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
         <div id="status-goto-box" class="dropdown-menu">
             <label class="float-left"><%= textGotoPage %></label>
             <div id="status-goto-page" style="display:inline-block;"></div>
@@ -9,25 +9,25 @@
     </div>
     <div class="separator short space"></div>
     <div class="status-group">
-        <span id="slot-status-btn-prev" style="display: inline-block;" class="margin-top-small"></span>
-        <span id="slot-status-btn-next" style="display: inline-block;" class="margin-top-small"></span>
+        <span id="slot-status-btn-prev" style="display: inline-block;"></span>
+        <span id="slot-status-btn-next" style="display: inline-block;"></span>
     </div>
     <div class="status-group" style="width:100%; text-align:center;">
-        <label id="label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
+        <label id="label-action" class="status-label" data-layout-name="statusBar-actionStatus"></label>
     </div>
-    <div class="status-group" style="">
+    <div class="status-group cnt-flex-center" style="">
         <div class="separator short hide-select-tools"></div>
-        <button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
-        <button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
+        <button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
+        <button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
         <div class="separator short hide-select-tools"></div>
-        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
-        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
-        <button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
+        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
+        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
+        <button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
         <div class="cnt-zoom">
             <div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" role="button" aria-haspopup="menu" aria-expanded="false">
                 <label id="label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
     </div>
 </div>
diff --git a/apps/pdfeditor/main/app/view/Viewport.js b/apps/pdfeditor/main/app/view/Viewport.js
index d72b04aa7c..be6310ad68 100644
--- a/apps/pdfeditor/main/app/view/Viewport.js
+++ b/apps/pdfeditor/main/app/view/Viewport.js
@@ -95,7 +95,8 @@ define([
                         stretch: true
                     }, {
                         el: $container.find(' > .layout-item#statusbar'),
-                        height: 25
+                        alias: 'statusbar',
+                        height: parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height'))
                     }
                 ]
             });
diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html
index fd6a6325f6..8b2ebcc005 100644
--- a/apps/pdfeditor/main/index.html
+++ b/apps/pdfeditor/main/index.html
@@ -10,7 +10,25 @@
     <!-- splash -->
 
     <style type="text/css">
-        .theme-dark, .theme-type-dark {
+        .loadmask {
+            --sk-height-toolbar-controls:84px;
+            --sk-layout-padding-toolbar:0 10px;
+            --sk-layout-padding-header: 0 10px;
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+            --sk-border-radius-toolbar: 8px;
+            --sk-background-toolbar: #f3f3f3;
+            --sk-background-toolbar-controls: #fff;
+            --sk-canvas-background: #f3f3f3;
+            --sk-background-toolbar-header-pdf: #f3f3f3;
+            --sk-background-toolbar-tab: #eaeaea;
+            --sk-background-toolbar-button: #f9f9f9;
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-canvas-content-background: #fff;
+            --sk-canvas-page-border: #dde0e5;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
+        /* .theme-dark, .theme-type-dark {
             --toolbar-header-pdf: #2a2a2a;
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
@@ -18,23 +36,23 @@
             --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #555;
             /*--canvas-content-background: #fff;*/
-            --skeleton-canvas-page-border: #555;
-        }
+            /* --skeleton-canvas-page-border: #555;
+        } */ 
 
-        .content-theme-dark {
+        /* .content-theme-dark {
             --skeleton-canvas-content-background: #3a3a3a;
             --skeleton-canvas-page-border: #2a2a2a;
             --skeleton-canvas-line: rgba(255,255,255,.05);
-        }
+        } */
 
-        .theme-classic-light {
+        /* .theme-classic-light {
             --background-toolbar: #f1f1f1;
             /*--border-toolbar: #cbcbcb;*/
-            --highlight-button-hover: #e0e0e0;
+            /* --highlight-button-hover: #e0e0e0;
             --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --loadmask-canvas-page-border: #ccc;
-        }
+        }  */
 
         .loadmask {
             left: 0;
@@ -45,20 +63,23 @@
             overflow: hidden;
             border: none;
             background: #e2e2e2;
-            background: var(--canvas-background, #e2e2e2);
+            background: var(--sk-canvas-background, #eee);
             z-index: 1002;
         }
 
         .loadmask > .brendpanel {
-            width: 100%;
+            /* width: 100%; */
             min-height: 28px;
             background: #AA5252;
-            background: var(--toolbar-header-pdf, #AA5252);
+            background: var(--sk-background-toolbar-header-pdf);
+
+            padding: var(--sk-layout-padding-header);
         }
 
         .loadmask > .brendpanel .underline {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            /* background: var(--background-toolbar, #f1f1f1); */
+            background: var(--sk-background-toolbar-header-pdf);
         }
 
         .loadmask > .brendpanel > div {
@@ -68,7 +89,8 @@
         }
 
         .loadmask > .brendpanel .spacer {
-            margin-left: auto;
+            /* margin-left: auto; */
+            flex-grow: 1;
         }
 
         .loadmask > .brendpanel .rect {
@@ -78,12 +100,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .brendpanel .underline .rect {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-tab);
             opacity: 0.4;
         }
 
@@ -92,19 +114,35 @@
             width: 20px;
             height: 20px;
             border-radius: 20px;
-            margin: 0 10px;
+            /* margin: 0 10px; */
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .sktoolbar {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
-            border-bottom: 1px solid #cbcbcb;
-            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
-            height: 46px;
-            padding: 10px 6px;
+            /*height: 66px;*/
+            /*height: var(--sk-height-toolbar-controls, 66px);*/
+            padding: 0;
+            padding: var(--sk-layout-padding-toolbar, 0);
             box-sizing: content-box;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+        }
+
+        .loadmask > .sktoolbar > .box-controls {
+            background: var(--sk-background-toolbar-controls, #f7f7f7);
+            border-radius: var(--sk-border-radius-toolbar, 0);
+            /*padding: 10px 7px;*/
+            /*padding: 0 7px;*/
+            padding: var(--sk-layout-padding-toolbar-controls);
+            box-shadow: var(--sk-shadow-toolbar);
+            height: 66px;
+            height: var(--sk-height-toolbar-controls);
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 5px;
         }
 
         .loadmask > .sktoolbar ul {
@@ -112,12 +150,12 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-            height: 25px;
+            height: 20px;
         }
 
         .loadmask > .sktoolbar li {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-button, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -149,19 +187,19 @@
         .loadmask > .placeholder {
             box-sizing: border-box;
             background: #fff;
-            background: var(--skeleton-canvas-content-background, #fff);
+            background: var(--sk-canvas-content-background, #fff);
             width: 794px;
             margin: 19px auto 46px;
             height: 1123px;
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, #bbbec2);
+            border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
             padding-top: 50px;
         }
 
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px 80px;
-            background: var(--skeleton-canvas-line, rgba(0,0,0,.05));
+            background: var(--sk-canvas-line, rgba(0,0,0,.05));
             overflow: hidden;
             position: relative;
 
@@ -283,16 +321,40 @@
 <script src="../../common/main/lib/util/docserviceworker.js"></script>
 <div id="loading-mask" class="loadmask">
     <div class="brendpanel" style="display: none;">
-        <div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
+        <div>
+            <div class="spacer"></div>
+            <div class="circle"></div>
+        </div>
+        <div>
+            <span class="rect"></span>
+            <span class="rect"></span>
+            <span class="rect"></span>
+            <span class="rect"></span>
+        </div>
+    </div>
     <div class="sktoolbar" style="display: none;">
-        <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
-        <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
+        <section class="box-controls">
+            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
+            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
+        </section>
     </div>
     <div class="placeholder" style="display: none;">
         <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div>
     </div>
 </div>
 
+<script>
+    if ( !!window.skhtml ) {
+        var skl = document.getElementById("loading-mask");
+        if ( skl ) {
+            skl.innerHTML = window.skhtml;
+            delete skl;
+        }
+
+        delete window.skhtml;
+    }
+</script>
+
 <div id="viewport" role="main"></div>
 
 <script>
diff --git a/apps/pdfeditor/main/index.html.deploy b/apps/pdfeditor/main/index.html.deploy
index e95a27c970..275f589121 100644
--- a/apps/pdfeditor/main/index.html.deploy
+++ b/apps/pdfeditor/main/index.html.deploy
@@ -11,10 +11,22 @@
     <!-- splash -->
 
     <style type="text/css">
-        .content-theme-dark {
-            --skeleton-canvas-content-background: #3a3a3a;
-            --skeleton-canvas-page-border: #2a2a2a;
-            --skeleton-canvas-line: rgba(255,255,255,.05);
+        .loadmask {
+            --sk-height-toolbar-controls:84px;
+            --sk-layout-padding-toolbar:0 10px;
+            --sk-layout-padding-header: 0 10px;
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+            --sk-border-radius-toolbar: 8px;
+            --sk-background-toolbar: #f3f3f3;
+            --sk-background-toolbar-controls: #fff;
+            --sk-canvas-background: #f3f3f3;
+            --sk-background-toolbar-header-pdf: #f3f3f3;
+            --sk-background-toolbar-tab: #eaeaea;
+            --sk-background-toolbar-button: #f9f9f9;
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-canvas-content-background: #fff;
+            --sk-canvas-page-border: #dde0e5;
+            --sk-canvas-line: rgba(0,0,0,.05);
         }
 
         .loadmask {
@@ -26,20 +38,20 @@
             overflow: hidden;
             border: none;
             background: #e2e2e2;
-            background: var(--canvas-background, #e2e2e2);
+            background: var(--sk-canvas-background, #eee);
             z-index: 1002;
         }
 
         .loadmask > .brendpanel {
-            width: 100%;
             min-height: 28px;
             background: #AA5252;
-            background: var(--toolbar-header-pdf, #AA5252);
+            background: var(--sk-background-toolbar-header-pdf);
+            padding: var(--sk-layout-padding-header);
         }
 
         .loadmask > .brendpanel .underline {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            background: var(--sk-background-toolbar-header-pdf);
         }
 
         .loadmask > .brendpanel > div {
@@ -49,7 +61,7 @@
         }
 
         .loadmask > .brendpanel .spacer {
-            margin-left: auto;
+            flex-grow: 1;
         }
 
         .loadmask > .brendpanel .rect {
@@ -59,12 +71,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .brendpanel .underline .rect {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-tab);
             opacity: 0.4;
         }
 
@@ -73,19 +85,29 @@
             width: 20px;
             height: 20px;
             border-radius: 20px;
-            margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .sktoolbar {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
-            border-bottom: 1px solid #cbcbcb;
-            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
-            height: 46px;
-            padding: 10px 6px;
+            padding: 0;
+            padding: var(--sk-layout-padding-toolbar, 0);
             box-sizing: content-box;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+        }
+
+        .loadmask > .sktoolbar > .box-controls {
+            background: var(--sk-background-toolbar-controls, #f7f7f7);
+            border-radius: var(--sk-border-radius-toolbar, 0);
+            padding: var(--sk-layout-padding-toolbar-controls);
+            box-shadow: var(--sk-shadow-toolbar);
+            height: 66px;
+            height: var(--sk-height-toolbar-controls);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 5px;
         }
 
         .loadmask > .sktoolbar ul {
@@ -93,12 +115,12 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-            height: 25px;
+            height: 20px;
         }
 
         .loadmask > .sktoolbar li {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-button, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -130,20 +152,19 @@
         .loadmask > .placeholder {
             box-sizing: border-box;
             background: #fff;
-            background: var(--skeleton-canvas-content-background, var(--canvas-content-background, #fff));
+            background: var(--sk-canvas-content-background, #fff);
             width: 794px;
             margin: 19px auto 46px;
             height: 1123px;
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
+            border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
             padding-top: 50px;
         }
 
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px 80px;
-            background: rgba(0,0,0,.05);
-            background: var(--skeleton-canvas-line, rgba(0,0,0,.05));
+            background: var(--sk-canvas-line, rgba(0,0,0,.05));
             overflow: hidden;
             position: relative;
 
@@ -251,7 +272,7 @@
     <script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
     <script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
 
-    <div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><section class="box-controls"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></section></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
     <div id="viewport" role="main"></div>
 
     <script>
diff --git a/apps/pdfeditor/main/resources/less/app.less b/apps/pdfeditor/main/resources/less/app.less
index eea97f35f5..5b4b909c80 100644
--- a/apps/pdfeditor/main/resources/less/app.less
+++ b/apps/pdfeditor/main/resources/less/app.less
@@ -99,6 +99,7 @@
 @import "../../../../common/main/resources/less/updown-picker.less";
 @import "../../../../common/main/resources/less/calendar.less";
 @import "../../../../common/main/resources/less/dimension-picker.less";
+@import "../../../../common/main/resources/less/statusbar.less";
 
 // App
 // --------------------------------------------------
diff --git a/apps/pdfeditor/main/resources/less/statusbar.less b/apps/pdfeditor/main/resources/less/statusbar.less
index c17bb0239e..f1c151716e 100644
--- a/apps/pdfeditor/main/resources/less/statusbar.less
+++ b/apps/pdfeditor/main/resources/less/statusbar.less
@@ -1,7 +1,5 @@
-@statusbar-height: 25px;
+@statusbar-height: var(--statusbar-height, 25px);
 .statusbar {
-    display: table;
-    padding: 2px;
 
     .status-label {
         position: relative;
@@ -32,9 +30,7 @@
     }
 
     .status-group {
-        display: table-cell;
         white-space: nowrap;
-        vertical-align: top;
         &.dropup {
             position: static;
         }
@@ -66,7 +62,6 @@
     .cnt-zoom {
         display: inline-block;
         vertical-align: middle;
-        margin-top: 4px;
         .dropdown-menu {
             min-width: 80px;
             .margin-left(-4px);
diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js
index 56f3fd7b70..9e875e7d2a 100644
--- a/apps/presentationeditor/main/app/controller/Viewport.js
+++ b/apps/presentationeditor/main/app/controller/Viewport.js
@@ -160,6 +160,7 @@ define([
             Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             Common.NotificationCenter.on('search:show', _.bind(this.onSearchShow, this));
+            Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
         },
 
         onAppShowed: function (config) {
@@ -387,6 +388,25 @@ define([
             this._isDisabledPreview = disable;
         },
 
+        onThemeChanged: function () {
+            if (Common.UI.Themes.available()) {
+                var _intvars = Common.Utils.InternalSettings;
+                var $filemenu = $('.toolbar-fullview-panel');
+
+                const computed_style = window.getComputedStyle(document.body);
+                _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
+                _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
+                $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
+
+                this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
+                    _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
+
+                this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
+
+                Common.NotificationCenter.trigger('layout:changed', 'toolbar');
+            }
+        },
+
         textFitPage: 'Fit to Page',
         textFitWidth: 'Fit to Width'
     }, PE.Controllers.Viewport));
diff --git a/apps/presentationeditor/main/app/template/StatusBar.template b/apps/presentationeditor/main/app/template/StatusBar.template
index a7a48a7220..70238b639d 100644
--- a/apps/presentationeditor/main/app/template/StatusBar.template
+++ b/apps/presentationeditor/main/app/template/StatusBar.template
@@ -1,33 +1,33 @@
 
-<div class="statusbar" style="display:table;">
+<div class="statusbar">
     <div class="status-group">
-        <div id="slot-status-btn-preview" style="display: inline-block;" class="margin-top-small margin-left-10"></div>
+        <div id="slot-status-btn-preview" style="display: inline-block;" class=" margin-left-10"></div>
     </div>
     <div class="status-group dropup">
-        <label id="status-label-pages" class="status-label dropdown-toggle margin-top-large margin-left-7" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
-        <label id="status-label-slide-master" class="status-label margin-top-large margin-left-7" style="display: none;" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= scope.textSlideMaster %></label>
+        <label id="status-label-pages" class="status-label dropdown-toggle margin-left-7" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
+        <label id="status-label-slide-master" class="status-label margin-left-7" style="display: none;" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= scope.textSlideMaster %></label>
         <div id="status-goto-box" class="dropdown-menu">
             <label class="float-left"><%= scope.goToPageText %></label>
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
     <div class="status-group" style="width:100%; text-align:center;">
-        <label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
+        <label id="status-label-action" class="status-label" data-layout-name="statusBar-actionStatus"></label>
     </div>
-    <div class="status-group" style="">
-        <span id="btn-cnt-lang" class="el-edit margin-top-small" data-layout-name="statusBar-textLang"></span>
-        <span id="btn-doc-lang" class="el-edit margin-top-small" data-layout-name="statusBar-docLang"></span>
+    <div class="status-group cnt-flex-center" style="">
+        <span id="btn-cnt-lang" class="el-edit" data-layout-name="statusBar-textLang"></span>
+        <span id="btn-doc-lang" class="el-edit" data-layout-name="statusBar-docLang"></span>
         <div class="separator short el-edit space"></div>
-        <span id="btn-doc-spell" class="el-edit margin-top-small"></span>
+        <span id="btn-doc-spell" class="el-edit"></span>
         <div class="separator short el-edit el-lang"></div>
-        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide">&nbsp;</i></button>
-        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
-        <button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
+        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide">&nbsp;</i></button>
+        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
+        <button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
         <div class="cnt-zoom">
             <div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" role="button" aria-haspopup="menu" aria-expanded="false">
                 <label id="status-label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
     </div>
 </div>
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js
index fe746ac42f..b8976aa0c3 100644
--- a/apps/presentationeditor/main/app/view/Viewport.js
+++ b/apps/presentationeditor/main/app/view/Viewport.js
@@ -99,7 +99,8 @@ define([
                     stretch: true
                 }, {
                     el: items[3],
-                    height: 25
+                    alias: 'statusbar',
+                    height: parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height'))
                 }]
             });
 
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index 378c5e05bb..84e2185682 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -9,7 +9,25 @@
 
     <!-- splash -->
     <style type="text/css">
-        .theme-dark, .theme-type-dark {
+        .loadmask {
+            --sk-height-toolbar-controls:84px;
+            --sk-layout-padding-toolbar:0 10px;
+            --sk-layout-padding-header: 0 10px;
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+            --sk-border-radius-toolbar: 8px;
+            --sk-background-toolbar: #f3f3f3;
+            --sk-background-toolbar-controls: #fff;
+            --sk-canvas-background: #f3f3f3;
+            --sk-background-toolbar-header-slide: #f3f3f3;
+            --sk-background-toolbar-tab: #eaeaea;
+            --sk-background-toolbar-button: #f9f9f9;
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-canvas-content-background: #fff;
+            --sk-canvas-page-border: #dde0e5;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
+        /* .theme-dark, .theme-type-dark {
             --toolbar-header-presentation: #2a2a2a;
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
@@ -17,20 +35,20 @@
             --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
-            --canvas-page-border: #555;
-        }
+            /* --canvas-page-border: #555;
+        } */
 
-        .theme-classic-light {
+        /* .theme-classic-light {
         }
 
         .theme-light {
             --background-toolbar: #f1f1f1;
             /*--border-toolbar: #cbcbcb;*/
-            --highlight-button-hover: #d8dadc;
+            /* --highlight-button-hover: #d8dadc;
             --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --canvas-page-border: #ccc;
-        }
+        }  */
 
         .loadmask {
             left: 0;
@@ -41,20 +59,23 @@
             overflow: hidden;
             border: none;
             background: #e2e2e2;
-            background: var(--canvas-background, #e2e2e2);
+            background: var(--sk-canvas-background, #eee);
             z-index: 1002;
         }
 
         .loadmask > .brendpanel {
-            width: 100%;
+            /* width: 100%; */
             min-height: 28px;
             background: #BE664F;
-            background: var(--toolbar-header-presentation, #BE664F);
+            background: var(--sk-background-toolbar-header-slide);
+            
+            padding: var(--sk-layout-padding-header);
         }
 
         .loadmask > .brendpanel .underline {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            /* background: var(--background-toolbar, #f1f1f1); */
+            background: var(--sk-background-toolbar-header-slide);
         }
 
         .loadmask > .brendpanel > div {
@@ -64,7 +85,8 @@
         }
 
         .loadmask > .brendpanel .spacer {
-            margin-left: auto;
+            /* margin-left: auto; */
+            flex-grow: 1;
         }
 
         .loadmask > .brendpanel .rect {
@@ -74,12 +96,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .brendpanel .underline .rect {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-tab);
             opacity: 0.4;
         }
 
@@ -88,19 +110,35 @@
             width: 20px;
             height: 20px;
             border-radius: 20px;
-            margin: 0 10px;
+            /* margin: 0 10px; */
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .sktoolbar {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
-            border-bottom: 1px solid #cbcbcb;
-            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
-            height: 46px;
-            padding: 10px 6px;
+            /*height: 66px;*/
+            /*height: var(--sk-height-toolbar-controls, 66px);*/
+            padding: 0;
+            padding: var(--sk-layout-padding-toolbar, 0);
             box-sizing: content-box;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+        }
+
+        .loadmask > .sktoolbar > .box-controls {
+            background: var(--sk-background-toolbar-controls, #f7f7f7);
+            border-radius: var(--sk-border-radius-toolbar, 0);
+            /*padding: 10px 7px;*/
+            /*padding: 0 7px;*/
+            padding: var(--sk-layout-padding-toolbar-controls);
+            box-shadow: var(--sk-shadow-toolbar);
+            height: 66px;
+            height: var(--sk-height-toolbar-controls);
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 5px;
         }
 
         .loadmask > .sktoolbar ul {
@@ -108,12 +146,12 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-            height: 25px;
+            height: 20px;
         }
 
         .loadmask > .sktoolbar li {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-button, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -175,9 +213,9 @@
             height: 100%;
             width: 100%;
             background: #fff;
-            background: var(--canvas-content-background, #fff);
+            background: var(--sk-canvas-content-background, #fff);
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
+            border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
@@ -304,17 +342,41 @@
     <script src="../../common/main/lib/util/docserviceworker.js"></script>
     <div id="loading-mask" class="loadmask">
         <div class="brendpanel" style="display: none;">
-            <div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
+            <div>
+                <div class="spacer"></div>
+                <div class="circle"></div>
+            </div>
+            <div>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <div class="spacer"></div>
+            </div>
         </div>
         <div class="sktoolbar" style="display: none;">
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
+            <section class="box-controls">
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
+            </section>
         </div>
         <div class="placeholder" style="display: none;">
             <div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line empty"></div><div class="line"></div></div></div></div>
         </div>
     </div>
 
+    <script>
+        if ( !!window.skhtml ) {
+            var skl = document.getElementById("loading-mask");
+            if ( skl ) {
+                skl.innerHTML = window.skhtml;
+                delete skl;
+            }
+
+            delete window.skhtml;
+        }
+    </script>
+
     <div id="viewport" role="main"></div>
 
     <script>
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 1bfd3a0e9a..6073bb233b 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -11,6 +11,24 @@
     <!-- splash -->        
 
     <style type="text/css">
+        .loadmask {
+            --sk-height-toolbar-controls:84px;
+            --sk-layout-padding-toolbar:0 10px;
+            --sk-layout-padding-header: 0 10px;
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+            --sk-border-radius-toolbar: 8px;
+            --sk-background-toolbar: #f3f3f3;
+            --sk-background-toolbar-controls: #fff;
+            --sk-canvas-background: #f3f3f3;
+            --sk-background-toolbar-header-slide: #f3f3f3;
+            --sk-background-toolbar-tab: #eaeaea;
+            --sk-background-toolbar-button: #f9f9f9;
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-canvas-content-background: #fff;
+            --sk-canvas-page-border: #dde0e5;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -20,7 +38,7 @@
             overflow: hidden;
             border: none;
             background: #e2e2e2;
-            background: var(--canvas-background, #e2e2e2);
+            background: var(--sk-canvas-background, #eee);
             z-index: 1002;
         }
 
@@ -28,12 +46,13 @@
             width: 100%;
             min-height: 28px;
             background: #BE664F;
-            background: var(--toolbar-header-presentation, #BE664F);
+           background: var(--sk-background-toolbar-header-slide);
+            padding: var(--sk-layout-padding-header);
         }
 
         .loadmask > .brendpanel .underline {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            background: var(--sk-background-toolbar-header-slide);
         }
 
         .loadmask > .brendpanel > div {
@@ -43,7 +62,7 @@
         }
 
         .loadmask > .brendpanel .spacer {
-            margin-left: auto;
+            flex-grow: 1;
         }
 
         .loadmask > .brendpanel .rect {
@@ -53,12 +72,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .brendpanel .underline .rect {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-tab);
             opacity: 0.4;
         }
 
@@ -67,19 +86,30 @@
             width: 20px;
             height: 20px;
             border-radius: 20px;
-            margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .sktoolbar {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
-            border-bottom: 1px solid #cbcbcb;
-            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
-            height: 46px;
-            padding: 10px 6px;
+            padding: 0;
+            padding: var(--sk-layout-padding-toolbar, 0);
             box-sizing: content-box;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+        }
+
+        .loadmask > .sktoolbar > .box-controls {
+            background: var(--sk-background-toolbar-controls, #f7f7f7);
+            border-radius: var(--sk-border-radius-toolbar, 0);
+            padding: var(--sk-layout-padding-toolbar-controls);
+            box-shadow: var(--sk-shadow-toolbar);
+            height: 66px;
+            height: var(--sk-height-toolbar-controls);
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 5px;
         }
 
         .loadmask > .sktoolbar ul {
@@ -87,12 +117,12 @@
             padding: 0;
             white-space: nowrap;
             position: relative;
-            height: 25px;
+            height: 20px;
         }
 
         .loadmask > .sktoolbar li {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-button, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -154,9 +184,9 @@
             height: 100%;
             width: 100%;
             background: #fff;
-            background: var(--canvas-content-background, #fff);
+            background: var(--sk-canvas-content-background, #fff);
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
+            border: var(--scaled-one-px-value, 1px) solid var(--sk--canvas-page-border, var(--canvas-page-border, #bbbec2));
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
@@ -284,8 +314,10 @@
             <div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
         </div>
         <div class="sktoolbar" style="display: none;">
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
+            <section class="box-controls">
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
+            </section>
         </div>
         <div class="placeholder" style="display: none;">
             <div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line empty"></div><div class="line"></div></div></div></div>
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less
index 3959530052..bc47300314 100644
--- a/apps/presentationeditor/main/resources/less/app.less
+++ b/apps/presentationeditor/main/resources/less/app.less
@@ -128,6 +128,7 @@
 @import "../../../../common/main/resources/less/updown-picker.less";
 @import "../../../../common/main/resources/less/calendar.less";
 @import "../../../../common/main/resources/less/macros-dialog.less";
+@import "../../../../common/main/resources/less/statusbar.less";
 
 // App
 // --------------------------------------------------
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index 512489e57d..6df8b8f86c 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -1,7 +1,5 @@
-@statusbar-height: 25px;
+@statusbar-height: var(--statusbar-height, 25px);
 .statusbar {
-    display: table;
-    padding: 2px;
 
     .status-label {
         position: relative;
@@ -20,9 +18,7 @@
     }
 
     .status-group {
-        display: table-cell;
         white-space: nowrap;
-        vertical-align: top;
         &.dropup {
             position: static;
         }
@@ -58,7 +54,6 @@
     .cnt-zoom {
         display: inline-block;
         vertical-align: middle;
-        margin-top: 4px;
         .dropdown-menu {
             min-width: 80px;
             .margin-left(-4px);
@@ -90,8 +85,4 @@
             display: inline-block;
         }
     }
-
-    #slot-status-btn-preview {
-        width: 32px;
-    }
 }
diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js
index f067ef68d6..438f94a081 100644
--- a/apps/spreadsheeteditor/main/app/controller/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js
@@ -73,7 +73,8 @@ define([
                 },
                 'Statusbar': {
                     'view:compact': function (statusbar, state) {
-                        me.viewport.vlayout.getItem('statusbar').height = state ? 25 : 50;
+                        var height = parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height'));
+                        me.viewport.vlayout.getItem('statusbar').height = state ? height : height * 2;
                     }
                 },
                 'Toolbar': {
@@ -120,6 +121,7 @@ define([
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this));
             Common.NotificationCenter.on('tabbackground:changed', this.onTabBackgroundChange.bind(this));
+            Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
         },
 
         setApi: function(api) {
@@ -355,6 +357,27 @@ define([
             this.viewport.vlayout.getItem('toolbar').el.toggleClass('style-off-tabs', background==='toolbar');
         },
 
+        onThemeChanged: function () {
+            if (Common.UI.Themes.available()) {
+                var _intvars = Common.Utils.InternalSettings;
+                var $filemenu = $('.toolbar-fullview-panel');
+
+                const computed_style = window.getComputedStyle(document.body);
+                _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
+                _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
+                $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
+
+                this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
+                    _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
+
+                var height = parseInt(computed_style.getPropertyValue('--statusbar-height'));
+                var NoCompact = $('.statusbar').hasClass('no-compact');
+                this.viewport.vlayout.getItem('statusbar').height = NoCompact ? height * 2 : height;
+                
+                Common.NotificationCenter.trigger('layout:changed', 'toolbar');
+            }
+        },
+
         textHideFBar: 'Hide Formula Bar',
         textHideHeadings: 'Hide Headings',
         textHideGridlines: 'Hide Gridlines',
diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template
index 2c0096414d..bf1e7bd9aa 100644
--- a/apps/spreadsheeteditor/main/app/template/StatusBar.template
+++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template
@@ -1,16 +1,16 @@
 
 <div class="statusbar">
-    <div id="status-tabs-scroll" class="status-group" dir="ltr">
+    <div id="status-tabs-scroll" class="status-group cnt-flex-center" dir="ltr">
         <button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
         <button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
     </div>
-    <div id="status-addtabs-box" class="status-group">
+    <div id="status-addtabs-box" class="status-group cnt-flex-center">
         <button id="status-btn-addtab" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="X"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
         <div class="cnt-tabslist">
             <button id="status-btn-tabslist" type="button" class="btn small btn-toolbar dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="N"><i class="icon toolbar__icon btn-sheet-list">&nbsp;</i></button>
         </div>
     </div>
-    <div id="status-zoom-box" class="status-group">
+    <div id="status-zoom-box" class="status-group cnt-flex-center">
         <div class="separator short"></div>
         <button id="status-btn-zoomdown" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
         <div class="cnt-zoom">
@@ -36,7 +36,7 @@
         <div id="status-sheets-bar" class="status-group">
         </div>
     </div>
-    <div id="status-number-of-sheet">
+    <div id="status-number-of-sheet" class="cnt-flex-center">
         <label id="label-sheets" class="status-label"></label>
     </div>
     <div id="status-action">
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 76357bddf8..5a63ed8fca 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -67,6 +67,7 @@ define([
 
             initialize: function (options) {
                 _.extend(this, options);
+                Common.NotificationCenter.on('uitheme:changed', this.setMode.bind(this));
             },
 
             render: function () {
diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js
index 829b2cf4bf..1409c58bde 100644
--- a/apps/spreadsheeteditor/main/app/view/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/view/Viewport.js
@@ -98,7 +98,10 @@ define([
                 }, {
                     el: items[3],
                     alias: 'statusbar',
-                    height: Common.localStorage.getBool('sse-compact-statusbar', true) ? 25 : 50
+                    height: (function () {
+                        var h = parseInt(getComputedStyle(document.body).getPropertyValue('--statusbar-height'));
+                        return Common.localStorage.getBool('sse-compact-statusbar', true) ? h : h * 2;
+                    })()
                 }]
             });
 
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index a9fe3501bf..8ddf2825c5 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -8,7 +8,25 @@
 
     <!-- splash -->
     <style type="text/css">
-        .theme-dark, .theme-type-dark {
+         .loadmask {
+            --sk-height-toolbar-controls:84px;
+            --sk-layout-padding-toolbar:0 10px;
+            --sk-layout-padding-header: 0 10px;
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+            --sk-border-radius-toolbar: 8px;
+            --sk-background-toolbar: #f3f3f3;
+            --sk-background-toolbar-controls: #fff;
+            --sk-canvas-background: #f3f3f3;
+            --sk-background-toolbar-header-cell: #f3f3f3;
+            --sk-background-toolbar-tab: #eaeaea;
+            --sk-background-toolbar-button: #f9f9f9;
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-canvas-content-background: #fff;
+            --sk-canvas-page-border: #dde0e5;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
+        /* .theme-dark, .theme-type-dark {
             --toolbar-header-spreadsheet: #2a2a2a;
             --background-toolbar: #404040;
             --background-normal: #333;
@@ -17,7 +35,7 @@
             --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
-            --canvas-page-border: #555;
+            /* --canvas-page-border: #555;
         }
 
         .theme-classic-light {
@@ -26,11 +44,11 @@
         .theme-light {
             --background-toolbar: #f1f1f1;
             /*--border-toolbar: #cbcbcb;*/
-            --highlight-button-hover: #d8dadc;
+            /* --highlight-button-hover: #d8dadc;
             --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --canvas-page-border: #ccc;
-        }
+        }  */
 
         .loadmask {
             left: 0;
@@ -41,20 +59,22 @@
             overflow: hidden;
             border: none;
             background: #e2e2e2;
-            background: var(--canvas-background, #e2e2e2);
+            background: var(--sk-canvas-background, #eee);
             z-index: 1002;
         }
 
         .loadmask > .brendpanel {
-            width: 100%;
+            /* width: 100%; */
             min-height: 28px;
             background: #40865c;
-            background: var(--toolbar-header-spreadsheet, #40865c);
+            background: var(--sk-background-toolbar-header-cell);
+            padding: var(--sk-layout-padding-header);
         }
 
         .loadmask > .brendpanel .underline {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            /* background: var(--background-toolbar, #f1f1f1); */
+            background: var(--sk-background-toolbar-header-cell);
         }
 
         .loadmask > .brendpanel > div {
@@ -64,7 +84,8 @@
         }
 
         .loadmask > .brendpanel .spacer {
-            margin-left: auto;
+            /* margin-left: auto; */
+            flex-grow: 1;
         }
 
         .loadmask > .brendpanel .rect {
@@ -74,12 +95,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .brendpanel .underline .rect {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-tab);
             opacity: 0.4;
         }
 
@@ -88,17 +109,33 @@
             width: 20px;
             height: 20px;
             border-radius: 20px;
-            margin: 0 10px;
+            /* margin: 0 10px; */
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .sktoolbar {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
-            height: 46px;
-            padding: 10px 6px;
+            padding: 0;
+            padding: var(--sk-layout-padding-toolbar, 0);
             box-sizing: content-box;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+        }
+
+        .loadmask > .sktoolbar > .box-controls {
+            background: var(--sk-background-toolbar-controls, #f7f7f7);
+            border-radius: var(--sk-border-radius-toolbar, 0);
+            /*padding: 10px 7px;*/
+            /*padding: 0 7px;*/
+            padding: var(--sk-layout-padding-toolbar-controls);
+            box-shadow: var(--sk-shadow-toolbar);
+            height: 66px;
+            height: var(--sk-height-toolbar-controls, 66px);
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 5px;
         }
 
         .loadmask ul {
@@ -109,12 +146,12 @@
         }
 
         .loadmask > .sktoolbar ul {
-            height: 25px;
+            height: 20px;
         }
 
         .loadmask > .sktoolbar li {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-button, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -180,12 +217,12 @@
 
         .loadmask > .placeholder {
             background: #fff;
-            background: var(--canvas-content-background, #fff);
+            background: var(--sk-canvas-content-background, #fff);
             width: 100%;
             height: 100%;
             font-size: 0;
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
+            border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
@@ -310,12 +347,28 @@
     <script src="../../common/main/lib/util/htmlutils.js"></script>
     <script src="../../common/main/lib/util/docserviceworker.js"></script>
     <div id="loading-mask" class="loadmask">
-        <div class="brendpanel" style="display: none;"><div>
-            <div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
+        <div class="brendpanel" style="display: none;">
+            <div>
+                <div class="spacer"></div>
+                <div class="circle"></div>
+            </div>
+            <div>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <span class="rect"></span>
+                <div class="spacer"></div>
+            </div>
         </div>
         <div class="sktoolbar" style="display: none;">
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
+            <section class="box-controls">
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
+            </section>
         </div>
         <div class="skformula" style="display: none;">
             <ul><li/><li/></ul>
@@ -325,6 +378,18 @@
         </div>
     </div>
 
+    <script>
+        if ( !!window.skhtml ) {
+            var skl = document.getElementById("loading-mask");
+            if ( skl ) {
+                skl.innerHTML = window.skhtml;
+                delete skl;
+            }
+
+            delete window.skhtml;
+        }
+    </script>
+    
     <div id="viewport" role="main"></div>
 
     <script>
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 123838a525..b97494c37d 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -11,6 +11,24 @@
 
     <!-- splash -->
     <style type="text/css">
+         .loadmask {
+            --sk-height-toolbar-controls:84px;
+            --sk-layout-padding-toolbar:0 10px;
+            --sk-layout-padding-header: 0 10px;
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+            --sk-border-radius-toolbar: 8px;
+            --sk-background-toolbar: #f3f3f3;
+            --sk-background-toolbar-controls: #fff;
+            --sk-canvas-background: #f3f3f3;
+            --sk-background-toolbar-header-cell: #f3f3f3;
+            --sk-background-toolbar-tab: #eaeaea;
+            --sk-background-toolbar-button: #f9f9f9;
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-canvas-content-background: #fff;
+            --sk-canvas-page-border: #dde0e5;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -20,7 +38,7 @@
             overflow: hidden;
             border: none;
             background: #e2e2e2;
-            background: var(--canvas-background, #e2e2e2);
+            background: var(--sk-canvas-background, #eee);
             z-index: 1002;
         }
 
@@ -28,12 +46,13 @@
             width: 100%;
             min-height: 28px;
             background: #40865c;
-            background: var(--toolbar-header-spreadsheet, #40865c);
+            background: var(--sk-background-toolbar-header-cell);
+            padding: var(--sk-layout-padding-header);
         }
 
         .loadmask > .brendpanel .underline {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            background: var(--sk-background-toolbar-header-cell);
         }
 
         .loadmask > .brendpanel > div {
@@ -43,7 +62,7 @@
         }
 
         .loadmask > .brendpanel .spacer {
-            margin-left: auto;
+            flex-grow: 1;
         }
 
         .loadmask > .brendpanel .rect {
@@ -53,12 +72,12 @@
             border-radius: 3px;
             margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .brendpanel .underline .rect {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-tab);
             opacity: 0.4;
         }
 
@@ -67,17 +86,30 @@
             width: 20px;
             height: 20px;
             border-radius: 20px;
-            margin: 0 10px;
             background: rgba(0,0,0,.15);
-            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
+            background: var(--sk-background-toolbar-tab);
         }
 
         .loadmask > .sktoolbar {
             background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
-            height: 46px;
-            padding: 10px 6px;
+            padding: 0;
+            padding: var(--sk-layout-padding-toolbar, 0);
             box-sizing: content-box;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+        }
+
+        .loadmask > .sktoolbar > .box-controls {
+            background: var(--sk-background-toolbar-controls, #f7f7f7);
+            border-radius: var(--sk-border-radius-toolbar, 0);
+            padding: var(--sk-layout-padding-toolbar-controls);
+            box-shadow: var(--sk-shadow-toolbar);
+            height: 66px;
+            height: var(--sk-height-toolbar-controls);
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            row-gap: 5px;
         }
 
         .loadmask ul {
@@ -88,12 +120,12 @@
         }
 
         .loadmask > .sktoolbar ul {
-            height: 25px;
+            height: 20px;
         }
 
         .loadmask > .sktoolbar li {
             background: #d8dadc;
-            background: var(--highlight-button-hover, #d8dadc);
+            background: var(--sk-background-toolbar-button, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -159,12 +191,12 @@
 
         .loadmask > .placeholder {
             background: #fff;
-            background: var(--canvas-content-background, #fff);
+            background: var(--sk-canvas-content-background, #fff);
             width: 100%;
             height: 100%;
             font-size: 0;
             border: 1px solid #bbbec2;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
+            border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
@@ -292,8 +324,10 @@
             <div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
         </div>
         <div class="sktoolbar" style="display: none;">
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
-            <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
+            <section class="box-controls">
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
+                <ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
+            </section>
         </div>
         <div class="skformula" style="display: none;">
             <ul><li/><li/></ul>
diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less
index 6315552ed1..06a55146df 100644
--- a/apps/spreadsheeteditor/main/resources/less/app.less
+++ b/apps/spreadsheeteditor/main/resources/less/app.less
@@ -128,6 +128,7 @@
 @import "../../../../common/main/resources/less/bigscaling.less";
 @import "../../../../common/main/resources/less/updown-picker.less";
 @import "../../../../common/main/resources/less/macros-dialog.less";
+@import "../../../../common/main/resources/less/statusbar.less";
 
 // App
 // --------------------------------------------------
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index e93347fe1b..df197f0b28 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -1,4 +1,4 @@
-@statusbar-height: 25px;
+@statusbar-height: var(--statusbar-height, 25px);
 @status-scroll-padding-left: 12px;
 @statusb-scroll-padding-right: 10px;
 @status-scroll-width: calc(2*@x-small-btn-size + @status-scroll-padding-left + @statusb-scroll-padding-right);
@@ -49,7 +49,7 @@
 
     #status-tabs-scroll {
         width: @status-scroll-width;
-        padding: calc(@statusbar-height - @x-small-btn-size) @status-scroll-padding-left 0 @statusb-scroll-padding-right;
+        padding: 0 @status-scroll-padding-left 0 @statusb-scroll-padding-right;
         height: @statusbar-height;
         float: left;
 
@@ -60,8 +60,6 @@
     }
 
     #status-zoom-box {
-        padding-top: calc(@statusbar-height - @x-small-btn-size);
-
         position: absolute;
         height: @statusbar-height;
 
@@ -162,7 +160,7 @@
     }
 
     #status-addtabs-box {
-        padding: calc(@statusbar-height - @x-small-btn-size) 8px 0;
+        padding: 0 8px;
         border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-left: @scaled-one-px-value solid @border-toolbar;
         border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
@@ -431,7 +429,6 @@
         justify-content: flex-start;
         .status-label {
             color: @text-normal;
-            margin-top: 6px;
             width: 100%;
             text-align: center;
         }
@@ -452,7 +449,7 @@
 
     &.no-compact {
         #status-tabs-scroll, #status-sheets-bar-box, #status-addtabs-box {
-            height: 26px;
+            height: @statusbar-height;
             border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-bottom: @scaled-one-px-value solid @border-toolbar;
         }
@@ -522,7 +519,6 @@
     .cnt-zoom {
         display: inline-block;
         position: relative;
-        top: 1px;
 
         .dropdown-menu {
             min-width: 80px;