diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index b21d7b6d7..8cc11a04d 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -137,11 +137,12 @@
             &:before, &:after {
                 display: none;
             }
-            display: flex;
+            display: grid;
+            grid-template-columns: repeat(4, auto);
             justify-content: space-around;
+            grid-gap: 10px;
             width: 100%;
             padding: 5px;
-
             li {
                 width: 70px;
                 height: 70px;
@@ -189,7 +190,7 @@
 }
 
 .popover {
-    .page .list{
+    .page {
         ul {
             background-color: var(--f7-list-bg-color);
             li:first-child, li:last-child {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index 85ff76966..3de276cb8 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -184,18 +184,14 @@ const PageBullets = observer( props => {
     const storeTextSettings = props.storeTextSettings;
     const typeBullets = storeTextSettings.typeBullets;
     const bulletArrays = [
-        [
-            { type: 0, subtype: -1 },
-            { type: 0, subtype: 1 },
-            { type: 0, subtype: 2 },
-            { type: 0, subtype: 3 }
-        ],
-        [
-            { type: 0, subtype: 4 },
-            { type: 0, subtype: 5 },
-            { type: 0, subtype: 6 },
-            { type: 0, subtype: 7 }
-        ]
+        { type: 0, subtype: -1 },
+        { type: 0, subtype: 1 },
+        { type: 0, subtype: 2 },
+        { type: 0, subtype: 3 },
+        { type: 0, subtype: 4 },
+        { type: 0, subtype: 5 },
+        { type: 0, subtype: 6 },
+        { type: 0, subtype: 7 }
     ];
 
     useEffect(() => {
@@ -204,22 +200,20 @@ const PageBullets = observer( props => {
     
     return(
         <View className='bullets dataview'>
-            {bulletArrays.map((bullets, index) => (
-                    <List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
-                        {bullets.map((bullet) => (
-                            <ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) && 
-                                (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
-                                onClick={() => {
-                                    storeTextSettings.resetBullets(bullet.subtype);
-                                    props.onBullet(bullet.subtype);
-                                }}>
-                                <div id={`id-markers-${bullet.subtype}`} className='item-marker'>
-                                
-                                </div>
-                            </ListItem>
-                        ))}
-                    </List>
-            ))}
+            <List className="row" style={{listStyle: 'none'}}>
+                {bulletArrays.map( bullet => (
+                    <ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) && 
+                        (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
+                        onClick={() => {
+                            storeTextSettings.resetBullets(bullet.subtype);
+                            props.onBullet(bullet.subtype);
+                        }}>
+                        <div id={`id-markers-${bullet.subtype}`} className='item-marker'>
+                        
+                        </div>
+                    </ListItem>
+                ))}
+            </List>
         </View>
     )
 });
@@ -228,18 +222,14 @@ const PageNumbers = observer( props => {
     const storeTextSettings = props.storeTextSettings;
     const typeNumbers = storeTextSettings.typeNumbers;
     const numberArrays = [
-        [
-            { type: 1, subtype: -1},
-            { type: 1, subtype: 4 },
-            { type: 1, subtype: 5 },
-            { type: 1, subtype: 6 }
-        ],
-        [
-            { type: 1, subtype: 1 },
-            { type: 1, subtype: 2 },
-            { type: 1, subtype: 3 },
-            { type: 1, subtype: 7 }
-        ]
+        { type: 1, subtype: -1},
+        { type: 1, subtype: 4 },
+        { type: 1, subtype: 5 },
+        { type: 1, subtype: 6 },
+        { type: 1, subtype: 1 },
+        { type: 1, subtype: 2 },
+        { type: 1, subtype: 3 },
+        { type: 1, subtype: 7 }
     ];
 
     useEffect(() => {
@@ -248,22 +238,20 @@ const PageNumbers = observer( props => {
     
     return(
         <View className='numbers dataview'>
-            {numberArrays.map((numbers, index) => (
-                <List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
-                    {numbers.map((number) => (
-                        <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) && 
-                            (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
-                            onClick={() => {
-                                storeTextSettings.resetNumbers(number.subtype);
-                                props.onNumber(number.subtype);
-                            }}>
-                            <div id={`id-numbers-${number.subtype}`} className='item-number'>
+            <List className="row" style={{listStyle: 'none'}}>
+                {numberArrays.map(number => (
+                    <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) && 
+                        (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
+                        onClick={() => {
+                            storeTextSettings.resetNumbers(number.subtype);
+                            props.onNumber(number.subtype);
+                        }}>
+                        <div id={`id-numbers-${number.subtype}`} className='item-number'>
 
-                            </div>
-                        </ListItem>
-                    ))}
-                </List>
-            ))}
+                        </div>
+                    </ListItem>
+                ))}
+            </List>
         </View>
     )
 });
diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
index c1328921d..7d96bf4eb 100644
--- a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
@@ -237,7 +237,14 @@ class EditTextController extends Component {
 
     getIconsBulletsAndNumbers(arrayElements, type) {
         const api = Common.EditorApi.get();
-        if (api) api.SetDrawImagePreviewBulletForMenu(arrayElements, type);
+        const arr = [];
+
+        arrayElements.forEach( item => {
+            let data = item.drawdata;
+            data['divId'] = item.id;
+            arr.push(data);
+        });
+        if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
     }
 
     onLineSpacing(value) {
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index 1b2b07d29..541fd9a02 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -495,40 +495,19 @@ const PageAdditionalFormatting = props => {
 const PageBullets = observer(props => {
     const storeTextSettings = props.storeTextSettings;
     const typeBullets = storeTextSettings.typeBullets;
-    const markersArr = [
-        {type: Asc.asc_PreviewBulletType.text, text: 'None'},
-        {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'},
-        {type: Asc.asc_PreviewBulletType.char, char: 'o',                                specialFont: 'Courier New'},
-        {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'},
-        {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'},
-        {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'},
-        {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'},
-        {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'},
-    ];
-
     const bulletArrays = [
-        [
-            { type: 0, subtype: -1 },
-            { type: 0, subtype: 1 },
-            { type: 0, subtype: 2 },
-            { type: 0, subtype: 3 }
-        ],
-        [
-            { type: 0, subtype: 4 },
-            { type: 0, subtype: 5 },
-            { type: 0, subtype: 6 },
-            { type: 0, subtype: 7 }
-        ]
+        {id: `id-markers-0`, type: 0, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'} },
+        {id: `id-markers-1`, type: 0, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'} },
+        {id: `id-markers-2`, type: 0, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'} },
+        {id: `id-markers-3`, type: 0, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'} },
+        {id: `id-markers-4`, type: 0, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'} },
+        {id: `id-markers-5`, type: 0, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'} },
+        {id: `id-markers-6`, type: 0, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'} },
+        {id: `id-markers-7`, type: 0, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'} }
     ];
 
     useEffect(() => {
-        const arrayItemNumber = $$('.item-marker');
-        const arr = [];
-
-        arrayItemNumber.forEach( (item, index) => {
-            arr.push({...markersArr[index], divId: item.id});
-        });
-        props.getIconsBulletsAndNumbers(arr, 0);
+        props.getIconsBulletsAndNumbers(bulletArrays, 0);
     }, []);
 
     const paragraph = props.storeFocusObjects.paragraphObject;
@@ -540,22 +519,20 @@ const PageBullets = observer(props => {
 
     return(
         <View className='bullets dataview'>
-            {bulletArrays.map((bullets, index) => (
-                    <List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
-                        {bullets.map((bullet) => (
-                            <ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) && 
-                                (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
-                                onClick={() => {
-                                    storeTextSettings.resetBullets(bullet.subtype);
-                                    props.onBullet(bullet.subtype);
-                                }}>
-                                <div id={`id-markers-${bullet.subtype}`} className='item-marker'>
-                                
-                                </div>
-                            </ListItem>
-                        ))}
-                    </List>
-            ))}
+            <List className="row" style={{listStyle: 'none'}}>
+                {bulletArrays.map( bullet => (
+                    <ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) && 
+                        (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
+                        onClick={() => {
+                            storeTextSettings.resetBullets(bullet.subtype);
+                            props.onBullet(bullet.subtype);
+                        }}>
+                        <div id={bullet.id} className='item-marker'>
+                        
+                        </div>
+                    </ListItem>
+                ))}
+            </List>
         </View>
     )
 });
@@ -563,40 +540,19 @@ const PageBullets = observer(props => {
 const PageNumbers = observer(props => {
     const storeTextSettings = props.storeTextSettings;
     const typeNumbers = storeTextSettings.typeNumbers;
-    const numbersArr = [
-        {type: Asc.asc_PreviewBulletType.text, text: 'None'},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right},
-        {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right},
-    ];
     const numberArrays = [
-        [
-            {type: 1, subtype: -1},
-            {type: 1, subtype: 4},
-            {type: 1, subtype: 5},
-            {type: 1, subtype: 6}
-        ],
-        [
-            {type: 1, subtype: 1},
-            {type: 1, subtype: 2},
-            {type: 1, subtype: 3},
-            {type: 1, subtype: 7}
-        ]
+            {id: `id-numbers-0`, type: 1, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'}},
+            {id: `id-numbers-4`, type: 1, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left}},
+            {id: `id-numbers-5`, type: 1, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left}},
+            {id: `id-numbers-6`, type: 1, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left}},
+            {id: `id-numbers-1`, type: 1, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right}},
+            {id: `id-numbers-2`, type: 1, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right}},
+            {id: `id-numbers-3`, type: 1, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right}},
+            {id: `id-numbers-7`, type: 1, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right}}
     ];
 
     useEffect(() => {
-        const arrayItemNumber = $$('.item-number');
-        const arr = [];
-
-        arrayItemNumber.forEach( (item, index) => {
-            arr.push({...numbersArr[index], divId: item.id});
-        });
-
-        props.getIconsBulletsAndNumbers(arr, 1);
+        props.getIconsBulletsAndNumbers(numberArrays, 1);
     }, []);
 
     const paragraph = props.storeFocusObjects.paragraphObject;
@@ -608,22 +564,20 @@ const PageNumbers = observer(props => {
 
     return (
         <View className='numbers dataview'>
-            {numberArrays.map((numbers, index) => (
-                <List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
-                    {numbers.map((number) => (
-                        <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) && 
-                            (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
-                            onClick={() => {
-                                storeTextSettings.resetNumbers(number.subtype);
-                                props.onNumber(number.subtype);
-                            }}>
-                            <div id={`id-numbers-${number.subtype}`} className='item-number'>
+            <List className="row" style={{listStyle: 'none'}}>
+                {numberArrays.map( number => (
+                    <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) && 
+                        (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
+                        onClick={() => {
+                            storeTextSettings.resetNumbers(number.subtype);
+                            props.onNumber(number.subtype);
+                        }}>
+                        <div id={number.id} className='item-number'>
 
-                            </div>
-                        </ListItem>
-                    ))}
-                </List>
-            ))}
+                        </div>
+                    </ListItem>
+                ))}
+            </List>
         </View>
     )
 });