diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index d8e847909..f0991d942 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -57,7 +57,10 @@
     "textStartAt": "Start At",
     "textTable": "Table",
     "textTableSize": "Table Size",
-    "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
+    "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+    "textTableContents": "Table of Contents",
+    "textWithPageNumbers": "With Page Numbers",
+    "textWithBlueLinks": "With Blue Links"
   },
   "Common": {
     "Collaboration": {
diff --git a/apps/documenteditor/mobile/src/controller/add/AddTableContents.jsx b/apps/documenteditor/mobile/src/controller/add/AddTableContents.jsx
new file mode 100644
index 000000000..fc8067d03
--- /dev/null
+++ b/apps/documenteditor/mobile/src/controller/add/AddTableContents.jsx
@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {AddTableContents} from '../../view/add/AddTableContents';
+
+class AddTableContentsController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    componentDidMount () {
+        const api = Common.EditorApi.get();
+        api.asc_getButtonsTOC('toc1', 'toc2');
+    }
+
+    onTableContents(type, currentTOC) {
+        const api = Common.EditorApi.get();
+        let props = api.asc_GetTableOfContentsPr(currentTOC);
+
+        switch (type) {
+            case 0:
+                if (!props) {
+                    props = new Asc.CTableOfContentsPr();
+                    props.put_OutlineRange(1, 9);
+                }
+                props.put_Hyperlink(true);
+                props.put_ShowPageNumbers(true);
+                props.put_RightAlignTab(true);
+                props.put_TabLeader(Asc.c_oAscTabLeader.Dot);
+                api.asc_AddTableOfContents(null, props);
+                break;
+            case 1:
+                if (!props) {
+                    props = new Asc.CTableOfContentsPr();
+                    props.put_OutlineRange(1, 9);
+                }
+                props.put_Hyperlink(true);
+                props.put_ShowPageNumbers(false);
+                props.put_TabLeader(Asc.c_oAscTabLeader.None);
+                props.put_StylesType(Asc.c_oAscTOCStylesType.Web);
+                api.asc_AddTableOfContents(null, props);
+                break;
+        }
+    }
+
+    render () {
+        return (
+            <AddTableContents onTableContents={this.onTableContents} />
+        )
+    }
+}
+
+export default AddTableContentsController;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less
index a4c192194..e73ec6778 100644
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/apps/documenteditor/mobile/src/less/app.less
@@ -157,4 +157,10 @@
     height: 50px;
 }
 
+// Table of Contents 
+
+.item-contents {
+    padding: 0 16px;
+}
+
 
diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less
index 99205059b..cb91ca965 100644
--- a/apps/documenteditor/mobile/src/less/icons-ios.less
+++ b/apps/documenteditor/mobile/src/less/icons-ios.less
@@ -398,6 +398,11 @@
       height: 24px;
       .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z"/></svg>', @toolbar-segment);
     }
+    &.icon-table-contents {
+      width: 24px;
+      height: 24px;
+      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 13" fill="@{brandColor}"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 0H0V1H17V0ZM11.9 4H0V5H11.9V4ZM0 8H17V9H0V8ZM15 12H0V13H15V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H19V1H20V0ZM20 4H19V5H20V4ZM19 8H20V9H19V8ZM20 12H19V13H20V12Z"/></svg>');
+    }
 
     &.icon-insert-comment {
       width: 24px;
diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less
index bc3b9c640..a36c1aa15 100644
--- a/apps/documenteditor/mobile/src/less/icons-material.less
+++ b/apps/documenteditor/mobile/src/less/icons-material.less
@@ -136,6 +136,11 @@
       height: 22px;
       .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 7 22 22" fill="@{brandColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
     }
+    &.icon-table-contents {
+      width: 24px;
+      height: 24px;
+      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 13" fill="@{brandColor}"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 0H0V1H17V0ZM11.9 4H0V5H11.9V4ZM0 8H17V9H0V8ZM15 12H0V13H15V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H19V1H20V0ZM20 4H19V5H20V4ZM19 8H20V9H19V8ZM20 12H19V13H20V12Z"/></svg>');
+    }
 
     // Download
 
diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx
index 365bcc566..83da3a2ee 100644
--- a/apps/documenteditor/mobile/src/view/add/Add.jsx
+++ b/apps/documenteditor/mobile/src/view/add/Add.jsx
@@ -13,6 +13,7 @@ import {AddOtherController} from "../../controller/add/AddOther";
 
 import {PageImageLinkSettings} from "../add/AddImage";
 import {PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote} from "../add/AddOther";
+import AddTableContentsController from '../../controller/add/AddTableContents';
 
 const routes = [
     // Image
@@ -41,6 +42,10 @@ const routes = [
         path: '/add-footnote/',
         component: PageAddFootnote,
     },
+    {
+        path: '/add-table-contents/',
+        component: AddTableContentsController
+    }
 ];
 
 const AddLayoutNavbar = ({ tabs, inPopover }) => {
diff --git a/apps/documenteditor/mobile/src/view/add/AddOther.jsx b/apps/documenteditor/mobile/src/view/add/AddOther.jsx
index 7823f05e9..1f48b8685 100644
--- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/documenteditor/mobile/src/view/add/AddOther.jsx
@@ -209,6 +209,9 @@ const AddOther = props => {
                     <Icon slot="media" icon="icon-sectionbreak"></Icon>
                 </ListItem>
             }
+            <ListItem title={_t.textTableContents} link="/add-table-contents/">
+                <Icon slot="media" icon="icon-table-contents"></Icon>
+            </ListItem>
             {(isShape || isChart) || (isText && disabledAddFootnote) ? null :
                 <ListItem key='footnote' title={_t.textFootnote} link={'/add-footnote/'} routeProps={{
                     getFootnoteProps: props.getFootnoteProps,
diff --git a/apps/documenteditor/mobile/src/view/add/AddTableContents.jsx b/apps/documenteditor/mobile/src/view/add/AddTableContents.jsx
new file mode 100644
index 000000000..f39739a2a
--- /dev/null
+++ b/apps/documenteditor/mobile/src/view/add/AddTableContents.jsx
@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import {observer, inject} from "mobx-react";
+import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const AddTableContents = props => {
+    const { t } = useTranslation();
+    const _t = t('Add', {returnObjects: true});
+
+    return (
+        <Page>
+            <Navbar title={_t.textTableContents} backLink={_t.textBack}></Navbar>
+            <BlockTitle>{_t.textWithPageNumbers}</BlockTitle>
+            <div className="item-contents" id="toc1" onClick={() => props.onTableContents(0)}></div>
+            <BlockTitle>{_t.textWithBlueLinks}</BlockTitle>
+            <div className="item-contents" id="toc2" onClick={() => props.onTableContents(1)}></div>
+        </Page>
+    )      
+};
+
+export {AddTableContents}