diff --git a/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
index 79b2e36a1..d1c950bb6 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
@@ -37,8 +37,8 @@ const FilterOptionsController = () => {
         setConfig(config);
         setClearDisable(config);
 
-        const sort = config.asc_getSortState();
-        sort == Asc.c_oAscSortOptions.Ascending ? setCheckSort(true) : setCheckSort(false);
+        setCheckSort((config.asc_getSortState() === Asc.c_oAscSortOptions.Ascending ? 'down' : '') || 
+        (config.asc_getSortState() === Asc.c_oAscSortOptions.Descending ? 'up' : ''));
         
         if (Device.phone) { 
             f7.sheet.open('.picker__sheet');
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
index 1a908bcff..719610da7 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
@@ -299,12 +299,12 @@
         &.sortdown {
             width: 22px;
             height: 22px;
-            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>');
+            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>');
         }
         &.sortup {
             width: 22px;
             height: 22px;
-            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>');
+            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>');
         }
 
         // Formats
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
index 8c80a42f0..74821ae31 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
@@ -278,12 +278,12 @@
         &.sortdown {
             width: 22px;
             height: 22px;
-            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>');
+            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}</style><polygon class="st0" points="-230 256.4 -230.7 255.7 -233 258.1 -233 242 -234 242 -234 258.1 -236.3 255.7 -237 256.4 -233.5 260 -233.5 260 -233.5 260 "/><path class="st0" d="M-226 249.55L-223.1 242h1.08l3.09 7.55h-1.14l-0.88-2.29h-3.16l-0.83 2.29H-226zM-223.82 246.45h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-223.82 246.45z"/><path class="st0" d="M-225.93 259v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21v-0.89h5.41v0.89l-4.24 5.24 -0.46 0.53h4.82V259H-225.93z"/></svg>');
         }
         &.sortup {
             width: 22px;
             height: 22px;
-            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>');
+            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="-238 240 22 22" xml:space="preserve"><style type="text/css">.st0{fill:@{themeColor}}</style><polygon class="st0" points="-233.5 242 -233.5 242 -233.5 242 -237 245.6 -236.3 246.3 -234 243.9 -234 260 -233 260 -233 243.9 -230.7 246.3 -230 245.6 "/><path class="st0" d="M-226.53 260l2.9-7.55h1.08L-219.47 260h-1.14l-0.88-2.29h-3.16L-225.47 260H-226.53zM-224.36 256.9h2.56l-0.79-2.09c-0.24-0.64-0.42-1.16-0.54-1.57 -0.1 0.48-0.23 0.97-0.41 1.44L-224.36 256.9z"/><path class="st0" d="M-225.97 250.55v-0.93l3.87-4.84c0.28-0.34 0.54-0.64 0.78-0.9h-4.21V243h5.41v0.89l-4.24 5.24 -0.46 0.53H-220v0.89H-225.97z"/></svg>');
         }
 
         // Formats
diff --git a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
index ffdf7ba1f..621b5afb9 100644
--- a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
@@ -6,7 +6,6 @@ import { Device } from '../../../../common/mobile/utils/device';
 const FilterOptions = (props) => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-    const isAndroid = Device.android;
 
     useEffect(() => {
         const is_all_checked = props.listVal.every(item => item.check);
@@ -33,21 +32,20 @@ const FilterOptions = (props) => {
                 </NavRight>
             }
            </Navbar>
+
            <List>
-                <ListItem name='radio-button'  title={_t.txtSortLow2High} radio checked={props.checkSort || ''} onClick={() => props.onSort('sortdown')}
-                    after={isAndroid ? <Icon slot="media" icon="sortdown"></Icon> : null}>
-                    {!isAndroid ?
-                       <Icon slot="media" icon="sortdown"></Icon> : null
-                    }
-                </ListItem>
-                
-                <ListItem name='radio-button'  title={_t.txtSortHigh2Low} radio checked={props.checkSort ? false : true} onClick={() => props.onSort('sortup')}
-                after={isAndroid ? <Icon slot="media" icon="sortup"></Icon> : null}>
-                    {!isAndroid ?
-                       <Icon slot="media" icon="sortup"></Icon> : null
-                    }
+                <ListItem className='buttons'>
+                    <Row>
+                        <a className={'button' + (props.checkSort === 'down' ? ' active' : '')} onClick={() => props.onSort('sortdown')}>
+                            <Icon slot="media" icon="sortdown"/>
+                        </a>
+                        <a className={'button' + (props.checkSort === 'up' ? ' active' : '')} onClick={() => props.onSort('sortup')}>
+                            <Icon slot="media" icon="sortup"/>
+                        </a>
+                    </Row>
                 </ListItem>
            </List>
+
            <List >
                <ListButton color="black" className={props.isValid ? 'disabled' : ''} onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton>
                <ListButton color="red" onClick={() => props.onDeleteFilter()} id="btn-delete-filter">{_t.textDeleteFilter}</ListButton>