diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 1ae61b6c08..cedc33457b 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -43,6 +43,10 @@
     font-size: @value;
 }
 
+.font-sans-serif {
+    font-family: @font-family-sans-serif;
+}
+
 // User select
 .user-select(@select: none) {
     -webkit-user-select: @select;
@@ -816,11 +820,15 @@
 }
 
 .vertical-align-baseline {
-    vertical-align: baseline;
+    vertical-align: baseline !important;
     .ie & {
-        vertical-align: middle;
+        vertical-align: middle !important;
     }
 }
+
+.vertical-align-middle {
+    vertical-align: middle;
+}
 //.adaptive-solid-border(@width, @color, @borderside: all) {
 //    @lb-border: if((@borderside = all), border, e('border-@{borderside}'));
 //    @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width'));
diff --git a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
index 8790e981e1..bc36cc8da2 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -181,15 +181,15 @@
 
             </div>
             <div>
-                <div class="padding-large margin-right-8" style="display: inline-block;">
+                <div class="padding-large margin-right-8 vertical-align-middle" style="display: inline-block;">
                     <label class="input-label"><%= scope.textTabPosition %></label>
                     <div id="paraadv-spin-tab"></div>
                 </div>
-                <div class="padding-large margin-right-9" style=" display: inline-block;">
+                <div class="padding-large margin-right-9 vertical-align-middle" style=" display: inline-block;">
                     <label class="input-label"><%= scope.textAlign %></label>
                     <div id="paraadv-cmb-align"></div>
                 </div>
-                <div class="padding-large text-only" style="display: inline-block;">
+                <div class="padding-large text-only vertical-align-middle" style="display: inline-block;">
                     <label class="input-label"><%= scope.textLeader %></label>
                     <div id="paraadv-cmb-leader"></div>
                 </div>
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 323a2eb943..80225b9044 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -134,11 +134,11 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             });
 
             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: '__________' }
+                { value: Asc.c_oAscTabLeader.None,      cls: '', displayValue: this.textNone },
+                { value: Asc.c_oAscTabLeader.Dot,       cls: 'font-sans-serif', displayValue: '....................' },
+                { value: Asc.c_oAscTabLeader.Hyphen,    cls: 'font-sans-serif', displayValue: '-----------------' },
+                { value: Asc.c_oAscTabLeader.MiddleDot, cls: 'font-sans-serif', displayValue: '·················' },
+                { value: Asc.c_oAscTabLeader.Underscore,cls: 'font-sans-serif', displayValue: '__________' }
             ];
             this._arrKeyTabLeader = [];
             this._arrTabLeader.forEach(function(item) {
@@ -606,13 +606,21 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             });
             this.cmbAlign.setValue(Asc.c_oAscTabType.Left);
 
-            this.cmbLeader = new Common.UI.ComboBox({
+            this.cmbLeader = new Common.UI.ComboBoxCustom({
                 el          : $('#paraadv-cmb-leader'),
                 style       : 'width: 108px;',
                 menuStyle   : 'min-width: 108px;',
                 editable    : false,
                 cls         : 'input-group-nr',
                 data        : this._arrTabLeader,
+                itemsTemplate: _.template([
+                    '<% _.each(items, function(item) { %>',
+                    '<li id="<%= item.id %>" data-value="<%- item.value %>" class="<%= item.cls %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                    '<% }); %>',
+                ].join('')),
+                updateFormControl: function(record) {
+                    this._input && this._input.toggleClass('font-sans-serif', record.get('value')!==Asc.c_oAscTabLeader.None);
+                },
                 takeFocusOnClose: true
             });
             this.cmbLeader.setValue(Asc.c_oAscTabLeader.None);
diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 2af29f5d2f..7f200929e5 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -197,7 +197,7 @@ define([
                 }
             }, this));
 
-            this.cmbLeader = new Common.UI.ComboBox({
+            this.cmbLeader = new Common.UI.ComboBoxCustom({
                 el          : $('#tableofcontents-combo-leader'),
                 style       : 'width: 85px;',
                 menuStyle   : 'min-width: 85px;',
@@ -205,11 +205,19 @@ define([
                 takeFocusOnClose: true,
                 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.Underscore,displayValue: '__________' }
-                ]
+                    { value: Asc.c_oAscTabLeader.None,      cls: '', displayValue: this.textNone },
+                    { value: Asc.c_oAscTabLeader.Dot,       cls: 'font-sans-serif', displayValue: '....................' },
+                    { value: Asc.c_oAscTabLeader.Hyphen,    cls: 'font-sans-serif', displayValue: '-----------------' },
+                    { value: Asc.c_oAscTabLeader.Underscore,cls: 'font-sans-serif', displayValue: '__________' }
+                ],
+                itemsTemplate: _.template([
+                    '<% _.each(items, function(item) { %>',
+                    '<li id="<%= item.id %>" data-value="<%- item.value %>" class="<%= item.cls %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
+                    '<% }); %>',
+                ].join('')),
+                updateFormControl: function(record) {
+                    this._input && this._input.toggleClass('font-sans-serif', record.get('value')!==Asc.c_oAscTabLeader.None);
+                }
             });
             this.cmbLeader.setValue(Asc.c_oAscTabLeader.Dot);
             this.cmbLeader.on('selected', _.bind(function(combo, record) {