diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 9117f6b5f..cc473cd9e 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -533,28 +533,44 @@
         padding-left: 5px;
         padding-right: 5px;
         padding-top: 5px;
-    }
-    li {
-        border: 0.5px solid #c8c7cc;
-        padding: 2px;
-        background-repeat: no-repeat;
-        width: 106px;
-        height: 56px;
-        margin-bottom: 10px;
-        background-position: center;
-    }
-    .item-inner:after {
-        display: none;
-    }
-    .item-theme.active:before {
-        content: '';
-        position: absolute;
-        width: 22px;
-        height: 22px;
-        right: 2px;
-        bottom: 2px;
-        z-index: 1;
-        .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="#40865c"><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>');
+        li.item-theme {
+            border: 0.5px solid #c8c7cc;
+            padding: 2px;
+            background-repeat: no-repeat;
+            width: 106px;
+            height: 56px;
+            margin-bottom: 10px;
+            background-position: center;
+            .item-content {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                .item-inner {
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    &:after {
+                        display: none;
+                    }
+                    .thumb {
+                        width: 100%;
+                        height: 100%;
+                        padding: 0;
+                        background-size: contain;
+                    }
+                }
+            }
+            &.active:before {
+                content: '';
+                position: absolute;
+                width: 22px;
+                height: 22px;
+                right: 2px;
+                bottom: 2px;
+                z-index: 1;
+                .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="#40865c"><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/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index e66e49045..e2844bc9f 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -100,8 +100,9 @@ const EditCell = props => {
                 <List className="cell-styles-list">
                     {cellStyles.map((elem, index) => {
                         return (
-                            <ListItem key={index} style={{backgroundImage: `url(${elem.image})`}} 
+                            <ListItem key={index}
                                 className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
+                                <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
                             </ListItem>
                         )
                     })}