diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index 9fb01a1d04040609a98618a1d0a126110ce1e56a..2ff90b68d211a36ce9ab89d7c2747b2056b9435d 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
 //imports material ui componets
 import CardContent from "@material-ui/core/CardContent";
 import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //router
 import { Link } from 'react-router-dom';
 
@@ -225,17 +226,18 @@ const CreateInstitution = (props) => {
 
                 <form style={{ display: 'flex', flexDirection: 'column' }}>
                     {fields.map((field, index) => (
-                        <TextField
+                        <FormInput
+                            contrast={state.contrast}
                             key={index}
                             required={field.required}
                             error={field.error}
-                            helperText={field.error ? field.errorMessage : ''}
+                            help={field.error ? field.errorMessage : ''}
                             style={{ width: '250px', marginBottom: '1em' }}
-                            label={field.label}
+                            placeholder={field.label}
                             value={field.value}
-                            onChange={field.onChange}
-                            type="search"
-                            multiline={true}
+                            handleChange={field.onChange}
+                            inputType="search"
+                            multi={true}
                         />
                     ))}
                 </form>
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index 22fedb52f6a21781bd35f232c34168555eeb24d3..457643239fb867170efdc1d08ac7191d3f15c8b3 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
 //imports material ui componets
 import CardContent from "@material-ui/core/CardContent";
 import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //router
 import { Link } from 'react-router-dom';
 
@@ -202,17 +203,18 @@ const CreateLanguage = (props) => {
 
                 <form style={{ display: 'flex', flexDirection: 'column' }}>
                     {fields.map((field, index) => (
-                        <TextField
+                        <FormInput
+                            contrast={state.contrast}
                             key={index}
                             required={field.required}
                             error={field.error}
-                            helperText={field.error ? field.errorMessage : ''}
+                            help={field.error ? field.errorMessage : ''}
                             style={{ width: '250px', marginBottom: '1em' }}
-                            label={field.label}
+                            placeholder={field.label}
                             value={field.value}
-                            onChange={field.onChange}
-                            type="search"
-                            multiline={true}
+                            handleChange={field.onChange}
+                            inputType="search"
+                            multi={true}
                         />
                     ))}
                 </form>
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 30de715800ca3fc2729b4be36c2d05744c27c8c9..6bd5b688b0ba9a70ef3b6de0c9d61b0d9a036992 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -30,6 +30,7 @@ import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConf
 import SnackBar from '../../../../Components/SnackbarComponent';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //router
 import { Link } from 'react-router-dom';
 
@@ -207,17 +208,18 @@ const CreateQuestion = (props) => {
                             ))}
                         </TextField>
                         {fields.map((field, index) => (
-                            <TextField
+                            <FormInput
+                                contrast={state.contrast}
                                 key={index}
                                 required={field.required}
                                 error={field.error}
-                                helperText={field.error ? field.errorMessage : ''}
+                                help={field.error ? field.errorMessage : ''}
                                 style={{ width: '250px', marginBottom: '1em' }}
-                                label={field.label}
+                                placeholder={field.label}
                                 value={field.value}
-                                onChange={field.onChange}
-                                type="search"
-                                multiline={true}
+                                handleChange={field.onChange}
+                                inputType="search"
+                                multi={true}
                             />
                         ))}
                     </>
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index e0c2b7de4de1e3807903843a0491f3557e6b0b3c..0b068c76f9e0b7ca0fa2727bc58d25435d0aff19 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
 //imports material ui componets
 import CardContent from "@material-ui/core/CardContent";
 import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -28,6 +28,7 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
 import SnackBar from '../../../../Components/SnackbarComponent';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //imports services 
 import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 //router
@@ -199,17 +200,18 @@ const CreateRating = (props) => {
 
                 <form style={{ display: 'flex', flexDirection: 'column' }}>
                     {fields.map((field, index) => (
-                        <TextField
+                        <FormInput
+                            contrast={state.contrast}
                             key={index}
                             required={field.required}
                             error={field.error}
-                            helperText={field.error ? field.errorMessage : ''}
+                            help={field.error ? field.errorMessage : ''}
                             style={{ width: '250px', marginBottom: '1em' }}
-                            label={field.label}
+                            placeholder={field.label}
                             value={field.value}
-                            onChange={field.onChange}
-                            type="search"
-                            multiline={true}
+                            handleChange={field.onChange}
+                            inputType="search"
+                            multi={true}
                         />
                     ))}
                 </form>
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 61a54e8f645ae38f14e99646a8b8175559a8fe4a..8af5f8ad8cc99362b6dd4f8779bb21c92d789506 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
 //imports material ui componets
 import CardContent from "@material-ui/core/CardContent";
 import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //router
 import { Link } from 'react-router-dom';
 
@@ -192,17 +193,18 @@ const CreateRole = (props) => {
 
                 <form style={{ display: 'flex', flexDirection: 'column' }}>
                     {fields.map((field, index) => (
-                        <TextField
+                        <FormInput
+                            contrast={state.contrast}
                             key={index}
                             required={field.required}
                             error={field.error}
-                            helperText={field.error ? field.errorMessage : ''}
+                            help={field.error ? field.errorMessage : ''}
                             style={{ width: '250px', marginBottom: '1em' }}
-                            label={field.label}
+                            placeholder={field.label}
                             value={field.value}
-                            onChange={field.onChange}
-                            type="search"
-                            multiline={true}
+                            handleChange={field.onChange}
+                            inputType="search"
+                            multi={true}
                         />
                     ))}
                 </form>
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 86a8f9801ff419ba7d9528422b068833dadb8ba8..26999ce2818fca4789dbb24bb9f14044ea66ba6c 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -32,6 +32,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { EditFilter, GetAData } from '../../../Filters';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //routers
 import { Link } from 'react-router-dom';
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -209,18 +210,19 @@ const EditCollection = () => {
 
                     <form style={{ display: 'flex', flexDirection: 'column' }}>
                         {fields.map((field, index) => (
-                            <TextField
+                            <FormInput
+                                contrast={state.contrast}
                                 key={index}
                                 required={field.required}
-                                disabled={field.default}
+                                disableField={field.default}
                                 error={field.error}
-                                helperText={field.error ? field.errorMessage : ''}
+                                help={field.error ? field.errorMessage : ''}
                                 style={{ marginBottom: '1em' }}
-                                label={field.label}
+                                placeholder={field.label}
                                 value={field.value}
-                                onChange={field.onChange}
-                                type="search"
-                                multiline={true}
+                                handleChange={field.onChange}
+                                inputType="search"
+                                multi={true}
                             />
                         ))}
                         <TextField
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index 84963ec5785a1531b6934a44c2e0fff3b96d1cc7..d3d48eefec1f8506f9bdf7137a37d0e09e3ea6ad 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useState, useEffect, useContext } from 'react';
 //imports material ui components
-import { Typography, TextField, Button, Grid, ButtonGroup } from '@material-ui/core';
+import { Typography, Button, Grid, ButtonGroup } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import CardContent from "@material-ui/core/CardContent";
 import CardAction from '@material-ui/core/CardActions';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //imports services 
 import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -261,18 +262,19 @@ const EditLanguage = () => {
 
                     <form style={{ display: 'flex', flexDirection: 'column' }}>
                         {fields.map((field, index) => (
-                            <TextField
+                            <FormInput
+                                contrast={state.contrast}
                                 key={index}
                                 required={field.required}
-                                disabled={field.default}
+                                disableField={field.default}
                                 error={field.error}
-                                helperText={field.error ? field.errorMessage : ''}
-                                style={{ width: '250px', marginBottom: '1em' }}
-                                label={field.label}
+                                help={field.error ? field.errorMessage : ''}
+                                style={{ marginBottom: '1em' }}
+                                placeholder={field.label}
                                 value={field.value}
-                                onChange={field.onChange}
-                                type="search"
-                                multiline={true}
+                                handleChange={field.onChange}
+                                inputType="search"
+                                multi={true}
                             />
                         ))}
                     </form>
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index b1d4114ef18305e6bb00209bee75b5798cc1e9d4..be2e1688745a5645b561bf73f7d992ccb1534fac 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useState, useEffect, useContext } from 'react';
 //imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import CardContent from "@material-ui/core/CardContent";
 import CardAction from '@material-ui/core/CardActions';
@@ -31,6 +31,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //imports services 
 import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -255,18 +256,19 @@ const EditLanguage = () => {
 
                     <form style={{ display: 'flex', flexDirection: 'column' }}>
                         {fields.map((field, index) => (
-                            <TextField
+                            <FormInput
+                                contrast={state.contrast}
                                 key={index}
                                 required={field.required}
-                                disabled={field.default}
+                                disableField={field.default}
                                 error={field.error}
-                                helperText={field.error ? field.errorMessage : ''}
-                                style={{ width: '250px', marginBottom: '1em' }}
-                                label={field.label}
+                                help={field.error ? field.errorMessage : ''}
+                                style={{ marginBottom: '1em' }}
+                                placeholder={field.label}
                                 value={field.value}
-                                onChange={field.onChange}
-                                type="search"
-                                multiline={true}
+                                handleChange={field.onChange}
+                                inputType="search"
+                                multi={true}
                             />
                         ))}
                     </form>
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 078e4345fad994dc7064067f6b94d1db85fb3b3a..a94c6f70650bafd9223f2cd574c0111cf4abf25d 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useState, useEffect, useContext } from 'react';
 //imports material ui components
-import { TextField, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import SaveIcon from '@material-ui/icons/Save';
 import CardContent from "@material-ui/core/CardContent";
@@ -30,6 +30,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //imports services 
 import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData } from '../../../Filters';
@@ -263,17 +264,19 @@ const EditInstitution = () => {
                         <div>
                             <form style={{ display: 'flex', flexDirection: 'column' }}>
                                 {fields.map((field, index) => (
-                                    <TextField
+                                    <FormInput
+                                        contrast={state.contrast}
                                         key={index}
                                         required={field.required}
+                                        disableField={field.default}
                                         error={field.error}
-                                        helperText={field.error ? field.errorMessage : ''}
-                                        style={{ width: '250px', marginBottom: '1em' }}
-                                        label={field.label}
+                                        help={field.error ? field.errorMessage : ''}
+                                        style={{ marginBottom: '1em' }}
+                                        placeholder={field.label}
                                         value={field.value}
-                                        onChange={field.onChange}
-                                        type="search"
-                                        multiline={true}
+                                        handleChange={field.onChange}
+                                        inputType="search"
+                                        multi={true}
                                     />
                                 ))}
                             </form>
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 2437fe36891da904d9871bc3563fd3a99e33df20..1f60830552a5bdd1e38d87ae95822972bc4bc530 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useState, useEffect, useContext } from 'react';
 //imports material ui components
-import { TextField, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import SaveIcon from '@material-ui/icons/Save';
 import CardContent from "@material-ui/core/CardContent";
@@ -30,6 +30,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
 //imports services 
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData } from '../../../Filters';
@@ -266,17 +267,18 @@ const NoteVarInputs = () => {
 
                     <form style={{ display: 'flex', flexDirection: 'column' }}>
                         {fields.map((field, index) => (
-                            <TextField
+                            <FormInput
+                                contrast={state.contrast}
                                 key={index}
+                                disableField={field.default}
                                 error={field.error}
-                                disabled={field.default}
-                                helperText={field.error ? field.errorMessage : ''}
+                                help={field.error ? field.errorMessage : ''}
                                 style={{ width: '250px', marginBottom: '1em' }}
-                                label={field.label}
+                                placeholder={field.label}
                                 value={field.value}
-                                onChange={field.onChange}
-                                type={field.type}
-                                multiline={true}
+                                handleChange={field.onChange}
+                                inputType={field.type}
+                                multi={true}
                             />
                         ))}
                     </form>
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 8ebbbe5f2c0208375ec015eafb400eca498dba55..45e38a05965519b9b99cb2cd7adea012c4c7fefb 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -113,7 +113,9 @@ export default function FormInput(props) {
     return (
         <StyledTextField
             contrast={props.contrast}
+            key={props.key}
             label={props.placeholder}
+            disabled={props.disableField}
             margin="normal"
             id={props.id}
             name={props.name}