diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx
index 583f4ab361..8d3d38e82b 100644
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@@ -492,11 +492,16 @@ class MainController extends Component {
         const warnLicenseUsersExceeded = _t.warnLicenseUsersExceeded.replace(/%1/g, __COMPANY_NAME__);
 
         const appOptions = this.props.storeAppOptions;
+        const storeDocumentInfo = this.props.storeDocumentInfo;
+        const dataDoc = storeDocumentInfo.dataDoc;
+        const docExt = dataDoc.fileType;
+        const isOpenForm = docExt === 'oform';
+
         if (appOptions.config.mode !== 'view' && !EditorUIController.isSupportEditFeature()) {
             let value = LocalStorage.getItem("de-opensource-warning");
             value = (value !== null) ? parseInt(value) : 0;
             const now = (new Date).getTime();
-            if (now - value > 86400000) {
+            if (now - value > 86400000 && !isOpenForm) {
                 LocalStorage.setItem("de-opensource-warning", now);
                 f7.dialog.create({
                     title: _t.notcriticalErrorTitle,
diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
index 1fdef499ac..772eb67e83 100644
--- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx
@@ -348,6 +348,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
                      changeTitleHandler={changeTitleHandler}
                      isVersionHistoryMode={isVersionHistoryMode}
                      closeHistory={closeHistory}
+                     isOpenModal={props.isOpenModal}
         />
     )
 }));
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 035b9fa501..dc60245c82 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -32,7 +32,8 @@ class MainPage extends Component {
             addLinkSettingsVisible: false,
             editLinkSettingsVisible: false,
             snackbarVisible: false,
-            fabVisible: true
+            fabVisible: true,
+            isOpenModal: false
         };
     }
 
@@ -51,16 +52,20 @@ class MainPage extends Component {
         if (opts === 'edit') {
             this.state.editOptionsVisible && (opened = true);
             newState.editOptionsVisible = true;
+            newState.isOpenModal = true;
         } else if (opts === 'add') {
             this.state.addOptionsVisible && (opened = true);
             newState.addOptionsVisible = true;
             newState.addShowOptions = showOpts;
+            newState.isOpenModal = true;
         } else if (opts === 'settings') {
             this.state.settingsVisible && (opened = true);
             newState.settingsVisible = true;
+            newState.isOpenModal = true;
         } else if (opts === 'coauth') {
             this.state.collaborationVisible && (opened = true);
             newState.collaborationVisible = true;
+            newState.isOpenModal = true;
         } else if (opts === 'navigation') {
             this.state.navigationVisible && (opened = true);
             newState.navigationVisible = true;
@@ -89,13 +94,13 @@ class MainPage extends Component {
     handleOptionsViewClosed = opts => {
         this.setState(state => {
             if (opts === 'edit')
-                return {editOptionsVisible: false};
+                return {editOptionsVisible: false, isOpenModal: false};
             else if (opts === 'add')
-                return {addOptionsVisible: false, addShowOptions: null};
+                return {addOptionsVisible: false, addShowOptions: null, isOpenModal: false};
             else if (opts === 'settings')
-                return {settingsVisible: false};
+                return {settingsVisible: false, isOpenModal: false};
             else if (opts === 'coauth')
-                return {collaborationVisible: false};
+                return {collaborationVisible: false, isOpenModal: false};
             else if (opts === 'navigation')
                 return {navigationVisible: false};
             else if (opts === 'add-link') 
@@ -168,6 +173,7 @@ class MainPage extends Component {
                 openOptions: this.handleClickToOpenOptions.bind(this),
                 closeOptions: this.handleOptionsViewClosed.bind(this),
                 showPanels: this.state.addShowOptions,
+                // isOpenModal: this.state.isOpenModal
             }}>
                 <Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
                     {/* Top Navbar */}
@@ -183,6 +189,7 @@ class MainPage extends Component {
                             <Toolbar 
                                 openOptions={this.handleClickToOpenOptions} 
                                 closeOptions={this.handleOptionsViewClosed}
+                                isOpenModal={this.state.isOpenModal}
                             />
                             <Search useSuspense={false}/>
                         </Subnavbar>
diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx
index d053f899da..06a23d3ebd 100644
--- a/apps/documenteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx
@@ -1,8 +1,9 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavLeft, NavRight, NavTitle, Link, Icon, f7 } from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
 import EditorUIController from '../lib/patch';
+import { MainContext } from '../page/main';
 
 const ToolbarView = props => {
     const { t } = useTranslation();
@@ -15,6 +16,10 @@ const ToolbarView = props => {
     const isMobileView = props.isMobileView;
     const docTitle = props.docTitle;
     const docTitleLength = docTitle.length;
+    const isOpenModal = props.isOpenModal;
+    // const mainContext = useContext(MainContext);
+    // const isOpenModal = mainContext.isOpenModal;
+
 
     const correctOverflowedText = el => {
         if(el) {
@@ -50,7 +55,7 @@ const ToolbarView = props => {
                     e.preventDefault();
                     props.closeHistory();
                 }}>{t("Toolbar.textCloseHistory")}</a> : null}
-                {(props.isShowBack && isViewer && !isVersionHistoryMode) && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={() => Common.Notifications.trigger('goback')}></Link>}
+                {(props.isShowBack && isViewer && !isVersionHistoryMode) && <Link className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} icon='icon-back' onClick={() => Common.Notifications.trigger('goback')}></Link>}
                 {(Device.ios && props.isEdit && !isViewer && !isVersionHistoryMode) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
                     disabledUndo: !props.isCanUndo || isDisconnected,
                     disabledRedo: !props.isCanRedo || isDisconnected,
@@ -67,23 +72,23 @@ const ToolbarView = props => {
                     onRedoClick: props.onRedo
                 })}
                 {/*isAvailableExt && !props.disabledControls &&*/}
-                {((isViewer || !Device.phone) && isAvailableExt && !props.disabledControls && !isVersionHistoryMode) && <Link icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
+                {((isViewer || !Device.phone) && isAvailableExt && !props.disabledControls && !isVersionHistoryMode) && <Link className={isOpenModal && 'disabled'} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
                     props.changeMobileView();
                     props.openOptions('snackbar');
                 }}></Link>}
                 {(props.showEditDocument && !isViewer) &&
-                    <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
+                    <Link className={(props.disabledControls || isOpenModal) && 'disabled'} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
                 }
                 {props.isEdit && isAvailableExt && !isViewer && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
-                    disabled: disableEditBtn || props.disabledControls,
+                    disabled: disableEditBtn || props.disabledControls || isOpenModal,
                     onEditClick: e => props.openOptions('edit'),
                     onAddClick: e => props.openOptions('add')
                 })}
                 {/*props.displayCollaboration &&*/}
-                {Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
-                {window.matchMedia("(min-width: 360px)").matches && docExt !== 'oform' && !isVersionHistoryMode ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
-                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} onClick={() => props.openOptions('history')}></Link> : null}
-                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+                {Device.phone ? null : <Link className={(props.disabledControls || props.readerMode || isOpenModal) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
+                {window.matchMedia("(min-width: 360px)").matches && docExt !== 'oform' && !isVersionHistoryMode ? <Link className={(props.disabledControls || isOpenModal) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
+                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}></Link> : null}
+                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>
     )
diff --git a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx b/apps/presentationeditor/mobile/src/controller/Toolbar.jsx
index 72cc3976e0..e714f01dd8 100644
--- a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx
+++ b/apps/presentationeditor/mobile/src/controller/Toolbar.jsx
@@ -161,6 +161,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeFocusObjects'
             isDisconnected={isDisconnected}
             isVersionHistoryMode={isVersionHistoryMode}
             closeHistory={closeHistory}
+            isOpenModal={props.isOpenModal}
         />
     )
 }));
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index 4342ae6a7c..cd12c74b06 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -46,7 +46,7 @@
 // Skeleton of document
 
 .doc-placeholder {
-    background: #f5f5f5;
+    background: var(--canvas-background);
     width: 100%;
     height: 100%;
     left: 0;
@@ -77,8 +77,8 @@
         position: absolute;
         height: 100%;
         width: 100%;
-        background: #fbfbfb;
-        border: 1px solid #dfdfdf;
+        background: var(--canvas-content-background);
+        border: 1px solid var(--canvas-page-border);
 
         -webkit-animation: flickerAnimation 2s infinite ease-in-out;
         -moz-animation: flickerAnimation 2s infinite ease-in-out;
@@ -89,7 +89,7 @@
             height: 20%;
             margin: 0 120px;
             border-radius: 6px;
-            background: #f5f5f5;
+            background: var(--canvas-background);
 
             &:nth-child(1) {
                 height: 30%;
diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx
index 16311db194..c798e72ec4 100644
--- a/apps/presentationeditor/mobile/src/page/main.jsx
+++ b/apps/presentationeditor/mobile/src/page/main.jsx
@@ -26,7 +26,8 @@ class MainPage extends Component {
             collaborationVisible: false,
             previewVisible: false,
             addLinkSettingsVisible: false,
-            editLinkSettingsVisible: false
+            editLinkSettingsVisible: false,
+            isOpenModal: false
         };
     }
 
@@ -37,77 +38,80 @@ class MainPage extends Component {
     handleClickToOpenOptions = (opts, showOpts) => {
         f7.popover.close('.document-menu.modal-in', false);
 
-        setTimeout(() => {
-            let opened = false;
-            const newState = {};
-            if ( opts === 'edit' ) {
-                this.state.editOptionsVisible && (opened = true);
-                newState.editOptionsVisible = true;
-            } else if ( opts === 'add' ) {
-                this.state.addOptionsVisible && (opened = true);
-                newState.addOptionsVisible = true;
-                newState.addShowOptions = showOpts;
-            } else if ( opts === 'settings' ) {
-                this.state.settingsVisible && (opened = true);
-                newState.settingsVisible = true;
-            } else if ( opts === 'coauth' ) {
-                this.state.collaborationVisible && (opened = true);
-                newState.collaborationVisible = true;
-            } else if ( opts === 'preview' ) {
-                this.state.previewVisible && (opened = true);
-                newState.previewVisible = true;
-            } else if ( opts === 'add-link') {
-                this.state.addLinkSettingsVisible && (opened = true);
-                newState.addLinkSettingsVisible = true;
-            } else if( opts === 'edit-link') {
-                this.state.editLinkSettingsVisible && (opened = true);
-                newState.editLinkSettingsVisible = true;
-            } else if (opts === 'history') {
-                newState.historyVisible = true;
-            }
+        let opened = false;
+        const newState = {};
 
-            for (let key in this.state) {
-                if (this.state[key] && !opened) {
-                    setTimeout(() => {
-                        this.handleClickToOpenOptions(opts, showOpts);
-                    }, 10);
-                    return;
-                }
-            }
+        if ( opts === 'edit' ) {
+            this.state.editOptionsVisible && (opened = true);
+            newState.editOptionsVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'add' ) {
+            this.state.addOptionsVisible && (opened = true);
+            newState.addOptionsVisible = true;
+            newState.addShowOptions = showOpts;
+            newState.isOpenModal = true;
+        } else if ( opts === 'settings' ) {
+            this.state.settingsVisible && (opened = true);
+            newState.settingsVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'coauth' ) {
+            this.state.collaborationVisible && (opened = true);
+            newState.collaborationVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'preview' ) {
+            this.state.previewVisible && (opened = true);
+            newState.previewVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'add-link') {
+            this.state.addLinkSettingsVisible && (opened = true);
+            newState.addLinkSettingsVisible = true;
+        } else if( opts === 'edit-link') {
+            this.state.editLinkSettingsVisible && (opened = true);
+            newState.editLinkSettingsVisible = true;
+        } else if (opts === 'history') {
+            newState.historyVisible = true;
+        }
 
-            if (!opened) {
-                this.setState(newState);
-                if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
-                    f7.navbar.hide('.main-navbar');
-                }
+        for (let key in this.state) {
+            if (this.state[key] && !opened) {
+                setTimeout(() => {
+                    this.handleClickToOpenOptions(opts, showOpts);
+                }, 10);
+                return;
             }
-        }, 10);
+        }
+
+        if (!opened) {
+            this.setState(newState);
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.hide('.main-navbar');
+            }
+        }
     };
 
     handleOptionsViewClosed = opts => {
-        setTimeout(() => {
-            this.setState(state => {
-                if ( opts == 'edit' )
-                    return {editOptionsVisible: false};
-                else if ( opts == 'add' )
-                    return {addOptionsVisible: false, addShowOptions: null};
-                else if ( opts == 'settings' )
-                    return {settingsVisible: false};
-                else if ( opts == 'coauth' )
-                    return {collaborationVisible: false}
-                else if ( opts == 'preview' )
-                    return {previewVisible: false};
-                else if ( opts === 'add-link') 
-                    return {addLinkSettingsVisible: false};
-                else if( opts === 'edit-link') 
-                    return {editLinkSettingsVisible: false};
-                else if (opts === 'history')
-                    return {historyVisible: false}
-            });
-            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
-                f7.navbar.show('.main-navbar');
-            }
+        this.setState(state => {
+            if ( opts == 'edit' )
+                return {editOptionsVisible: false, isOpenModal: false};
+            else if ( opts == 'add' )
+                return {addOptionsVisible: false, addShowOptions: null, isOpenModal: false};
+            else if ( opts == 'settings' )
+                return {settingsVisible: false, isOpenModal: false};
+            else if ( opts == 'coauth' )
+                return {collaborationVisible: false, isOpenModal: false}
+            else if ( opts == 'preview' )
+                return {previewVisible: false, isOpenModal: false};
+            else if ( opts === 'add-link') 
+                return {addLinkSettingsVisible: false};
+            else if( opts === 'edit-link') 
+                return {editLinkSettingsVisible: false};
+            else if (opts === 'history')
+                return {historyVisible: false}
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.show('.main-navbar');
+        }
     };
 
     componentDidMount () {
@@ -158,6 +162,7 @@ class MainPage extends Component {
                             <Toolbar 
                                 openOptions={this.handleClickToOpenOptions}
                                 closeOptions={this.handleOptionsViewClosed}
+                                isOpenModal={this.state.isOpenModal}
                             />
                             <Search useSuspense={false}/>
                         </Subnavbar>
diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
index 10c2d1abb9..a26044033d 100644
--- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx
+++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
@@ -10,6 +10,7 @@ const ToolbarView = props => {
     const docTitle = props.docTitle;
     const docTitleLength = docTitle.length;
     const isVersionHistoryMode = props.isVersionHistoryMode;
+    const isOpenModal = props.isOpenModal;
 
     const correctOverflowedText = el => {
         if(el) {
@@ -42,7 +43,7 @@ const ToolbarView = props => {
     return (
         <Fragment>
             <NavLeft>
-                {(props.isShowBack && !isVersionHistoryMode) && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={() => Common.Notifications.trigger('goback')}></Link>}
+                {(props.isShowBack && !isVersionHistoryMode) && <Link className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} icon='icon-back' onClick={() => Common.Notifications.trigger('goback')}></Link>}
                 {isVersionHistoryMode ? <a href="#" className='btn-close-history' onClick={(e) => {
                     e.preventDefault();
                     props.closeHistory();
@@ -63,21 +64,21 @@ const ToolbarView = props => {
                     onRedoClick: props.onRedo
                 })}
                 {!isVersionHistoryMode &&
-                    <Link className={(props.disabledControls || props.disabledPreview) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link>
+                    <Link className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link>
                 }
                 {(props.showEditDocument && !isVersionHistoryMode) &&
-                    <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
+                    <Link className={(props.disabledControls || isOpenModal) ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
                 }
                 {(props.isEdit && EditorUIController.getToolbarOptions && !isVersionHistoryMode) && EditorUIController.getToolbarOptions({
-                    disabledEdit: props.disabledEdit || props.disabledControls || isDisconnected || props.disabledPreview,
-                    disabledAdd: props.disabledControls || isDisconnected,
+                    disabledEdit: props.disabledEdit || props.disabledControls || isDisconnected || props.disabledPreview || isOpenModal,
+                    disabledAdd: props.disabledControls || isDisconnected || isOpenModal,
                     onEditClick: () => props.openOptions('edit'),
                     onAddClick: () => props.openOptions('add')
                 })}
-                {Device.phone ? null : <Link className={(props.disabledControls || props.disabledPreview) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
-                {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !isVersionHistoryMode ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
-                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} onClick={() => props.openOptions('history')}></Link> : null}
-                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+                {Device.phone ? null : <Link className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
+                {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !isVersionHistoryMode ? <Link className={(props.disabledControls || isOpenModal) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
+                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}></Link> : null}
+                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>
     )
diff --git a/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
index 03711a1f61..a561f7b294 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
@@ -177,6 +177,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
             isShapeLocked={isShapeLocked}
             isVersionHistoryMode={isVersionHistoryMode}
             closeHistory={closeHistory}
+            isOpenModal={props.isOpenModal}
         />
     )
 }));
diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx
index 2809ebdb44..d43ae77393 100644
--- a/apps/spreadsheeteditor/mobile/src/page/main.jsx
+++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx
@@ -29,79 +29,82 @@ class MainPage extends Component {
             settingsVisible: false,
             collaborationVisible: false,
             addLinkSettingsVisible: false,
-            editLinkSettingsVisible: false
+            editLinkSettingsVisible: false,
+            isOpenModal: false
         };
     }
 
     handleClickToOpenOptions = (opts, showOpts) => {
         f7.popover.close('.document-menu.modal-in', false);
 
-        setTimeout(() => {
-            let opened = false;
-            const newState = {};
-            if ( opts === 'edit' ) {
-                this.state.editOptionsVisible && (opened = true);
-                newState.editOptionsVisible = true;
-            } else if ( opts === 'add' ) {
-                this.state.addOptionsVisible && (opened = true);
-                newState.addOptionsVisible = true;
-                newState.addShowOptions = showOpts;
-            } else if ( opts === 'settings' ) {
-                this.state.settingsVisible && (opened = true);
-                newState.settingsVisible = true;
-            } else if ( opts === 'coauth' ) {
-                this.state.collaborationVisible && (opened = true);
-                newState.collaborationVisible = true;
-            } else if ( opts === 'add-link') {
-                this.state.addLinkSettingsVisible && (opened = true);
-                newState.addLinkSettingsVisible = true;
-            } else if( opts === 'edit-link') {
-                this.state.editLinkSettingsVisible && (opened = true);
-                newState.editLinkSettingsVisible = true;
-            } else if (opts === 'history') {
-                newState.historyVisible = true;
-            }
+        let opened = false;
+        const newState = {};
+        
+        if ( opts === 'edit' ) {
+            this.state.editOptionsVisible && (opened = true);
+            newState.editOptionsVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'add' ) {
+            this.state.addOptionsVisible && (opened = true);
+            newState.addOptionsVisible = true;
+            newState.addShowOptions = showOpts;
+            newState.isOpenModal = true;
+        } else if ( opts === 'settings' ) {
+            this.state.settingsVisible && (opened = true);
+            newState.settingsVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'coauth' ) {
+            this.state.collaborationVisible && (opened = true);
+            newState.collaborationVisible = true;
+            newState.isOpenModal = true;
+        } else if ( opts === 'add-link') {
+            this.state.addLinkSettingsVisible && (opened = true);
+            newState.addLinkSettingsVisible = true;
+        } else if( opts === 'edit-link') {
+            this.state.editLinkSettingsVisible && (opened = true);
+            newState.editLinkSettingsVisible = true;
+        } else if (opts === 'history') {
+            newState.historyVisible = true;
+        }
 
-            for (let key in this.state) {
-                if (this.state[key] && !opened) {
-                    setTimeout(() => {
-                        this.handleClickToOpenOptions(opts, showOpts);
-                    }, 10);
-                    return;
-                }
+        for (let key in this.state) {
+            if (this.state[key] && !opened) {
+                setTimeout(() => {
+                    this.handleClickToOpenOptions(opts, showOpts);
+                }, 10);
+                return;
             }
+        }
 
-            if (!opened) {
-                this.setState(newState);
-                if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
-                    f7.navbar.hide('.main-navbar');
-                }
+        if (!opened) {
+            this.setState(newState);
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.hide('.main-navbar');
             }
-        }, 10);
+        }
     };
 
     handleOptionsViewClosed = opts => {
-        setTimeout(() => {
-            this.setState(state => {
-                if ( opts == 'edit' )
-                    return {editOptionsVisible: false};
-                else if ( opts == 'add' )
-                    return {addOptionsVisible: false, addShowOptions: null};
-                else if ( opts == 'settings' )
-                    return {settingsVisible: false};
-                else if ( opts == 'coauth' )
-                    return {collaborationVisible: false};
-                else if ( opts === 'add-link') 
-                    return {addLinkSettingsVisible: false};
-                else if( opts === 'edit-link') 
-                    return {editLinkSettingsVisible: false};
-                else if (opts === 'history')
-                    return {historyVisible: false}
-            });
-            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
-                f7.navbar.show('.main-navbar');
-            }
-        }, 1);
+        this.setState(state => {
+            if ( opts == 'edit' )
+                return {editOptionsVisible: false, isOpenModal: false};
+            else if ( opts == 'add' )
+                return {addOptionsVisible: false, addShowOptions: null, isOpenModal: false};
+            else if ( opts == 'settings' )
+                return {settingsVisible: false, isOpenModal: false};
+            else if ( opts == 'coauth' )
+                return {collaborationVisible: false, isOpenModal: false};
+            else if ( opts === 'add-link') 
+                return {addLinkSettingsVisible: false};
+            else if( opts === 'edit-link') 
+                return {editLinkSettingsVisible: false};
+            else if (opts === 'history')
+                return {historyVisible: false}
+        });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.show('.main-navbar');
+        }
     };
 
     render() {
@@ -153,6 +156,7 @@ class MainPage extends Component {
                             <Toolbar 
                                 openOptions={this.handleClickToOpenOptions}
                                 closeOptions={this.handleOptionsViewClosed}
+                                isOpenModal={this.state.isOpenModal}
                             />
                             <Search useSuspense={false}/>
                         </Subnavbar>
diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
index 703afc5116..40d6d18854 100644
--- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
@@ -5,6 +5,7 @@ import EditorUIController from '../lib/patch'
 import { useTranslation } from 'react-i18next';
 
 const ToolbarView = props => {
+    const { t } = useTranslation();
     const isDisconnected = props.isDisconnected;
     const wsProps = props.wsProps;
     const focusOn = props.focusOn;
@@ -18,8 +19,8 @@ const ToolbarView = props => {
     const docTitle = props.docTitle;
     const docTitleLength = docTitle.length;
     const isVersionHistoryMode = props.isVersionHistoryMode;
-    const { t } = useTranslation();
-
+    const isOpenModal = props.isOpenModal;
+    
     const correctOverflowedText = el => {
         if(el) {
             el.innerText = docTitle;
@@ -51,7 +52,7 @@ const ToolbarView = props => {
     return (
         <Fragment>
             <NavLeft>
-                {(props.isShowBack && !isVersionHistoryMode) && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={() => Common.Notifications.trigger('goback')}></Link>}
+                {(props.isShowBack && !isVersionHistoryMode) && <Link className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} icon='icon-back' onClick={() => Common.Notifications.trigger('goback')}></Link>}
                 {isVersionHistoryMode ? <a href="#" className='btn-close-history' onClick={(e) => {
                     e.preventDefault();
                     props.closeHistory();
@@ -62,20 +63,20 @@ const ToolbarView = props => {
             <NavRight>
                 {(Device.android && !isVersionHistoryMode) && undo_box}
                 {(props.showEditDocument && !isVersionHistoryMode) &&
-                    <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
+                    <Link className={(props.disabledControls || isOpenModal) ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
                 }
                 {(props.isEdit && EditorUIController.toolbarOptions && !isVersionHistoryMode) && EditorUIController.toolbarOptions.getEditOptions({
-                    disabled: props.disabledEditControls || props.disabledControls || isDisconnected,
+                    disabled: props.disabledEditControls || props.disabledControls || isDisconnected || isOpenModal,
                     wsProps,
                     focusOn,
                     isShapeLocked,
                     onEditClick: () => props.openOptions('edit'),
                     onAddClick: () => props.openOptions('add')
                 })}
-                {Device.phone ? null : <Link className={(props.disabledControls || props.disabledSearch) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
-                {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches && !isVersionHistoryMode ? <Link className={(props.disabledControls || props.disabledCollaboration) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
-                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} onClick={() => props.openOptions('history')}></Link> : null}
-                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+                {Device.phone ? null : <Link className={(props.disabledControls || props.disabledSearch || isOpenModal) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
+                {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches && !isVersionHistoryMode ? <Link className={(props.disabledControls || props.disabledCollaboration || isOpenModal) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
+                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}></Link> : null}
+                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>
     )