diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js
index 2ea4ac854c..772371f9f6 100644
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@@ -68,6 +68,9 @@ define([
                                     --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
                                     --sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
                                     --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05);
+                                    --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
+                                    --sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
+                                    --sk-border-radius-formula-field: 0px;
                                 }`
                 },
             },
@@ -82,10 +85,13 @@ define([
                                     --sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c;
                                     --sk-background-toolbar-header-visio: #444796; 
                                     --sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
-                                    --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
+                                    --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #e0e0e0;
                                     --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
                                     --sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
                                     --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05);
+                                    --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
+                                    --sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
+                                    --sk-border-radius-formula-field: 0px;
                                 }`
                 },
             },
@@ -105,6 +111,9 @@ define([
                                 --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
                                 --sk-canvas-background: #555; --sk-canvas-content-background: #fff;
                                 --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05);
+                                --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
+                                --sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
+                                --sk-border-radius-formula-field: 0px;
                             }
                             .content-theme-dark {
                                 --sk-canvas-content-background: #3a3a3a; --sk-canvas-page-border: #616161;
@@ -128,6 +137,9 @@ define([
                                 --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
                                 --sk-canvas-background: #555; --sk-canvas-content-background: #fff;
                                 --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05);
+                                --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
+                                --sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
+                                --sk-border-radius-formula-field: 0px;
                             }
                             .content-theme-dark {
                                 --sk-canvas-content-background: #3a3a3a;
@@ -150,6 +162,9 @@ define([
                                     --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
                                     --sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
                                     --sk-canvas-page-border: #ccc; --sk-canvas-line: rgba(0,0,0,.05);
+                                    --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0;
+                                    --sk-border-style-formula: solid; --sk-gap-formula-field: 20px;
+                                    --sk-border-radius-formula-field: 0px;
                                 }`
                 },
             },
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 8ddf2825c5..58d2d6c2b1 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -24,6 +24,11 @@
             --sk-canvas-content-background: #fff;
             --sk-canvas-page-border: #dde0e5;
             --sk-canvas-line: rgba(0,0,0,.05);
+            --sk-height-formula: 38px;
+            --sk-padding-formula: 10px 10px 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
         }
 
         /* .theme-dark, .theme-type-dark {
@@ -170,7 +175,8 @@
             top: 0;
             bottom: 0;
             left: 875px;
-            width: 690px;
+            width: inherit;
+            max-width: 690px;
             height: 45px;
         }
         .rtl .loadmask > .sktoolbar li.fat {
@@ -179,9 +185,13 @@
         }
 
         .loadmask > .skformula {
+            padding: 0 0 4px 0;
+            padding: var(--sk-padding-formula);
             height: 24px;
-            background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            height: var(--sk-height-formula);
+            background: #f7f7f7;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+            box-sizing: border-box;
         }
 
         .loadmask > .skformula ul {
@@ -189,30 +199,51 @@
             font-size: 0;
             box-sizing: border-box;
             border-style: solid;
+            border-style: var(--sk-border-style-formula);
             border-width: 1px;
             border-width: var(--scaled-one-px-value, 1px);
             border-color: #cbcbcb transparent;
             border-color: var(--border-toolbar, #cbcbcb) transparent;
+            border-top: 0 none;
+            display: flex;
+            height: 100%;
         }
 
         .loadmask > .skformula li {
             display: inline-block;
             box-sizing: border-box;
-            height: 19px;
-            width: 100%;
-            margin-left: 20px;
             background: #fff;
             background: var(--background-normal, #fff);
-            border-style: solid;
-            border-width: 1px;
-            border-width: var(--scaled-one-px-value, 1px);
-            border-color: transparent #cbcbcb;
-            border-color: transparent var(--border-toolbar, #cbcbcb);
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+            border-radius: 0px;
+            border-radius: var(--sk-border-radius-formula-field, 0px);
+            flex-grow: 1;
         }
 
         .loadmask > .skformula li:first-child {
             width: 100px;
-            margin-left: 0;
+            flex-grow: 0;
+            margin-right: 20px;
+            margin-right: var(--sk-gap-formula-field);
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li {
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li:first-child {
+            margin-right: 0;
+            margin-left: 20px;
+            margin-left: var(--sk-gap-formula-field);
+            border-right: 0 none; 
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
         }
 
         .loadmask > .placeholder {
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index b97494c37d..a8deaeb15e 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -27,6 +27,11 @@
             --sk-canvas-content-background: #fff;
             --sk-canvas-page-border: #dde0e5;
             --sk-canvas-line: rgba(0,0,0,.05);
+            --sk-height-formula: 38px;
+            --sk-padding-formula: 10px 10px 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
         }
 
         .loadmask {
@@ -144,7 +149,8 @@
             top: 0;
             bottom: 0;
             left: 875px;
-            width: 690px;
+            width: inherit;
+            max-width: 690px;
             height: 45px;
         }
         .rtl .loadmask > .sktoolbar li.fat {
@@ -153,9 +159,13 @@
         }
 
         .loadmask>.skformula {
+            padding: 0 0 4px 0;
+            padding: var(--sk-padding-formula);
             height: 24px;
-            background: #f1f1f1;
-            background: var(--background-toolbar, #f1f1f1);
+            height: var(--sk-height-formula);
+            background: #f7f7f7;
+            background-color: var(--sk-background-toolbar, #f7f7f7);
+            box-sizing: border-box;
         }
 
         .loadmask>.skformula ul {
@@ -163,30 +173,51 @@
             font-size: 0;
             box-sizing: border-box;
             border-style: solid;
+            border-style: var(--sk-border-style-formula);
             border-width: 1px;
             border-width: var(--scaled-one-px-value, 1px);
             border-color: #cbcbcb transparent;
             border-color: var(--border-toolbar, #cbcbcb) transparent;
+            border-top: 0 none;
+            display: flex;
+            height: 100%;
         }
 
         .loadmask>.skformula li {
             display: inline-block;
             box-sizing: border-box;
-            height: 19px;
-            width: 100%;
-            margin-left: 20px;
             background: #fff;
             background: var(--background-normal, #fff);
-            border-style: solid;
-            border-width: 1px;
-            border-width: var(--scaled-one-px-value, 1px);
-            border-color: #cbcbcb;
-            border-color: transparent var(--border-toolbar, #cbcbcb);
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+            border-radius: 0px;
+            border-radius: var(--sk-border-radius-formula-field, 0px);
+            flex-grow: 1;
         }
 
         .loadmask>.skformula li:first-child {
             width: 100px;
-            margin-left: 0;
+            flex-grow: 0;
+            margin-right: 20px;
+            margin-right: var(--sk-gap-formula-field);
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li {
+            border-left: 0 none; 
+            border-right: 1px solid #cbcbcb; 
+            border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
+        }
+
+        .rtl .loadmask > .skformula li:first-child {
+            margin-right: 0;
+            margin-left: 20px;
+            margin-left: var(--sk-gap-formula-field);
+            border-right: 0 none; 
+            border-left: 1px solid #cbcbcb; 
+            border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
         }
 
         .loadmask > .placeholder {