diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 42fdf831ca..eca408c00b 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -414,6 +414,14 @@ define([
                         $html.find('#slot-btn-back').hide();
                         this.labelDocName.hide();
 
+                        //TODO: for new design representation only
+                        this.labelDocName = $('#box-document-title > #title-doc-name');
+                        this.labelDocName.text = function (str) {this.val(str);};
+                        this.labelDocName.text( this.documentCaption );
+
+                        $('.toolbar-fullview-panel').addClass('new-doctitle-offset');
+                        /***********/
+
                         if ( config.isOffline )
                             $saveStatus = false;
                     } else {
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 67c665f3a3..af24cab25a 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -239,4 +239,27 @@
         width: 20px;
         height: 20px;
     }
-}
\ No newline at end of file
+}
+
+#box-document-title {
+    background-color: @tabs-bg-color;
+
+    #title-doc-name {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: center;
+        font-size: 12px;
+        width: 100%;
+        height: 100%;
+
+        color: #d3d9e3;
+        background-color: transparent;
+        border: 0 none;
+        cursor: default;
+   }
+}
+
+.toolbar-fullview-panel.new-doctitle-offset {
+    top: @height-tabs + 26;
+}
diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index fe6907548c..b34a955f85 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -75,7 +75,8 @@ define([
                         toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
+                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                                Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
                     }
                 }
             });
@@ -113,11 +114,18 @@ define([
 
         onAppShowed: function (config) {
             var me = this;
+            me.appConfig = config;
 
             if ( !config.isEdit ||
                 ( !Common.localStorage.itemExists("de-compact-toolbar") &&
                 config.customization && config.customization.compactToolbar )) {
-                me.viewport.vlayout.panels[0].height = 32;
+
+                var panel = me.viewport.vlayout.getItem('toolbar');
+                if ( panel ) panel.height = Common.Utils.InternalSettings.get('toolbar-height-compact');
+            }
+
+            if ( config.isDesktopApp ) {
+                me.viewport.vlayout.getItem('doc-title').el.show();
             }
         },
 
diff --git a/apps/documenteditor/main/app/template/Viewport.template b/apps/documenteditor/main/app/template/Viewport.template
index a0d2cb205d..2535307dd8 100644
--- a/apps/documenteditor/main/app/template/Viewport.template
+++ b/apps/documenteditor/main/app/template/Viewport.template
@@ -1,5 +1,8 @@
 <div class="layout-region">
     <div id="viewport-vbox-layout" class="layout-ct vbox">
+        <section id="box-document-title" class="layout-item">
+            <input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
+        </section>
         <section class="layout-ct">
             <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
         </section>
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js
index b4547c48a4..8c4b6ba1a0 100644
--- a/apps/documenteditor/main/app/view/Viewport.js
+++ b/apps/documenteditor/main/app/view/Viewport.js
@@ -82,10 +82,18 @@ define([
             var $container = $('#viewport-vbox-layout', this.$el);
             this.vlayout = new Common.UI.VBoxLayout({
                 box: $container,
-                items: [{
+                items: [
+                    {
+                        el: $container.find(' > .layout-item#box-document-title').hide(),
+                        alias: 'doc-title',
+                        height: Common.Utils.InternalSettings.get('doc-title-height')
+                    },
+                    {
                         el: $container.find(' > .layout-item#toolbar'),
+                        alias: 'toolbar',
                         // rely: true
-                        height: Common.localStorage.getBool('de-compact-toolbar') ? 32 : 32+67
+                        height: Common.localStorage.getBool('de-compact-toolbar') ?
+                            Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal')
                     }, {
                         el: $container.find(' > .layout-item.middle'),
                         stretch: true
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index fd84706f4c..2b1c918b59 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -1,5 +1,6 @@
 
-@tabs-bg-color: #4f6279;
+//@tabs-bg-color: #4f6279;
+@tabs-bg-color: #446995;
 
 #toolbar {
     //z-index: 101;
diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js
index 9d90c44850..c07ca3bec1 100644
--- a/apps/presentationeditor/main/app/controller/Viewport.js
+++ b/apps/presentationeditor/main/app/controller/Viewport.js
@@ -76,7 +76,8 @@ define([
                         toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
+                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                            Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
                     }
                 },
                 // Events generated by main view
@@ -116,12 +117,17 @@ define([
 
         onAppShowed: function (config) {
             var me = this;
+            me.appConfig = config;
 
             if ( !config.isEdit ||
                 ( !Common.localStorage.itemExists("pe-compact-toolbar") &&
                     config.customization && config.customization.compactToolbar ))
             {
-                me.viewport.vlayout.panels[0].height = 32;
+                me.viewport.vlayout.getItem('toolbar').height = Common.Utils.InternalSettings.get('toolbar-height-compact');
+            }
+
+            if ( config.isDesktopApp ) {
+                me.viewport.vlayout.getItem('doc-title').el.show();
             }
         },
 
diff --git a/apps/presentationeditor/main/app/template/Viewport.template b/apps/presentationeditor/main/app/template/Viewport.template
index 2a51210165..40c80aae50 100644
--- a/apps/presentationeditor/main/app/template/Viewport.template
+++ b/apps/presentationeditor/main/app/template/Viewport.template
@@ -4,6 +4,9 @@
         <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
     </section>
     <div id="viewport-vbox-layout" class="layout-ct vbox">
+        <section id="box-document-title" class="layout-item">
+            <input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
+        </section>
         <div id="toolbar" class="layout-item"></div>
         <div class="layout-item middle">
             <div id="viewport-hbox-layout" class="layout-ct hbox">
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js
index e1be9b2d20..20de5b7531 100644
--- a/apps/presentationeditor/main/app/view/Viewport.js
+++ b/apps/presentationeditor/main/app/view/Viewport.js
@@ -85,14 +85,22 @@ define([
             var items = $container.find(' > .layout-item');
             this.vlayout = new Common.UI.VBoxLayout({
                 box: $container,
-                items: [{
-                    el: items[0],
-                    height: Common.localStorage.getBool('pe-compact-toolbar') ? 32 : 32+67
-                }, {
+                items: [
+                {
+                    el: $container.find(' > .layout-item#box-document-title').hide(),
+                    alias: 'doc-title',
+                    height: Common.Utils.InternalSettings.get('doc-title-height')
+                },
+                {
                     el: items[1],
-                    stretch: true
+                    alias: 'toolbar',
+                    height: Common.localStorage.getBool('pe-compact-toolbar') ?
+                        Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal')
                 }, {
                     el: items[2],
+                    stretch: true
+                }, {
+                    el: items[3],
                     height: 25
                 }]
             });
diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js
index 3d2095fc14..412d34df2c 100644
--- a/apps/spreadsheeteditor/main/app/controller/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js
@@ -74,7 +74,8 @@ define([
                         toolbar.setExtra('left', me.header.getPanel('left', config));
                     },
                     'view:compact'  : function (toolbar, state) {
-                        me.viewport.vlayout.panels[0].height = state ? 32 : 32+67;
+                        me.viewport.vlayout.getItem('toolbar').height = state ?
+                            Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
                     }
                 }
             });
@@ -88,15 +89,20 @@ define([
 
         onAppShowed: function (config) {
             var me = this;
+            me.appConfig = config;
 
             if ( !config.isEdit ||
                     ( !Common.localStorage.itemExists("sse-compact-toolbar") &&
                         config.customization && config.customization.compactToolbar ))
             {
-                me.viewport.vlayout.panels[0].height = 32;
+                me.viewport.vlayout.getItem('toolbar').height = Common.Utils.InternalSettings.get('toolbar-height-compact');
             } else
             if ( config.isEditDiagram || config.isEditMailMerge ) {
-                me.viewport.vlayout.panels[0].height = 41;
+                me.viewport.vlayout.getItem('toolbar').height = 41;
+            }
+
+            if ( config.isDesktopApp ) {
+                me.viewport.vlayout.getItem('doc-title').el.show();
             }
         },
 
diff --git a/apps/spreadsheeteditor/main/app/template/Viewport.template b/apps/spreadsheeteditor/main/app/template/Viewport.template
index b6c6b4ce59..17a3911e81 100644
--- a/apps/spreadsheeteditor/main/app/template/Viewport.template
+++ b/apps/spreadsheeteditor/main/app/template/Viewport.template
@@ -1,5 +1,8 @@
 <div class="layout-region">
     <div id="viewport-vbox-layout" class="layout-ct vbox">
+        <section id="box-document-title" class="layout-item">
+            <input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
+        </section>
         <section class="layout-ct">
             <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
         </section>
diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js
index 86c059741e..499bd7b9e4 100644
--- a/apps/spreadsheeteditor/main/app/view/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/view/Viewport.js
@@ -87,16 +87,20 @@ define([
                 box: $container,
                 items: [
                 {
-                    // el: items[0],    // decorative element for view mode for desktop
-                    // height: 5
-                // }, {
-                    el: items[0],
-                    height: Common.localStorage.getBool('sse-compact-toolbar') ? 32 : 32+67
-                }, {
+                    el: $container.find(' > .layout-item#box-document-title').hide(),
+                    alias: 'doc-title',
+                    height: Common.Utils.InternalSettings.get('doc-title-height')
+                },
+                {
                     el: items[1],
-                    stretch: true
+                    alias: 'toolbar',
+                    height: Common.localStorage.getBool('sse-compact-toolbar') ?
+                        Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal')
                 }, {
                     el: items[2],
+                    stretch: true
+                }, {
+                    el: items[3],
                     height: 25
                 }]
             });