diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index 61fd561d7b..6e57dc5431 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -293,6 +293,11 @@
                     padding-top: 0;
                     .row {
                         width: 100%;
+                        --f7-cols-per-row: 1;
+                        align-items: flex-start;
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: space-between;
                         .button {
                             flex: 1;
                             font-size: 17px;
diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 7ccb390a19..9c23258a89 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -8,6 +8,18 @@
 @red: #f00;
 @autoColor: @black;
 
+.row {
+    --f7-cols-per-row: 1;
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.row + .row {
+    margin-top: var(--f7-grid-row-gap);
+}
+
 .navbar.main-navbar {
     height: 0;
     &.navbar-with-logo {
@@ -25,13 +37,6 @@
     }
 }
 
-//.navbar {
-//    .title {
-//        text-overflow: initial;
-//        white-space: normal;
-//    }
-//}
-
 .navbar-hidden {
     transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
 }
diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
index 67f0b73509..20c31d37b6 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
@@ -1,6 +1,7 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
+import { List, ListItem, ListButton, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link } from 'framework7-react';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import {f7} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -390,8 +391,8 @@ const PageWrap = props => {
                 <Fragment>
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
-                        <ListItem  className='buttons'>
-                            <Row>
+                        <ListItem className='buttons'>
+                            <div className="row">
                                 <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
                                    onClick={() => {
                                        props.onAlign(Asc.c_oAscAlignH.Left)
@@ -410,7 +411,7 @@ const PageWrap = props => {
                                    }}>
                                     <Icon slot="media" icon="icon-block-align-right"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                     </List>
                 </Fragment>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
index 019156676b..189baea818 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListInput, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
+import {List, ListItem, ListInput, ListButton, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -81,7 +81,7 @@ const PageWrap = props => {
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
                                    onClick={() => {
                                        props.onAlign(Asc.c_oAscAlignH.Left)
@@ -100,7 +100,7 @@ const PageWrap = props => {
                                    }}>
                                     <Icon slot="media" icon="icon-text-align-right"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                     </List>
                 </Fragment>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
index 077dd71437..896262720c 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
+import {List, ListItem, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -386,7 +386,7 @@ const PageWrap = props => {
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
                                    onClick={() => {
                                        props.onShapeAlign(Asc.c_oAscAlignH.Left)
@@ -405,7 +405,7 @@ const PageWrap = props => {
                                    }}>
                                     <Icon slot="media" icon="icon-text-align-right"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                     </List>
                 </Fragment>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 56b058e627..0436b7f072 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
+import {Page, Navbar, NavRight, List, ListItem, ListButton, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
@@ -124,7 +124,7 @@ const PageWrap = props => {
                     <BlockTitle>{_t.textAlign}</BlockTitle>
                     <List>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (align === c_tableAlign.TABLE_ALIGN_LEFT ? ' active' : '')}
                                    onClick={() => {
                                        props.onWrapAlign(c_tableAlign.TABLE_ALIGN_LEFT)
@@ -143,7 +143,7 @@ const PageWrap = props => {
                                    }}>
                                     <Icon slot="media" icon="icon-block-align-right"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                     </List>
                 </Fragment>
@@ -445,7 +445,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                 ></span>
             </ListItem>
             <ListItem className='buttons table-presets'>
-                <Row>
+                <div className="row">
                     <a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
                         <Icon slot="media" icon="icon-table-borders-all"></Icon>
                     </a>
@@ -461,10 +461,10 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                     <a className={'item-link button'} onClick={() => {onBorderType("l")}}>
                         <Icon slot="media" icon="icon icon-table-borders-left"></Icon>
                     </a>
-                </Row>
+                </div>
             </ListItem>
             <ListItem className='buttons table-presets'>
-                <Row>
+                <div className="row">
                     <a className={'item-link button'} onClick={() => {onBorderType("c")}}>
                         <Icon slot="media" icon="icon-table-borders-center"></Icon>
                     </a>
@@ -480,7 +480,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                     <a className={'item-link button'} onClick={() => {onBorderType("b")}}>
                         <Icon slot="media" icon="icon-table-borders-bottom"></Icon>
                     </a>
-                </Row>
+                </div>
             </ListItem>
         </List>
     )
@@ -548,7 +548,7 @@ const EditTable = props => {
         <Fragment>
             <List>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
                             <Icon slot="media" icon="icon-table-add-column-left"></Icon>
                         </a>
@@ -561,17 +561,17 @@ const EditTable = props => {
                         <a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
                             <Icon slot="media" icon="icon-table-add-row-below"></Icon>
                         </a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
                             <Icon slot="media" icon="icon-table-remove-column"></Icon>
                         </a>
                         <a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
                             <Icon slot="media" icon="icon icon-table-remove-row"></Icon>
                         </a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <List className="buttons-list">
                     <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index d9b9020db7..237f929b3a 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useEffect, useState } from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
+import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -224,14 +224,14 @@ const PageNumbers = observer( props => {
     return (
         <View className='numbers dataview'>
             <List className="row" style={{listStyle: 'none'}}>
-            {numberArrays.map( number => (
-                        <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) ? 'active' : ''}
-                            onClick={() => {
-                                props.onNumber(number.numberingInfo);
-                            }}>
-                            <div id={number.id} className='item-number'></div>
-                        </ListItem>
-                    ))}
+                {numberArrays.map( number => (
+                    <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) ? 'active' : ''}
+                        onClick={() => {
+                            props.onNumber(number.numberingInfo);
+                        }}>
+                        <div id={number.id} className='item-number'></div>
+                    </ListItem>
+                ))}
             </List>
         </View>
     );
@@ -249,19 +249,19 @@ const PageMultiLevel = observer( props => {
 
     return(
         <View className='multilevels dataview'>
-                <List className="row" style={{listStyle: 'none'}}>
-                    {arrayMultiLevel.map((item) => (
-                        <ListItem
-                        key={'multi-level-' + item.subtype} 
-                        data-type={item.subtype} 
-                        className={item.subtype === typeMultiLevel ? 'active' : ''}
-                        onClick={() => props.onMultiLevelList(item.numberingInfo)}>
-                            <div id={item.id} className='item-multilevellist'>
+            <List className="row" style={{listStyle: 'none'}}>
+                {arrayMultiLevel.map((item) => (
+                    <ListItem
+                    key={'multi-level-' + item.subtype} 
+                    data-type={item.subtype} 
+                    className={item.subtype === typeMultiLevel ? 'active' : ''}
+                    onClick={() => props.onMultiLevelList(item.numberingInfo)}>
+                        <div id={item.id} className='item-multilevellist'>
 
-                            </div>
-                        </ListItem>
-                    ))}
-                </List>
+                        </div>
+                    </ListItem>
+                ))}
+            </List>
         </View>
     )
         
@@ -528,12 +528,12 @@ const EditText = props => {
                     changeFontFamily: props.changeFontFamily
                 }}/>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className='row'>
                         <a className={'button' + (isBold ? ' active' : '')} onClick={() => { props.toggleBold(!isBold)}}><b>B</b></a>
                         <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
                         <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
                         <a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
                     onTextColorAuto: props.onTextColorAuto,
@@ -562,7 +562,7 @@ const EditText = props => {
             </List>
             <List>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
                             <Icon slot="media" icon="icon-text-align-left"></Icon>
                         </a>
@@ -575,11 +575,11 @@ const EditText = props => {
                         <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
                             <Icon slot="media" icon="icon-text-align-just"></Icon>
                         </a>
-                    </Row>
+                    </div>
                 </ListItem>
                 {!inSmartArtInternal &&
                     <ListItem className='buttons'>
-                        <Row>
+                        <div className="row">
                             <a className='button item-link' onClick={() => {
                                 props.onParagraphMove(true)
                             }}>
@@ -590,7 +590,7 @@ const EditText = props => {
                             }}>
                                 <Icon slot="media" icon="icon-in-indent"></Icon>
                             </a>
-                        </Row>
+                        </div>
                     </ListItem>
                 }
                 {!inSmartArt && !inSmartArtInternal &&
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
index a3b620335c..71fd049253 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
@@ -1,10 +1,11 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight, Swiper, SwiperSlide} from 'framework7-react';
+import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
 import { f7 } from 'framework7-react';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 const PageCustomFillColor = props => {
     const { t } = useTranslation();
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index f2e6bd4516..bc70667302 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, ListButton, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@@ -25,7 +25,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
     return (
         <div className="dataview table-styles">
             <ul className="row">
-                { !styles.length ?
+                {!styles.length ?
                         Array.from({ length: 34 }).map((item,index) => (
                         <li className='skeleton-list' key={index}>    
                             <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
@@ -56,6 +56,7 @@ const PageStyleOptions = props => {
 
     const tableObject = props.storeFocusObjects.tableObject;
     let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
+
     if (tableObject) {
         tableLook = tableObject.get_TableLook();
         isFirstRow = tableLook.get_FirstRow();
@@ -291,7 +292,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                 ></span>
             </ListItem>
             <ListItem className='buttons table-presets'>
-                <Row>
+                <div className="row">
                     <a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
                         <Icon slot="media" icon="icon-table-borders-all"></Icon>
                     </a>
@@ -307,10 +308,10 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                     <a className={'item-link button'} onClick={() => {onBorderType("l")}}>
                         <Icon slot="media" icon="icon icon-table-borders-left"></Icon>
                     </a>
-                </Row>
+                </div>
             </ListItem>
             <ListItem className='buttons table-presets'>
-                <Row>
+                <div className="row">
                     <a className={'item-link button'} onClick={() => {onBorderType("c")}}>
                         <Icon slot="media" icon="icon-table-borders-center"></Icon>
                     </a>
@@ -326,7 +327,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                     <a className={'item-link button'} onClick={() => {onBorderType("b")}}>
                         <Icon slot="media" icon="icon-table-borders-bottom"></Icon>
                     </a>
-                </Row>
+                </div>
             </ListItem>
         </List>
     )
@@ -487,7 +488,7 @@ const EditTable = props => {
         <Fragment>
             <List>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
                             <Icon slot="media" icon="icon-table-add-column-left"></Icon>
                         </a>
@@ -500,17 +501,17 @@ const EditTable = props => {
                         <a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
                             <Icon slot="media" icon="icon-table-add-row-below"></Icon>
                         </a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
                             <Icon slot="media" icon="icon-table-remove-column"></Icon>
                         </a>
                         <a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
                             <Icon slot="media" icon="icon icon-table-remove-row"></Icon>
                         </a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <List className="buttons-list">
                     <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index 33688c4e1a..823934180f 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -1,9 +1,10 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Swiper, View, SwiperSlide, List, ListItem, ListButton, ListInput, Icon, Row,  Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
+import {f7, View, List, ListItem, ListButton, ListInput, Icon,  Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
 import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
 
@@ -67,12 +68,12 @@ const EditText = props => {
                     changeFontFamily: props.changeFontFamily
                 }}/>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'button' + (isBold ? ' active' : '')} onClick={() => { props.toggleBold(!isBold)}}><b>B</b></a>
                         <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
                         <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
                         <a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <ListItem title={_t.textFontColor} link="/edit-text-font-color/" routeProps={{
                     onTextColor: props.onTextColor
@@ -102,7 +103,7 @@ const EditText = props => {
                 <Fragment>
                     <List>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
                                     <Icon slot="media" icon="icon-text-align-left"></Icon>
                                 </a>
@@ -115,10 +116,10 @@ const EditText = props => {
                                 <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
                                     <Icon slot="media" icon="icon-text-align-just"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
                                     <Icon slot="media" icon="icon-text-valign-top"></Icon>
                                 </a>
@@ -128,17 +129,17 @@ const EditText = props => {
                                 <a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
                                     <Icon slot="media" icon="icon-text-valign-bottom"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
                                     <Icon slot="media" icon="icon-de-indent"></Icon>
                                 </a>
                                 <a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
                                     <Icon slot="media" icon="icon-in-indent"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                         <ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
                             onBullet: props.onBullet,
diff --git a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
index 885570b960..8c33db7e10 100644
--- a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from 'react';
-import {f7, List, Popover, Sheet, ListItem, Icon, Row, Button, ListButton, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle,View} from 'framework7-react';
+import React from 'react';
+import {f7, List, Popover, Sheet, ListItem, Icon, ListButton, Page, Navbar, NavRight, Link, View} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 import {observer, inject} from "mobx-react";
@@ -45,7 +45,7 @@ const FilterOptions = inject('storeAppOptions')(observer(props => {
                 </Navbar>
                 <List>
                     <ListItem className='buttons'>
-                        <Row>
+                        <div className="row">
                             <a className={'button' + (props.checkSort === 'down' ? ' active' : '')} onClick={() => {
                                 props.onSort('sortdown');
                                 onValidChecked();
@@ -58,7 +58,7 @@ const FilterOptions = inject('storeAppOptions')(observer(props => {
                             }}>
                                 <Icon slot="media" icon="sortup"/>
                             </a>
-                        </Row>
+                        </div>
                     </ListItem>
                 </List>
                 <List>
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
index 41ca9fba1d..89a703556c 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
@@ -1,7 +1,7 @@
-import React, {Fragment, useState} from 'react';
+import React from 'react';
 import {observer, inject} from "mobx-react";
-import {Swiper, SwiperSlide} from 'framework7-react';
 import {Device} from "../../../../../common/mobile/utils/device";
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 const AddChart = props => {
     const types = props.storeChartSettings.types;
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx
index 19d45a651d..8a4503c084 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Page, Navbar, List, ListItem, Icon, Row, Toggle} from 'framework7-react';
+import {Page, Navbar, List, ListItem, Icon, Toggle} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const AddSortAndFilter = props => {
@@ -13,14 +13,14 @@ const AddSortAndFilter = props => {
             <Navbar title={_t.textSortAndFilter} backLink={_t.textBack}/>
             <List>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className='button' onClick={() => {props.onInsertSort('down')}}>
                             <Icon slot="media" icon="sortdown"></Icon>
                         </a>
                         <a className='button' onClick={() => {props.onInsertSort('up')}}>
                             <Icon slot="media" icon="sortup"></Icon>
                         </a>
-                    </Row>
+                    </div>
                 </ListItem>
             </List>
             {!wsLock && 
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index 9b7bbd2abb..ee7fb8228a 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, f7router, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} from 'framework7-react';
+import {f7, List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, ListInput, Block} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -48,11 +48,11 @@ const EditCell = props => {
                 <>
                     <List>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
                                 <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
                                 <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
-                            </Row>
+                            </div>
                         </ListItem>
                         <ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
                             onTextColor: props.onTextColor,
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
index fe0f956e12..453a187bc1 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
@@ -1,9 +1,10 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
+import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 const PageCustomFillColor = props => {
     const { t } = useTranslation();
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
index 6d4ada5363..21badbea58 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
@@ -1,8 +1,8 @@
-import React, {Fragment, useState, useEffect} from 'react';
+import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
+import {List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
-import {Device} from '../../../../../common/mobile/utils/device';
+import { Device } from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
 
@@ -36,11 +36,11 @@ const EditText = props => {
                     changeFontFamily: props.changeFontFamily
                 }}/>
                 <ListItem className='buttons'>
-                    <Row>
+                    <div className="row">
                         <a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
                         <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
                         <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
-                    </Row>
+                    </div>
                 </ListItem>
                 <ListItem title={_t.textTextColor} link="/edit-text-font-color/" routeProps={{
                     onTextColor: props.onTextColor
@@ -55,7 +55,7 @@ const EditText = props => {
                 <Fragment>
                     <List>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (paragraphAlign === AscCommon.align_Left ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
                                     <Icon slot="media" icon="icon-text-align-left"></Icon>
                                 </a>
@@ -68,10 +68,10 @@ const EditText = props => {
                                 <a className={'button' + (paragraphAlign === AscCommon.align_Justify ? ' active' : '')} onClick={() => {props.onParagraphAlign('justify')}}>
                                     <Icon slot="media" icon="icon-text-align-jast"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                         <ListItem className='buttons'>
-                            <Row>
+                            <div className="row">
                                 <a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Top ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
                                     <Icon slot="media" icon="icon-text-valign-top"></Icon>
                                 </a>
@@ -81,7 +81,7 @@ const EditText = props => {
                                 <a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Bottom ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
                                     <Icon slot="media" icon="icon-text-valign-bottom"></Icon>
                                 </a>
-                            </Row>
+                            </div>
                         </ListItem>
                     </List>
                 </Fragment>