diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less
index b22abf0b7d..3232793601 100644
--- a/apps/spreadsheeteditor/mobile/src/less/app.less
+++ b/apps/spreadsheeteditor/mobile/src/less/app.less
@@ -164,4 +164,13 @@
             border-color: transparent;
         }
     }
+}
+
+.sheet-filter, .popover-filter {
+    ul li:first-child .list-button{
+        color: @text-normal;
+        &::after {
+            background: @background-menu-divider;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
index 20b77dc1f3..87191bf856 100644
--- a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
@@ -55,7 +55,7 @@ const FilterOptions = (props) => {
            </List>
 
            <List >
-               <ListButton color="black" className={props.isValid || is_all_checked ? 'disabled' : ''} onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton>
+               <ListButton className={props.isValid || is_all_checked ? 'disabled' : ''} onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton>
                <ListButton color="red" onClick={() => props.onDeleteFilter()} id="btn-delete-filter">{_t.textDeleteFilter}</ListButton>
            </List>
            <List>
@@ -72,10 +72,10 @@ const FilterOptions = (props) => {
 const FilterView = (props) => {
     return (
         !Device.phone ?
-        <Popover id="picker-popover" className="popover__titled">
+        <Popover id="picker-popover" className="popover__titled popover-filter">
             <FilterOptions style={{height: '410px'}} {...props}></FilterOptions>
         </Popover> :
-        <Sheet className="picker__sheet" push>
+        <Sheet className="picker__sheet sheet-filter" push>
             <FilterOptions  {...props}></FilterOptions>
         </Sheet>
     )