diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 08a7bfd5de..c177e40614 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -83,7 +83,7 @@ define([
                                 //'<label id="rib-doc-name" />' +
                                 '<input id="rib-doc-name" autofill="off" autocomplete="off"/></input>' +
                             '</section>' +
-                            '<section style="display: inherit;">' +
+                            '<section id="box-right-btn-group" style="display: inherit;">' +
                                 '<div class="hedset">' +
                                     '<div class="btn-slot margin-right-2" id="slot-btn-header-form-submit"></div>' +
                                     '<div class="btn-slot margin-right-2" id="slot-btn-start-fill"></div>' +
diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less
index 81bbd0b3a9..c7631bbc60 100644
--- a/apps/common/main/resources/less/colors-table-classic.less
+++ b/apps/common/main/resources/less/colors-table-classic.less
@@ -30,8 +30,8 @@
         --highlight-primary-dialog-button-hover: #666d73;
         --highlight-accent-button-hover: #375478;
         --highlight-accent-button-pressed: #293f59;
-        --highlight-header-button-hover: fade(#fff, 20%);
-        --highlight-header-button-pressed: fade(#000, 20%);
+        --highlight-header-button-hover: fade(#000, 15%);
+        --highlight-header-button-pressed: fade(#000, 25%);
         --highlight-toolbar-tab-underline: #444;
         --highlight-text-select: #3494fb;
         --highlight-fill-button-hover: #ffe165;
diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less
index 84e6529e58..2c560d37bc 100644
--- a/apps/common/main/resources/less/colors-table-dark-contrast.less
+++ b/apps/common/main/resources/less/colors-table-dark-contrast.less
@@ -31,8 +31,8 @@
         --highlight-primary-dialog-button-hover: #a6a6a6;
         --highlight-accent-button-hover: #75a2d6;
         --highlight-accent-button-pressed: #89afdc;
-        --highlight-header-button-hover: #424242;
-        --highlight-header-button-pressed: #828282;
+        --highlight-header-button-hover: fade(#fff, 20%);
+        --highlight-header-button-pressed: fade(#fff, 35%);
         --highlight-toolbar-tab-underline: #d0d0d0;
         --highlight-text-select: #96c8fd;
         --highlight-fill-button-hover: #ffe165;
diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index 5e75793b39..c9e829fa05 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -31,8 +31,8 @@
         --highlight-primary-dialog-button-hover: #fcfcfc;
         --highlight-accent-button-hover: #75a2d6;
         --highlight-accent-button-pressed: #89afdc;
-        --highlight-header-button-hover: fade(#fff, 5%);
-        --highlight-header-button-pressed: fade(#fff, 15%);
+        --highlight-header-button-hover: fade(#fff, 15%);
+        --highlight-header-button-pressed: fade(#fff, 25%);
         --highlight-toolbar-tab-underline: #ddd;
         --highlight-text-select: #96c8fd;
         --highlight-fill-button-hover: #ffe165;
diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less
index d4bb12d32e..7a5fb3f394 100644
--- a/apps/common/main/resources/less/colors-table-ie-fix.less
+++ b/apps/common/main/resources/less/colors-table-ie-fix.less
@@ -28,8 +28,8 @@
 @highlight-button-pressed-ie: #7d858c;
 @highlight-button-pressed-hover-ie: #7d858c;
 @highlight-primary-dialog-button-hover-ie: #666d73;
-@highlight-header-button-hover-ie: fade(#fff, 20%);
-@highlight-header-button-pressed-ie: fade(#000, 20%);
+@highlight-header-button-hover-ie: fade(#000, 15%);
+@highlight-header-button-pressed-ie: fade(#000, 25%);
 @highlight-toolbar-tab-underline-ie: #444;
 @highlight-text-select-ie: #3494fb;
 @highlight-accent-button-hover-ie: #375478;
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 5456980747..3ead50525a 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -42,8 +42,8 @@
     --highlight-primary-dialog-button-hover: #1c1c1c;
     --highlight-accent-button-hover: #375478;
     --highlight-accent-button-pressed: #293f59;
-    --highlight-header-button-hover: fade(#fff, 15%);
-    --highlight-header-button-pressed: fade(#fff, 25%);
+    --highlight-header-button-hover: fade(#000, 15%);
+    --highlight-header-button-pressed: fade(#000, 25%);
     --highlight-toolbar-tab-underline: #444;
     --highlight-text-select: #3494fb;
     --highlight-fill-button-hover: #ffe165;
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 2855e0fabc..f37cac8087 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -96,7 +96,7 @@
         flex-grow: 1;
         display: flex;
         justify-content: center;
-        padding: 4px 2px;
+        padding: 0px 2px;
         overflow: hidden;
         flex-shrink: 0;
     }
@@ -111,14 +111,19 @@
         color: @text-toolbar-header;
         background-color: transparent;
         border: 0 none;
-        padding: 1px 5px;
+        border-radius: 1px;
+        padding: 1px 8px;
         cursor: default;
         line-height: 24px;
 
-        &:hover:not(:disabled),&:focus {
-            box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
-            box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
-            border-radius: 1px;
+        &:hover:not(:disabled):not(:focus){
+            background-color: @highlight-header-button-hover-ie;
+            background-color: @highlight-header-button-hover;
+            cursor: text;
+        }
+        &:focus{
+            background-color: @highlight-header-button-pressed-ie;
+            background-color: @highlight-header-button-pressed;
             cursor: text;
         }
         .rtl & {
@@ -126,6 +131,11 @@
         }
     }
 
+    #box-doc-name, #box-right-btn-group {
+        padding-bottom: @scaled-one-px-value-ie;
+        padding-bottom: @scaled-one-px-value;
+    }
+
     #rib-save-status {
         white-space: nowrap;
         &.locked {
@@ -575,7 +585,7 @@
         display: flex;
         justify-content: center;
         overflow: hidden;
-        padding: 4px 2px;
+        padding: 0px 2px;
     }
 
     #title-doc-name {
@@ -585,15 +595,21 @@
         text-align: center;
         .font-size-medium();
         line-height: 24px;
-        padding: 1px 5px;
+        padding: 1px 8px;
         background-color: transparent;
         border: 0 none;
         cursor: default;
         .user-select(text);
 
-        &:hover:not(:disabled),&:focus{
-            box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
-            box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
+        &:hover:not(:disabled):not(:focus){
+            background-color: @highlight-header-button-hover-ie;
+            background-color: @highlight-header-button-hover;
+            border-radius: 1px;
+            cursor: text;
+        }
+        &:focus{
+            background-color: @highlight-header-button-pressed-ie;
+            background-color: @highlight-header-button-pressed;
             border-radius: 1px;
             cursor: text;
         }
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index af27511731..4e3e09ba64 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -488,8 +488,8 @@
 
         .tabs, .box-tabs .extra {
             background-color: transparent;
-            box-shadow: inset 0 -1px 0 0 @border-regular-control-ie;
-            box-shadow: inset 0 -1px 0 0 @border-regular-control;
+            box-shadow: inset 0 calc(-1 * @scaled-one-px-value-ie) 0 0 @border-regular-control-ie;
+            box-shadow: inset 0 calc(-1 * @scaled-one-px-value) 0 0 @border-regular-control;
         }
 
         .tabs {
@@ -679,9 +679,15 @@
         #rib-doc-name {
             color: @text-normal-ie;
             color: @text-normal;
-            &:hover:not(:disabled),&:focus {
-                box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-button-hover-ie;
-                box-shadow: 0 0 0 @scaled-one-px-value @highlight-button-hover;
+            &:hover:not(:disabled):not(:focus){
+                background-color: @highlight-button-hover-ie;
+                background-color: @highlight-button-hover;
+            }
+            &:focus{
+                color: @text-normal-pressed-ie;
+                color: @text-normal-pressed;
+                background-color: @highlight-button-pressed-ie;
+                background-color: @highlight-button-pressed;
             }
         }
 
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 6a31179b36..e9bd397e58 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -15,7 +15,7 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #555;
-            --highlight-header-button-hover: rgba(255,255,255,.05);
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #555;
             /*--canvas-content-background: #fff;*/
             --skeleton-canvas-page-border: #555;
@@ -34,7 +34,7 @@
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
             --highlight-button-hover: #e0e0e0;
-            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --loadmask-canvas-page-border: #ccc;
         }
@@ -93,8 +93,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -103,8 +103,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index dfb4681677..b4fbae6657 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -71,8 +71,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -81,8 +81,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html
index 5ba56a40df..c1d4b774df 100644
--- a/apps/pdfeditor/main/index.html
+++ b/apps/pdfeditor/main/index.html
@@ -15,7 +15,7 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #555;
-            --highlight-header-button-hover: rgba(255,255,255,.05);
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #555;
             /*--canvas-content-background: #fff;*/
             --skeleton-canvas-page-border: #555;
@@ -34,7 +34,7 @@
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
             --highlight-button-hover: #e0e0e0;
-            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --loadmask-canvas-page-border: #ccc;
         }
@@ -88,8 +88,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -98,8 +98,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/pdfeditor/main/index.html.deploy b/apps/pdfeditor/main/index.html.deploy
index 7acee21652..a7c9dca009 100644
--- a/apps/pdfeditor/main/index.html.deploy
+++ b/apps/pdfeditor/main/index.html.deploy
@@ -66,8 +66,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -76,8 +76,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index 127aacda06..ce4cf3d010 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -14,13 +14,22 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #606060;
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
             --canvas-page-border: #555;
         }
 
         .theme-classic-light {
-            --highlight-button-hover: #d8dadc;
+        }
+
+        .theme-light {
+            --background-toolbar: #f7f7f7;
+            /*--border-toolbar: #cbcbcb;*/
+            --highlight-button-hover: #ccc;
+            --highlight-header-button-hover: rgba(0,0,0,.15);
+            --canvas-background: #eee;
+            --canvas-page-border: #ccc;
         }
 
         .loadmask {
@@ -31,8 +40,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1002;
         }
 
@@ -72,7 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -81,12 +91,13 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            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;
@@ -103,8 +114,8 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ccc;
-            background: var(--highlight-button-hover, #ccc);
+            background: #d8dadc;
+            background: var(--highlight-button-hover, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -171,8 +182,8 @@
             width: 100%;
             background: #fff;
             background: var(--canvas-content-background, #fff);
-            border: 1px solid #ccc;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
+            border: 1px solid #bbbec2;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 40060e5e0a..20a575b6e8 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -19,8 +19,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1002;
         }
 
@@ -60,7 +60,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -69,12 +70,13 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            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;
@@ -91,8 +93,8 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ccc;
-            background: var(--highlight-button-hover, #ccc);
+            background: #d8dadc;
+            background: var(--highlight-button-hover, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -159,8 +161,8 @@
             width: 100%;
             background: #fff;
             background: var(--canvas-content-background, #fff);
-            border: 1px solid #ccc;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
+            border: 1px solid #bbbec2;
+            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 2903a07793..56eec858b9 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -14,6 +14,7 @@
             --background-normal: #333;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #606060;
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
             --canvas-page-border: #555;
@@ -22,11 +23,11 @@
         .theme-classic-light {
         }
 
-        .theme-classic-light {
+        .theme-light {
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
             --highlight-button-hover: #ccc;
-            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --canvas-page-border: #ccc;
         }
@@ -80,8 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -90,8 +91,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 3a32fe7922..eabbc1e0a1 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -59,8 +59,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -69,8 +69,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {