diff --git a/apps/documenteditor/mobile/src/controller/Error.jsx b/apps/documenteditor/mobile/src/controller/Error.jsx
index 16eca5427..4373e04d0 100644
--- a/apps/documenteditor/mobile/src/controller/Error.jsx
+++ b/apps/documenteditor/mobile/src/controller/Error.jsx
@@ -4,6 +4,9 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => {
+    const { t } = useTranslation();
+    const _t = t("Error", { returnObjects: true });
+
     useEffect(() => {
         const on_engine_created = k => { k.asc_registerCallback('asc_onError', onError); };
 
@@ -20,9 +23,6 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
     });
 
     const onError = (id, level, errData) => {
-        const {t} = useTranslation();
-        const _t = t("Error", { returnObjects: true });
-
         if (id === Asc.c_oAscError.ID.LoadingScriptError) {
             f7.notification.create({
                 title: _t.criticalErrorTitle,
diff --git a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
index 2f89078cb..5b83decee 100644
--- a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import {Navigation, NavigationSheet} from "../../view/settings/Navigation";
+import { NavigationPopover, NavigationSheet } from "../../view/settings/Navigation";
 import { Device } from '../../../../../common/mobile/utils/device';
 import { f7, Sheet, Page, Popup } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
@@ -10,14 +10,6 @@ class NavigationController extends Component {
         this.updateNavigation = this.updateNavigation.bind(this);
     }
 
-    closeModal() {
-        if (Device.phone) {
-            f7.popup.close('.settings-popup');
-        } else {
-            f7.popover.close('#settings-popover');
-        }
-    }
-
     updateNavigation() {
         const api = Common.EditorApi.get();
         const navigationObject = api.asc_ShowDocumentOutline();
@@ -75,7 +67,7 @@ class NavigationController extends Component {
     render() {
         return (
             !Device.phone ? 
-                <Navigation
+                <NavigationPopover
                     onSelectItem={this.onSelectItem} 
                     updateNavigation={this.updateNavigation}
                 />
@@ -83,7 +75,7 @@ class NavigationController extends Component {
                 <NavigationSheet
                     onSelectItem={this.onSelectItem} 
                     updateNavigation={this.updateNavigation}
-                    closeModal={this.closeModal}
+                    onclosed={this.props.onclosed}
                 /> 
         );
     }
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 0a992a524..6c012beda 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -12,6 +12,7 @@ import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
+import NavigationController from '../controller/settings/Navigation';
 
 class MainPage extends Component {
     constructor(props) {
@@ -21,7 +22,8 @@ class MainPage extends Component {
             addOptionsVisible: false,
             addShowOptions: null,
             settingsVisible: false,
-            collaborationVisible: false
+            collaborationVisible: false,
+            navigationVisible: false
         };
     }
 
@@ -44,6 +46,9 @@ class MainPage extends Component {
             } else if ( opts === 'coauth' ) {
                 this.state.collaborationVisible && (opened = true);
                 newState.collaborationVisible = true;
+            } else if( opts === 'navigation') {
+                this.state.navigationVisible && (opened = true);
+                newState.navigationVisible = true;
             }
 
             for (let key in this.state) {
@@ -75,6 +80,8 @@ class MainPage extends Component {
                     return {settingsVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
+                else if( opts == 'navigation') 
+                    return {navigationVisible: false}
             });
             if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
                 f7.navbar.show('.main-navbar');
@@ -142,24 +149,28 @@ class MainPage extends Component {
               {/* {
                   Device.phone ? null : <SearchSettings />
               } */}
-              <SearchSettings useSuspense={false} />
-              {
-                  !this.state.editOptionsVisible ? null :
-                      <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-              }
-              {
-                  !this.state.addOptionsVisible ? null :
-                      <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-              }
-              {
-                  !this.state.settingsVisible ? null :
-                      <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-              }
-              {
-                  !this.state.collaborationVisible ? null :
-                      <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
-              }
-              {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> }  
+                <SearchSettings useSuspense={false} />
+                {
+                    !this.state.editOptionsVisible ? null :
+                        <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                }
+                {
+                    !this.state.addOptionsVisible ? null :
+                        <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                }
+                {
+                    !this.state.settingsVisible ? null :
+                        <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                }
+                {
+                    !this.state.collaborationVisible ? null :
+                        <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
+                }
+                {
+                    !this.state.navigationVisible ? null : 
+                        <NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
+                }
+                {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}  
           </Page>
       )
   }
diff --git a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
index 15fd4e5b6..572757966 100644
--- a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
@@ -3,7 +3,7 @@ import { Device } from '../../../../../common/mobile/utils/device';
 import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
-const Navigation = props => {
+const NavigationPopover = props => {
     const { t } = useTranslation();
     const _t = t('Settings', {returnObjects: true});
     const api = Common.EditorApi.get();
@@ -16,20 +16,20 @@ const Navigation = props => {
             <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
             {!arrHeaders.length 
                 ?
-                <div className="empty-screens">
-                    <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
-                </div>
+                    <div className="empty-screens">
+                        <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
+                    </div>
                 :
-                <List>
-                    {arrHeaders.map((header, index) => {
-                        return (
-                            <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
-                                setCurrentPosition(header.index);
-                                props.onSelectItem(header.index);
-                            }}></ListItem>
-                        )
-                    })}
-                </List>
+                    <List>
+                        {arrHeaders.map((header, index) => {
+                            return (
+                                <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
+                                    setCurrentPosition(header.index);
+                                    props.onSelectItem(header.index);
+                                }}></ListItem>
+                            )
+                        })}
+                    </List>
             }
         </Page>
     )
@@ -84,37 +84,36 @@ const NavigationSheet = props => {
     };
 
     useEffect(() => {
-        props.closeModal();
         f7.sheet.open('#view-navigation-sheet', true);
     }, []);
 
     return (
-        <Sheet id="view-navigation-sheet" style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
+        <Sheet id="view-navigation-sheet" closeByOutsideClick={true} onSheetClosed={() => props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
             <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
                 <Icon icon='icon-swipe'/>
             </div>
             {!arrHeaders.length 
                 ?
-                <div className="empty-screens">
-                    <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
-                </div>
+                    <div className="empty-screens">
+                        <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
+                    </div>
                 :
-                <List>
-                    {arrHeaders.map((header, index) => {
-                        return (
-                            <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
-                                setCurrentPosition(header.index);
-                                props.onSelectItem(header.index);
-                            }}></ListItem>
-                        )
-                    })}
-                </List>
+                    <List>
+                        {arrHeaders.map((header, index) => {
+                            return (
+                                <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
+                                    setCurrentPosition(header.index);
+                                    props.onSelectItem(header.index);
+                                }}></ListItem>
+                            )
+                        })}
+                    </List>
             }
         </Sheet>
     )
 }
 
 export {
-    Navigation,
+    NavigationPopover,
     NavigationSheet
 };
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index 382779348..3bbffcdef 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -13,7 +13,6 @@ import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./Docume
 import { MacrosSettings } from "./ApplicationSettings";
 import About from '../../../../../common/mobile/lib/view/About';
 import NavigationController from '../../controller/settings/Navigation';
-// import { NavigationSheetView } from './Navigation';
 
 const routes = [
     {
@@ -88,9 +87,14 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
         }
     };
 
-    const onOpenCollaboration = async () => {
-        await closeModal();
-        await props.openOptions('coauth');
+    const onOpenCollaboration = () => {
+        closeModal();
+        props.openOptions('coauth');
+    }
+
+    const onOpenNavigation = () => {
+        closeModal();
+        props.openOptions('navigation');
     }
 
     // set mode
@@ -130,7 +134,12 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }
-                    <ListItem title={t('Settings.textNavigation')} link="#" onClick={onoptionclick.bind(this, "/navigation/")}>
+                    <ListItem title={t('Settings.textNavigation')} link='#' onClick={() => {
+                        if(Device.phone) {
+                            onOpenNavigation();
+                        } else {
+                            onoptionclick.bind(this, "/navigation/")();
+                        }}}>
                         <Icon slot="media" icon="icon-navigation"></Icon>
                     </ListItem>
                     {window.matchMedia("(max-width: 359px)").matches ?