diff --git a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
index 6c75c348e..fe9a000b8 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -172,32 +172,36 @@
     </div>
 </div>
 <div id="id-adv-paragraph-tabs" class="settings-panel">
-    <div class="inner-content">
-        <div class="padding-small" style="display: inline-block;">
-            <label class="input-label"><%= scope.textTabPosition %></label>
-            <div id="paraadv-spin-tab"></div>
-        </div>
-        <div class="padding-small" style="display: inline-block; float: right;">
-            <label class="input-label"><%= scope.textDefault %></label>
-            <div id="paraadv-spin-default-tab"></div>
-        </div>
-        <div class="padding-large">
-            <div id="paraadv-list-tabs" style="width:180px; height: 94px;"></div>
-        </div>
-        <div class="padding-large" style="display: inline-block;margin-right: 7px;">
-            <label class="input-label"><%= scope.textAlign %></label>
-            <div id="paraadv-cmb-align"></div>
-        </div>
-        <div class="padding-large" style="display: inline-block;">
-            <label class="input-label"><%= scope.textLeader %></label>
-            <div id="paraadv-cmb-leader"></div>
-        </div>
-        <div style="margin-bottom: 45px;"></div>
-        <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:90px;margin-right: 4px;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:90px;margin-right: 4px;"><%= scope.textRemove %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:90px;margin-right: 4px;"><%= scope.textRemoveAll %></button>
-        </div>
+    <div class="inner-content" style="width: 330px;">
+            <div class="padding-large">
+                <label class="input-label"><%= scope.textDefault %></label>
+                <div id="paraadv-spin-default-tab"></div>
+
+            </div>
+            <div>
+                <div class="padding-small" style="margin-right: 9px; display: inline-block;">
+                    <label class="input-label"><%= scope.textTabPosition %></label>
+                    <div id="paraadv-spin-tab"></div>
+                </div>
+                <div class="padding-small" style="margin-right: 9px; display: inline-block;">
+                    <label class="input-label"><%= scope.textAlign %></label>
+                    <div id="paraadv-cmb-align"></div>
+                </div>
+                <div class="padding-small" style="display: inline-block;">
+                    <label class="input-label"><%= scope.textLeader %></label>
+                    <div id="paraadv-cmb-leader"></div>
+                </div>
+            </div>
+            <div>
+                <div colspan=3 class="padding-large">
+                     <div id="paraadv-list-tabs" style="width:310px; height: 110px;"></div>
+                </div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:95px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
+                <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:95px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+                <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:95px;display: inline-block;"><%= scope.textRemoveAll %></button>
+            </div>
     </div>
 </div>
 <div id="id-adv-paragraph-margins" class="settings-panel">
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 7455e7884..114a7fd46 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -58,6 +58,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
         },
 
         initialize : function(options) {
+            var me = this;
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
@@ -129,6 +130,28 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                 {displayValue: this.textLevel + '8'},
                 {displayValue: this.textLevel + '9'}
             ];
+
+            this._arrTabAlign = [
+                { value: 1, displayValue: this.textTabLeft },
+                { value: 3, displayValue: this.textTabCenter },
+                { value: 2, displayValue: this.textTabRight }
+            ];
+            this._arrKeyTabAlign = [];
+            this._arrTabAlign.forEach(function(item) {
+                me._arrKeyTabAlign[item.value] = item.displayValue;
+            });
+
+            this._arrTabLeader = [
+                { value: Asc.c_oAscTabLeader.None,      displayValue: this.textNone },
+                { value: Asc.c_oAscTabLeader.Dot,       displayValue: '....................' },
+                { value: Asc.c_oAscTabLeader.Hyphen,    displayValue: '-----------------' },
+                { value: Asc.c_oAscTabLeader.MiddleDot, displayValue: '·················' },
+                { value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
+            ];
+            this._arrKeyTabLeader = [];
+            this._arrTabLeader.forEach(function(item) {
+                me._arrKeyTabLeader[item.value] = item.displayValue;
+            });
         },
 
         render: function() {
@@ -504,7 +527,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             this.numTab = new Common.UI.MetricSpinner({
                 el: $('#paraadv-spin-tab'),
                 step: .1,
-                width: 180,
+                width: 95,
                 defaultUnit : "cm",
                 value: '1.25 cm',
                 maxValue: 55.87,
@@ -515,7 +538,7 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             this.numDefaultTab = new Common.UI.MetricSpinner({
                 el: $('#paraadv-spin-default-tab'),
                 step: .1,
-                width: 107,
+                width: 95,
                 defaultUnit : "cm",
                 value: '1.25 cm',
                 maxValue: 55.87,
@@ -531,7 +554,15 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             this.tabList = new Common.UI.ListView({
                 el: $('#paraadv-list-tabs'),
                 emptyText: this.noTabs,
-                store: new Common.UI.DataViewStore()
+                store: new Common.UI.DataViewStore(),
+                template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
+                    '<div style="width:98px;padding-right: 5px;display: inline-block;"><%= value %></div>',
+                    '<div style="width:98px;padding-right: 5px;display: inline-block;padding-left: 7px;"><%= displayTabAlign %></div>',
+                    '<div style="width:98px;display: inline-block;padding-left: 16px;"><%= displayTabLeader %></div>',
+                    '</div>'
+                ].join(''))
             });
             this.tabList.store.comparator = function(rec) {
                 return rec.get("tabPos");
@@ -548,31 +579,21 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
 
             this.cmbAlign = new Common.UI.ComboBox({
                 el          : $('#paraadv-cmb-align'),
-                style       : 'width: 85px;',
-                menuStyle   : 'min-width: 85px;',
+                style       : 'width: 95px;',
+                menuStyle   : 'min-width: 95px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                data        : [
-                    { value: 1, displayValue: this.textTabLeft },
-                    { value: 3, displayValue: this.textTabCenter },
-                    { value: 2, displayValue: this.textTabRight }
-                ]
+                data        : this._arrTabAlign
             });
             this.cmbAlign.setValue(1);
 
             this.cmbLeader = new Common.UI.ComboBox({
                 el          : $('#paraadv-cmb-leader'),
-                style       : 'width: 85px;',
-                menuStyle   : 'min-width: 85px;',
+                style       : 'width: 95px;',
+                menuStyle   : 'min-width: 95px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                data        : [
-                    { value: Asc.c_oAscTabLeader.None,      displayValue: this.textNone },
-                    { value: Asc.c_oAscTabLeader.Dot,       displayValue: '....................' },
-                    { value: Asc.c_oAscTabLeader.Hyphen,    displayValue: '-----------------' },
-                    { value: Asc.c_oAscTabLeader.MiddleDot, displayValue: '·················' },
-                    { value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
-                ]
+                data        : this._arrTabLeader
             });
             this.cmbLeader.setValue(Asc.c_oAscTabLeader.None);
 
@@ -866,7 +887,9 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                             tabPos: pos,
                             value: parseFloat(pos.toFixed(3)) + ' ' + Common.Utils.Metric.getCurrentMetricName(),
                             tabAlign: tab.get_Value(),
-                            tabLeader: tab.asc_getLeader()
+                            tabLeader: tab.asc_getLeader(),
+                            displayTabLeader: this._arrKeyTabLeader[tab.asc_getLeader()],
+                            displayTabAlign: this._arrKeyTabAlign[tab.get_Value()]
                         });
                         arr.push(rec);
                     }
@@ -1265,7 +1288,9 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
         addTab: function(btn, eOpts){
             var val = this.numTab.getNumberValue(),
                 align = this.cmbAlign.getValue(),
-                leader = this.cmbLeader.getValue();
+                leader = this.cmbLeader.getValue(),
+                displayAlign = this._arrKeyTabAlign[align],
+                displayLeader = this._arrKeyTabLeader[leader];
 
             var store = this.tabList.store;
             var rec = store.find(function(record){
@@ -1274,6 +1299,8 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             if (rec) {
                 rec.set('tabAlign', align);
                 rec.set('tabLeader', leader);
+                rec.set('displayTabAlign', displayAlign);
+                rec.set('displayTabLeader', displayLeader);
                 this._tabListChanged = true;
             } else {
                 rec = new Common.UI.DataViewModel();
@@ -1281,7 +1308,9 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                     tabPos: val,
                     value: val + ' ' + Common.Utils.Metric.getCurrentMetricName(),
                     tabAlign: align,
-                    tabLeader: leader
+                    tabLeader: leader,
+                    displayTabLeader: displayLeader,
+                    displayTabAlign: displayAlign
                 });
                 store.add(rec);
             }