diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 7b1269c24..2701603f2 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -336,7 +336,8 @@
     "textHighlightResults": "Highlight Results",
     "textSearch": "Search",
     "textMarginsW": "Left and right margins are too high for a given page width",
-    "textMarginsH": "Top and bottom margins are too high for a given page height"
+    "textMarginsH": "Top and bottom margins are too high for a given page height",
+    "textCollaboration": "Collaboration"
   },
   "Edit": {
     "textClose": "Close",
diff --git a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
index 26e0c638d..aecd11e22 100644
--- a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx
@@ -71,7 +71,7 @@ const Settings = props => {
         window.open(url, "_blank");
     };
 
-    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint} showHelp={showHelp}/>
+    return <SettingsView usePopover={!Device.phone} openOptions={props.openOptions} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint} showHelp={showHelp}/>
 };
 
 export default inject("storeAppOptions")(observer(Settings));
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 89125f721..2a32a5103 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -93,7 +93,7 @@ class MainPage extends Component {
               }
               {
                   !this.state.settingsVisible ? null :
-                      <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                      <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
               }
               {
                   !this.state.collaborationVisible ? null :
diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx
index 6dd921194..25171c0aa 100644
--- a/apps/documenteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx
@@ -24,7 +24,7 @@ const ToolbarView = props => {
                         onAddClick: e => props.openOptions('add')
                 })}
                 { Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                {props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link>}
+                {props.displayCollaboration && window.matchMedia("(min-width: 390px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null}
                 <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index 151e7ee25..957ac1ea4 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -71,12 +71,17 @@ const SettingsList = inject("storeAppOptions")(observer(props => {
 
     const closeModal = () => {
         if (Device.phone) {
-            f7.sheet.close('.settings-popup', true);
+            f7.sheet.close('.settings-popup', false);
         } else {
-            f7.popover.close('#settings-popover');
+            f7.popover.close('#settings-popover', false);
         }
     };
 
+    const onOpenCollaboration = async () => {
+        await closeModal();
+        await props.openOptions('coauth');
+    }
+
     useEffect(() => {
     });
 
@@ -117,6 +122,11 @@ const SettingsList = inject("storeAppOptions")(observer(props => {
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }
+                    {window.matchMedia("(max-width: 389px)").matches ? 
+                        <ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration}>
+                            <Icon slot="media" icon="icon-collaboration"></Icon>
+                        </ListItem> 
+                    : null}
                     {_canReader &&
                         <ListItem title={_t.textReaderMode}> {/*ToDo*/}
                             <Icon slot="media" icon="icon-reader"></Icon>
@@ -182,10 +192,10 @@ class SettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
+                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
                 </Popup>
         )
     }
diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json
index 2483c11db..2b1d429dc 100644
--- a/apps/presentationeditor/mobile/locale/en.json
+++ b/apps/presentationeditor/mobile/locale/en.json
@@ -200,7 +200,8 @@
       "textCaseSensitive": "Case Sensitive",
       "textHighlight": "Highlight Results",
       "textReplace": "Replace",
-      "textNoTextFound": "Text not Found"
+      "textNoTextFound": "Text not Found",
+      "textCollaboration": "Collaboration"
     },
     "Add": {
       "textSlide": "Slide",
diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx
index 4739278e2..c7f0400e4 100644
--- a/apps/presentationeditor/mobile/src/page/main.jsx
+++ b/apps/presentationeditor/mobile/src/page/main.jsx
@@ -95,7 +95,7 @@ class MainPage extends Component {
                     }
                     {
                         !this.state.settingsVisible ? null :
-                            <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                            <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
                     }
                     {
                         !this.state.collaborationVisible ? null :
diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
index a97919f9e..32c729891 100644
--- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx
+++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
@@ -25,7 +25,7 @@ const ToolbarView = props => {
                     onAddClick: () => props.openOptions('add')
                 })}
                 { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                {props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>}
+                {props.displayCollaboration && window.matchMedia("(min-width: 390px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
                 <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>
diff --git a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx
index fafbf0711..714f8a245 100644
--- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx
@@ -70,12 +70,17 @@ const SettingsList = withTranslation()(props => {
 
     const closeModal = () => {
         if (Device.phone) {
-            f7.sheet.close('.settings-popup', true);
+            f7.sheet.close('.settings-popup', false);
         } else {
-            f7.popover.close('#settings-popover');
+            f7.popover.close('#settings-popover', false);
         }
     };
 
+    const onOpenCollaboration = async () => {
+        await closeModal();
+        await props.openOptions('coauth');
+    }
+
     const onPrint = () => {
         closeModal();
         const api = Common.EditorApi.get();
@@ -112,6 +117,11 @@ const SettingsList = withTranslation()(props => {
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }
+                    {window.matchMedia("(max-width: 389px)").matches ? 
+                        <ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration}>
+                            <Icon slot="media" icon="icon-collaboration"></Icon>
+                        </ListItem> 
+                    : null}
                     <ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
                         <Icon slot="media" icon="icon-setup"></Icon>
                     </ListItem>
@@ -152,13 +162,14 @@ class SettingsView extends Component {
 
     render() {
         const show_popover = this.props.usePopover;
+       
         return (
             show_popover ?
                 <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
+                    <SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} />
+                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
                 </Popup>
         )
     }
@@ -174,13 +185,12 @@ const Settings = props => {
         }
     });
 
-
     const onviewclosed = () => {
-        if ( props.onclosed )
+        if (props.onclosed)
             props.onclosed();
     };
 
-    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} />
+    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
 };
 
 export default Settings;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index f5f0994ac..9c07b0773 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -490,7 +490,8 @@
             "textFormulas": "Formulas",
             "textValues": "Values",
             "textNoTextFound": "Text not found",
-            "textReplaceAll": "Replace All"
+            "textReplaceAll": "Replace All",
+            "textCollaboration": "Collaboration"
         }
     },
     "Statusbar": {
diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx
index e02028e24..356e4859b 100644
--- a/apps/spreadsheeteditor/mobile/src/page/main.jsx
+++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx
@@ -88,7 +88,7 @@ class MainPage extends Component {
                 }
                 {
                     !this.state.settingsVisible ? null :
-                        <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                        <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
                 }
                 {
                     !this.state.collaborationVisible ? null :
diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
index 26887d95b..d6625cc27 100644
--- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
@@ -23,7 +23,7 @@ const ToolbarView = props => {
                     onAddClick: () => props.openOptions('add')
                 })}
                 { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                {props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>}
+                {props.displayCollaboration && window.matchMedia("(min-width: 390px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
                 <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
index f1a3ba84e..52ad39199 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
@@ -78,12 +78,17 @@ const SettingsList = withTranslation()(props => {
 
     const closeModal = () => {
         if (Device.phone) {
-            f7.sheet.close('.settings-popup', true);
+            f7.sheet.close('.settings-popup', false);
         } else {
-            f7.popover.close('#settings-popover');
+            f7.popover.close('#settings-popover', false);
         }
     };
 
+    const onOpenCollaboration = async () => {
+        await closeModal();
+        await props.openOptions('coauth');
+    }
+
     const onPrint = () => {
         closeModal();
         const api = Common.EditorApi.get();
@@ -121,6 +126,11 @@ const SettingsList = withTranslation()(props => {
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }
+                    {window.matchMedia("(max-width: 389px)").matches ? 
+                        <ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration}>
+                            <Icon slot="media" icon="icon-collaboration"></Icon>
+                        </ListItem> 
+                    : null}
                     <ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
                         <Icon slot="media" icon="icon-table-settings"></Icon>
                     </ListItem>
@@ -164,10 +174,10 @@ class SettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
+                    <SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} />
+                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
                 </Popup>
         )
     }
@@ -189,7 +199,7 @@ const Settings = props => {
             props.onclosed();
     };
 
-    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} />
+    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
 };
 
 export default Settings;
\ No newline at end of file