diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx
index 678c493bd8..af08919e50 100644
--- a/apps/presentationeditor/mobile/src/controller/Main.jsx
+++ b/apps/presentationeditor/mobile/src/controller/Main.jsx
@@ -161,7 +161,7 @@ class MainController extends Component {
 
     bindEvents() {
         const me = this;
-        
+       
         // me.api.asc_registerCallback('asc_onError',                      _.bind(me.onError, me));
         me.api.asc_registerCallback('asc_onDocumentContentReady',       me._onDocumentContentReady.bind(me));
         me.api.asc_registerCallback('asc_onOpenDocumentProgress',       me._onOpenDocumentProgress.bind(me));
@@ -169,10 +169,13 @@ class MainController extends Component {
         const storePresentationSettings = this.props.storePresentationSettings;
 
         me.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
-            // const api = Common.EditorApi.get();
             storePresentationSettings.changeSlideSize(width, height);
         });
 
+        me.api.asc_registerCallback('asc_onSendThemeColorSchemes', (arr) => {
+            storePresentationSettings.addSchemes(arr);
+        });
+
         // api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(this.onSendThemeColorSchemes, this));
         // me.api.asc_registerCallback('asc_onDocumentUpdateVersion',      _.bind(me.onUpdateVersion, me));
         // me.api.asc_registerCallback('asc_onServerVersion',              _.bind(me.onServerVersion, me));
diff --git a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
index 86d6ee3a0f..de1a0dd7d4 100644
--- a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
@@ -4,18 +4,33 @@ import {PresentationSettings} from '../../view/settings/PresentationSettings';
 class PresentationSettingsController extends Component {
     constructor(props) {
         super(props);
-        // this.onSlideSize = this.onSlideSize.bind(this);
     }
 
-    onSlideSize(value, slideSizeArr) {
+    onSlideSize(slideSizeArr) {
         const api = Common.EditorApi.get();
-        api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+        // api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+        api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]);
     }
 
+    // Color Schemes
+
+    initPageColorSchemes() {
+        const api = Common.EditorApi.get();
+        return api.asc_GetCurrentColorSchemeIndex();
+    }
+
+    onColorSchemeChange(newScheme) {
+        const api = Common.EditorApi.get();
+        api.asc_ChangeColorSchemeByIdx(+newScheme);
+    }
+
+
     render() {
         return (
             <PresentationSettings 
                 onSlideSize={this.onSlideSize}
+                onColorSchemeChange={this.onColorSchemeChange}
+                initPageColorSchemes={this.initPageColorSchemes}
             />
         )
     }
diff --git a/apps/presentationeditor/mobile/src/less/app-ios.less b/apps/presentationeditor/mobile/src/less/app-ios.less
index a1575794af..55a23a31ea 100644
--- a/apps/presentationeditor/mobile/src/less/app-ios.less
+++ b/apps/presentationeditor/mobile/src/less/app-ios.less
@@ -3,3 +3,27 @@
 
 
 }
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: #fff;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
+}
diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less
index 879f3a67c7..3a7fb97e73 100644
--- a/apps/presentationeditor/mobile/src/less/app-material.less
+++ b/apps/presentationeditor/mobile/src/less/app-material.less
@@ -21,4 +21,28 @@
         align-items: center;
         width: auto;
     }
+}
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: #fff;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
 }
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/store/presentationSettings.js b/apps/presentationeditor/mobile/src/store/presentationSettings.js
index e582d16931..ce06a4582e 100644
--- a/apps/presentationeditor/mobile/src/store/presentationSettings.js
+++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js
@@ -1,38 +1,28 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable} from 'mobx';
 
 export class storePresentationSettings {
-    @observable widthSlide;
-    @observable heightSlide;
-    @observable slideSize = 0;
+    @observable slideSize = [];
+    @observable slideSizeValue;
 
-    @action changeSlideSize(width, height) {
-        this.widthSlide = width;
-        this.heightSlide = height;
+    get getSlideSizes() {
+        return [[254, 190.5], [254, 143]];
     }
 
-    getSlideSizes() {
-        const slideSizeArr = [[254, 190.5], [254, 143]];
-        return slideSizeArr;
+    @action changeSlideSize(width, height) {
+        this.slideSize[0] = width;
+        this.slideSize[1] = height;
     }
 
     @action changeSlideFormat(value) {
-        this.slideSize = value;
+        this.slideSizeValue = +value;
     }
 
-    @computed get pageSizesIndex() {
-        const slideSizes = this.getSlideSizes();
-        let ind = -1;
+    // Color Schemes
 
-        slideSizes.forEach((size, index) => {
-            if(Math.abs(size[0] - this.widthSlide) < 0.001 && Math.abs(size[1] - this.heightSlide) < 0.001) {
-               ind = index;
-            }
-        });
+    @observable allSchemes;
 
-        if (ind === -1) {
-            ind = -1;
-        }
-
-        return ind;
+    @action addSchemes(arr) {
+        this.allSchemes = arr;
     }
+
 }
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
index 6b47b11122..a635eaaeaa 100644
--- a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
@@ -1,50 +1,40 @@
-import React, {Fragment} from "react";
+import React, {useState} from "react";
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
+import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
 import { useTranslation } from "react-i18next";
 
 const PagePresentationSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
     const store = props.storePresentationSettings;
-    const slideSizeArr = store.getSlideSizes();
-    console.log(slideSizeArr);
-    const widthSlide = store.widthSlide;
-    const heightSlide = store.heightSlide;
+    const slideSizeArr = store.getSlideSizes;
     const slideSize = store.slideSize;
-    console.log(widthSlide, heightSlide);
+    const slideSizeValue = store.slideSizeValue;
+    console.log(slideSize);
   
     return (
         <Page>
             <Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
-            {slideSizeArr.length ? (
-                <Fragment>
-                    <BlockTitle>{_t.textSlideSize}</BlockTitle>
-                    <List>
-                        {/* {slideSizeArr.map((size, index) => {
-                            if(Math.abs(size[0] - widthSlide) < 0.001 && Math.abs(size[1] - heightSlide) < 0.001) {
-                                console.log(true);
-                                return (
-                                    <ListItem radio name="slide-size" value={index} title={index === 0 ? _t.mniSlideStandard : _t.mniSlideWide}></ListItem>
-                                )
-                            }
-                        })} */}
-                        <ListItem radio name="slide-size" value="0" checked={slideSize === 0} 
-                            onChange={() => {
-                                props.onSlideSize(0, slideSizeArr);
-                                store.changeSlideFormat(0);
-                            }} title={_t.mniSlideStandard}></ListItem>
-                        <ListItem radio name="slide-size" value="1" checked={slideSize === 1} 
-                            onChange={() => {
-                                props.onSlideSize(1, slideSizeArr);
-                                store.changeSlideFormat(1);
-                            }} title={_t.mniSlideWide}></ListItem>
-                    </List>
-                </Fragment>
-            ): null}
-               
+
+            <BlockTitle>{_t.textSlideSize}</BlockTitle>
+            <List>
+                <ListItem radio name="slide-size" value="0" checked={slideSizeValue === 0} 
+                    onChange={(e) => {
+                        props.onSlideSize(slideSizeArr[e.target.value]);
+                        store.changeSlideFormat(e.target.value);
+                    }} title={_t.mniSlideStandard}></ListItem>
+                <ListItem radio name="slide-size" value="1" checked={slideSizeValue === 1} 
+                    onChange={(e) => {
+                        props.onSlideSize(slideSizeArr[e.target.value]);
+                        store.changeSlideFormat(e.target.value);
+                    }} title={_t.mniSlideWide}></ListItem>
+            </List>
+        
             <List mediaList>
-                <ListItem title={_t.textColorSchemes} link="/color-schemes/"></ListItem>
+                <ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
+                    onColorSchemeChange: props.onColorSchemeChange,
+                    initPageColorSchemes: props.initPageColorSchemes
+                }}></ListItem>
             </List>
         </Page>
     )
@@ -52,16 +42,16 @@ const PagePresentationSettings = props => {
 
 const PagePresentationColorSchemes = props => {
     const { t } = useTranslation();
-    // const curScheme = props.initPageColorSchemes();
-    // const [stateScheme, setScheme] = useState(curScheme);
+    const curScheme = props.initPageColorSchemes();
+    const [stateScheme, setScheme] = useState(curScheme);
     const _t = t('View.Settings', {returnObjects: true});
-    // const storeSettings = props.storeDocumentSettings;
-    // const allSchemes = storeSettings.allSchemes;
+    const store = props.storePresentationSettings;
+    const allSchemes = store.allSchemes;
 
     return (
         <Page>
             <Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
-            {/* <List>
+            <List>
                 {
                     allSchemes ? allSchemes.map((scheme, index) => {
                         return (
@@ -91,7 +81,7 @@ const PagePresentationColorSchemes = props => {
                         )
                     }) : null        
                 }
-            </List> */}
+            </List>
         </Page>
 
     )