diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index b2b44f5a9..604e5bcbf 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -258,6 +258,9 @@
                             flex: 1;
                             font-size: 17px;
                             margin-left: 5px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
                             &:first-child {
                                 margin-left: 0;
                             }
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index ce0f9d7ef..eee0461b7 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -444,6 +444,8 @@
             "textInvalidRange": "Invalid cells range",
             "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
             "textFilterOptions": "Filter Options",
+            "txtSortLow2High": "Sort Lowest to Highest",
+            "txtSortHigh2Low": "Sort Highest to Lowest",
             "textClearFilter": "Clear Filter",
             "textDeleteFilter": "Delete Filter",
             "textSelectAll": "Select All",
diff --git a/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
index 6e8b153e8..d1c950bb6 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
@@ -10,7 +10,8 @@ const FilterOptionsController = () => {
 
     const [configFilter, setConfig] = useState(null);
     const [listVal, setListValue] = useState([]);
-    const [isValid, setIsValid] = useState(null)
+    const [isValid, setIsValid] = useState(null);
+    const [checkSort, setCheckSort] = useState(null);
     
     useEffect(() => {
         function onDocumentReady()  {
@@ -36,6 +37,9 @@ const FilterOptionsController = () => {
         setConfig(config);
         setClearDisable(config);
 
+        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');
         } else {
@@ -128,7 +132,7 @@ const FilterOptionsController = () => {
     };
 
     return (
-        <FilterView onSort={onSort} listVal={listVal} isValid={isValid} onUpdateCell={onUpdateCell} 
+        <FilterView onSort={onSort} listVal={listVal} checkSort={checkSort} isValid={isValid} onUpdateCell={onUpdateCell} 
         onDeleteFilter={onDeleteFilter} onClearFilter={onClearFilter}/>
     )
 };
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 e5d307379..621b5afb9 100644
--- a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
@@ -32,18 +32,20 @@ const FilterOptions = (props) => {
                 </NavRight>
             }
            </Navbar>
+
            <List>
                 <ListItem className='buttons'>
                     <Row>
-                        <a className='button' onClick={() => props.onSort('sortdown')}>
-                            <Icon slot="media" icon="sortdown" />
+                        <a className={'button' + (props.checkSort === 'down' ? ' active' : '')} onClick={() => props.onSort('sortdown')}>
+                            <Icon slot="media" icon="sortdown"/>
                         </a>
-                        <a className='button' onClick={() => props.onSort('sortup')}>
-                            <Icon slot="media" icon="sortup" />
+                        <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>