diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 02bcddc4e..5e6633c9f 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -23,14 +23,6 @@
     }
 }
 
-.row {
-    padding: 0 10px;
-
-    li {
-        list-style: none;
-    }
-}
-
 .disabled, [disabled] {
     opacity: .55;
     pointer-events: none;
@@ -424,19 +416,3 @@
         }
     }
 }
-
-.bullets, .numbers {
-    li {
-        position: relative;
-        z-index: 1;
-    }
-    li.active::after {
-        content: '';
-        position: absolute;
-        width: 22px;
-        height: 22px;
-        right: -5px;
-        bottom: -5px;
-        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
-    }
-}
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index d83b0a431..5d0124ddb 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -5,6 +5,7 @@
 @import '../../../../common/mobile/resources/less/common.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';
 @import '../../../../common/mobile/resources/less/common-material.less';
+@import '../../../../common/mobile/resources/less/dataview.less';
 @import '../../../../common/mobile/resources/less/about.less';
 @import './app-material.less';
 @import './app-ios.less';
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
index 91fd0a451..d4e03ef04 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
@@ -111,16 +111,16 @@ const PageStyle = props => {
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className='tab-buttons tabbar'>
-                    <Link key={"de-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
-                    <Link key={"de-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
-                    <Link key={"de-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    <Link key={"pe-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
+                    <Link key={"pe-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
+                    <Link key={"pe-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
                 </div>
             </Navbar>
             <Tabs animated>
-                <Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
+                <Tab key={"pe-tab-shape-fill"} id={"edit-shape-fill"} className="page-content no-padding-top" tabActive={true}>
                     <PaletteFill onFillColor={props.onFillColor}/>
                 </Tab>
-                <Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content no-padding-top">
+                <Tab key={"pe-tab-shape-border"} id={"edit-shape-border"} className="page-content no-padding-top">
                     <List>
                         <ListItem>
                             <div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
@@ -144,7 +144,7 @@ const PageStyle = props => {
                         </ListItem>
                     </List>
                 </Tab>
-                <Tab key={"de-tab-shape-effects"} id={"edit-shape-effects"} className="page-content no-padding-top">
+                <Tab key={"pe-tab-shape-effects"} id={"edit-shape-effects"} className="page-content no-padding-top">
                     <List>
                         <ListItem>
                             <div slot="root-start" className='inner-range-title'>{_t.textOpacity}</div>
@@ -248,7 +248,7 @@ const PageReplace = props => {
     shapes.splice(0, 1); // Remove line shapes
 
     return (
-        <Page className="shapes">
+        <Page className="shapes dataview">
             <Navbar title={_t.textReplace} backLink={_t.textBack} />
             {shapes.map((row, indexRow) => {
                 return (
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index 1fd7021bd..f3f98adc1 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -366,7 +366,7 @@ const PageBullets = props => {
     const typeBullets = storeTextSettings.typeBullets;
 
     return (
-        <Page className='bullets'>
+        <Page className='bullets dataview'>
             <Navbar title={_t.textBullets} backLink={_t.textBack} />
             {bulletArrays.map((bullets, index) => (
                     <ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
@@ -408,7 +408,7 @@ const PageNumbers = props => {
     const typeNumbers = storeTextSettings.typeNumbers;
 
     return (
-        <Page className='numbers'>
+        <Page className='numbers dataview'>
             <Navbar title={_t.textNumbers} backLink={_t.textBack} />
             {numberArrays.map((numbers, index) => (
                 <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>