diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx
index 57962333d..335e63eac 100644
--- a/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditTable.jsx
@@ -17,6 +17,7 @@ class EditTableController extends Component {
         this.onRemoveColumn = this.onRemoveColumn.bind(this);
         this.onRemoveRow = this.onRemoveRow.bind(this);
         this.onWrapMoveText = this.onWrapMoveText.bind(this);
+        this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
     }
     closeIfNeed () {
         if (!this.props.storeFocusObjects.isTableInStack) {
@@ -184,6 +185,11 @@ class EditTableController extends Component {
         api.tblApply(properties);
     }
 
+    onGetTableStylesPreviews() {
+        const api = Common.EditorApi.get();
+        setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 1);
+    }
+
     onFillColor (color) {
         const api = Common.EditorApi.get();
         const properties = new Asc.CTableProp();
@@ -228,9 +234,10 @@ class EditTableController extends Component {
                        onCheckTemplateChange={this.onCheckTemplateChange}
                        onFillColor={this.onFillColor}
                        onBorderTypeClick={this.onBorderTypeClick}
+                       onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
             />
         )
     }
 }
 
-export default inject("storeFocusObjects")(observer(EditTableController));
\ No newline at end of file
+export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController));
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less
index 30e7e21e1..59914af19 100644
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/apps/documenteditor/mobile/src/less/app.less
@@ -112,5 +112,17 @@
     background: @black;
 }
 
+// Skeleton table
 
+.table-styles .row div:not(:first-child) {
+    margin: 2px auto 0px;
+}
+.table-styles li, .table-styles .row div {
+    padding: 0;
+}
+.table-styles .row .skeleton-list{
+    display: block;
+    width: 70px;
+    height: 50px;
+}
 
diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js
index 892e307a2..2454e3d00 100644
--- a/apps/documenteditor/mobile/src/store/tableSettings.js
+++ b/apps/documenteditor/mobile/src/store/tableSettings.js
@@ -4,33 +4,34 @@ import {f7} from 'framework7-react';
 export class storeTableSettings {
     constructor() {
         makeObservable(this, {
-            _templates: observable,
             cellBorders: observable,
             cellBorderWidth: observable,
             cellBorderColor: observable,
+            arrayStyles: observable,
             initTableTemplates: action,
-            styles: computed,
+            setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
         });
     }
 
-    _templates = [];
+    arrayStyles = [];
 
-    initTableTemplates (templates) {
-        this._templates = templates;
+    initTableTemplates () {
+        this.arrayStyles = [];
     }
 
-    get styles () {
+    setStyles (arrStyles) {
         let styles = [];
-        for (let template of this._templates) {
+        for (let template of arrStyles) {
             styles.push({
                 imageUrl    : template.asc_getImage(),
                 templateId  : template.asc_getId()
             });
         }
-        return styles;
+        return this.arrayStyles = styles;
     }
+
     getTableLook (tableObject) {
         return tableObject.get_TableLook()
     }
diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx
index a53800be8..c971c86e1 100644
--- a/apps/documenteditor/mobile/src/view/add/Add.jsx
+++ b/apps/documenteditor/mobile/src/view/add/Add.jsx
@@ -64,11 +64,11 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
     )
 };
 
-const AddLayoutContent = ({ tabs }) => {
+const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
     return (
         <Tabs animated>
             {tabs.map((item, index) =>
-                <Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                <Tab key={"de-tab-" + item.id} onTabShow={(e) => {e.id === 'add-table' && onGetTableStylesPreviews()}} id={item.id} className="page-content" tabActive={index === 0}>
                     {item.component}
                 </Tab>
             )}
@@ -76,7 +76,7 @@ const AddLayoutContent = ({ tabs }) => {
     )
 };
 
-const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPanels, style, inPopover}) => {
+const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover}) => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     const api = Common.EditorApi.get();
@@ -179,11 +179,16 @@ const AddTabs = inject("storeFocusObjects")(observer(({storeFocusObjects, showPa
             component: <AddLinkController noNavbar={true}/>
         });
     }
+    const onGetTableStylesPreviews = () => {
+        const api = Common.EditorApi.get();
+        setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
+    }
+
     return (
         <View style={style} stackPages={true} routes={routes}>
             <Page pageContent={false}>
                 <AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
-                <AddLayoutContent tabs={tabs} />
+                <AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
             </Page>
         </View>
     )
diff --git a/apps/documenteditor/mobile/src/view/add/AddTable.jsx b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
index 3e4635f43..f11b79457 100644
--- a/apps/documenteditor/mobile/src/view/add/AddTable.jsx
+++ b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
@@ -1,23 +1,35 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
+import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddTable = props => {
     const storeTableSettings = props.storeTableSettings;
-    const styles = storeTableSettings.styles;
+    const styles = storeTableSettings.arrayStyles;
+
     return (
         <div className={'table-styles dataview'}>
             <ul className="row">
-                {styles.map((style, index) => {
-                    return (
-                        <li key={index}
-                            onClick={() => {props.onStyleClick(style.templateId)}}>
-                            <img src={style.imageUrl}/>
-                        </li>
-                    )
-                })}
+                {!styles.length ?
+                    Array.from({ length: 70 }).map((item,index) => (
+                    <li className='skeleton-list' key={index}>    
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                    </li>
+                    )) :
+                        styles.map((style, index) => {
+                            return (
+                                <li key={index}
+                                    onClick={() => {props.onStyleClick(style.templateId)}}>
+                                    <img src={style.imageUrl}/>
+                                </li>
+                            )
+                        })
+                }
             </ul>
         </div>
     )
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index d17639b5b..08bfbed9e 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} from 'react';
+import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
+import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, 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';
@@ -173,24 +173,39 @@ const PageWrap = props => {
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects, onGetTableStylesPreviews}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject && tableObject.get_TableStyle();
     const [stateId, setId] = useState(styleId);
-    const styles =  storeTableSettings.styles;
+    const styles =  storeTableSettings.arrayStyles;
+
+    useEffect(() => {
+        if(!styles.length) onGetTableStylesPreviews();
+    }, []);
 
     return (
         <div className="dataview table-styles">
             <ul className="row">
-                    {styles.map((style, index) => {
-                        return (
-                            <li key={index}
-                                className={style.templateId === stateId ? 'active' : ''}
-                                onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
-                                <img src={style.imageUrl}/>
-                            </li>
-                        )
-                    })}
+                { !styles.length ?
+                        Array.from({ length: 27 }).map((item,index) => (
+                        <li className='skeleton-list' key={index}>    
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        </li> 
+                    )) :
+                        styles.map((style, index) => {
+                            return (
+                                <li key={index}
+                                    className={style.templateId === stateId ? 'active' : ''}
+                                    onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                                    <img src={style.imageUrl}/>
+                                </li>
+                            )
+                        })
+                    }
             </ul>
         </div>
     )
@@ -210,9 +225,12 @@ const PageStyleOptions = props => {
         isLastCol = tableLook.get_LastCol();
         isBandVer = tableLook.get_BandVer();
     }
+
+    const openIndicator = () => props.onGetTableStylesPreviews();
+
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack}>
+            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -495,12 +513,13 @@ const PageStyle = props => {
                 <Tab key={"de-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
                     <List>
                         <ListItem>
-                            <StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
+                            <StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} templates={templates} onStyleClick={props.onStyleClick}/>
                         </ListItem>
                     </List>
                     <List>
                         <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
-                            onCheckTemplateChange: props.onCheckTemplateChange
+                            onCheckTemplateChange: props.onCheckTemplateChange,
+                            onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                         }}/>
                     </List>
                 </Tab>
@@ -560,6 +579,7 @@ const EditTable = props => {
                 <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
                     onStyleClick: props.onStyleClick,
                     onCheckTemplateChange: props.onCheckTemplateChange,
+                    onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                     onFillColor: props.onFillColor,
                     onBorderTypeClick: props.onBorderTypeClick
                 }}></ListItem>
diff --git a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
index f10cbe1f5..3b8edb68b 100644
--- a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
+++ b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
+import {observer, inject} from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
 import { withTranslation} from 'react-i18next';
 
@@ -10,6 +11,7 @@ class AddOtherController extends Component {
         super(props);
         this.onStyleClick = this.onStyleClick.bind(this);
         this.initStyleTable = this.initStyleTable.bind(this);
+        this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
 
         this.initTable = false;
     }
@@ -90,6 +92,11 @@ class AddOtherController extends Component {
         }).open();
     }
 
+    onGetTableStylesPreviews = () => {
+        const api = Common.EditorApi.get();
+        setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 1);
+    }
+
     hideAddComment () {
         const api = Common.EditorApi.get();
         const stack = api.getSelectedElements();
@@ -122,11 +129,12 @@ class AddOtherController extends Component {
                       onStyleClick={this.onStyleClick}
                       initStyleTable={this.initStyleTable}
                       hideAddComment={this.hideAddComment}
+                      onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
             />
         )
     }
 }
 
-const AddOtherWithTranslation = withTranslation()(AddOtherController);
+const AddOtherWithTranslation = inject("storeTableSettings")(withTranslation()(AddOtherController));
 
 export {AddOtherWithTranslation as AddOtherController};
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx
index 9ae2be6ba..539cbf9da 100644
--- a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx
@@ -16,6 +16,7 @@ class EditTableController extends Component {
         this.onAddRowBelow = this.onAddRowBelow.bind(this);
         this.onRemoveColumn = this.onRemoveColumn.bind(this);
         this.onRemoveRow = this.onRemoveRow.bind(this);
+        this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
     }
 
     closeIfNeed () {
@@ -197,6 +198,11 @@ class EditTableController extends Component {
         }
     }
 
+    onGetTableStylesPreviews() {
+        const api = Common.EditorApi.get();
+        setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews()), 1);
+    }
+
     render () {
         return (
             <EditTable onRemoveTable={this.onRemoveTable}
@@ -213,9 +219,10 @@ class EditTableController extends Component {
                        onBorderTypeClick={this.onBorderTypeClick}
                        onReorder={this.onReorder}
                        onAlign={this.onAlign}
+                       onGetTableStylesPreviews={this.onGetTableStylesPreviews}
             />
         )
     }
 }
 
-export default inject("storeFocusObjects")(observer(EditTableController));
\ No newline at end of file
+export default inject("storeFocusObjects", "storeTableSettings")(observer(EditTableController));
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index 289e67d0e..549cb860b 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -99,3 +99,17 @@
 .swiper-pagination-bullet-active{
     background: @black;
 }
+
+// Skeleton table
+
+.table-styles .row div:not(:first-child) {
+    margin: 2px auto 0px;
+}
+.table-styles li, .table-styles .row div {
+    padding: 0;
+}
+.table-styles .row .skeleton-list{
+    display: block;
+    width: 70px;
+    height: 50px;
+}
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js
index 272093980..8b47ee275 100644
--- a/apps/presentationeditor/mobile/src/store/tableSettings.js
+++ b/apps/presentationeditor/mobile/src/store/tableSettings.js
@@ -4,32 +4,32 @@ import {f7} from 'framework7-react';
 export class storeTableSettings {
     constructor() {
         makeObservable(this, {
-            _templates: observable,
             cellBorders: observable,
             cellBorderWidth: observable,
             cellBorderColor: observable,
+            arrayStyles: observable,
             initTableTemplates: action,
-            styles: computed,
+            setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
         });
     }
 
-    _templates = [];
+    arrayStyles = [];
 
-    initTableTemplates (templates) {
-        this._templates = templates;
+    initTableTemplates () {
+        this.arrayStyles = [];
     }
 
-    get styles () {
+    setStyles (arrStyles) {
         let styles = [];
-        for (let template of this._templates) {
+        for (let template of arrStyles) {
             styles.push({
                 imageUrl    : template.asc_getImage(),
                 templateId  : template.asc_getId()
             });
         }
-        return styles;
+        return this.arrayStyles = styles;
     }
 
     getTableLook (tableObject) {
diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
index 572d77a39..e337874e9 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react';
+import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, SkeletonBlock, Segmented, Button} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
@@ -9,20 +9,32 @@ const PageTable = props => {
     const { t } = useTranslation();
     const _t = t('View.Add', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
-    const styles = storeTableSettings.styles;
+    const styles = storeTableSettings.arrayStyles;
+
     return (
         <Page id={'add-table'}>
             <Navbar title={_t.textTable} backLink={_t.textBack}/>
             <div className={'table-styles dataview'}>
                 <ul className="row">
-                    {styles.map((style, index) => {
-                        return (
-                            <li key={index}
-                                onClick={() => {props.onStyleClick(style.templateId)}}>
-                                <img src={style.imageUrl}/>
-                            </li>
-                        )
-                    })}
+                    {!styles.length ?
+                        Array.from({ length: 70 }).map((item,index) => (
+                        <li className='skeleton-list' key={index}>    
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        </li>
+                        )) :
+                            styles.map((style, index) => {
+                                return (
+                                    <li key={index}
+                                        onClick={() => {props.onStyleClick(style.templateId)}}>
+                                        <img src={style.imageUrl}/>
+                                    </li>
+                                )
+                            })
+                    }
                 </ul>
             </div>
         </Page>
@@ -36,7 +48,7 @@ const AddOther = props => {
     const hideAddComment = props.hideAddComment();
     return (
         <List>
-            <ListItem title={_t.textTable} link={'/add-table/'} routeProps={{
+            <ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
                 onStyleClick: props.onStyleClick,
                 initStyleTable: props.initStyleTable
             }}>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index 789ba0a45..8146c6bb9 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -1,17 +1,21 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, ListButton, Row, 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";
 
 // Style
 
-const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects}) => {
+const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects,onGetTableStylesPreviews}) => {
     const tableObject = storeFocusObjects.tableObject;
     const styleId = tableObject ? tableObject.get_TableStyle() : null;
     const [stateId, setId] = useState(styleId);
-    const styles =  storeTableSettings.styles;
+    const styles =  storeTableSettings.arrayStyles;
+
+    useEffect(() => {
+        if(!styles.length) onGetTableStylesPreviews();
+    }, []);
 
     if (!tableObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@@ -21,16 +25,27 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
     return (
         <div className="dataview table-styles">
             <ul className="row">
-                    {styles.map((style, index) => {
-                        return (
-                            <li key={index}
-                                className={style.templateId === stateId ? 'active' : ''}
-                                onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
-                                <img src={style.imageUrl}/>
-                            </li>
-                        )
-                    })}
-                </ul>
+                { !styles.length ?
+                        Array.from({ length: 34 }).map((item,index) => (
+                        <li className='skeleton-list' key={index}>    
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                            <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        </li> 
+                    )) :
+                        styles.map((style, index) => {
+                            return (
+                                <li key={index}
+                                    className={style.templateId === stateId ? 'active' : ''}
+                                    onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                                    <img src={style.imageUrl}/>
+                                </li>
+                            )
+                        })
+                    }
+            </ul>
         </div>
     )
 }));
@@ -51,9 +66,11 @@ const PageStyleOptions = props => {
         isBandVer = tableLook.get_BandVer();
     }
 
+    const openIndicator = () => props.onGetTableStylesPreviews();
+
     return (
         <Page>
-            <Navbar title={_t.textOptions} backLink={_t.textBack}>
+            <Navbar title={_t.textOptions} backLink={_t.textBack} onBackClick={openIndicator}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -336,12 +353,13 @@ const PageStyle = props => {
                 <Tab key={"pe-tab-table-style"} id={"edit-table-style"} className="page-content no-padding-top" tabActive={true}>
                     <List>
                         <ListItem>
-                            <StyleTemplates templates={templates} onStyleClick={props.onStyleClick}/>
+                            <StyleTemplates onGetTableStylesPreviews={props.onGetTableStylesPreviews} templates={templates} onStyleClick={props.onStyleClick}/>
                         </ListItem>
                     </List>
                     <List>
                         <ListItem title={_t.textStyleOptions} link={'/edit-table-style-options/'} routeProps={{
-                            onCheckTemplateChange: props.onCheckTemplateChange
+                            onCheckTemplateChange: props.onCheckTemplateChange,
+                            onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                         }}/>
                     </List>
                 </Tab>
@@ -495,6 +513,7 @@ const EditTable = props => {
                 <ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
                     onStyleClick: props.onStyleClick,
                     onCheckTemplateChange: props.onCheckTemplateChange,
+                    onGetTableStylesPreviews: props.onGetTableStylesPreviews,
                     onFillColor: props.onFillColor,
                     onBorderTypeClick: props.onBorderTypeClick
                 }}></ListItem>