diff --git a/package-lock.json b/package-lock.json
index aabd8520f57330eaf3028028e4dad97b0369c0d8..43a1c84dc653fe49e201e1273ea0054d40e3f1d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17084,9 +17084,9 @@
       }
     },
     "react-dropdown": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.9.0.tgz",
-      "integrity": "sha512-BDApCUhs0qHqnFW3b54SuqI200FOOsmiy0dejdmtdTn/MMY11jcou3CLX1oT2Qa1PdN7viTyAGT8YCpK5qb9xg==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.9.2.tgz",
+      "integrity": "sha512-g4eufErTi5P5T5bGK+VmLl//qvAHy79jm6KKx8G2Tl3mG90bpigb+Aw85P+C2JUdAnIIQdv8kP/oHN314GvAfw==",
       "requires": {
         "classnames": "^2.2.3"
       }
diff --git a/package.json b/package.json
index 47016670d92f4ba048442640ddddd3f1b4ca8e07..e0d4bec3b7d19d0b1719c4cc9da338be771cd854 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "react": "^16.14.0",
     "react-cookie": "^4.0.3",
     "react-dom": "^16.14.0",
-    "react-dropdown": "^1.9.0",
+    "react-dropdown": "^1.9.2",
     "react-dropdown-select": "^4.7.1",
     "react-easy-crop": "^2.1.0",
     "react-fine-uploader": "^1.1.1",
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 2c3ca8e0cf08cbc8802cf61b8855a80d31726474..72046e4d265381f4029a7135eb4c7b8748c6e394 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -30,7 +30,8 @@ import ResourceCardFunction from "./ResourceCardFunction.js";
 import CollectionCardFunction from "./CollectionCardFunction.js";
 import colecoes_obj from './FormationMaterialsResources/formationMaterials';
 import ExpandedMaterial from './ExpandedMaterials';
-import Dropdown from "react-dropdown";
+import TextField from '@material-ui/core/TextField';
+import MenuItem from '@material-ui/core/MenuItem';
 import { getRequest } from './HelperFunctions/getAxiosConfig.js'
 import Grid from '@material-ui/core/Grid';
 import { Link } from 'react-router-dom'
@@ -257,15 +258,31 @@ function TabRecurso() {
                 <Grid item>
                   <p style={{ margin: 0, padding: 0 }}>
                     Ordenar por:
-                                    </p>
+                  </p>
                 </Grid>
                 <Grid item>
-                  <Dropdown options={ordenar} value={currOrder} onChange={(e) => {
-                    setCurrOrder(e.label)
-                    setCurrValue(e.value)
-                  }}
-                    placeholder="Selecione uma opção"
-                  />
+                  <TextField
+                    select
+                    fullWidth
+                    value={currValue}
+                    variant="outlined"
+                  >
+                    {ordenar.map((option) => (
+                      <MenuItem
+                        key={option.value}
+                        value={option.value}
+                        name={option.value}
+                        onClick={() => {
+                          setCurrOrder(option.label)
+                          setCurrValue(option.value)
+                        }}
+                      >
+                        <span style={currValue === option.value ? { color: "#ff7f00" } : null} >
+                          {option.label}
+                        </span>
+                      </MenuItem>
+                    ))}
+                  </TextField>
                 </Grid>
               </Grid>
             </Grid>
@@ -357,12 +374,28 @@ function TabColecoes() {
                                     </p>
                 </Grid>
                 <Grid item>
-                  <Dropdown options={ordenar} value={currOrder} onChange={(e) => {
-                    setCurrOrder(e.label)
-                    setCurrValue(e.value)
-                  }}
-                    placeholder="Selecione uma opção"
-                  />
+                  <TextField
+                    select
+                    fullWidth
+                    value={currValue}
+                    variant="outlined"
+                  >
+                    {ordenar.map((option) => (
+                      <MenuItem
+                        key={option.value}
+                        value={option.value}
+                        name={option.value}
+                        onClick={() => {
+                          setCurrOrder(option.label)
+                          setCurrValue(option.value)
+                        }}
+                      >
+                        <span style={currValue === option.value ? { color: "#673ab7" } : null} >
+                          {option.label}
+                        </span>
+                      </MenuItem>
+                    ))}
+                  </TextField>
                 </Grid>
               </Grid>
             </Grid>
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index ce6ea3471519df1468cbc9d0d074f610d068502b..21bcc78c8527f9f6ee276af7ca6c1dc188352330 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem'
+import MenuItem from '@material-ui/core/MenuItem';
 
 export default function HeaderFilters({ options, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {