diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index e33631d3b..8e2a2280b 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -55,12 +55,15 @@ define([
 
         getPicker: function(color, colors) {
             if (!this.colorPicker) {
-                this.colorPicker = new Common.UI.ThemeColorPalette({
+                var config = {
                     el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
-                    transparent: this.options.transparent,
                     value: color,
                     colors: colors
-                });
+                };
+                (this.options.transparent!==undefined) && (config['transparent'] = this.options.transparent);
+                (this.options.hideEmptyColors!==undefined) && (config['hideEmptyColors'] = this.options.hideEmptyColors);
+
+                this.colorPicker = new Common.UI.ThemeColorPalette(config);
                 this.colorPicker.on('select', _.bind(this.onColorSelect, this));
                 this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
                 if (this.options.auto) {
@@ -80,7 +83,7 @@ define([
         getMenu: function(options) {
             if (typeof this.menu !== 'object') {
                 options = options || this.options;
-                var height = options.paletteHeight || 240,
+                var height = options.paletteHeight ? options.paletteHeight + 'px' : 'auto',
                     id = Common.UI.getId(),
                     auto = [];
                 if (options.auto) {
@@ -98,7 +101,8 @@ define([
                     cls: 'shifted-left',
                     additionalAlign: options.additionalAlign,
                     items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
-                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 164px; height:' + height + '; display: inline-block;"></div>') },
+                        {caption: '--'},
                         {
                             id: id + '-color-new',
                             template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')
diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index b2f831021..1af6e825b 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -52,7 +52,9 @@ define([
             dynamiccolors: 10,
             standardcolors: 10,
             themecolors: 10,
+            columns: 10,
             effects: 5,
+            hideEmptyColors: true,
             allowReselect: true,
             transparent: false,
             value: '000000',
@@ -62,7 +64,7 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 8px 12px 12px;">' +
+                '<div style="padding: 4px 0 0 12px;">' +
                 '<% var me = this; var idx = 0; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
                     '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
@@ -76,6 +78,9 @@ define([
                         '<em><span unselectable="on">&#160;</span></em>' +
                         '</a>' +
                     '<% } else if (me.isEffect(item)) { %>' +
+                        '<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
+                        '<div style="width:100%;height:0;float:left;"></div>' +
+                        '<% } %>' +
                         '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
                         '</a>' +
@@ -85,9 +90,11 @@ define([
                 '<% }); %>' +
                 '</div>' +
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
-                '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' +
+                '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
+                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
+                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
-                        '<a class="color-dynamic-<%=i%> dynamic-empty-color" color="" idx="<%=idx++%>">' +
+                        '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
                         '<em><span unselectable="on">&#160;</span></em></a>' +
                     '<% } %>' +
                 '<% } %>' +
@@ -103,10 +110,12 @@ define([
                 el = me.$el || $(this.el);
 
             this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
+            this.columns = me.options.columns || 0;
             this.enableKeyEvents= me.options.enableKeyEvents;
             this.tabindex = me.options.tabindex || 0;
             this.outerMenu = me.options.outerMenu;
             this.lastSelectedIdx = -1;
+            this.emptyColorsClass = me.options.hideEmptyColors ? 'hidden' : '';
 
             me.colorItems = [];
             if (me.options.keyMoveDirection=='vertical')
@@ -123,6 +132,15 @@ define([
                 this.updateColors(this.options.updateColorsArr[0], this.options.updateColorsArr[1]);
             if (this.options.value)
                 this.select(this.options.value, true);
+            if (this.options.outerMenu && this.options.outerMenu.focusOnShow && this.options.outerMenu.menu) {
+                el.addClass('focused');
+                this.options.outerMenu.menu.on('show:after', function(menu) {
+                    _.delay(function() {
+                        me.showLastSelected();
+                        me.focus();
+                    }, 10);
+                });
+            }
             this.updateCustomColors();
             el.closest('.btn-group').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
             el.closest('.dropdown-submenu').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
@@ -178,9 +196,12 @@ define([
                 colors = colors ? colors.split(',') : [];
 
                 var i = -1, colorEl, c = colors.length < this.options.dynamiccolors ? colors.length : this.options.dynamiccolors;
+                if (this.options.hideEmptyColors && this._layoutParams && el.find('.dynamic-empty-color').length !== (this.options.dynamiccolors - c)) {// recalc indexed if change custom colors
+                    this._layoutParams = undefined;
+                }
                 while (++i < c) {
                     colorEl = el.find('.color-dynamic-'+ i);
-                    colorEl.removeClass('dynamic-empty-color').attr('color', colors[i]);
+                    colorEl.removeClass('dynamic-empty-color').removeClass(this.emptyColorsClass).attr('color', colors[i]);
                     colorEl.find('span').css({
                         'background-color': '#'+colors[i]
                     });
@@ -193,12 +214,13 @@ define([
                 while (i < this.options.dynamiccolors) {
                     colorEl = el.find('.color-dynamic-'+ i);
                     colorEl.removeAttr('color');
-                    colorEl.addClass('dynamic-empty-color');
+                    colorEl.addClass('dynamic-empty-color').addClass(this.emptyColorsClass);
                     colorEl.find('span').css({
                         'background-color': 'transparent'
                     });
                     i++;
                 }
+                el.find('.palette-color-dynamiccolors').toggleClass(this.emptyColorsClass, c===0);
             }
         },
 
@@ -207,7 +229,7 @@ define([
             var target = $(e.target).closest('a');
             var color, cmp;
 
-            if (target.length==0) return;
+            if (target.length==0) return false;
 
             if (target.hasClass('color-transparent') ) {
                 me.clearSelection(true);
@@ -275,12 +297,16 @@ define([
                 if (child.length==0) {
                     this.updateCustomColors();
                     child = el.find('.color-dynamic-' + (this.options.dynamiccolors - 1));
+                } else {
+                    if (this.options.hideEmptyColors && this._layoutParams) // recalc indexed
+                        this._layoutParams = undefined;
                 }
 
-                child.first().removeClass('dynamic-empty-color').addClass(this.selectedCls).attr('color', color[1]);
+                child.first().removeClass('dynamic-empty-color').removeClass(this.emptyColorsClass).addClass(this.selectedCls).attr('color', color[1]);
                 child.first().find('span').css({
                     'background-color': '#'+color[1]
                 });
+                el.find('.palette-color-dynamiccolors').removeClass(this.emptyColorsClass);
                 this.select(color[1], true);
             }
         },
@@ -493,7 +519,7 @@ define([
             var arr = [],
                 len = (themecolors>0 && effects>0) ? themecolors * effects : 0;
             if (themecolors>0) {
-                arr = [this.textThemeColors, '-'];
+                arr = [this.textThemeColors];
                 for (var i=0; i<themecolors; i++)
                     arr.push({color: 'FFFFFF', effectId: 1});
 
@@ -502,10 +528,10 @@ define([
                     arr.push({color: 'FFFFFF', effectId: 1});
 
                 if (standardcolors)
-                    arr.push('-', '--', '-');
+                    arr.push('-');
             }
             if (standardcolors) {
-                arr.push(this.textStandartColors, '-');
+                arr.push(this.textStandartColors);
                 if (transparent) {
                     arr.push('transparent');
                     standardcolors--;
@@ -513,8 +539,6 @@ define([
                 for (var i=0; i<standardcolors; i++)
                     arr.push('FFFFFF');
             }
-            if (this.options.dynamiccolors && (themecolors || standardcolors))
-                arr.push('-', '--');
             return arr;
         },
 
@@ -650,6 +674,7 @@ define([
         },
 
         textThemeColors         : 'Theme Colors',
-        textStandartColors      : 'Standart Colors'
+        textStandartColors      : 'Standard Colors',
+        textRecentColors        : 'Recent Colors'
     }, Common.UI.ThemeColorPalette || {}));
 });
\ No newline at end of file
diff --git a/apps/common/main/lib/extend/Bootstrap.js b/apps/common/main/lib/extend/Bootstrap.js
index f5ae4fedc..5f6593b55 100755
--- a/apps/common/main/lib/extend/Bootstrap.js
+++ b/apps/common/main/lib/extend/Bootstrap.js
@@ -128,8 +128,9 @@ function patchDropDownKeyDown(e) {
                  var mnu = $('> [role=menu]', li),
                     $subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'),
                     $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'),
+                    $palette = mnu.find('> li:not(.divider):not(.disabled):visible .theme-colorpalette.focused'),
                     $internal_menu = mnu.find('> li:not(.divider):not(.disabled):visible ul.internal-menu');
-                if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1)
+                if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1 && $palette.length<1)
                     ($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus();
             }, 250);
         }
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 0b090f8c1..840465c8d 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -159,6 +159,7 @@
         height: @scaled-one-px-value;
         background-color: @border-divider-ie;
         background-color: @border-divider;
+        margin: 4px 0;
     }
 
     .dataview {
diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less
index 9d81c90fd..3c71fba63 100644
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@@ -14,6 +14,13 @@
         }
     }
 
+    &.palette-large em {
+        span{
+            height: 28px;
+            width: 28px;
+        }
+    }
+
     a {
         padding: 0;
         margin: calc(1px - 1px / @pixel-ratio-factor);
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 7125ea6c0..4386d3cd4 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -991,9 +991,9 @@ define([
                     if (this._state.clrhighlight != -1) {
                         this.toolbar.mnuHighlightTransparent.setChecked(true, true);
 
-                        if (this.toolbar.mnuHighlightColorPicker.cmpEl) {
+                        if (this.toolbar.mnuHighlightColorPicker) {
                             this._state.clrhighlight = -1;
-                            this.toolbar.mnuHighlightColorPicker.select(null, true);
+                            this.toolbar.mnuHighlightColorPicker.clearSelection();
                         }
                     }
                 } else if (c !== null) {
@@ -1001,13 +1001,13 @@ define([
                         this.toolbar.mnuHighlightTransparent.setChecked(false);
                         this._state.clrhighlight = c.get_hex().toUpperCase();
 
-                        if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
-                            this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true);
+                        if ( this.toolbar.mnuHighlightColorPicker && _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
+                            this.toolbar.mnuHighlightColorPicker.selectByRGB(this._state.clrhighlight, true);
                     }
                 }  else {
                     if ( this._state.clrhighlight !== c) {
                         this.toolbar.mnuHighlightTransparent.setChecked(false, true);
-                        this.toolbar.mnuHighlightColorPicker.select(null, true);
+                        this.toolbar.mnuHighlightColorPicker && this.toolbar.mnuHighlightColorPicker.clearSelection();
                         this._state.clrhighlight = c;
                     }
                 }
diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index f8c10561a..c0a71b0b6 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
@@ -141,7 +141,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                     '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
                     '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
                 ],
-                paletteHeight: 94,
                 cls: 'move-focus',
                 takeFocusOnClose: true
             });
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js
index 2af5d2f4f..17cfd67b3 100644
--- a/apps/documenteditor/main/app/view/FormSettings.js
+++ b/apps/documenteditor/main/app/view/FormSettings.js
@@ -1150,7 +1150,6 @@ define([
                         '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
                         '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
                     ],
-                    paletteHeight: 94,
                     dataHint: '1',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'big'
diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js
index b6c2d3f5d..d3a0a2199 100644
--- a/apps/documenteditor/main/app/view/FormsTab.js
+++ b/apps/documenteditor/main/app/view/FormsTab.js
@@ -258,7 +258,6 @@ define([
                                     '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
                                     '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
                                 ],
-                        paletteHeight: 94,
                         dataHint: '1',
                         dataHintDirection: 'left',
                         dataHintOffset: 'small'
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 4276b6948..35fdb5245 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -355,7 +355,7 @@ define([
                         menu: new Common.UI.Menu({
                             style: 'min-width: 100px;',
                             items: [
-                                {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 145px; display: inline-block;" class="palette-large"></div>')},
                                 {caption: '--'},
                                 this.mnuHighlightTransparent = new Common.UI.MenuItem({
                                     caption: this.strMenuNoFill,
@@ -898,7 +898,8 @@ define([
                                                 checkable: true
                                             }),
                                             {caption: '--'},
-                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 94px; margin: 10px;"></div>')},
+                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 164px; display: inline-block;"></div>')},
+                                            {caption: '--'},
                                             {
                                                 id: 'id-toolbar-menu-new-control-color',
                                                 template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>')
@@ -2329,15 +2330,19 @@ define([
                 if (this.btnHighlightColor.cmpEl) {
                     this.btnHighlightColor.currentColor = 'FFFF00';
                     this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
-                    this.mnuHighlightColorPicker = new Common.UI.ColorPalette({
+                    this.mnuHighlightColorPicker = new Common.UI.ThemeColorPalette({
                         el: $('#id-toolbar-menu-highlight'),
                         colors: [
                             'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
                             '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
-                        ]
+                        ],
+                        value: 'FFFF00',
+                        dynamiccolors: 0,
+                        columns: 4,
+                        outerMenu: {menu: this.btnHighlightColor.menu, index: 0, focusOnShow: true}
                     });
-                    this.mnuHighlightColorPicker.select('FFFF00');
                     this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker);
+                    this.btnHighlightColor.menu.setInnerMenu([{menu: this.mnuHighlightColorPicker, index: 0}]);
                 }
 
                 if (this.btnFontColor.cmpEl) {
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index b227028a7..0038d0e0f 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -183,6 +183,7 @@
   "Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All",
   "Common.UI.SynchronizeTip.textDontShow": "Don't show this message again",
   "Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.",
+  "Common.UI.ThemeColorPalette.textRecentColors": "Recent Colors",
   "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
   "Common.UI.Themes.txtThemeClassicLight": "Classic Light",
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index c3c8b631a..cdf03f8c8 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -2000,9 +2000,9 @@ define([
                     if (this._state.clrhighlight != -1) {
                         this.toolbar.mnuHighlightTransparent.setChecked(true, true);
 
-                        if (this.toolbar.mnuHighlightColorPicker.cmpEl) {
+                        if (this.toolbar.mnuHighlightColorPicker) {
                             this._state.clrhighlight = -1;
-                            this.toolbar.mnuHighlightColorPicker.select(null, true);
+                            this.toolbar.mnuHighlightColorPicker.clearSelection();
                         }
                     }
                 } else if (c !== null) {
@@ -2010,13 +2010,13 @@ define([
                         this.toolbar.mnuHighlightTransparent.setChecked(false);
                         this._state.clrhighlight = c.get_hex().toUpperCase();
 
-                        if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
-                            this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true);
+                        if ( this.toolbar.mnuHighlightColorPicker && _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
+                            this.toolbar.mnuHighlightColorPicker.selectByRGB(this._state.clrhighlight, true);
                     }
                 }  else {
                     if ( this._state.clrhighlight !== c) {
                         this.toolbar.mnuHighlightTransparent.setChecked(false, true);
-                        this.toolbar.mnuHighlightColorPicker.select(null, true);
+                        this.toolbar.mnuHighlightColorPicker && this.toolbar.mnuHighlightColorPicker.clearSelection();
                         this._state.clrhighlight = c;
                     }
                 }
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 330f02d09..b3c0b48d6 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -414,7 +414,7 @@ define([
                         menu: new Common.UI.Menu({
                             style: 'min-width: 100px;',
                             items: [
-                                {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 145px; display: inline-block;" class="palette-large"></div>')},
                                 {caption: '--'},
                                 me.mnuHighlightTransparent = new Common.UI.MenuItem({
                                     caption: me.strMenuNoFill,
@@ -1535,15 +1535,19 @@ define([
                 if (this.btnHighlightColor.cmpEl) {
                     this.btnHighlightColor.currentColor = 'FFFF00';
                     this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
-                    this.mnuHighlightColorPicker = new Common.UI.ColorPalette({
+                    this.mnuHighlightColorPicker = new Common.UI.ThemeColorPalette({
                         el: $('#id-toolbar-menu-highlight'),
                         colors: [
                             'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
                             '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
-                        ]
+                        ],
+                        value: 'FFFF00',
+                        dynamiccolors: 0,
+                        columns: 4,
+                        outerMenu: {menu: this.btnHighlightColor.menu, index: 0, focusOnShow: true}
                     });
-                    this.mnuHighlightColorPicker.select('FFFF00');
                     this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker);
+                    this.btnHighlightColor.menu.setInnerMenu([{menu: this.mnuHighlightColorPicker, index: 0}]);
                 }
             },
 
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index e90c5e7f2..1fdbb3cf9 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -270,6 +270,7 @@
   "Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All",
   "Common.UI.SynchronizeTip.textDontShow": "Don't show this message again",
   "Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.",
+  "Common.UI.ThemeColorPalette.textRecentColors": "Recent Colors",
   "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
   "Common.UI.Themes.txtThemeClassicLight": "Classic Light",
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
index bab9b24b5..1b55567ce 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
@@ -531,8 +531,13 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
                                 items       : [
-                                    { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), stopPropagation: true },
-                                    { template: _.template('<a id="format-rules-borders-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
+                                    { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 164px; display: inline-block;"></div>'), stopPropagation: true },
+                                    {caption: '--'},
+                                    {
+                                        id: "format-rules-borders-menu-new-bordercolor",
+                                        template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
+                                        stopPropagation: true
+                                    }
                                 ]
                             })
                         })
@@ -542,8 +547,10 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
             this.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
             this.btnBorders.on('click', _.bind(this.onBorders, this));
             this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
-                el: $('#format-rules-borders-menu-bordercolor')
+                el: $('#format-rules-borders-menu-bordercolor'),
+                outerMenu: {menu: this.mnuBorderColor.menu, index: 0, focusOnShow: true}
             });
+            this.mnuBorderColor.menu.setInnerMenu([{menu: this.mnuBorderColorPicker, index: 0}]);
             this.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
             $('#format-rules-borders-menu-new-bordercolor').on('click', _.bind(function() {
                 me.mnuBorderColorPicker.addNewColor();
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 19827c534..332019482 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -335,8 +335,12 @@ define([
                     menuAlign: 'tl-tr',
                     cls: 'color-tab',
                     items: [
-                        { template: _.template('<div id="id-tab-menu-color" style="width: 169px; height: 240px;"></div>') },
-                        { template: _.template('<a id="id-tab-menu-new-color" style="padding-left:12px;">' + me.textNewColor + '</a>') }
+                        { template: _.template('<div id="id-tab-menu-color" style="width: 164px;display: inline-block;"></div>') },
+                        {caption: '--'},
+                        {
+                            id: "id-tab-menu-new-color",
+                            template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + me.textNewColor + '</a>')
+                        }
                     ]
                 });
 
@@ -373,11 +377,15 @@ define([
                 }).on('render:after', function(btn) {
                         me.mnuTabColor = new Common.UI.ThemeColorPalette({
                             el: $('#id-tab-menu-color'),
+                            outerMenu: {menu: menuColorItems, index: 0, focusOnShow: true},
                             transparent: true
                         });
-
+                        menuColorItems.setInnerMenu([{menu: me.mnuTabColor, index: 0}]);
                         me.mnuTabColor.on('select', function(picker, color) {
                             me.fireEvent('sheet:setcolor', [color]);
+                            setTimeout(function(){
+                                me.tabMenu.hide();
+                            }, 1);
                         });
                     });
 
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 0572660fd..26cc63ec1 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -2120,16 +2120,23 @@ define([
                                         stopPropagation: true
                                     },
                                     {caption: '--'},
-                                    { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 240px;"></div>'), stopPropagation: true },
-                                    { template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
+                                    { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 164px;display: inline-block;"></div>'), stopPropagation: true },
+                                    {caption: '--'},
+                                    {
+                                        id: "id-toolbar-menu-new-bordercolor",
+                                        template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
+                                        stopPropagation: true
+                                    }
                                 ]
                             })
                         })
                     ]
                 }));
                 this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
-                    el: $('#id-toolbar-menu-bordercolor')
+                    el: $('#id-toolbar-menu-bordercolor'),
+                    outerMenu: {menu: this.mnuBorderColor.menu, index: 2}
                 });
+                this.mnuBorderColor.menu.setInnerMenu([{menu: this.mnuBorderColorPicker, index: 2}]);
             }
 
             if ( this.btnInsertChart ) {
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 3920e2876..ce6ccab97 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -128,6 +128,7 @@
   "Common.UI.SearchDialog.txtBtnReplaceAll": "Replace All",
   "Common.UI.SynchronizeTip.textDontShow": "Don't show this message again",
   "Common.UI.SynchronizeTip.textSynchronize": "The document has been changed by another user.<br>Please click to save your changes and reload the updates.",
+  "Common.UI.ThemeColorPalette.textRecentColors": "Recent Colors",
   "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
   "Common.UI.Themes.txtThemeClassicLight": "Classic Light",