diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index 4a18434f1..dd3001b6b 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -5,5 +5,13 @@
             },
             "textAnonymous": "Anonymous"
         }
+    },
+    "View" : {
+        "Add" : {
+            "textChart": "Chart",
+            "textFormula": "Formula",
+            "textShape": "Shape",
+            "textOther": "Other"
+        }
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
new file mode 100644
index 000000000..5e69d6d85
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import AddChart from '../../view/add/AddChart';
+
+class AddChartController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    render () {
+        return (
+            <AddChart
+            />
+        )
+    }
+}
+
+export default AddChartController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddFormula.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddFormula.jsx
new file mode 100644
index 000000000..46959e5c2
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddFormula.jsx
@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import AddFormula from '../../view/add/AddFormula';
+
+class AddFormulaController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    render () {
+        return (
+            <AddFormula
+            />
+        )
+    }
+}
+
+export default AddFormulaController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
index 36cb30894..ec61398a8 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
@@ -475,7 +475,7 @@
         }
     }
 
-    .active {
+    .tab-link-active {
         i.icon {
             &.icon-add-chart {
                 width: 24px;
diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx
index 0d648d522..d5db59130 100644
--- a/apps/spreadsheeteditor/mobile/src/page/main.jsx
+++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx
@@ -6,12 +6,14 @@ import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
 import CellEditor from '../controller/CellEditor';
 import Statusbar from '../controller/StatusBar'
+import AddOptions from "../view/add/Add";
 
 export default class MainPage extends Component {
     constructor(props) {
         super(props);
         this.state = {
             editOptionsVisible: false,
+            addOptionsVisible: false,
             settingsVisible: false,
             collaborationVisible: false,
         };
@@ -21,12 +23,12 @@ export default class MainPage extends Component {
         this.setState(state => {
             if ( opts == 'edit' )
                 return {editOptionsVisible: true};
-            else
-            if ( opts == 'settings' )
+            else if ( opts == 'add' )
+                return {addOptionsVisible: true};
+            else if ( opts == 'settings' )
                 return {settingsVisible: true};
-            else
-            if ( opts == 'coauth' )
-                return {collaborationVisible: true}
+            else if ( opts == 'coauth' )
+                return {collaborationVisible: true};
         });
     };
 
@@ -35,12 +37,12 @@ export default class MainPage extends Component {
             await 1 && this.setState(state => {
                 if ( opts == 'edit' )
                     return {editOptionsVisible: false};
-                else
-                if ( opts == 'settings' )
+                else if ( opts == 'add' )
+                    return {addOptionsVisible: false};
+                else if ( opts == 'settings' )
                     return {settingsVisible: false};
-                else
-                if ( opts == 'coauth' )
-                    return {collaborationVisible: false}
+                else if ( opts == 'coauth' )
+                    return {collaborationVisible: false};
             })
         })();
     };
@@ -57,6 +59,7 @@ export default class MainPage extends Component {
                   </NavLeft>
                   <NavRight>
                       <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
+                      <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
                       <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>
@@ -68,6 +71,10 @@ export default class MainPage extends Component {
                 {/*!this.state.editOptionsVisible ? null :*/}
                     {/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
             {/*}*/}
+            {
+                !this.state.addOptionsVisible ? null :
+                    <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />
+            }
             {
                 !this.state.settingsVisible ? null :
                     <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
new file mode 100644
index 000000000..619b8983a
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
@@ -0,0 +1,122 @@
+import React, {Component, useEffect} from 'react';
+import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {f7} from 'framework7-react';
+import { observer, inject } from "mobx-react";
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import AddChartController from "../../controller/add/AddChart";
+import AddFormulaController from "../../controller/add/AddFormula";
+//import AddShapeController from "../../controller/add/AddShape";
+//import {AddOtherController} from "../../controller/add/AddOther";
+
+const routes = [
+];
+
+const AddLayoutNavbar = ({ tabs, inPopover }) => {
+    const isAndroid = Device.android;
+    return (
+        <Navbar>
+            <div className='tab-buttons tabbar'>
+                {tabs.map((item, index) =>
+                    <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
+                        <Icon slot="media" icon={item.icon}></Icon>
+                    </Link>)}
+                {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
+            </div>
+            { !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
+        </Navbar>
+    )
+};
+
+const AddLayoutContent = ({ tabs }) => {
+    return (
+        <Tabs animated>
+            {tabs.map((item, index) =>
+                <Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                    {item.component}
+                </Tab>
+            )}
+        </Tabs>
+    )
+};
+
+const AddTabs = props => {
+    const { t } = useTranslation();
+    const _t = t('Add', {returnObjects: true});
+    const tabs = [];
+    tabs.push({
+        caption: _t.textChart,
+        id: 'add-chart',
+        icon: 'icon-add-chart',
+        component: <AddChartController />
+    });
+    tabs.push({
+        caption: _t.textFormula,
+        id: 'add-formula',
+        icon: 'icon-add-formula',
+        component: <AddFormulaController />
+    });
+    /*tabs.push({
+        caption: _t.textShape,
+        id: 'add-shape',
+        icon: 'icon-add-shape',
+        component: <AddShapeController />
+    });
+    tabs.push({
+        caption: _t.textOther,
+        id: 'add-other',
+        icon: 'icon-add-other',
+        component: <AddOtherController />
+    });*/
+    return (
+        <View style={props.style} stackPages={true} routes={routes}>
+            <Page pageContent={false}>
+                <AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
+                <AddLayoutContent tabs={tabs} />
+            </Page>
+        </View>
+    )
+};
+
+class AddView extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onoptionclick = this.onoptionclick.bind(this);
+    }
+    onoptionclick(page){
+        f7.views.current.router.navigate(page);
+    }
+    render() {
+        const show_popover = this.props.usePopover;
+        return (
+            show_popover ?
+                <Popover id="add-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                    <AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
+                </Popover> :
+                <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
+                    <AddTabs onOptionClick={this.onoptionclick} />
+                </Popup>
+        )
+    }
+}
+
+const Add = props => {
+    useEffect(() => {
+        if ( Device.phone )
+            f7.popup.open('.add-popup');
+        else f7.popover.open('#add-popover', '#btn-add');
+
+        return () => {
+            // component will unmount
+        }
+    });
+    const onviewclosed = () => {
+        if ( props.onclosed )
+            props.onclosed();
+    };
+    return <AddView usePopover={!Device.phone} onclosed={onviewclosed} />
+};
+
+export default Add;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
new file mode 100644
index 000000000..8eec1a782
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
@@ -0,0 +1,12 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+
+const AddChart = props => {
+    return (
+        <Fragment>
+
+        </Fragment>
+    )
+};
+
+export default AddChart;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddFormula.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddFormula.jsx
new file mode 100644
index 000000000..b8272b828
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddFormula.jsx
@@ -0,0 +1,12 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+
+const AddFormula = props => {
+    return (
+        <Fragment>
+
+        </Fragment>
+    )
+};
+
+export default AddFormula;
\ No newline at end of file