diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index 5dcd68c1b..c6f4ec509 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@@ -337,7 +337,7 @@
         }
     }
 
-    .dataview, #add-table {
+    .dataview, #add-table, #add-shape {
         &.page-content {
             background-color: @white;
         }
diff --git a/apps/documenteditor/mobile/src/controller/add/AddShape.jsx b/apps/documenteditor/mobile/src/controller/add/AddShape.jsx
index bf649dc1d..2b51e1e18 100644
--- a/apps/documenteditor/mobile/src/controller/add/AddShape.jsx
+++ b/apps/documenteditor/mobile/src/controller/add/AddShape.jsx
@@ -1,17 +1,32 @@
 import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
-import {observer, inject} from "mobx-react";
 
-import { AddShape } from '../../view/add/AddShape';
+import AddShape from '../../view/add/AddShape';
 
 class AddShapeController extends Component {
     constructor (props) {
         super(props);
+        this.onShapeClick = this.onShapeClick.bind(this);
     }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    onShapeClick (type) {
+        const api = Common.EditorApi.get();
+        api.AddShapeOnCurrentPage(type);
+        this.closeModal();
+    }
+
     render () {
         return (
-            <AddShape
+            <AddShape onShapeClick={this.onShapeClick}
             />
         )
     }
diff --git a/apps/documenteditor/mobile/src/view/add/AddShape.jsx b/apps/documenteditor/mobile/src/view/add/AddShape.jsx
index bf408d896..155ee02dc 100644
--- a/apps/documenteditor/mobile/src/view/add/AddShape.jsx
+++ b/apps/documenteditor/mobile/src/view/add/AddShape.jsx
@@ -1,15 +1,28 @@
-import React, {Fragment, useState} from 'react';
+import React from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddShape = props => {
+    const storeShapeSettings = props.storeShapeSettings;
+    let shapes = storeShapeSettings.getStyleGroups();
     return (
-        <Fragment>
-
-        </Fragment>
+        <div className={'dataview shapes'}>
+            {shapes.map((row, indexRow) => {
+                return (
+                    <ul className="row" key={'shape-row-' + indexRow}>
+                        {row.map((shape, index) => {
+                            return (
+                                <li key={'shape-' + indexRow + '-' + index} onClick={() => {props.onShapeClick(shape.type)}}>
+                                    <div className="thumb"
+                                         style={{WebkitMaskImage: `url('resources/img/shapes/${shape.thumb}')`}}>
+                                    </div>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                )
+            })}
+        </div>
     )
 };
 
-export {AddShape};
\ No newline at end of file
+export default  inject("storeShapeSettings")(observer(AddShape));
\ No newline at end of file