diff --git a/apps/common/mobile/lib/controller/Search.jsx b/apps/common/mobile/lib/controller/Search.jsx
index fa60859ec..8727aa450 100644
--- a/apps/common/mobile/lib/controller/Search.jsx
+++ b/apps/common/mobile/lib/controller/Search.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import SearchView, {SearchSettingsView} from '../view/Search'
-
+import {SearchView, SearchSettingsView} from '../view/Search';
 
 const SearchController = props => {
     const onSearchQuery = params => {
         console.log('on search: ' + params);
     };
 
-    return <SearchView onSearchQuery={onSearchQuery} />
+    return <SearchView onSearchQuery={onSearchQuery}  />
 };
 
 export {SearchController, SearchView, SearchSettingsView};
diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx
index 9decff1c8..225e8f175 100644
--- a/apps/common/mobile/lib/view/Search.jsx
+++ b/apps/common/mobile/lib/view/Search.jsx
@@ -7,7 +7,6 @@ import { Dom7 } from 'framework7';
 import { Device } from '../../../../common/mobile/utils/device';
 import { observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { useTranslation, withTranslation } from 'react-i18next';
 
 const searchOptions = observable({
     usereplace: false
@@ -51,25 +50,21 @@ class SearchSettingsView extends Component {
 
     render() {
         const show_popover = !Device.phone;
-        const navbar =
-            <Navbar title="Find and replace">
-                {!show_popover &&
-                    <NavRight>
-                        <Link popupClose=".search-settings-popup">Done</Link>
-                    </NavRight>
-                }
-            </Navbar>;
+        // const navbar =
+        //     <Navbar title="Find and replace">
+        //         {!show_popover &&
+        //             <NavRight>
+        //                 <Link popupClose=".search-settings-popup">Done</Link>
+        //             </NavRight>
+        //         }
+        //     </Navbar>;
         const extra = this.extraSearchOptions();
         const content =
             <View style={show_popover ? popoverStyle : null}>
-                <Page>
-                    {navbar}
-                    <List>
-                        <ListItem radio title="Find" name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
-                        <ListItem radio title="Find and replace" name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
-                    </List>
-                    { extra }
-                </Page>
+                {/* <Page>
+                    {navbar} */}
+                {extra}
+                {/* </Page> */}
             </View>;
         return (
             show_popover ?
@@ -113,14 +108,14 @@ class SearchView extends Component {
                 // }
 
                 const $editor = $$('#editor_sdk');
-                const $replaceLink = $$('#replace-link');
+                // const $replaceLink = $$('#replace-link');
                
-                if (false /*iOSVersion() < 13*/) {
-                    // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
-                    // $editor.single('mouseup touchend',     _.bind(me.onEditorTouchEnd, me));
+                if (false /* iOSVersion < 13 */) {
+                    // $editor.on('mousedown touchstart', this.onEditorTouchStart.bind(this));
+                    // $editor.on('mouseup touchend', this.onEditorTouchEnd.bind(this));
                 } else {
-                    // $editor.single('pointerdown', this.onEditorTouchStart, me));
-                    // $editor.single('pointerup',     _.bind(me.onEditorTouchEnd, me));
+                    // $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
+                    // $editor.on('pointerup',   this.onEditorTouchEnd.bind(this));
                 }
 
                 $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
@@ -163,7 +158,7 @@ class SearchView extends Component {
                 let params = this.searchParams();
                 params.find = this.state.searchQuery;
                 params.forward = action != SEARCH_BACKWARD;
-                console.log(params);
+                // console.log(params);
 
                 this.props.onSearchQuery(params);
             }
@@ -209,11 +204,20 @@ class SearchView extends Component {
         const endPoint = this.pointerPosition(e);
         // console.log(endPoint);
 
-        if ( this.searchbar.enabled ) {
-            const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
-                Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
+        if (this.searchbar.enabled) {
+            let distance;
 
-            if ( distance < 1 ) {
+            if(this.startPoint) {
+                distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 : 
+                    Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
+            } else {
+                distance = 0;
+            }
+
+            // const distance = (this.startPoint === undefined || this.startPoint === undefined) ? 0 :
+            //     Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
+
+            if (distance < 1) {
                 this.searchbar.disable();
             }
         }
@@ -225,8 +229,7 @@ class SearchView extends Component {
             const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
             out.x = touch.pageX;
             out.y = touch.pageY;
-        } else
-        if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
+        } else if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
             out.x = e.pageX;
             out.y = e.pageY;
         }
@@ -252,9 +255,7 @@ class SearchView extends Component {
         const searchQuery = this.state.searchQuery;
         const replaceQuery = this.state.replaceQuery;
         const isIos = Device.ios;
-        
-        // const _t = this.t('View.Settings', {returnObjects: true});
-        // console.log(this.state.searchQuery, this.state.replaceQuery);
+        const { _t } = this.props;
 
         if(this.searchbar && this.searchbar.enabled) {
             usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
@@ -271,13 +272,13 @@ class SearchView extends Component {
                     </div>
                     <div className="searchbar-inner__center">
                         <div className="searchbar-input-wrap">
-                            <input placeholder="Search" type="search" value={searchQuery} 
+                            <input placeholder={_t.textSearch} type="search" value={searchQuery} 
                                 onChange={e => {this.changeSearchQuery(e.target.value)}} />
                             {isIos ? <i className="searchbar-icon" /> : null}
                             <span className="input-clear-button" />
                         </div>
                         <div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
-                            <input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery} 
+                            <input placeholder={_t.textReplace} type="search" id="idx-replace-val" value={replaceQuery} 
                                 onChange={e => {this.changeReplaceQuery(e.target.value)}} />
                             {isIos ? <i className="searchbar-icon" /> : null}
                             <span className="input-clear-button" />
@@ -285,8 +286,8 @@ class SearchView extends Component {
                     </div>
                     <div className="buttons-row searchbar-inner__right">
                         <div className="buttons-row buttons-row-replace">
-                            <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
-                            <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>Replace All</a>
+                            <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
+                            <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
                         </div>
                         <div className="buttons-row">
                             <a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
@@ -303,4 +304,4 @@ class SearchView extends Component {
     }
 }
 
-export {SearchView as default, SearchView, SearchSettingsView};
\ No newline at end of file
+export {SearchView, SearchSettingsView};
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx
index 52ec2cb8c..c5da9a6b1 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx
@@ -1,22 +1,15 @@
-import React, { Fragment } from 'react';
-import { List, ListItem, Toggle, BlockTitle } from 'framework7-react';
+import React, { Fragment, useEffect } from 'react';
+import { List, ListItem, Toggle, BlockTitle, Navbar, NavRight, Link, Page } from 'framework7-react';
 import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
 import { f7 } from 'framework7-react';
-import { useTranslation, withTranslation } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Dom7 } from 'framework7';
+import { Device } from '../../../../common/mobile/utils/device';
 
 class SearchSettings extends SearchSettingsView {
     constructor(props) {
         super(props);
 
-        // this.state = {
-        //     searchIn: 0,
-        //     searchBy: 1,
-        //     lookIn: 1,
-        //     isMatchCase: false,
-        //     isMatchCell: false
-        // }
-
         this.onToggleMarkResults = this.onToggleMarkResults.bind(this);
     }
 
@@ -27,52 +20,66 @@ class SearchSettings extends SearchSettingsView {
 
     extraSearchOptions() {
         const anc_markup = super.extraSearchOptions();
+        const show_popover = !Device.phone;
+        const { t } = this.props;
+        const _t = t("View.Settings", { returnObjects: true });
 
         const markup = (
-            <Fragment>
-                <BlockTitle>Search In</BlockTitle>
+            <Page>
+                <Navbar title={_t.textFindAndReplace}>
+                    {!show_popover &&
+                        <NavRight>
+                            <Link popupClose=".search-settings-popup">{_t.textDone}</Link>
+                        </NavRight>
+                    }
+                </Navbar>
                 <List>
-                    <ListItem radio title="Workbook" name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({
+                    <ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
+                    <ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
+                </List>
+                <BlockTitle>{_t.textSearchIn}</BlockTitle>
+                <List>
+                    <ListItem radio title={_t.textWorkbook} name="search-in-checkbox" value="0" checked={this.state.searchIn === 0} onClick={() => this.setState({
                         searchIn: 0
                     })} />
-                    <ListItem radio title="Sheet" name="search-in-checkbox" value="1" checked={this.state.searchIn === 1} onClick={( )=> this.setState({
+                    <ListItem radio title={_t.textSheet} name="search-in-checkbox" value="1" checked={this.state.searchIn === 1} onClick={( )=> this.setState({
                         searchIn: 1
                     })} />
                 </List>
-                <BlockTitle>Search</BlockTitle>
+                <BlockTitle>{_t.textSearchBy}</BlockTitle>
                 <List>
-                    <ListItem radio title="By rows" name="search-by-checkbox" value="0" checked={this.state.searchBy === 0} onClick={() => this.setState({
+                    <ListItem radio title={_t.textByRows} name="search-by-checkbox" value="0" checked={this.state.searchBy === 0} onClick={() => this.setState({
                         searchBy: 0
                     })} />
-                    <ListItem radio title="By columns" name="search-by-checkbox" value="1" checked={this.state.searchBy === 1} onClick={() => this.setState({
+                    <ListItem radio title={_t.textByColumns} name="search-by-checkbox" value="1" checked={this.state.searchBy === 1} onClick={() => this.setState({
                         searchBy: 1
                     })} />
                 </List>
-                <BlockTitle>Look In</BlockTitle>
+                <BlockTitle>{_t.textLookIn}</BlockTitle>
                 <List>
-                    <ListItem radio title="Formulas" name="look-in-checkbox" value="0" checked={this.state.lookIn === 0} onClick={() => this.setState({
+                    <ListItem radio title={_t.textFormulas} name="look-in-checkbox" value="0" checked={this.state.lookIn === 0} onClick={() => this.setState({
                         lookIn: 0
                     })} />
-                    <ListItem radio title="Values" name="look-in-checkbox" value="1" checked={this.state.lookIn === 1} onClick={() => this.setState({
+                    <ListItem radio title={_t.textValues} name="look-in-checkbox" value="1" checked={this.state.lookIn === 1} onClick={() => this.setState({
                         lookIn: 1
                     })} />
                 </List>
                 <List>
-                    <ListItem title="Match Case">
+                    <ListItem title={_t.textMatchCase}>
                         <Toggle slot="after" className="toggle-match-case" checked={this.state.isMatchCase} onToggleChange={() => this.setState({
                             isMatchCase: !this.state.isMatchCase
                         })} />
                     </ListItem>
-                    <ListItem title="Match Cell">
+                    <ListItem title={_t.textMatchCell}>
                         <Toggle slot="after" className="toggle-match-cell" checked={this.state.isMatchCell} onToggleChange={() => this.setState({
                             isMatchCell: !this.state.isMatchCell
                         })} />
                     </ListItem>
-                    <ListItem title="Highlight results">
+                    <ListItem title={_t.textHighlightRes}>
                         <Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
                     </ListItem>
                 </List>
-            </Fragment>
+            </Page>
         )
 
         return {...anc_markup, ...markup};
@@ -80,6 +87,10 @@ class SearchSettings extends SearchSettingsView {
 }
 
 class SESearchView extends SearchView {
+    constructor(props) {
+        super(props);
+    }
+
     searchParams() {
         let params = super.searchParams();
         const $$ = Dom7;
@@ -114,12 +125,13 @@ class SESearchView extends SearchView {
     }
 }
 
-const Search = props => {
-    // const { t } = useTranslation();
-    // const _t = t('View.Settings', {returnObjects: true});
+const Search = withTranslation()(props => {
+    const { t } = props;
+    const _t = t('View.Settings', {returnObjects: true});
 
     const onSearchQuery = params => {
         const api = Common.EditorApi.get();
+      
         let lookIn = +params.lookIn === 0;
         let searchIn = +params.searchIn === 1;
         let searchBy = +params.searchBy === 0;
@@ -136,7 +148,7 @@ const Search = props => {
             options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
 
             if (!api.asc_findText(options)) {
-                f7.dialog.alert(null, 'Text not Found');
+                f7.dialog.alert(null, _t.textNoTextFound);
             }
         }
     };
@@ -189,7 +201,9 @@ const Search = props => {
         }
     }
 
-    return <SESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
-};
+    return <SESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
+});
 
-export {Search, SearchSettings}
\ No newline at end of file
+const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
+
+export {Search, SearchSettingsWithTranslation as SearchSettings}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx
index 94680f9f4..1ccf46b6b 100644
--- a/apps/spreadsheeteditor/mobile/src/page/main.jsx
+++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx
@@ -73,12 +73,12 @@ export default class MainPage extends Component {
                         <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                         <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                     </NavRight>
-                    <Search />
+                    <Search useSuspense={false} />
                 </Navbar>
                 <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
                 {/* Page content */}
                 <View id="editor_sdk" />
-                <SearchSettings />
+                <SearchSettings useSuspense={false} />
                 {
                     !this.state.editOptionsVisible ? null :
                         <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />