diff --git a/apps/common/mobile/resources/less/ios/_color-schema.less b/apps/common/mobile/resources/less/ios/_color-schema.less
index ce527c340..2c4dc2449 100644
--- a/apps/common/mobile/resources/less/ios/_color-schema.less
+++ b/apps/common/mobile/resources/less/ios/_color-schema.less
@@ -2,12 +2,8 @@
   cursor: pointer;
   display: block;
   background-color: #fff;
-  .item-content {
-    padding-left: 0;
-  }
   .item-inner {
     justify-content: flex-start;
-    padding-left: 16px;
   }
   .color-schema-block {
     display: flex;
@@ -22,4 +18,4 @@
     margin-left: 20px;
     color: #212121;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/common/mobile/resources/less/material/_color-schema.less b/apps/common/mobile/resources/less/material/_color-schema.less
index ce527c340..2c4dc2449 100644
--- a/apps/common/mobile/resources/less/material/_color-schema.less
+++ b/apps/common/mobile/resources/less/material/_color-schema.less
@@ -2,12 +2,8 @@
   cursor: pointer;
   display: block;
   background-color: #fff;
-  .item-content {
-    padding-left: 0;
-  }
   .item-inner {
     justify-content: flex-start;
-    padding-left: 16px;
   }
   .color-schema-block {
     display: flex;
@@ -22,4 +18,4 @@
     margin-left: 20px;
     color: #212121;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/documenteditor/mobile/app/controller/Settings.js b/apps/documenteditor/mobile/app/controller/Settings.js
index f8d781e32..cb5adf0f3 100644
--- a/apps/documenteditor/mobile/app/controller/Settings.js
+++ b/apps/documenteditor/mobile/app/controller/Settings.js
@@ -84,7 +84,6 @@ define([
             _canReview = false,
             _isReviewOnly = false,
             _fileKey,
-            templateInsert,
             _metricText = Common.Utils.Metric.getCurrentMetricName(),
             _isEdit,
             _lang;
@@ -348,28 +347,21 @@ define([
             },
 
             initPageColorSchemes: function() {
-                $('#color-schemes-content').html(templateInsert);
-                $('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
+                this.curSchemas = (this.api) ? this.api.asc_GetCurrentColorSchemeIndex() : 0;
+                this.getView('Settings').renderSchemaSettings(this.curSchemas, this.schemas);
+                $('.page[data-page=color-schemes-view] input:radio[name=color-schema]').single('change', _.bind(this.onColorSchemaChange, this));
+                Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view', '.page[data-page=color-schemes-view] .page-content');
             },
 
             onSendThemeColorSchemes: function (schemas) {
-                templateInsert = "";
-                _.each(schemas, function (schema, index) {
-                    var colors = schema.get_colors(), //schema.colors;
-                        name = schema.get_name();
-                    templateInsert = templateInsert + "<a class='color-schemes-menu item-link no-indicator'><input type='hidden' value='" + index + "'><div class='item-content'><div class='item-inner'><span class='color-schema-block'>";
-                    for (var j = 2; j < 7; j++) {
-                        var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
-                        templateInsert =  templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
-                    }
-                    templateInsert =  templateInsert + "</span><span class='text'>" + name + "</span></div></div></a>";
-                }, this);
+                this.schemas = schemas;
             },
 
-            onColorSchemaClick: function(event) {
+            onColorSchemaChange: function(event) {
                 if (this.api) {
-                    var name = $(event.currentTarget).children('input').val();
-                    this.api.asc_ChangeColorSchemeByIdx(name);
+                    var ind = $(event.currentTarget).val();
+                    if (this.curSchemas !== ind)
+                        this.api.asc_ChangeColorSchemeByIdx(parseInt(ind));
                 }
             },
 
diff --git a/apps/documenteditor/mobile/app/template/Settings.template b/apps/documenteditor/mobile/app/template/Settings.template
index cde8bf0fd..caeee9e4c 100644
--- a/apps/documenteditor/mobile/app/template/Settings.template
+++ b/apps/documenteditor/mobile/app/template/Settings.template
@@ -787,9 +787,8 @@
         <div class="page" data-page="color-schemes-view">
             <div class="page-content">
                 <div id="color-schemes-content" class="list-block">
-
+                    <ul></ul>
                 </div>
-
             </div>
         </div>
     </div>
diff --git a/apps/documenteditor/mobile/app/view/Settings.js b/apps/documenteditor/mobile/app/view/Settings.js
index 16c8fb0c7..4d34d2997 100644
--- a/apps/documenteditor/mobile/app/view/Settings.js
+++ b/apps/documenteditor/mobile/app/view/Settings.js
@@ -243,6 +243,31 @@ define([
                 }
             },
 
+            renderSchemaSettings: function(currentSchema, arrSchemas) {
+                if (arrSchemas) {
+                    var templateInsert = "";
+                    _.each(arrSchemas, function (schema, index) {
+                        var colors = schema.get_colors(),//schema.colors;
+                            name = schema.get_name();
+                        templateInsert += '<li class="color-schemes-menu"><label class="label-radio item-content"><input type="radio" name="color-schema" value="' + index + '"';
+                        if (index === currentSchema) {
+                            templateInsert += ' checked="checked"'
+                        }
+                        templateInsert += '>';
+                        if (Framework7.prototype.device.android) {
+                            templateInsert += '<div class="item-media"><i class="icon icon-form-radio"></i></div>';
+                        }
+                        templateInsert += '<div class="item-inner"><span class="color-schema-block">';
+                        for (var j = 2; j < 7; j++) {
+                            var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
+                            templateInsert = templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
+                        }
+                        templateInsert += '</span><span class="text">' + name + '</span></div></label></li>';
+                    }, this);
+                    $('#color-schemes-content ul').html(templateInsert);
+                }
+            },
+
             textFindAndReplace: 'Find and Replace',
             textSettings: 'Settings',
             textDone: 'Done',
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css
index 974bae797..cd2c98218 100644
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@@ -6372,12 +6372,8 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   display: block;
   background-color: #fff;
 }
-.color-schemes-menu .item-content {
-  padding-left: 0;
-}
 .color-schemes-menu .item-inner {
   justify-content: flex-start;
-  padding-left: 16px;
 }
 .color-schemes-menu .color-schema-block {
   display: flex;
diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css
index 450682feb..d8b2b62c0 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -5965,12 +5965,8 @@ html.phone .document-menu .list-block .item-link {
   display: block;
   background-color: #fff;
 }
-.color-schemes-menu .item-content {
-  padding-left: 0;
-}
 .color-schemes-menu .item-inner {
   justify-content: flex-start;
-  padding-left: 16px;
 }
 .color-schemes-menu .color-schema-block {
   display: flex;
diff --git a/apps/presentationeditor/mobile/app/controller/Settings.js b/apps/presentationeditor/mobile/app/controller/Settings.js
index 03ae22136..1dd72da7c 100644
--- a/apps/presentationeditor/mobile/app/controller/Settings.js
+++ b/apps/presentationeditor/mobile/app/controller/Settings.js
@@ -57,7 +57,6 @@ define([
             infoObj,
             modalView,
             _licInfo,
-            templateInsert,
             _lang;
 
         var _slideSizeArr = [
@@ -242,29 +241,22 @@ define([
                 PE.getController('Common.Controllers.Collaboration').showModal();
             },
 
-            initPageColorSchemes: function () {
-                $('#color-schemes-content').html(templateInsert);
-                $('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
+            initPageColorSchemes: function() {
+                this.curSchemas = (this.api) ? this.api.asc_GetCurrentColorSchemeIndex() : 0;
+                this.getView('Settings').renderSchemaSettings(this.curSchemas, this.schemas);
+                $('.page[data-page=color-schemes-view] input:radio[name=color-schema]').single('change', _.bind(this.onColorSchemaChange, this));
+                Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view', '.page[data-page=color-schemes-view] .page-content');
             },
 
             onSendThemeColorSchemes: function (schemas) {
-                templateInsert = "";
-                _.each(schemas, function (schema, index) {
-                    var colors = schema.get_colors(),//schema.colors;
-                        name = schema.get_name();
-                    templateInsert = templateInsert + "<a class='color-schemes-menu item-link no-indicator'><input type='hidden' value='" + index + "'><div class='item-content'><div class='item-inner'><span class='color-schema-block'>";
-                    for (var j = 2; j < 7; j++) {
-                        var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
-                        templateInsert =  templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
-                    }
-                    templateInsert =  templateInsert + "</span><span class='text'>" + name + "</span></div></div></a>";
-                }, this);
+                this.schemas = schemas;
             },
 
-            onColorSchemaClick: function (event) {
+            onColorSchemaChange: function(event) {
                 if (this.api) {
-                    var name = $(event.currentTarget).children('input').val();
-                    this.api.asc_ChangeColorSchemeByIdx(name);
+                    var ind = $(event.currentTarget).val();
+                    if (this.curSchemas !== ind)
+                        this.api.asc_ChangeColorSchemeByIdx(parseInt(ind));
                 }
             },
 
diff --git a/apps/presentationeditor/mobile/app/template/Settings.template b/apps/presentationeditor/mobile/app/template/Settings.template
index 13dfa7993..aa13a05ab 100644
--- a/apps/presentationeditor/mobile/app/template/Settings.template
+++ b/apps/presentationeditor/mobile/app/template/Settings.template
@@ -539,9 +539,8 @@
         <div class="page" data-page="color-schemes-view">
             <div class="page-content">
                 <div id="color-schemes-content" class="list-block">
-
+                    <ul></ul>
                 </div>
-
             </div>
         </div>
     </div>
diff --git a/apps/presentationeditor/mobile/app/view/Settings.js b/apps/presentationeditor/mobile/app/view/Settings.js
index 0f63fb2e8..a4b486ec5 100644
--- a/apps/presentationeditor/mobile/app/view/Settings.js
+++ b/apps/presentationeditor/mobile/app/view/Settings.js
@@ -226,6 +226,31 @@ define([
                 }
             },
 
+            renderSchemaSettings: function(currentSchema, arrSchemas) {
+                if (arrSchemas) {
+                    var templateInsert = "";
+                    _.each(arrSchemas, function (schema, index) {
+                        var colors = schema.get_colors(),//schema.colors;
+                            name = schema.get_name();
+                        templateInsert += '<li class="color-schemes-menu"><label class="label-radio item-content"><input type="radio" name="color-schema" value="' + index + '"';
+                        if (index === currentSchema) {
+                            templateInsert += ' checked="checked"'
+                        }
+                        templateInsert += '>';
+                        if (Framework7.prototype.device.android) {
+                            templateInsert += '<div class="item-media"><i class="icon icon-form-radio"></i></div>';
+                        }
+                        templateInsert += '<div class="item-inner"><span class="color-schema-block">';
+                        for (var j = 2; j < 7; j++) {
+                            var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
+                            templateInsert = templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
+                        }
+                        templateInsert += '</span><span class="text">' + name + '</span></div></label></li>';
+                    }, this);
+                    $('#color-schemes-content ul').html(templateInsert);
+                }
+            },
+
             unknownText: 'Unknown',
             textSettings: 'Settings',
             textFind: 'Find',
diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css
index 856611ab1..98390a8c0 100644
--- a/apps/presentationeditor/mobile/resources/css/app-ios.css
+++ b/apps/presentationeditor/mobile/resources/css/app-ios.css
@@ -6372,12 +6372,8 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   display: block;
   background-color: #fff;
 }
-.color-schemes-menu .item-content {
-  padding-left: 0;
-}
 .color-schemes-menu .item-inner {
   justify-content: flex-start;
-  padding-left: 16px;
 }
 .color-schemes-menu .color-schema-block {
   display: flex;
diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css
index 3855bdd11..ffd9630c7 100644
--- a/apps/presentationeditor/mobile/resources/css/app-material.css
+++ b/apps/presentationeditor/mobile/resources/css/app-material.css
@@ -5965,12 +5965,8 @@ html.phone .document-menu .list-block .item-link {
   display: block;
   background-color: #fff;
 }
-.color-schemes-menu .item-content {
-  padding-left: 0;
-}
 .color-schemes-menu .item-inner {
   justify-content: flex-start;
-  padding-left: 16px;
 }
 .color-schemes-menu .color-schema-block {
   display: flex;
diff --git a/apps/spreadsheeteditor/mobile/app/controller/Settings.js b/apps/spreadsheeteditor/mobile/app/controller/Settings.js
index 823cc5da1..bb74e6fc9 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/Settings.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/Settings.js
@@ -53,7 +53,6 @@ define([
             infoObj,
             modalView,
             _licInfo,
-            templateInsert,
             _pageSizesIndex = 0,
             _pageSizesCurrent = [0, 0],
             txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm),
@@ -500,28 +499,21 @@ define([
             },
 
             initPageColorSchemes: function() {
-                $('#color-schemes-content').html(templateInsert);
-                $('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
+                this.curSchemas = (this.api) ? this.api.asc_GetCurrentColorSchemeIndex() : 0;
+                this.getView('Settings').renderSchemaSettings(this.curSchemas, this.schemas);
+                $('.page[data-page=color-schemes-view] input:radio[name=color-schema]').single('change', _.bind(this.onColorSchemaChange, this));
+                Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view', '.page[data-page=color-schemes-view] .page-content');
             },
 
             onSendThemeColorSchemes: function (schemas) {
-                templateInsert = "";
-                _.each(schemas, function (schema, index) {
-                    var colors = schema.get_colors(),//schema.colors;
-                        name = schema.get_name();
-                    templateInsert = templateInsert + "<a class='color-schemes-menu item-link no-indicator'><input type='hidden' value='" + index + "'><div class='item-content'><div class='item-inner'><span class='color-schema-block'>";
-                    for (var j = 2; j < 7; j++) {
-                        var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
-                        templateInsert =  templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
-                    }
-                    templateInsert =  templateInsert + "</span><span class='text'>" + name + "</span></div></div></a>";
-                }, this);
+                this.schemas = schemas;
             },
 
-            onColorSchemaClick: function(event) {
+            onColorSchemaChange: function(event) {
                 if (this.api) {
-                    var name = $(event.currentTarget).children('input').val();
-                    this.api.asc_ChangeColorSchemeByIdx(name);
+                    var ind = $(event.currentTarget).val();
+                    if (this.curSchemas !== ind)
+                        this.api.asc_ChangeColorSchemeByIdx(parseInt(ind));
                 }
             },
 
diff --git a/apps/spreadsheeteditor/mobile/app/template/Settings.template b/apps/spreadsheeteditor/mobile/app/template/Settings.template
index 0852487a3..5b9cfd20c 100644
--- a/apps/spreadsheeteditor/mobile/app/template/Settings.template
+++ b/apps/spreadsheeteditor/mobile/app/template/Settings.template
@@ -700,9 +700,8 @@
         <div class="page" data-page="color-schemes-view">
             <div class="page-content">
                 <div id="color-schemes-content" class="list-block">
-
+                    <ul></ul>
                 </div>
-
             </div>
         </div>
     </div>
diff --git a/apps/spreadsheeteditor/mobile/app/view/Settings.js b/apps/spreadsheeteditor/mobile/app/view/Settings.js
index a8471525f..2ec25b119 100644
--- a/apps/spreadsheeteditor/mobile/app/view/Settings.js
+++ b/apps/spreadsheeteditor/mobile/app/view/Settings.js
@@ -335,6 +335,32 @@ define([
 
             },
 
+            renderSchemaSettings: function(currentSchema, arrSchemas) {
+                if (arrSchemas) {
+                    var templateInsert = "";
+                    _.each(arrSchemas, function (schema, index) {
+                        var colors = schema.get_colors(),//schema.colors;
+                            name = schema.get_name();
+                        templateInsert += '<li class="color-schemes-menu"><label class="label-radio item-content"><input type="radio" name="color-schema" value="' + index + '"';
+                        if (index === currentSchema) {
+                            templateInsert += ' checked="checked"'
+                        }
+                        templateInsert += '>';
+                        if (Framework7.prototype.device.android) {
+                            templateInsert += '<div class="item-media"><i class="icon icon-form-radio"></i></div>';
+                        }
+                        templateInsert += '<div class="item-inner"><span class="color-schema-block">';
+                        for (var j = 2; j < 7; j++) {
+                            var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
+                            templateInsert = templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
+                        }
+                        templateInsert += '</span><span class="text">' + name + '</span></div></label></li>';
+                    }, this);
+                    $('#color-schemes-content ul').html(templateInsert);
+                }
+            },
+
+
             unknownText: 'Unknown',
             textFindAndReplace: 'Find and Replace',
             textSettings: 'Settings',
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
index 1c04dcd53..80813f87d 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
@@ -6372,12 +6372,8 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   display: block;
   background-color: #fff;
 }
-.color-schemes-menu .item-content {
-  padding-left: 0;
-}
 .color-schemes-menu .item-inner {
   justify-content: flex-start;
-  padding-left: 16px;
 }
 .color-schemes-menu .color-schema-block {
   display: flex;
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
index db3b6425d..f76bbc4f4 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
@@ -5975,12 +5975,8 @@ html.phone .document-menu .list-block .item-link {
   display: block;
   background-color: #fff;
 }
-.color-schemes-menu .item-content {
-  padding-left: 0;
-}
 .color-schemes-menu .item-inner {
   justify-content: flex-start;
-  padding-left: 16px;
 }
 .color-schemes-menu .color-schema-block {
   display: flex;