diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index b42f2de37..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;
@@ -167,6 +168,11 @@
                         color: @fill-black;
                     }
                 }
+
+                .item-number, .item-marker, .item-multilevellist {
+                    width: 68px;
+                    height: 68px;
+                }
             }
         }
     }
@@ -184,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/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
index 4b8e57998..ea74e99dd 100644
--- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
@@ -193,6 +193,14 @@ class EditTextController extends Component {
         if (api) api.put_ListType(2, parseInt(type));
     }
 
+    getIconsBulletsAndNumbers(arrayElements, type) {
+        const api = Common.EditorApi.get();
+        const arr = [];
+
+        arrayElements.forEach( item => arr.push(item.id));
+        if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
+    }
+
     onLineSpacing(value) {
         const api = Common.EditorApi.get();
         if (api) {
@@ -221,6 +229,7 @@ class EditTextController extends Component {
                 onParagraphMove={this.onParagraphMove}
                 onBullet={this.onBullet}
                 onNumber={this.onNumber}
+                getIconsBulletsAndNumbers={this.getIconsBulletsAndNumbers}
                 onMultiLevelList={this.onMultiLevelList}
                 onLineSpacing={this.onLineSpacing}
             />
diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less
index c0607a196..e11f9102e 100644
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/apps/documenteditor/mobile/src/less/app.less
@@ -136,14 +136,14 @@
     .swiper-pagination-bullet-active{
         background: @black;
     }
-    .multilevels {
-        li:not(:first-child){ 
-            border:none;
-            .item-content {
-                min-height: 70px;
-            }
-        }
-    }
+    // .multilevels {
+    //     li:not(:first-child){ 
+    //         border:none;
+    //         .item-content {
+    //             min-height: 70px;
+    //         }
+    //     }
+    // }
 }
 
 // Skeleton table
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index 7a0fe89eb..3de276cb8 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -181,122 +181,107 @@ const PageAdditionalFormatting = props => {
 };
 
 const PageBullets = observer( props => {
-    const { t } = useTranslation();
-    const bulletArrays = [
-        [
-            {type: -1, thumb: ''},
-            {type: 1, thumb: 'bullet-01.png'},
-            {type: 2, thumb: 'bullet-02.png'},
-            {type: 3, thumb: 'bullet-03.png'}
-        ],
-        [
-            {type: 4, thumb: 'bullet-04.png'},
-            {type: 5, thumb: 'bullet-05.png'},
-            {type: 6, thumb: 'bullet-06.png'},
-            {type: 7, thumb: 'bullet-07.png'}
-        ]
-    ];
     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 }
+    ];
+
+    useEffect(() => {
+        props.getIconsBulletsAndNumbers($$('.item-marker'), 0);
+    }, []);
     
     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.type} data-type={bullet.type} className={(bullet.type === typeBullets) && 
-                                (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
-                                onClick={() => {
-                                    storeTextSettings.resetBullets(bullet.type);
-                                    props.onBullet(bullet.type);
-                                }}>
-                                {bullet.thumb.length < 1 ?
-                                    <Icon className="thumb" style={{position: 'relative'}}>
-                                        <label>{t('Edit.textNone')}</label>
-                                    </Icon> :
-                                    <Icon className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></Icon>
-                                }
-                            </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>
     )
 });
 
 const PageNumbers = observer( props => {
-    const { t } = useTranslation();
-    const numberArrays = [
-        [
-            {type: -1, thumb: ''},
-            {type: 4, thumb: 'number-01.png'},
-            {type: 5, thumb: 'number-02.png'},
-            {type: 6, thumb: 'number-03.png'}
-        ],
-        [
-            {type: 1, thumb: 'number-04.png'},
-            {type: 2, thumb: 'number-05.png'},
-            {type: 3, thumb: 'number-06.png'},
-            {type: 7, thumb: 'number-07.png'}
-        ]
-    ];
-
     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 }
+    ];
+
+    useEffect(() => {
+        props.getIconsBulletsAndNumbers($$('.item-number'), 1);
+    }, []);
     
     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.type} data-type={number.type} className={(number.type === typeNumbers) && 
-                            (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
-                            onClick={() => {
-                                storeTextSettings.resetNumbers(number.type);
-                                props.onNumber(number.type);
-                            }}>
-                            {number.thumb.length < 1 ?
-                                <Icon className="thumb" style={{position: 'relative'}}>
-                                    <label>{t('Edit.textNone')}</label>
-                                </Icon> :
-                                <Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
-                            }
-                        </ListItem>
-                    ))}
-                </List>
-            ))}
+            <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>
         </View>
     )
 });
 
 const PageMultiLevel = observer( props => {
-    const { t } = useTranslation();
-    
-    const arrayMultiLevel = [
-        {type: -1, thumb: ''},
-        {type: 1, thumb: 'multi-bracket.png'},
-        {type: 2, thumb: 'multi-dot.png'},
-        {type: 3, thumb: 'multi-bullets.png'},
-    ];
-
     const storeTextSettings = props.storeTextSettings;
     const typeMultiLevel = storeTextSettings.typeMultiLevel;
+    const arrayMultiLevel = [
+        { type: 2, subtype: -1 },
+        { type: 2, subtype: 1 },
+        { type: 2, subtype: 2 },
+        { type: 2, subtype: 3 },
+    ];
+
+    useEffect(() => {
+        props.getIconsBulletsAndNumbers($$('.item-multilevellist'), 2);
+    }, []);
 
     return(
         <View className='multilevels dataview'>
                 <List className="row" style={{listStyle: 'none'}}>
                     {arrayMultiLevel.map((item) => (
                         <ListItem
-                        key={'multi-level-' + item.type} 
-                        data-type={item.type} 
-                        className={item.type === typeMultiLevel && storeTextSettings.listType === -1  ? 'active' : ''}
-                        onClick={() => props.onMultiLevelList(item.type)}>
-                            {item.thumb.length < 1 ?
-                                <Icon className="thumb" style={{position: 'relative'}}>
-                                    <label>{t('Edit.textNone')}</label>
-                                </Icon> :
-                                <Icon className="thumb" style={{backgroundImage: `url('resources/img/multilevels/${item.thumb}')`}}></Icon>
-                            }
+                        key={'multi-level-' + item.subtype} 
+                        data-type={item.subtype} 
+                        className={item.subtype === typeMultiLevel && storeTextSettings.listType === -1  ? 'active' : ''}
+                        onClick={() => props.onMultiLevelList(item.subtype)}>
+                            <div id={`id-multilevellists-${item.subtype}`} className='item-multilevellist'>
+
+                            </div>
                         </ListItem>
                     ))}
                 </List>
@@ -322,13 +307,25 @@ const PageBulletsAndNumbers = props => {
             </Navbar>
             <Swiper pagination>
                 <SwiperSlide>
-                    <PageNumbers storeTextSettings={storeTextSettings} onNumber={props.onNumber} />
+                    <PageNumbers 
+                        storeTextSettings={storeTextSettings} 
+                        onNumber={props.onNumber} 
+                        getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers} 
+                    />
                 </SwiperSlide> 
                 <SwiperSlide>
-                    <PageBullets storeTextSettings={storeTextSettings} onBullet={props.onBullet} />
+                    <PageBullets 
+                        storeTextSettings={storeTextSettings} 
+                        onBullet={props.onBullet} 
+                        getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
+                    />
                 </SwiperSlide>
                 <SwiperSlide> 
-                    <PageMultiLevel storeTextSettings={storeTextSettings} onMultiLevelList={props.onMultiLevelList} />
+                    <PageMultiLevel 
+                        storeTextSettings={storeTextSettings} 
+                        onMultiLevelList={props.onMultiLevelList} 
+                        getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
+                    />
                 </SwiperSlide>
             </Swiper>
         </Page>
@@ -604,7 +601,8 @@ const EditText = props => {
                 <ListItem title={t('Edit.textBulletsAndNumbers')} link='/edit-bullets-and-numbers/' routeProps={{
                     onBullet: props.onBullet,
                     onNumber: props.onNumber,
-                    onMultiLevelList: props.onMultiLevelList
+                    onMultiLevelList: props.onMultiLevelList,
+                    getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers,
                 }}>
                     <div className="preview">{previewList}</div>
                     {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
index e7fb78aa2..7d96bf4eb 100644
--- a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
@@ -235,6 +235,18 @@ class EditTextController extends Component {
         api.put_ListType(1, parseInt(type));
     }
 
+    getIconsBulletsAndNumbers(arrayElements, type) {
+        const api = Common.EditorApi.get();
+        const arr = [];
+
+        arrayElements.forEach( item => {
+            let data = item.drawdata;
+            data['divId'] = item.id;
+            arr.push(data);
+        });
+        if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
+    }
+
     onLineSpacing(value) {
         const api = Common.EditorApi.get();
         const LINERULE_AUTO = 1;
@@ -263,6 +275,7 @@ class EditTextController extends Component {
                 changeLetterSpacing={this.changeLetterSpacing}
                 onBullet={this.onBullet}
                 onNumber={this.onNumber}
+                getIconsBulletsAndNumbers={this.getIconsBulletsAndNumbers}
                 onLineSpacing={this.onLineSpacing}
             />
         )
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index 8fae5157f..541fd9a02 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -143,6 +143,8 @@ const EditText = props => {
                         <ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
                             onBullet: props.onBullet,
                             onNumber: props.onNumber,
+                            getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers
+                            
                         }}>
                             <div className="preview">{previewList}</div>
                             {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
@@ -491,24 +493,22 @@ const PageAdditionalFormatting = props => {
 };
 
 const PageBullets = observer(props => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-    const bulletArrays = [
-        [
-            {type: -1, thumb: ''},
-            {type: 1, thumb: 'bullet-01.png'},
-            {type: 2, thumb: 'bullet-02.png'},
-            {type: 3, thumb: 'bullet-03.png'}
-        ],
-        [
-            {type: 4, thumb: 'bullet-04.png'},
-            {type: 5, thumb: 'bullet-05.png'},
-            {type: 6, thumb: 'bullet-06.png'},
-            {type: 7, thumb: 'bullet-07.png'}
-        ]
-    ];
     const storeTextSettings = props.storeTextSettings;
     const typeBullets = storeTextSettings.typeBullets;
+    const bulletArrays = [
+        {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(() => {
+        props.getIconsBulletsAndNumbers(bulletArrays, 0);
+    }, []);
 
     const paragraph = props.storeFocusObjects.paragraphObject;
     const shapeObj = props.storeFocusObjects.shapeObject;
@@ -519,49 +519,41 @@ 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.type} data-type={bullet.type} className={(bullet.type === typeBullets) && 
-                                (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
-                                onClick={() => {
-                                    storeTextSettings.resetBullets(bullet.type);
-                                    props.onBullet(bullet.type);
-                                }}>
-                                {bullet.thumb.length < 1 ?
-                                    <Icon className="thumb" style={{position: 'relative'}}>
-                                        <label>{_t.textNone}</label>
-                                    </Icon> :
-                                    <Icon className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></Icon>
-                                }
-                            </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>
     )
 });
 
 const PageNumbers = observer(props => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-    const numberArrays = [
-        [
-            {type: -1, thumb: ''},
-            {type: 4, thumb: 'number-01.png'},
-            {type: 5, thumb: 'number-02.png'},
-            {type: 6, thumb: 'number-03.png'}
-        ],
-        [
-            {type: 1, thumb: 'number-04.png'},
-            {type: 2, thumb: 'number-05.png'},
-            {type: 3, thumb: 'number-06.png'},
-            {type: 7, thumb: 'number-07.png'}
-        ]
-    ];
-
     const storeTextSettings = props.storeTextSettings;
     const typeNumbers = storeTextSettings.typeNumbers;
+    const numberArrays = [
+            {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(() => {
+        props.getIconsBulletsAndNumbers(numberArrays, 1);
+    }, []);
 
     const paragraph = props.storeFocusObjects.paragraphObject;
     const shapeObj = props.storeFocusObjects.shapeObject;
@@ -572,25 +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.type} data-type={number.type} className={(number.type === typeNumbers) && 
-                            (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
-                            onClick={() => {
-                                storeTextSettings.resetNumbers(number.type);
-                                props.onNumber(number.type);
-                            }}>
-                            {number.thumb.length < 1 ?
-                                <Icon className="thumb" style={{position: 'relative'}}>
-                                    <label>{_t.textNone}</label>
-                                </Icon> :
-                                <Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
-                            }
-                        </ListItem>
-                    ))}
-                </List>
-            ))}
+            <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>
         </View>
     )
 });
@@ -613,8 +600,24 @@ const PageBulletsAndNumbers = props => {
                 }
             </Navbar>
             <Swiper pagination>
-                <SwiperSlide> <PageNumbers f7router={props.f7router} storeFocusObjects={storeFocusObjects} storeTextSettings={storeTextSettings} onNumber={props.onNumber}/></SwiperSlide> 
-                <SwiperSlide> <PageBullets f7router={props.f7router} storeFocusObjects={storeFocusObjects} storeTextSettings={storeTextSettings} onBullet={props.onBullet}/></SwiperSlide>
+                <SwiperSlide> 
+                    <PageNumbers 
+                        f7router={props.f7router} 
+                        storeFocusObjects={storeFocusObjects} 
+                        storeTextSettings={storeTextSettings} 
+                        onNumber={props.onNumber}
+                        getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
+                    />
+                </SwiperSlide> 
+                <SwiperSlide> 
+                    <PageBullets 
+                        f7router={props.f7router} 
+                        storeFocusObjects={storeFocusObjects} 
+                        storeTextSettings={storeTextSettings} 
+                        onBullet={props.onBullet}
+                        getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
+                    />
+                </SwiperSlide>
             </Swiper>
         </Page>
     )