diff --git a/src/Admin/Components/Components/Button.js b/src/Admin/Components/Components/Button.js
index ac542554d94dadd9eeac7364150bd46752acabb5..dd2aedd0ccdf5932db7fe6f85e92b69027174b8c 100644
--- a/src/Admin/Components/Components/Button.js
+++ b/src/Admin/Components/Components/Button.js
@@ -5,42 +5,52 @@ import { Store } from 'Store';
 
 
 function ButtonComponent({ text, color, icon, variant, onClick, disabled }) {
-  const { state } = useContext(Store);
+    const { state } = useContext(Store);
 
-  if (state.contrast === "") {
-    return (
-      <Button
-        startIcon={icon}
-        color={color}
-        variant={variant}
-        onClick={onClick}
-        disabled={disabled}
-      >
-        {text}
-      </Button>
-    )
-  }
-  else {
-    return (
-      <ContrastButton
-        startIcon={icon}
-        onClick={onClick}
-        disabled={disabled}
-      >
-        {text}
-      </ContrastButton>
-    );
-  }
+    if (state.contrast === "") {
+        return (
+            <Button
+                startIcon={icon}
+                color={color}
+                variant={variant}
+                onClick={onClick}
+                disabled={disabled}
+                style={{margin: "5px"}}
+            >
+                {text}
+            </Button>
+        )
+    }
+    else {
+        return (
+            <ContrastButton
+                startIcon={icon}
+                onClick={onClick}
+                variant={variant}
+                disabled={disabled}
+            >
+                {text}
+            </ContrastButton>
+        );
+    }
 }
 
 const ContrastButton = styled(Button)`
-  background-color: black !important;
-  border: 1px solid white !important;
-  color: yellow !important;
-  text-decoration: underline !important;
-  :hover {
-    background-color: rgba(255,255,0,0.24) !important;
-  }
-  `
+    background-color: black !important;
+    border: 1px solid white !important;
+    color: yellow !important;
+    text-decoration: underline !important;
+    :hover {
+        background-color: rgba(255,255,0,0.24) !important;
+    }
+    :disabled {
+        color: white !important;
+        text-decoration: none !important;
+    }
+    svg {
+        fill: white !important;
+    }
+    margin: 5px !important;
+`
 
 export default ButtonComponent
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index be4ef88c052a123827601b83741621bb42e81c43..3a0e69852f92cdb81343c3f403c9d63871eb343a 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
 // Maerial ui components
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
 import ListRoundedIcon from "@material-ui/icons/ListRounded";
 import { useStyles, StyledCard } from "../../Styles/DataCard";
 import Grid from "@material-ui/core/Grid";
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index b9b368d061275afbc2d4f41e3c10f9c465c5225c..e0d1cb4eaa915d3025887251eda44cde1397c18d 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -91,7 +91,7 @@ const CommunityQuestions = () => {
                             <StyledButton
                                 variant='text'
                                 color='inherit'
-                                icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "" : "white" }} />}
+                                icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "#666" : "white" }} />}
                                 text={item.email}
                             >
                             </StyledButton>
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 8108385ed928012ca2d71293ffa1299febf366a6..ec63429377f7172ec07c279315b8ef4bd345f031 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -22,7 +22,6 @@ import moment from "moment";
 import Paper from "@material-ui/core/Paper";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
 import ListRoundedIcon from "@material-ui/icons/ListRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -31,7 +30,7 @@ import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
 //imports from local files
 import { GetAData, DeleteFilter } from "../../../Filters";
 import { Link, useHistory } from "react-router-dom";
-import { apiUrl, apiDomain } from "../../../../env";
+import { apiDomain } from "../../../../env";
 import { Grid } from "@material-ui/core";
 import LoadingSpinner from "../../../../Components/LoadingSpinner";
 import {
@@ -39,6 +38,7 @@ import {
     deleteRequest,
 } from "../../../../Components/HelperFunctions/getAxiosConfig";
 import SnackBar from "../../../../Components/SnackbarComponent";
+import StyledButton from '../Button';
 
 import { Store } from 'Store'
 
@@ -249,53 +249,43 @@ const CommunityQuestions = () => {
                                 style={{ textDecoration: "none" }}
                                 to={`/admin/learningObjects`}
                             >
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Listar
-                                </Button>
+                                    text="Listar"
+                                />
                             </Link>
-                            <Button
-                                startIcon={<VisibilityIcon />}
-                                color="primary"
-                                variant="outlined"
+                            <Link
+                                style={{ textDecoration: "none" }}
+                                to={"/recurso/" + id}
                             >
-                                <a
-                                    style={{ textDecoration: "none" }}
-                                    rel="noreferrer"
-                                    target="_blank"
-                                    href={
-                                        apiUrl +
-                                        "/learning_objects/" +
-                                        id +
-                                        "/download"
-                                    }
-                                >
-                                    Ver recurso
-                                </a>
-                            </Button>
+                                <StyledButton
+                                    icon={<VisibilityIcon />}
+                                    color="primary"
+                                    variant="outlined"
+                                    text="Ver recurso"
+                                />
+                            </Link>
+
                             <Link
                                 style={{ textDecoration: "none" }}
                                 to={`/admin/learningObjectEdit?learnObj=${item.id}`}
                             >
-                                <Button
-                                    startIcon={<EditRoundedIcon />}
+                                <StyledButton
+                                    icon={<EditRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Editar
-                                </Button>
+                                    text="Editar"
+                                />
                             </Link>
-                            <Button
-                                startIcon={<DeleteRoundedIcon />}
+                            <StyledButton
+                                icon={<DeleteRoundedIcon />}
                                 color="secondary"
                                 variant="outlined"
                                 onClick={DeleteHandler}
-                            >
-                                Deletar
-                            </Button>
+                                text="Deletar"
+                            />
                         </Grid>
                     </Grid>
                     <div style={{ height: "1em" }} />
diff --git a/src/Admin/Components/Components/DataCards/NoteVarCard.js b/src/Admin/Components/Components/DataCards/NoteVarCard.js
index 95d77f9849fa8faba97373f2531fddc79098299c..d179bdeb594a4521b2097cf680c3f0f1d7332fbf 100644
--- a/src/Admin/Components/Components/DataCards/NoteVarCard.js
+++ b/src/Admin/Components/Components/DataCards/NoteVarCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
 // Maerial ui components
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
 import ListRoundedIcon from "@material-ui/icons/ListRounded";
 import Grid from "@material-ui/core/Grid";
 import { useStyles, StyledCard } from "../../Styles/DataCard";
@@ -32,6 +31,7 @@ import { GetAData } from "../../../Filters";
 import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Link } from 'react-router-dom';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
 
 import { Store } from 'Store'
 
@@ -112,23 +112,21 @@ const NoteCard = () => {
                         </Grid>
                         <Grid item>
                             <Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Listar
-                                    </Button>
+                                    text="Listar"
+                                />
                             </Link>
 
                             <Link style={{ textDecoration: 'none' }} to={`/admin/noteVarEdit?id=${item.id}`}>
-                                <Button
-                                    startIcon={<EditRoundedIcon />}
+                                <StyledButton
+                                    icon={<EditRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Editar
-                                    </Button>
+                                    text="Editar"
+                                />
                             </Link>
                         </Grid>
                     </Grid>
diff --git a/src/Admin/Components/Components/DataCards/RatingCard.js b/src/Admin/Components/Components/DataCards/RatingCard.js
index efe96c2d7a34301cd9d80ce754421e69d60087fa..c103f58cb9b80b984ae03b0fe31710cb8be56373 100644
--- a/src/Admin/Components/Components/DataCards/RatingCard.js
+++ b/src/Admin/Components/Components/DataCards/RatingCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
 // Maerial ui components
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
 import ListRoundedIcon from "@material-ui/icons/ListRounded";
 import Grid from "@material-ui/core/Grid";
 import { useStyles, StyledCard } from "../../Styles/DataCard";
@@ -34,6 +33,7 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
 import { Link, useHistory } from 'react-router-dom';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
 
 import { Store } from 'Store'
 
@@ -161,33 +161,30 @@ const RatingCard = () => {
                         </Grid>
                         <Grid item>
                             <Link style={{ textDecoration: 'none' }} to={`/admin/Ratings`}>
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Listar
-                                    </Button>
+                                    text="Listar"
+                                />
                             </Link>
 
                             <Link style={{ textDecoration: 'none' }} to={`/admin/EditRating?rating=${item.id}`}>
-                                <Button
-                                    startIcon={<EditRoundedIcon />}
+                                <StyledButton
+                                    icon={<EditRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Editar
-                                    </Button>
+                                    text="Editar"
+                                />
                             </Link>
 
-                            <Button
-                                startIcon={<DeleteRoundedIcon />}
+                            <StyledButton
+                                icon={<DeleteRoundedIcon />}
                                 color="secondary"
                                 variant="outlined"
                                 onClick={DeleteHandler}
-                            >
-                                Deletar
-                                </Button>
+                                text="Deletar"
+                            />
                         </Grid>
                     </Grid>
                     <div style={{ height: "1em" }} />
diff --git a/src/Admin/Components/Components/DataCards/UserCard.js b/src/Admin/Components/Components/DataCards/UserCard.js
index 203b45cba896a85f03982f16de455bd5e9314696..0799b4fda60c87c42eb3f76185f78039d907ef6c 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
 // Maerial ui components
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
 import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
@@ -41,6 +40,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import SnackBar from '../../../../Components/SnackbarComponent';
 import { getRequest, postRequest, deleteRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Store } from 'Store'
+import StyledButton from '../Button';
 //styles
 import styled from 'styled-components';
 //Image Import
@@ -241,15 +241,14 @@ const CollectionCard = () => {
     const actionsForBlockedUser = (stateb) => {
         if (stateb === "blocked" || stateb === "banished") {
             return (
-                <Button
+                <StyledButton
                     style={{ width: "100%", marginBottom: "0.5em" }}
                     variant="contained"
                     color="secondary"
-                    startIcon={<RemoveCircleOutlineRoundedIcon />}
+                    icon={<RemoveCircleOutlineRoundedIcon />}
                     onClick={() => ReactiveUser()}
-                >
-                    Desbloquear
-                </Button>
+                    text="Desbloquear"
+                />
             )
         }
         return (
@@ -264,36 +263,34 @@ const CollectionCard = () => {
             return (
                 <Grid container direction="row" spacing={1}>
                     <Grid item>
-                        <Button
+                        <StyledButton
                             variant="contained"
                             color="secondary"
                             style={{ width: "100%" }}
                             disabled={
                                 item.submitter_request === "requested" ? false : true
                             }
-                            startIcon={
+                            icon={
                                 <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
                             }
                             onClick={() => { handleReject(item.id, item.name) }}
-                        >
-                            Recusar
-                        </Button>
+                            text="Recusar"
+                        />
                     </Grid>
                     <Grid item>
-                        <Button
+                        <StyledButton
                             variant="contained"
                             color="primary"
                             style={{ width: "100%" }}
                             disabled={
                                 item.submitter_request === "requested" ? false : true
                             }
-                            startIcon={
+                            icon={
                                 <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
                             }
                             onClick={() => { handleAprove(item.id, item.name) }}
-                        >
-                            Aceitar
-                        </Button>
+                            text="Aceitar"
+                        />
                     </Grid>
                 </Grid>
             )
@@ -381,34 +378,31 @@ const CollectionCard = () => {
                                             style={{ textDecoration: "none" }}
                                             to={`/admin/usersList`}
                                         >
-                                            <Button
-                                                startIcon={<ListRoundedIcon />}
+                                            <StyledButton
+                                                icon={<ListRoundedIcon />}
                                                 color="primary"
                                                 variant="outlined"
-                                            >
-                                                Listar
-                                        </Button>
+                                                text="Listar"
+                                            />
                                         </Link>
                                     </Grid>
                                     <Grid item>
-                                        <Button
-                                            startIcon={<DeleteRoundedIcon />}
+                                        <StyledButton
+                                            icon={<DeleteRoundedIcon />}
                                             color="secondary"
                                             variant="outlined"
                                             onClick={() => { deleteUser(item.id) }}
-                                        >
-                                            Deletar
-                                        </Button>
+                                            text="Deletar"
+                                        />
                                     </Grid>
                                     <Grid item>
                                         <Link to={`/admin/EditUser?id=${item.id}`} style={{ textDecoration: "none" }}>
-                                            <Button
-                                                startIcon={<EditRoundedIcon />}
+                                            <StyledButton
+                                                icon={<EditRoundedIcon />}
                                                 color="primary"
                                                 variant="outlined"
-                                            >
-                                                Editar
-                                            </Button>
+                                                text="Editar"
+                                            />
                                         </Link>
                                     </Grid>
                                 </Grid>
@@ -436,15 +430,14 @@ const CollectionCard = () => {
                                         </Typography>
                                         {
                                             item.email ?
-                                                <Link to={`/admin/sendEmail?email=${item.email}`} style={state.contrast === "" ? {textDecoration: "none"} : {textDecoration: "yellow underline", color: "yellow"}}>
-                                                    <Button
-                                                        variant='text'
-                                                        color='inherit'
-                                                        startIcon={<EmailRoundedIcon style={{color: state.contrast === "" ? "" : "white"}}/>}
-                                                    >
-                                                        {item.email}
-                                                    </Button>
-                                                </Link> : null
+                                            <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
+                                            <StyledButton
+                                                variant='text'
+                                                color='primary'
+                                                icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                                                text={item.email}
+                                            />
+                                            </Link> : null
                                         }
                                     </div>
                                     <div className={classes.displayColumn}>
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index a8e5be6cbc11b9692830a5154fdcbac68901ae7d..a129b7b692955bb21d23a69c44e90fcf07146273 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 import SwipeableViews from "react-swipeable-views";
 import moment from "moment";
 //imports material ui components
-import { Typography, TextField, Button, Grid } from "@material-ui/core";
+import { Typography, TextField, 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";
@@ -44,6 +44,7 @@ import { EditFilter } from "../../../Filters";
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
 import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
 //routers
 import { Link } from "react-router-dom";
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -454,13 +455,12 @@ const EditEducationalObject = () => {
                                 style={{ textDecoration: "none" }}
                                 to={"/admin/learningObjects"}
                             >
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     variant="outlined"
                                     color="primary"
-                                >
-                                    Listar
-                                </Button>
+                                    text="Listar"
+                                />
                             </Link>
                         </Grid>
                     </Grid>
@@ -591,17 +591,18 @@ const EditEducationalObject = () => {
                 </CardContent>
 
                 <CardAction>
-                    <Button
+                    <StyledButton
                         onClick={() => {
                             onSubmit();
                         }}
                         variant="contained"
                         color="primary"
                         disabled={isLoading}
-                        startIcon={isLoading ? null : <SaveIcon />}
-                    >
-                        {isLoading ? <CircularProgress size={24} /> : "Salvar"}
-                    </Button>
+                        icon={isLoading ? null : <SaveIcon />}
+                        text={
+                            isLoading ? <CircularProgress size={24} /> : 'Salvar'
+                        }
+                    />
                 </CardAction>
             </StyledCard>
         );
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index f90ad3a637a3e388d4e921a931527d896e747b90..cbb3204fe1e884a07793857e0d21f0fbe1844c8a 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, Button, Grid, ButtonGroup } from '@material-ui/core';
+import { Typography, 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';
@@ -290,9 +290,7 @@ const EditLanguage = () => {
                         text={
                             isLoading ? <CircularProgress size={24} /> : 'Salvar'
                         }
-                    >
-
-                    </StyledButton>
+                    />
                 </CardAction>
             </StyledCard>
         )
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index 7a585baa45c09c05683050a2749d3ee2df2ad8ac..9133c7a56443295924c124f73aa5fca2e7dd4b13 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.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, Button, Grid } from '@material-ui/core';
+import { Typography, 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';
@@ -30,6 +30,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
 import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
 //imports services 
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData } from '../../../Filters';
@@ -220,13 +221,12 @@ const EditRating = () => {
                         </Grid>
                         <Grid item>
                             <Link style={{ textDecoration: 'none' }} to={'/admin/Ratings'}>
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     variant='outlined'
                                     color='primary'
-                                >
-                                    Listar
-                                </Button>
+                                    text="Listar"
+                                />
                             </Link>
                         </Grid>
                     </Grid>
@@ -253,19 +253,18 @@ const EditRating = () => {
                     </form>
                 </CardContent>
                 <CardAction>
-                    <Button
+                    <StyledButton
                         onClick={() => {
                             onSubmit();
                         }}
                         variant="contained"
                         color="primary"
                         disabled={isLoading}
-                        startIcon={isLoading ? null : <SaveIcon />}
-                    >
-                        {
+                        icon={isLoading ? null : <SaveIcon />}
+                        text={
                             isLoading ? <CircularProgress size={24} /> : 'Salvar'
                         }
-                    </Button>
+                    />
                 </CardAction>
             </StyledCard>
         )
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index be2e1688745a5645b561bf73f7d992ccb1534fac..d7ceb5bdeb113893829101d319e6efea6c24d3e2 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, Button, Grid } from '@material-ui/core';
+import { Typography, 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';
@@ -32,6 +32,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
 import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
 //imports services 
 import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -233,22 +234,20 @@ const EditLanguage = () => {
                         </Typography>
                         <ButtonGroup>
                             <Link style={{ textDecoration: 'none' }} to={'/admin/permissions'}>
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     variant='outlined'
                                     color='primary'
-                                >
-                                    Listar
-                                </Button>
+                                    text="Listar"
+                                />
                             </Link>
-                            <Button
-                                startIcon={<DeleteRoundedIcon />}
+                            <StyledButton
+                                icon={<DeleteRoundedIcon />}
                                 color="secondary"
                                 variant="outlined"
                                 onClick={DeleteHandler}
-                            >
-                                Deletar
-                        </Button>
+                                text="Deletar"
+                            />
                         </ButtonGroup>
                     </Grid>
 
@@ -274,19 +273,18 @@ const EditLanguage = () => {
                     </form>
                 </CardContent>
                 <CardAction>
-                    <Button
+                    <StyledButton
                         onClick={() => {
                             onSubmit();
                         }}
                         variant="contained"
                         color="primary"
                         disabled={isLoading}
-                        startIcon={isLoading ? null : <SaveIcon />}
-                    >
-                        {
+                        icon={isLoading ? null : <SaveIcon />}
+                        text={
                             isLoading ? <CircularProgress size={24} /> : 'Salvar'
                         }
-                    </Button>
+                    />
                 </CardAction>
             </StyledCard>
         )
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index b3225b0afb6c5d36cdf6811f6f373f367407bfc3..a13fdb061ce48d7621c1cebf57aef16c353e10c1 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.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, TextField, 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';
@@ -37,6 +37,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
 import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
 //imports services 
 import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData } from '../../../Filters';
@@ -495,26 +496,24 @@ const EditUser = () => {
                             <Grid container direction="row">
                                 <Grid item>
                                     <Link style={{ textDecoration: 'none' }} to={'/admin/usersList'}>
-                                        <Button
-                                            startIcon={<ListRoundedIcon />}
+                                        <StyledButton
+                                            icon={<ListRoundedIcon />}
                                             variant='outlined'
                                             color='primary'
-                                        >
-                                            Listar
-                                        </Button>
+                                            text="Listar"
+                                        />
                                     </Link>
                                 </Grid>
                                 {
                                     id !== "-1" ?
                                         <Grid item>
-                                            <Button
-                                                startIcon={<DeleteRoundedIcon />}
+                                            <StyledButton
+                                                icon={<DeleteRoundedIcon />}
                                                 color="secondary"
                                                 variant="outlined"
                                                 onClick={() => { deleteUser(id) }}
-                                            >
-                                                Deletar
-                                            </Button>
+                                                text="Deletar"
+                                            />
                                         </Grid> : null
                                 }
                             </Grid>
@@ -580,33 +579,27 @@ const EditUser = () => {
                 <CardAction>
                     {
                         id !== "-1" ?
-                            <Button
+                            <StyledButton
                                 onClick={() => {
                                     onSubmit();
                                 }}
                                 variant="contained"
                                 color="primary"
                                 disabled={isLoading}
-                                startIcon={isLoading ? null : <SaveIcon />}
-                            >
-                                {
-                                    isLoading ? <CircularProgress size={24} /> : 'Salvar'
-                                }
-                            </Button>
+                                icon={isLoading ? null : <SaveIcon />}
+                                text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+                            />
                             :
-                            <Button
+                            <StyledButton
                                 onClick={() => {
                                     onCreate();
                                 }}
                                 variant="contained"
                                 color="primary"
                                 disabled={isLoading}
-                                startIcon={isLoading ? null : <AddRoundedIcon />}
-                            >
-                                {
-                                    isLoading ? <CircularProgress size={24} /> : 'Criar'
-                                }
-                            </Button>
+                                icon={isLoading ? null : <AddRoundedIcon />}
+                                text={isLoading ? <CircularProgress size={24} /> : 'Criar'}
+                            />
                     }
                 </CardAction>
             </StyledCard>
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 52bc5cb35f1993ae48275f871a14b3d8150b2f78..eacbd7f0307afc72f6796bf37a634ca59019a075 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -18,7 +18,6 @@ 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 { 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";
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 1f60830552a5bdd1e38d87ae95822972bc4bc530..69ee311eaf26de19711bc30d2288364dafafb8ee 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -18,7 +18,6 @@ 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 { 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";
@@ -31,6 +30,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { StyledCard } from "../../../Components/Styles/DataCard";
 import { Store } from 'Store'
 import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
 //imports services 
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { EditFilter, GetAData } from '../../../Filters';
@@ -254,13 +254,12 @@ const NoteVarInputs = () => {
 
                         <Grid>
                             <Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
-                                <Button
-                                    startIcon={<ListRoundedIcon />}
+                                <StyledButton
+                                    icon={<ListRoundedIcon />}
                                     color="primary"
                                     variant="outlined"
-                                >
-                                    Listar
-                            </Button>
+                                    text="Listar"
+                                />
                             </Link>
                         </Grid>
                     </Grid>
@@ -284,19 +283,18 @@ const NoteVarInputs = () => {
                     </form>
 
                     <div>
-                        <Button
+                        <StyledButton
                             onClick={() => {
                                 onSubmit();
                             }}
                             variant="contained"
                             color="primary"
                             disabled={isLoading}
-                            startIcon={isLoading ? null : <SaveIcon />}
-                        >
-                            {
+                            icon={isLoading ? null : <SaveIcon />}
+                            text={
                                 isLoading ? <CircularProgress size={24} /> : 'Salvar'
                             }
-                        </Button>
+                        />
                     </div>
 
                 </CardContent>
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index afc90e4f18a9d9f4348fbaab8752194c2fda8dd2..28d4d95e116afd350daca7682962e0025361933e 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -34,6 +34,7 @@ import { apiDomain } from '../../../../env';
 import FormInput from "Components/FormInput.js"
 import { Store } from 'Store'
 import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
 //imports from material ui
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -494,14 +495,13 @@ const AproveTeacher = () => {
                         title: "Email",
                         subtitle: row.email ?
                           <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
-                            <Button
+                            <StyledButton
                               variant='text'
                               color='primary'
                               style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
-                              startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
-                            >
-                              {row.email}
-                            </Button>
+                              icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                              text={row.email}
+                            />
                           </Link> : null
 
                       },
@@ -516,38 +516,36 @@ const AproveTeacher = () => {
                       {
                         title: "Ações rápidas",
                         subtitle: <>
-                          <Button
+                          <StyledButton
                             variant="contained"
                             color="secondary"
                             style={{ width: "100%" }}
                             disabled={
                               row.submitter_request === "requested" ? false : true
                             }
-                            startIcon={
+                            icon={
                               <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
                             }
                             onClick={() => {
                               handleReject(row.id, row.name);
                             }}
-                          >
-                            Recusar
-                                                    </Button>
-                          <Button
+                            text="Recusar"
+                          />
+                          <StyledButton
                             variant="contained"
                             color="primary"
                             style={{ width: "100%" }}
                             disabled={
                               row.submitter_request === "requested" ? false : true
                             }
-                            startIcon={
+                            icon={
                               <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
                             }
                             onClick={() => {
                               handleAprove(row.id, row.name);
                             }}
-                          >
-                            Aceitar
-                                                    </Button>
+                            text="Aceitar"
+                          />
                         </>
                       }
                     ]}
@@ -696,7 +694,18 @@ const AproveTeacher = () => {
                           {row.name}
                         </TableCell>
                         <TableCell className={classesCell.root} align="right">
-                          {row.email}
+                            {
+                                row.email ?
+                                <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+                                <StyledButton
+                                    variant='text'
+                                    color='primary'
+                                    style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+                                    icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                                    text={row.email}
+                                />
+                                </Link> : null
+                            }
                         </TableCell>
                         <TableCell className={classesCell.root} align="right">
                           {DisplayDate(row.created_at)}
@@ -709,38 +718,36 @@ const AproveTeacher = () => {
                           </Link>
                         </TableCell>
                         <TableCell className={classesCell.root} align="right">
-                          <Button
+                          <StyledButton
                             variant="contained"
                             color="secondary"
                             style={{ width: "100%" }}
                             disabled={
                               row.submitter_request === "requested" ? false : true
                             }
-                            startIcon={
+                            icon={
                               <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
                             }
                             onClick={() => {
                               handleReject(row.id, row.name);
                             }}
-                          >
-                            Recusar
-                                                    </Button>
-                          <Button
+                            text="Recusar"
+                          />
+                          <StyledButton
                             variant="contained"
                             color="primary"
                             style={{ width: "100%" }}
                             disabled={
                               row.submitter_request === "requested" ? false : true
                             }
-                            startIcon={
+                            icon={
                               <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
                             }
                             onClick={() => {
                               handleAprove(row.id, row.name);
                             }}
-                          >
-                            Aceitar
-                                                    </Button>
+                            text="Aceitar"
+                          />
                         </TableCell>
                       </TableRow>
                     )
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 9cad24d0c7df13b1274344fa5ada3fd91495fb4f..005917e11dd09f326259ba831b3d86ebade3e9a7 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -42,6 +42,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
 import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
 import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
 import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
 //Services
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Url } from '../../../Filters';
@@ -337,16 +338,13 @@ const BlockedUsers = () => {
                           title: "Email",
                           subtitle: row.email ?
                             <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
-                              <Button
+                              <StyledButton
                                 variant='text'
-                                color='primary'
-                                style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
-                                startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
-                              >
-                                {row.email}
-                              </Button>
+                                color="primary"
+                                icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                                text={row.email}
+                              />
                             </Link> : null
-
                         },
                         {
                           title: "Estado",
@@ -354,15 +352,14 @@ const BlockedUsers = () => {
                         },
                         {
                           title: "Ações rápidas",
-                          subtitle: <Button
+                          subtitle: <StyledButton
                             style={{ width: "100%", marginBottom: "0.5em" }}
                             variant="contained"
                             color="secondary"
-                            startIcon={<RemoveCircleOutlineRoundedIcon />}
+                            icon={<RemoveCircleOutlineRoundedIcon />}
                             onClick={() => ReactiveUser(row.id, index)}
-                          >
-                            Desbloquear
-                                                    </Button>
+                            text="Desbloquear"
+                          />
                         }
                       ]
                     }
@@ -459,42 +456,38 @@ const BlockedUsers = () => {
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
                     <TableCell className={classesCell.root} align="right">
-                      {
-                        row.email ?
-                          <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
-                            <Button
-                              variant='text'
-                              color='primary'
-                              style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
-                              startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
-                            >
-                              {row.email}
-                            </Button>
-                          </Link> : null
-                      }
+                        {
+                            row.email ?
+                            <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+                              <StyledButton
+                                variant='text'
+                                color="primary"
+                                icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                                text={row.email}
+                              />
+                            </Link> : null
+                        }
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">
                       {DisplayDate(row.suspended_at)}
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">
-                      <Button
+                      <StyledButton
                         style={{ width: "100%", marginBottom: "0.5em" }}
                         variant="contained"
                         color="secondary"
-                        startIcon={<RemoveCircleOutlineRoundedIcon />}
+                        icon={<RemoveCircleOutlineRoundedIcon />}
                         onClick={() => ReactiveUser(row.id, index)}
-                      >
-                        Desbloquear
-                                            </Button>
+                        text="Desbloquear"
+                      />
                       <Link to={`/admin/user?id=${row.id}`}>
-                        <Button
+                        <StyledButton
                           style={{ width: "100%" }}
                           variant="contained"
                           color="primary"
-                          startIcon={<VisibilityIcon />}
-                        >
-                          Visualizar
-                                                </Button>
+                          icon={<VisibilityIcon />}
+                          text="Visualizar"
+                        />
                       </Link>
                     </TableCell>
                   </TableRow>
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 69f9b9c474df3088eea61e9f32316b1c7652b0a5..ec78c01f76fcd32a730abe3adeb4b54960e368d6 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -30,6 +30,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
 import FormInput from "Components/FormInput.js"
 import { Store } from 'Store'
 import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
 //imports from material ui
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -480,19 +481,18 @@ const CommunityQuestion = () => {
                       {row.name}
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">
-                      {
-                        row.email ?
-                          <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
-                            <Button
-                              variant='text'
-                              color='primary'
-                              style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
-                              startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
-                            >
-                              {row.email}
-                            </Button>
-                          </Link> : null
-                      }
+                        {
+                            row.email ?
+                            <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+                                <StyledButton
+                                    variant='text'
+                                    color='primary'
+                                    style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+                                    icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                                    text={row.email}
+                                />
+                            </Link> : null
+                        }
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">
                       {row.message}
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index de0eaa44b015f2489443ff184627161d80050915..b323b27f842807908d039a46993af4f01f90103e 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -29,6 +29,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
 import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
 import FormInput from "Components/FormInput.js"
 import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
 import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
 //imports from material ui
 import TableBody from "@material-ui/core/TableBody";
@@ -613,31 +614,21 @@ const Complaints = () => {
                           </Link>
                         </TableCell>
                         <TableCell className={classesCell.root} align="right">
-                          <Button
-                            variant="text"
-                            secondary={true}
-                            startIcon={
-                              <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
-                            }
-                          >
-                            <a
-                              style={{
-                                textDecoration: "none",
-                                color: "#FA8072",
-                              }}
-                              target="_blank"
-                              rel="noreferrer"
-                              href={
-                                PORTAL_MEC +
+                            <a href={PORTAL_MEC +
                                 convertToLink(
                                   row.complainable_type,
                                   row.complainable_id
-                                )
-                              }
+                                )}
                             >
-                              MEC RED
-                                                        </a>
-                          </Button>
+                                <StyledButton
+                                    variant="text"
+                                    secondary={true}
+                                    icon={
+                                        <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
+                                    }
+                                    text="MEC RED"
+                                />
+                            </a>
                         </TableCell>
                       </TableRow>
                     )
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index da28aae8289b023cea8b520009b0fc4a0bc9d00e..b6a3d9ad47755393472583d6c07d888458eca4bc 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -25,11 +25,12 @@ import { Url } from '../../../Filters';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { DeleteFilter } from '../../../Filters';
 import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList" 
 import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
 import PageHeader from "../../../Components/Components/PageHeader"
 import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
 import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
 //imports from material ui 
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -280,17 +281,16 @@ const UserPermissions = () => {
                         },
                         {
                           title: "Ações",
-                          subtitle: <Button
+                          subtitle: <StyledButton
                             variant="contained"
                             color="secondary"
                             onClick={() => {
                               HandleStateAlertDialog(index)
                               HandleStateCircularProgress(index)
                             }}
-                            startIcon={<DeleteRoundedIcon />}
-                          >
-                            Deletar
-                                                    </Button>
+                            icon={<DeleteRoundedIcon />}
+                            text="Deletar"
+                          />
                         },
                       ]
                     }
@@ -376,20 +376,19 @@ const UserPermissions = () => {
                     <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
                     <TableCell className={classesCell.root} align="right">
                       <Link to={`/admin/EditPermissions?role=${row.id}`}>
-                        <Button
+                        <StyledButton
                           style={{ width: "100%", marginBottom: "0.5em" }}
                           variant="contained"
                           color="primary"
-                          startIcon={<EditRoundedIcon />}
-                        >
-                          Editar
-                                                </Button>
+                          icon={<EditRoundedIcon />}
+                          text="Editar"
+                        />
                       </Link>
 
                       {isLoadingToDelete === index ? (
                         <CircularProgress size={24} color="primary" />
                       ) : (
-                          <Button
+                          <StyledButton
                             style={{ width: "100%" }}
                             variant="contained"
                             color="secondary"
@@ -397,10 +396,9 @@ const UserPermissions = () => {
                               HandleStateAlertDialog(index)
                               HandleStateCircularProgress(index)
                             }}
-                            startIcon={<DeleteRoundedIcon />}
-                          >
-                            Deletar
-                          </Button>
+                            icon={<DeleteRoundedIcon />}
+                            text="Deletar"
+                          />
                         )}
 
                     </TableCell>
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index b9ac0df0d3d10af8c138d7a70d3864c3fca10e93..25fae4cb0fe86a9fce454b7ba07ccf18dd1efe66 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -38,6 +38,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
 import FormInput from "Components/FormInput.js"
 import { Store } from 'Store'
 import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
 //Services
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Url } from '../../../Filters';
@@ -360,14 +361,12 @@ const Users = () => {
                         title: "Email",
                         subtitle: row.email ?
                           <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
-                            <Button
+                            <StyledButton
                               variant='text'
                               color="primary"
-                              style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
-                              startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
-                            >
-                              {row.email}
-                            </Button>
+                              icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                              text={row.email}
+                            />
                           </Link> : null
                       },
                       {
@@ -392,14 +391,13 @@ const Users = () => {
                       },
                       {
                         title: "Ações rápidas",
-                        subtitle: <Button
+                        subtitle: <StyledButton
                           variant="contained"
                           color="primary"
                           disabled={isUserPublisher(row.roles)}
                           onClick={() => { turnUserPublisher(row.roles, row.id) }}
-                        >
-                          Tornar publicador
-                                                </Button>
+                          text="Tornar publicador"
+                        />
                       }
 
                     ]}
@@ -516,7 +514,19 @@ const Users = () => {
                   <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
                     <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
                     <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
-                    <TableCell className={classesCell.root} align="right">{row.email ? row.email : ""}</TableCell>
+                    <TableCell className={classesCell.root} align="right">
+                        {
+                            row.email ?
+                            <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+                              <StyledButton
+                                variant='text'
+                                color="primary"
+                                icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+                                text={row.email}
+                              />
+                            </Link> : null
+                        }
+                    </TableCell>
                     <TableCell className={classesCell.root} align="right">
                       {DisplayDate(row.created_at)}
                     </TableCell>
@@ -533,14 +543,13 @@ const Users = () => {
                       }
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">
-                      <Button
+                      <StyledButton
                         variant="contained"
                         color="primary"
                         disabled={isUserPublisher(row.roles)}
                         onClick={() => { turnUserPublisher(row.roles, row.id) }}
-                      >
-                        Tornar publicador
-                                            </Button>
+                        text="Tornar publicador"
+                      />
                     </TableCell>
                     <TableCell className={classesCell.root} align="right">
                       <Link to={`/admin/user?id=${row.id}`}>