diff --git a/package-lock.json b/package-lock.json
index 53fbe6a2f757f97cd9fb3d49af611e6ab3658bb7..68efe2990a8da69a0937bddde665674d2a7b1de9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4000,9 +4000,9 @@
       },
       "dependencies": {
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.2.tgz",
+          "integrity": "sha512-DnBDwcL54b5xWMM/7RfFg4xs5amYxq2ot49aUfLjQSAracXkGvlZq0txzqr3Pa6Q0ayuCxBcwTzrPUScKY0O8w=="
         }
       }
     },
@@ -19750,9 +19750,9 @@
           }
         },
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.2.tgz",
+          "integrity": "sha512-DnBDwcL54b5xWMM/7RfFg4xs5amYxq2ot49aUfLjQSAracXkGvlZq0txzqr3Pa6Q0ayuCxBcwTzrPUScKY0O8w=="
         }
       }
     },
@@ -21368,6 +21368,13 @@
         "which-module": "^2.0.0",
         "y18n": "^3.2.1",
         "yargs-parser": "^9.0.2"
+      },
+      "dependencies": {
+        "y18n": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+          "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
+        }
       }
     },
     "yargs-parser": {
diff --git a/src/Admin/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..b596c35f59484e8754b79c68d787feced4011913
--- /dev/null
+++ b/src/Admin/Components/Components/AppBar.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import AppBar from "@material-ui/core/AppBar";
+import { Tab, Tabs } from "@material-ui/core";
+import { Link } from 'react-router-dom'
+import { TabsItens } from '../../Pages/AdminLabelTabs/LabelTabs'
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`nav-tabpanel-${index}`}
+      aria-labelledby={`nav-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `nav-tab-${index}`,
+    "aria-controls": `nav-tabpanel-${index}`,
+  };
+}
+export default function AppBarAdmin() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <AppBar position="sticky" color="default">
+      <Tabs
+        variant="scrollable"
+        scrollButtons="on"
+        value={value}
+        onChange={handleChange}
+        aria-label="nav tabs example"
+      >
+        {
+          TabsItens.map((label, index) => (
+            <Tab
+              key={label.href}
+              label={label.label}
+              to={label.href}
+              icon={label.icon}
+              component={Link}
+              {...a11yProps(index)}
+            />
+          ))
+        }
+      </Tabs>
+    </AppBar>
+  )
+}
\ No newline at end of file
diff --git a/src/Admin/Components/Components/DataCards/AchievementsCard.js b/src/Admin/Components/Components/DataCards/AchievementsCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0bc0efc43f7c4b1e21aa22738b347b8f7b40743
--- /dev/null
+++ b/src/Admin/Components/Components/DataCards/AchievementsCard.js
@@ -0,0 +1,553 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+// Maerial ui components
+import Card from "@material-ui/core/Card";
+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 } from "../../Styles/DataCard";
+import Grid from "@material-ui/core/Grid";
+// Icons
+import EditRoundedIcon from "@material-ui/icons/EditRounded";
+//imports from local files
+import { GetAData, DeleteFilter, EditFilter } from "../../../Filters";
+import { Link, useHistory } from "react-router-dom";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import {
+  getRequest,
+  deleteRequest,
+  putRequest
+} from "../../../../Components/HelperFunctions/getAxiosConfig";
+import Paper from "@material-ui/core/Paper";
+import styled from 'styled-components'
+import { GiAchievement } from 'react-icons/gi'
+
+const AchievementCard = ({ match }) => {
+  let history = useHistory();
+  const classes = useStyles();
+  const WINDOW_WIDTH = window.innerWidth
+  const [error, setError] = useState(false) //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false) //Necessary to consult the API, wait until complete
+  const [item, setItem] = useState()
+  const [reloadPage, setReloadPage] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const inactiveItem = (item) => {
+    const body = {
+      "achievement": {
+        "state": "inactive"
+      }
+    }
+    putRequest(
+      EditFilter("achievements", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi inativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        setReloadPage(!reloadPage)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const activeItem = (item) => {
+    const body = {
+      "achievement": {
+        "state": "active"
+      }
+    }
+    putRequest(
+      EditFilter("achievements", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi ativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        setReloadPage(!reloadPage)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("achievements", item.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        history.goBack()
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+
+  const FastActions = (item) => {
+    switch (item.state) {
+      case "deleted":
+        return (
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                onClick={() => inactiveItem(item)}
+              >
+                Inativar
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "inactive":
+        return (
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                onClick={deleteHandler}
+              >
+                Remover
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "active":
+        return (
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={deleteHandler}
+              >
+                Remover
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => inactiveItem(item)}
+              >
+                Inativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  const StateItem = (status) => {
+    switch (status) {
+      case "deleted":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FA8072",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            REMOVIDO
+          </Paper>
+        );
+      case "inactive":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            INATIVO
+          </Paper>
+        );
+      case "active":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#228B22",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            ATIVO
+          </Paper>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  useEffect(() => {
+    setIsLoaded(false)
+    getRequest(
+      GetAData("achievements", match.params.id),
+      (data, header) => {
+        setItem(data);
+        setIsLoaded(true);
+        setError(false);
+      },
+      (error) => {
+        setIsLoaded(true);
+        setError(true);
+      }
+    );
+  }, [reloadPage]);
+
+  if (error) {
+    return <div>Houve um erro</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    return (
+      <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+        <Grid container direction="row" spacing={1}>
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <Grid
+                  xs={12}
+                  justify="space-between"
+                  alignItems="center"
+                  container
+                >
+                  <Grid item>
+                    <Typography
+                      className={classes.title}
+                      color="inherit"
+                      gutterBottom
+                    >
+                      Informações do item
+                                        </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      to={`/admin/achievements`}
+                    >
+                      <Button
+                        startIcon={<ListRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Listar
+                                            </Button>
+                    </Link>
+                    <Link
+                      to={`/admin/EditAchievement/${match.params.id}`}
+                      style={{ textDecoration: "none" }}
+                    >
+                      <Button
+                        startIcon={<EditRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Editar
+                      </Button>
+                    </Link>
+                  </Grid>
+                </Grid>
+                <div style={{ height: "1em" }} />
+                <Grid container direction="row" spacing={3}>
+                  <Grid item sm={5} xs={12} style={WINDOW_WIDTH >= 600 ? {
+                    borderRight: "solid #d4d4d4 1px"
+                  } : {
+                      borderBottom: "solid #d4d4d4 1px"
+                    }}>
+                    <ImgDiv>
+                      <GiAchievement size={200} color="#e81f4f" />
+                    </ImgDiv>
+                  </Grid>
+                  <Grid item sm={7} xs={12}>
+                    <Grid container direction="column" spacing={1}>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Nome
+                          </Typography>
+                        <Typography color="textSecondary">
+                          {item.name}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Grid
+                          container
+                          direction="row"
+                          justify="space-between"
+                          alignItems="center"
+                          spacing={1}
+                        >
+                          <Grid item>
+                            <Typography
+                              color="initial"
+                              className={classes.subTitle}
+                            >
+                              Experiência ganha
+                            </Typography>
+                            <Typography style={{ color: "#228B22" }}>
+                              {"+" + (item.reward_experience) + " experiência"}
+                            </Typography>
+                          </Grid>
+                          <Grid item>
+                            <Typography
+                              color="initial"
+                              className={classes.subTitle}
+                            >
+                              Points ganhos
+                            </Typography>
+                            <Typography style={{ color: "#228B22" }}>
+                              {"+" + (item.reward_points) + " points"}
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Criado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.created_at)}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Atualizado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.updated_at)}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+                <Grid container direction="column" spacing={1}>
+                  {
+                    item.achievement ?
+                      <>
+                        <Grid item>
+                          <Typography color="initial" className={classes.subTitle}>
+                            Como desbloquear
+                                                    </Typography>
+                          <Typography color="textSecondary">
+                            {item.achievement.description}
+                          </Typography>
+                        </Grid>
+                        <Grid item>
+                          <Typography color="initial" className={classes.subTitle}>
+                            Recompensa de xp
+                                                    </Typography>
+                          <Typography style={{ color: "#228B22" }}>
+                            {"+" + item.achievement.reward_experience + " xp"}
+                          </Typography>
+                        </Grid>
+                        <Grid item>
+                          <Typography color="initial" className={classes.subTitle}>
+                            Recompensa de points
+                                                    </Typography>
+                          <Typography style={{ color: "#228B22" }}>
+                            {"+" + item.achievement.reward_points + " points"}
+                          </Typography>
+                        </Grid>
+                      </>
+                      : null
+                  }
+                  <Grid item>
+                    <Typography color="initial" className={classes.subTitle}>
+                      Descrição
+                    </Typography>
+                    <Typography color="textSecondary">
+                      {item.description}
+                    </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Typography color="initial" className={classes.subTitle}>
+                      Requisitos
+                    </Typography>
+                    <Typography color="textSecondary">
+                      <ul>
+                        {
+                          item.requirements.map((req) => {
+                            return (
+                              <li key={req.created_at}>
+                                {req.description}
+                              </li>
+                            )
+                          })
+                        }
+                      </ul>
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </CardContent>
+            </Card>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <div className={classes.displayColumn}>
+                  <Typography
+                    className={classes.title}
+                    color="inherit"
+                    gutterBottom
+                  >
+                    Estado
+                                    </Typography>
+                  <Typography color="textSecondary">
+                    {StateItem(item.state)}
+                  </Typography>
+                </div>
+                <div className={classes.displayColumn}>
+                  <Typography
+                    className={classes.title}
+                    color="inherit"
+                    gutterBottom
+                  >
+                    Ações
+                                    </Typography>
+                  <Typography color="textSecondary">
+                    {FastActions(item)}
+                  </Typography>
+                </div>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+};
+
+export default AchievementCard;
+
+const ImgDiv = styled.div`
+  display: flex; 
+  justify-content: center; 
+  align-items: center;
+  height: 100%; 
+  width: 100%;
+`
diff --git a/src/Admin/Components/Components/DataCards/ActionCard.js b/src/Admin/Components/Components/DataCards/ActionCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..546a1ee6fd2fe5038e3dd27d58cf1dd5fef5cddb
--- /dev/null
+++ b/src/Admin/Components/Components/DataCards/ActionCard.js
@@ -0,0 +1,290 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+// Maerial ui components
+import Card from "@material-ui/core/Card";
+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 } from "../../Styles/DataCard";
+import Grid from "@material-ui/core/Grid";
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+// Icons
+import EditRoundedIcon from "@material-ui/icons/EditRounded";
+//imports from local files
+import { GetAData, DeleteFilter } from "../../../Filters";
+import { Link, useHistory } from "react-router-dom";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import {
+  getRequest,
+  deleteRequest,
+} from "../../../../Components/HelperFunctions/getAxiosConfig";
+import styled from 'styled-components'
+import { FaRegHandPointer } from 'react-icons/fa'
+
+const AchievementCard = ({ match }) => {
+  let history = useHistory();
+  const classes = useStyles();
+  const WINDOW_WIDTH = window.innerWidth
+  const [error, setError] = useState(false) //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false) //Necessary to consult the API, wait until complete
+  const [item, setItem] = useState()
+  const [reloadPage, setReloadPage] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("actions", item.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setReloadPage(!reloadPage)
+        }
+        history.goBack()
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  useEffect(() => {
+    setIsLoaded(false)
+    getRequest(
+      GetAData("actions", match.params.id),
+      (data, header) => {
+        setItem(data);
+        setIsLoaded(true);
+        setError(false);
+      },
+      (error) => {
+        setIsLoaded(true);
+        setError(true);
+      }
+    );
+  }, [reloadPage]);
+
+  if (error) {
+    return <div>Houve um erro</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    return (
+      <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+        <Grid container direction="row" spacing={1}>
+          <Grid item xs={12}>
+            <Card>
+              <CardContent>
+                <Grid
+                  xs={12}
+                  justify="space-between"
+                  alignItems="center"
+                  container
+                >
+                  <Grid item>
+                    <Typography
+                      className={classes.title}
+                      color="inherit"
+                      gutterBottom
+                    >
+                      Informações da ação
+                    </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      to={`/admin/actions`}
+                    >
+                      <Button
+                        startIcon={<ListRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Listar
+                      </Button>
+                    </Link>
+                    <Link
+                      to={`/admin/EditAction/${match.params.id}`}
+                      style={{ textDecoration: "none" }}
+                    >
+                      <Button
+                        startIcon={<EditRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Editar
+                      </Button>
+                    </Link>
+                    <Button
+                      startIcon={<DeleteRoundedIcon />}
+                      color="secondary"
+                      variant="outlined"
+                      onClick={deleteHandler}
+                    >
+                      Deletar
+                    </Button>
+                  </Grid>
+                </Grid>
+                <div style={{ height: "1em" }} />
+                <Grid container direction="row" spacing={3}>
+                  <Grid item sm={5} xs={12} style={WINDOW_WIDTH >= 600 ? {
+                    borderRight: "solid #d4d4d4 1px"
+                  } : {
+                      borderBottom: "solid #d4d4d4 1px"
+                    }}>
+                    <ImgDiv>
+                      <FaRegHandPointer size={200} color="#00bcd4" />
+                    </ImgDiv>
+                  </Grid>
+                  <Grid item sm={7} xs={12}>
+                    <Grid container direction="column" spacing={1}>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Nome
+                        </Typography>
+                        <Typography color="textSecondary">
+                          {item.name}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Criado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.created_at)}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Atualizado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.updated_at)}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography color="initial" className={classes.subTitle}>
+                          Descrição
+                        </Typography>
+                        <Typography color="textSecondary">
+                          {item.description}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+                {
+                  item.requirements.length >= 1 ?
+                    <Grid container direction="column" spacing={1}>
+                      <Grid item>
+                        <Typography color="initial" className={classes.subTitle}>
+                          Requisitos que dependem dessa ação
+                    </Typography>
+                        <Typography color="textSecondary">
+                          <ul>
+                            {
+                              item.requirements.map((require) => {
+                                return (
+                                  <li key={require.created_at}>
+                                    <Link to={`/admin/requirement/${require.id}`}>
+                                      <span style={{ textDecoration: 'none', color: "#00bcd4" }}>
+                                        {require.description}
+                                      </span>
+                                    </Link>
+                                  </li>
+                                )
+                              })
+                            }
+                          </ul>
+                        </Typography>
+                      </Grid>
+                    </Grid> : null
+                }
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+};
+
+export default AchievementCard;
+
+const ImgDiv = styled.div`
+  display: flex; 
+  justify-content: center; 
+  align-items: center;
+  height: 100%; 
+  width: 100%;
+`
diff --git a/src/Admin/Components/Components/DataCards/GameficationCard.js b/src/Admin/Components/Components/DataCards/GameficationCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf8bca512ad7530d2707c9d5390a3a6e0437f4ac
--- /dev/null
+++ b/src/Admin/Components/Components/DataCards/GameficationCard.js
@@ -0,0 +1,562 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+// Maerial ui components
+import Card from "@material-ui/core/Card";
+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 } from "../../Styles/DataCard";
+import Grid from "@material-ui/core/Grid";
+// Icons
+import EditRoundedIcon from "@material-ui/icons/EditRounded";
+//imports from local files
+import { GetAData, DeleteFilter, EditFilter } from "../../../Filters";
+import { Link, useHistory } from "react-router-dom";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import {
+  getRequest,
+  deleteRequest,
+  putRequest
+} from "../../../../Components/HelperFunctions/getAxiosConfig";
+import Paper from "@material-ui/core/Paper";
+import { apiDomain } from "../../../../env";
+import noAvatar from "../../../../img/default_profile.png";
+
+const CollectionCard = ({ match }) => {
+  let history = useHistory();
+  const classes = useStyles();
+
+  const [error, setError] = useState(false) //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false) //Necessary to consult the API, wait until complete
+  const [item, setItem] = useState()
+  const [reloadPage, setReloadPage] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const inactiveItem = (item) => {
+    const body = {
+      "item": {
+        "state": "inactive"
+      }
+    }
+    putRequest(
+      EditFilter("items", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi inativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        setReloadPage(!reloadPage)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const activeItem = (item) => {
+    const body = {
+      "item": {
+        "state": "active"
+      }
+    }
+    putRequest(
+      EditFilter("items", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi ativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        setReloadPage(!reloadPage)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("items", item.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        history.goBack()
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+
+  const FastActions = (item) => {
+    switch (item.state) {
+      case "removed":
+        return (
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                onClick={() => inactiveItem(item)}
+              >
+                Inativar
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "inactive":
+        return (
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                onClick={deleteHandler}
+              >
+                Remover
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "active":
+        return (
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={deleteHandler}
+              >
+                Remover
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => inactiveItem(item)}
+              >
+                Inativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  const StateItem = (status) => {
+    switch (status) {
+      case "removed":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FA8072",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            REMOVIDO
+          </Paper>
+        );
+      case "inactive":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            INATIVO
+          </Paper>
+        );
+      case "active":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#228B22",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            ATIVO
+          </Paper>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  useEffect(() => {
+    setIsLoaded(false)
+    getRequest(
+      GetAData("items", match.params.id),
+      (data, header) => {
+        setItem(data);
+        setIsLoaded(true);
+        setError(false);
+      },
+      (error) => {
+        setIsLoaded(true);
+        setError(true);
+      }
+    );
+  }, [reloadPage]);
+
+  if (error) {
+    return <div>Houve um erro</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    return (
+      <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+        <Grid container direction="row" spacing={1}>
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <Grid
+                  xs={12}
+                  justify="space-between"
+                  alignItems="center"
+                  container
+                >
+                  <Grid item>
+                    <Typography
+                      className={classes.title}
+                      color="inherit"
+                      gutterBottom
+                    >
+                      Informações do item
+                                        </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      to={`/admin/gamefication`}
+                    >
+                      <Button
+                        startIcon={<ListRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Listar
+                                            </Button>
+                    </Link>
+                    <Link
+                      to={`/admin/EditItem/${match.params.id}`}
+                      style={{ textDecoration: "none" }}
+                    >
+                      <Button
+                        startIcon={<EditRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Editar
+                      </Button>
+                    </Link>
+                  </Grid>
+                </Grid>
+                <div style={{ height: "1em" }} />
+                <Grid container direction="row" spacing={3}>
+                  <Grid item sm={5} xs={12} style={{
+                    borderRight: "solid #d4d4d4 1px"
+                  }}>
+                    <img
+                      alt="Avatar of the item"
+                      src={item.image ? apiDomain + item.image : noAvatar}
+                      style={{
+                        maxHeight: "100%",
+                        objectFit: "cover",
+                        maxWidth: "100%",
+                      }}
+                    />
+                  </Grid>
+                  <Grid item sm={7} xs={12}>
+                    <Grid container direction="column" spacing={1}>
+                      <Grid
+                        container
+                        direction="row"
+                        justify="space-between"
+                        alignItems="center"
+                      >
+                        <Grid item>
+                          <Typography
+                            color="initial"
+                            className={classes.subTitle}
+                          >
+                            Nome
+                          </Typography>
+                          <Typography color="textSecondary">
+                            {item.name}
+                          </Typography>
+                        </Grid>
+                        <Grid item>
+                          <Typography
+                            color="initial"
+                            className={classes.subTitle}
+                          >
+                            Tipo
+                                                    </Typography>
+                          <Typography color="textSecondary">
+                            {item.item_type}
+                          </Typography>
+                        </Grid>
+                      </Grid>
+                      <Grid item>
+                        <Grid
+                          container
+                          direction="row"
+                          justify="space-between"
+                          alignItems="center"
+                          spacing={1}
+                        >
+                          <Grid item>
+                            <Typography
+                              color="initial"
+                              className={classes.subTitle}
+                            >
+                              Preço
+                                                        </Typography>
+                            <Typography color="textSecondary">
+                              {item.price + " points"}
+                            </Typography>
+                          </Grid>
+
+                          <Grid item>
+                            <Typography
+                              color="initial"
+                              className={classes.subTitle}
+                            >
+                              Desconto
+                                                        </Typography>
+                            <Typography style={{ color: "#FA8072" }}>
+                              {"-" + item.discount + " points"}
+                            </Typography>
+                          </Grid>
+
+                          <Grid item>
+                            <Typography
+                              color="initial"
+                              className={classes.subTitle}
+                            >
+                              Preço a se pagar
+                                                        </Typography>
+                            <Typography style={{ color: "#228B22" }}>
+                              {item.price - item.discount + " points"}
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Criado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.created_at)}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Atualizado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.updated_at)}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+                <Grid container direction="column" spacing={1}>
+                  {
+                    item.achievement ?
+                      <>
+                        <Grid item>
+                          <Typography color="initial" className={classes.subTitle}>
+                            Como desbloquear
+                                                    </Typography>
+                          <Typography color="textSecondary">
+                            {item.achievement.description}
+                          </Typography>
+                        </Grid>
+                        <Grid item>
+                          <Typography color="initial" className={classes.subTitle}>
+                            Recompensa de xp
+                                                    </Typography>
+                          <Typography style={{ color: "#228B22" }}>
+                            {"+" + item.achievement.reward_experience + " xp"}
+                          </Typography>
+                        </Grid>
+                        <Grid item>
+                          <Typography color="initial" className={classes.subTitle}>
+                            Recompensa de points
+                                                    </Typography>
+                          <Typography style={{ color: "#228B22" }}>
+                            {"+" + item.achievement.reward_points + " points"}
+                          </Typography>
+                        </Grid>
+                      </>
+                      : null
+                  }
+                  <Grid item>
+                    <Typography color="initial" className={classes.subTitle}>
+                      Descrição
+                    </Typography>
+                    <Typography color="textSecondary">
+                      {item.description}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </CardContent>
+            </Card>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <Card>
+              <CardContent>
+                <div className={classes.displayColumn}>
+                  <Typography
+                    className={classes.title}
+                    color="inherit"
+                    gutterBottom
+                  >
+                    Estado
+                                    </Typography>
+                  <Typography color="textSecondary">
+                    {StateItem(item.state)}
+                  </Typography>
+                </div>
+                <div className={classes.displayColumn}>
+                  <Typography
+                    className={classes.title}
+                    color="inherit"
+                    gutterBottom
+                  >
+                    Ações
+                                    </Typography>
+                  <Typography color="textSecondary">
+                    {FastActions(item)}
+                  </Typography>
+                </div>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+};
+
+export default CollectionCard;
diff --git a/src/Admin/Components/Components/DataCards/RequirementCard.js b/src/Admin/Components/Components/DataCards/RequirementCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..69cae60511fed7e08225cb03ffb175366264f299
--- /dev/null
+++ b/src/Admin/Components/Components/DataCards/RequirementCard.js
@@ -0,0 +1,289 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+// Maerial ui components
+import Card from "@material-ui/core/Card";
+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 } from "../../Styles/DataCard";
+import Grid from "@material-ui/core/Grid";
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+// Icons
+import EditRoundedIcon from "@material-ui/icons/EditRounded";
+//imports from local files
+import { GetAData, DeleteFilter } from "../../../Filters";
+import { Link, useHistory } from "react-router-dom";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import {
+  getRequest,
+  deleteRequest,
+} from "../../../../Components/HelperFunctions/getAxiosConfig";
+import styled from 'styled-components'
+import { DiRequirejs } from 'react-icons/di'
+
+const AchievementCard = ({ match }) => {
+  let history = useHistory();
+  const classes = useStyles();
+  const WINDOW_WIDTH = window.innerWidth
+  const [error, setError] = useState(false) //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false) //Necessary to consult the API, wait until complete
+  const [item, setItem] = useState()
+  const [reloadPage, setReloadPage] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("requirements", item.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setReloadPage(!reloadPage)
+        }
+        history.goBack()
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  useEffect(() => {
+    setIsLoaded(false)
+    getRequest(
+      GetAData("requirements", match.params.id),
+      (data, header) => {
+        setItem(data);
+        setIsLoaded(true);
+        setError(false);
+      },
+      (error) => {
+        setIsLoaded(true);
+        setError(true);
+      }
+    );
+  }, [reloadPage]);
+
+  if (error) {
+    return <div>Houve um erro</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    return (
+      <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+        <Grid container direction="row" spacing={1}>
+          <Grid item xs={12}>
+            <Card>
+              <CardContent>
+                <Grid
+                  xs={12}
+                  justify="space-between"
+                  alignItems="center"
+                  container
+                >
+                  <Grid item>
+                    <Typography
+                      className={classes.title}
+                      color="inherit"
+                      gutterBottom
+                    >
+                      Informações do requisito
+                    </Typography>
+                  </Grid>
+                  <Grid item>
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      to={`/admin/requirements`}
+                    >
+                      <Button
+                        startIcon={<ListRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Listar
+                      </Button>
+                    </Link>
+                    <Link
+                      to={`/admin/EditRequirement/${match.params.id}`}
+                      style={{ textDecoration: "none" }}
+                    >
+                      <Button
+                        startIcon={<EditRoundedIcon />}
+                        color="primary"
+                        variant="outlined"
+                      >
+                        Editar
+                      </Button>
+                    </Link>
+                    <Button
+                      startIcon={<DeleteRoundedIcon />}
+                      color="secondary"
+                      variant="outlined"
+                      onClick={deleteHandler}
+                    >
+                      Deletar
+                    </Button>
+                  </Grid>
+                </Grid>
+                <div style={{ height: "1em" }} />
+                <Grid container direction="row" spacing={3}>
+                  <Grid item sm={5} xs={12} style={WINDOW_WIDTH >= 600 ? {
+                    borderRight: "solid #d4d4d4 1px"
+                  } : {
+                      borderBottom: "solid #d4d4d4 1px"
+                    }}>
+                    <ImgDiv>
+                      <DiRequirejs size={200} color="#673ab7" />
+                    </ImgDiv>
+                  </Grid>
+                  <Grid item sm={7} xs={12}>
+                    <Grid container direction="column" spacing={1}>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Nome
+                          </Typography>
+                        <Link to={`/admin/action/${item.action.id}`}>
+                          <span style={{ textDecoration: 'none', color: "#673ab7" }}>
+                            {item.action.name}
+                          </span>
+                        </Link>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Criado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.created_at)}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography
+                          color="initial"
+                          className={classes.subTitle}
+                        >
+                          Atualizado em
+                                                </Typography>
+                        <Typography color="textSecondary">
+                          {DisplayDate(item.updated_at)}
+                        </Typography>
+                      </Grid>
+                      <Grid item>
+                        <Typography color="initial" className={classes.subTitle}>
+                          Descrição
+                        </Typography>
+                        <Typography color="textSecondary">
+                          {item.description}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+                <Grid container direction="column" spacing={1}>
+                  <Grid item>
+                    <Typography color="initial" className={classes.subTitle}>
+                      Achievements que dependem desse requisito
+                    </Typography>
+                    <Typography color="textSecondary">
+                      <ul>
+                        {
+                          item.achievements.map((achieve) => {
+                            return (
+                              <li key={achieve.created_at}>
+                                <Link to={`/admin/achievement/${achieve.id}`}>
+                                  <span style={{ textDecoration: 'none', color: "#673ab7" }}>
+                                    {achieve.name}
+                                  </span>
+                                </Link>
+                              </li>
+                            )
+                          })
+                        }
+                      </ul>
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+};
+
+export default AchievementCard;
+
+const ImgDiv = styled.div`
+  display: flex; 
+  justify-content: center; 
+  align-items: center;
+  height: 100%; 
+  width: 100%;
+`
diff --git a/src/Admin/Components/Components/DisplayIcon.js b/src/Admin/Components/Components/DisplayIcon.js
deleted file mode 100644
index 5336574d7124413e47603fd0fc63122c12853f2e..0000000000000000000000000000000000000000
--- a/src/Admin/Components/Components/DisplayIcon.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-
-import React from "react";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import HomeIcon from "@material-ui/icons/Home";
-import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
-import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
-import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
-import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
-import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
-import StarRoundedIcon from "@material-ui/icons/StarRounded";
-import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded";
-import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
-import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
-import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
-import PersonRoundedIcon from "@material-ui/icons/PersonRounded";
-import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
-import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
-import EmailRoundedIcon from "@material-ui/icons/EmailRounded";
-import TimelineRoundedIcon from "@material-ui/icons/TimelineRounded";
-import SettingsRoundedIcon from "@material-ui/icons/SettingsRounded";
-import ExitToAppRoundedIcon from "@material-ui/icons/ExitToAppRounded";
-import AllOutIcon from "@material-ui/icons/AllOut";
-import SportsEsportsRoundedIcon from '@material-ui/icons/SportsEsportsRounded';
-
-//This file manipulate the icon that will be displayed in the left navigation menu
-
-const orange = "#ff7f00";
-const pink = "#e81f4f";
-const purple = "#673ab7";
-const blue = "#00bcd4";
-
-const icons = [
-    <HomeIcon style={{ fill: orange }} />,
-    <PeopleRoundedIcon style={{ fill: pink }} />,
-    <AllOutIcon style={{ fill: purple }} />,
-    <ContactSupportRoundedIcon style={{ fill: blue }} />,
-    <AccountBalanceRoundedIcon style={{ fill: orange }} />,
-    <LanguageRoundedIcon style={{ fill: pink }} />,
-    <MenuBookRoundedIcon style={{ fill: purple }} />,
-    <StarRoundedIcon style={{ fill: blue }} />,
-    <AccountCircleRoundedIcon style={{ fill: orange }} />,
-    <TrendingUpRoundedIcon style={{ fill: pink }} />,
-    <HelpRoundedIcon style={{ fill: purple }} />,
-    <CheckRoundedIcon style={{ fill: blue }} />,
-    <PersonRoundedIcon style={{ fill: orange }} />,
-    <BlockRoundedIcon style={{ fill: pink }} />,
-    <AnnouncementRoundedIcon style={{ fill: purple }} />,
-    <EmailRoundedIcon style={{ fill: blue }} />,
-    <SportsEsportsRoundedIcon style={{fill: orange }}/>,
-    <TimelineRoundedIcon style={{ fill: orange }} />,
-    <SettingsRoundedIcon style={{ fill: pink }} />,
-    <ExitToAppRoundedIcon style={{ fill: purple }} />,
-];
-
-const DisplayIcon = (props) => {
-    return(
-        <ListItemIcon>
-            {icons[props.i]}
-        </ListItemIcon>
-    );
-};
-export default DisplayIcon;
diff --git a/src/Admin/Components/Components/Inputs/CreateAchievements.js b/src/Admin/Components/Components/Inputs/CreateAchievements.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee61999e6ce2066e69949fc8b30caf1bd3470dd2
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateAchievements.js
@@ -0,0 +1,463 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import Chip from '@material-ui/core/Chip';
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent'
+import { Store } from '../../../../Store'
+import Unauthorized from '../Unauthorized'
+import { postRequest } from "../../../../Components/HelperFunctions/getAxiosConfig"
+//router
+import { Link } from 'react-router-dom'
+
+
+const CreateAchievement = () => {
+  const { state } = useContext(Store)
+
+  const [name, setName] = useState('Criar achievement')
+  const [description, setDescription] = useState('')
+  const [rewardXP, setRewardXP] = useState('')
+  const [rewardPT, setRewardPT] = useState('')
+  const [itemState, setItemState] = useState('')
+  const [repeatable, setRepeatable] = useState('')
+  const [resettable, setResettable] = useState('')
+  const [requirements, setRequirements] = useState([])
+  const [stringReq, setStringReq] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [errorInName, setErrorInName] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInRewardPoints, setErrorInRewardPoints] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInState, setErrorInState] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInRepeatable, setErrorInRepeteable] = useState({
+    error: false,
+    message: '',
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const stateOptions = [
+    { name: "active", value: "Ativo" },
+    { name: "inactive", value: "Inativo" },
+    { name: "deleted", value: "Removido" },
+  ]
+
+  const repeatableOptions = [
+    { name: "never", value: "Nunca" },
+    { name: "daily", value: "Diariamente" },
+    { name: "weekly", value: "Semanalmente" },
+    { name: "monthly", value: "Mensalmente" },
+    { name: "yearly", value: "Anualmente" },
+  ]
+  const resettableOptions = [
+    { name: "true", value: "Sim" },
+    { name: "false", value: "Não" },
+
+  ]
+
+
+  const NameHandler = (e) => {
+    if (errorInName.error) {
+      setErrorInName({
+        error: false,
+        message: ''
+      })
+    }
+    setName(e.target.value)
+  }
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const rewardXPHandler = (e) => {
+    setRewardXP(e.target.value)
+  }
+  const repeatableHandler = (e) => {
+    setRepeatable(e.target.value)
+  }
+  const rewardPTHandler = (e) => {
+    if (errorInRewardPoints.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setRewardPT(e.target.value)
+  }
+  const itemStateHandler = (e) => {
+    setItemState(e.target.value)
+  }
+  const resettableHandler = (e) => {
+    setResettable(e.target.value)
+  }
+  const stringReqHandler = (e) => {
+    setStringReq(e.target.value)
+  };
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+
+  //Handle submit 
+  async function onSubmit() {
+    setIsLoading(true)
+    const api = "/achievements"
+    const body = {
+      "achievement": {
+        "name": name,
+        "description": description,
+        "reward_experience": rewardXP ? parseInt(rewardXP) : 0,
+        "reward_points": parseInt(rewardPT),
+        "state": itemState,
+        "repeatable": repeatable,
+        "resettable": resettable,
+        "requirements": requirements
+      }
+    }
+    postRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O item foi alterado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.name) {
+            let nameError = ""
+            data.name.map((msg) => (
+              nameError = nameError + msg + " e "
+            ))
+            setErrorInName({
+              error: true,
+              message: nameError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.reward_points) {
+            let reward_pointsError = ""
+            data.reward_points.map((msg) => (
+              reward_pointsError = reward_pointsError + msg + " e "
+            ))
+            setErrorInRewardPoints({
+              error: true,
+              message: reward_pointsError
+            })
+          }
+          if (data.state) {
+            let stateError = ""
+            data.state.map((msg) => (
+              stateError = stateError + msg + " e "
+            ))
+            setErrorInState({
+              error: true,
+              message: stateError
+            })
+          }
+          if (data.repeatable) {
+            let repeatableError = ""
+            data.repeatable.map((msg) => (
+              repeatableError = repeatableError + msg + " e "
+            ))
+            setErrorInRepeteable({
+              error: true,
+              message: repeatableError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  const HandleDelete = (i) => {
+    const copyReq = [...requirements];
+    copyReq.splice(i, 1);
+    setRequirements(copyReq);
+  };
+
+  const OnKeyPressHandler = (key) => {
+    if (key === 13) {
+      const copyReq = [...requirements];
+      copyReq.push(parseInt(stringReq));
+      setRequirements(copyReq);
+      setStringReq("");
+    }
+  };
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Nome',
+      value: name,
+      required: true,
+      error: errorInName.error,
+      errorMessage: errorInName.message,
+      onChange: (event) => NameHandler(event)
+    },
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Experiência ganha',
+      value: rewardXP,
+      required: false,
+      onChange: (event) => rewardXPHandler(event)
+    },
+    {
+      select: false,
+      label: 'Points ganhos',
+      value: rewardPT,
+      error: errorInRewardPoints.error,
+      errorMessage: errorInRewardPoints.message,
+      required: false,
+      onChange: (event) => rewardPTHandler(event)
+    },
+    {
+      select: true,
+      label: 'Estado',
+      value: itemState,
+      options: [...stateOptions],
+      error: errorInState.error,
+      errorMessage: errorInState.message,
+      required: false,
+      onChange: (event) => itemStateHandler(event)
+    },
+    {
+      select: true,
+      label: 'Repetível',
+      value: repeatable,
+      error: errorInRepeatable.error,
+      errorMessage: errorInRepeatable.message,
+      required: false,
+      options: [...repeatableOptions],
+      onChange: (event) => repeatableHandler(event)
+    },
+    {
+      select: true,
+      label: 'Reajustável',
+      value: resettable,
+      required: false,
+      options: [...resettableOptions],
+      onChange: (event) => resettableHandler(event)
+    },
+  ]
+  if (CheckUserPermission()) {
+    return (
+      <Card>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                {name}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/achievements'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+            <>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  marginBottom: "1em"
+                }}
+              >
+                {requirements.map((req, index) => (
+                  <li key={req.id} style={{ listStyleType: "none", marginBottom: "0.5em", marginRight: "0.5em" }}>
+                    <Chip
+                      label={req}
+                      onDelete={() => HandleDelete(index)}
+                    />
+                  </li>
+                ))}
+              </div>
+
+              <TextField
+                id="outlined-input"
+                label="Requisitos"
+                rows={1}
+                value={stringReq}
+                onKeyPress={(key) => OnKeyPressHandler(key.which)}
+                onChange={stringReqHandler}
+                // onBlur={ShowEmails}
+                helperText="Digite o ID do requisito, um por vez, e pressione Enter"
+                style={{ marginBottom: "1em", width: '250px' }}
+              />
+            </>
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Editar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default CreateAchievement
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateAction.js b/src/Admin/Components/Components/Inputs/CreateAction.js
new file mode 100644
index 0000000000000000000000000000000000000000..7812afa5c9f33ec9403a4cbb6a522bf52f9f836e
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateAction.js
@@ -0,0 +1,308 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent'
+import { Store } from '../../../../Store'
+import Unauthorized from '../Unauthorized'
+import { postRequest } from "../../../../Components/HelperFunctions/getAxiosConfig"
+//router
+import { Link } from 'react-router-dom'
+
+const CreateAction = () => {
+  const { state } = useContext(Store)
+
+  const [name, setName] = useState('Criar Item')
+  const [description, setDescription] = useState('')
+  const [rewardXP, setRewardXP] = useState('')
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [errorInName, setErrorInName] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInRewardXP, setErrorInRewardXP] = useState({
+    error: false,
+    message: '',
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const NameHandler = (e) => {
+    if (errorInName.error) {
+      setErrorInName({
+        error: false,
+        message: ''
+      })
+    }
+    setName(e.target.value)
+  }
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const rewardXPHandler = (e) => {
+    if (errorInRewardXP.error)
+      setErrorInRewardXP({
+        error: false,
+        message: ''
+      })
+    setRewardXP(e.target.value)
+  }
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+
+  //Handle submit 
+  async function onSubmit() {
+    setIsLoading(true)
+    const api = `/actions`
+    const body = {
+      "action_params": {
+        "name": name,
+        "description": description,
+        "reward_experience": rewardXP ? parseInt(rewardXP) : 0,
+      }
+    }
+    postRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O item foi alterado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.name) {
+            let nameError = ""
+            data.name.map((msg) => (
+              nameError = nameError + msg + " e "
+            ))
+            setErrorInName({
+              error: true,
+              message: nameError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.reward_experience) {
+            let reward_experienceError = ""
+            data.reward_experience.map((msg) => (
+              reward_experienceError = reward_experienceError + msg + " e "
+            ))
+            setErrorInRewardXP({
+              error: true,
+              message: reward_experienceError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Nome',
+      value: name,
+      required: true,
+      error: errorInName.error,
+      errorMessage: errorInName.message,
+      onChange: (event) => NameHandler(event)
+    },
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Experiência ganha',
+      value: rewardXP,
+      error: errorInRewardXP.error,
+      errorMessage: errorInRewardXP.message,
+      required: false,
+      onChange: (event) => rewardXPHandler(event)
+    },
+  ]
+
+  if (CheckUserPermission()) {
+    return (
+      <Card>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                {name}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/actions'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Editar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default CreateAction
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateItem/CompAddImg.js b/src/Admin/Components/Components/Inputs/CreateItem/CompAddImg.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc2db478913a0a4c130aad6ceef131af2508d15c
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateItem/CompAddImg.js
@@ -0,0 +1,269 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState } from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../../../../../img/default_profile0.png'
+import Cropper from './Cropper.js'
+
+function ChooseImage(props) {
+    return (
+        <div style={{ marginTop: "0" }}>
+            <DivAlterarFoto>
+                <DivFlowHolder>
+                    <AvatarCircleDiv>
+                        <img src={props.avatar}
+                            alt="user avatar" style={{ height: "inherit", width: "inherit", objectFit: "cover" }}
+                        />
+                        <input accept="image/*" id="avatar-file"
+                            type="file"
+                            onChange={(e) => props.handleFile(e.target.files)}
+                            style={{ display: "none" }}
+                        />
+                        <label for="avatar-file" style={{ width: "inherit" }}>
+                            <ChangeAvatarDiv >
+                                <span>Alterar</span>
+                            </ChangeAvatarDiv>
+                        </label>
+                    </AvatarCircleDiv>
+                </DivFlowHolder>
+            </DivAlterarFoto>
+            {
+                props.tempImg &&
+                <img alt="" src={props.tempImg} />
+            }
+            <ButtonsDiv>
+                <ButtonCancelar onClick={props.handleClose}>
+                    <span>Cancelar</span>
+                </ButtonCancelar>
+
+            </ButtonsDiv>
+        </div>
+    )
+}
+
+
+export default function ComponentAlterarAvatar(props) {
+    const [uploadingImage, setUploading] = useState(false)
+
+    const handleFile = (selectorFiles) => {
+        const objectURL = URL.createObjectURL(selectorFiles[0])
+        console.log(objectURL)
+        setTempImg(objectURL)
+        setUploading(true)
+    }
+
+    const [tempImgURL, setTempImg] = useState(null)
+
+    const [newAvatar, setNewAvatar] = useState('')
+    const updateAvatar = (avatar) => {
+        setNewAvatar(avatar)
+    }
+
+    const [crop] = useState({
+        unit: "%",
+        width: 30,
+        aspect: 1
+    });
+
+    const completeSelection = () => {
+        props.handleComplete(newAvatar)
+    }
+
+    return (
+        <ModalDiv>
+            <HeaderDiv>
+                <span style={{ width: "32px" }} />
+                <StyledH2>{uploadingImage ? 'Alterar foto do Item' : 'Editar foto do Item'}</StyledH2>
+                <StyledCloseModalButton onClick={props.handleClose}>
+                    <CloseIcon style={{ color: "#666" }} />
+                </StyledCloseModalButton>
+            </HeaderDiv>
+            <DialogDiv>
+                {
+                    uploadingImage ?
+                        (
+                            [
+                                <>
+                                    <EditarDiv>
+                                        <TextoEditarDiv>
+                                            Clique nos ícones e arraste para selecionar a parte que você quer da foto
+                                        </TextoEditarDiv>
+                                        <div style={{ maxWidth: "500px", maxHeight: "300px" }}>
+                                            <Cropper src={tempImgURL} crop={crop} circularCrop={true} update={updateAvatar} />
+                                        </div>
+                                    </EditarDiv>
+                                    <FooterButtonsDiv>
+                                        <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+                                        <ButtonConfirmar onClick={() => { completeSelection() }}>SELECIONAR FOTO</ButtonConfirmar>
+                                    </FooterButtonsDiv>
+                                </>
+                            ]
+                        )
+                        :
+                        (
+                            [
+                                <>
+                                    <ChooseImage
+                                        avatar={Profile}
+                                        handleFile={handleFile}
+                                        handleClose={props.handleClose}
+                                        tempImg={tempImgURL}
+                                    />
+                                </>
+                            ]
+                        )
+                }
+            </DialogDiv>
+        </ModalDiv>
+    )
+
+}
+
+const FooterButtonsDiv = styled.div`
+    padding : 0 30px 20px;
+    display : flex;
+    flex-direction : row;
+    align-content : center;
+    justify-content : space-between;
+    Button {
+        margin-top : 20px;
+    }
+`
+
+const TextoEditarDiv = styled.div`
+    margin-bottom : 15px;
+    align-self : center;
+    text-align : center;
+    font-size : 15px;
+`
+
+const EditarDiv = styled.div`
+    position : relative;
+    background-color : #f4f4f4;
+    padding : 20px 30px 40px;
+`
+
+const ChangeAvatarDiv = styled.div`
+    color : rgba(255,255,255,.7);
+    background-color:rgba(0,0,0,.5);
+    position: absolute;
+    bottom: 0;
+    width: inherit;
+    text-align: center;
+    font-size: 18px;
+    padding-bottom: 5px;
+    font-weight: 400;
+    height: 30%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
+const ModalDiv = styled.div`
+    background-color : #fff;
+    border-radius : 4px;
+    min-width : 560px;
+    color : #666;
+    display: flex;
+    flex-direction : column;
+    @media screen and (max-width: 959px) {
+        height : 100%;
+        width : 100%;
+    }
+`
+const ButtonConfirmar = styled(Button)`
+    background-color : #00bcd4 !important;
+    color : #fff !important;
+    border-radius : 3px !important;
+`
+
+const ButtonCancelar = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    background-color : #fff !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+`
+
+const ButtonsDiv = styled.div`
+display : flex;
+justify-content:flex-end;
+`
+
+const AvatarCircleDiv = styled.div`
+margin-bottom : 0;
+border-radius : 50%;
+height : 150px;
+width : 150px;
+position : relative;
+overflow: hidden;
+`
+
+const DivFlowHolder = styled.div`
+align-self : auto;
+`
+
+const DivAlterarFoto = styled.div`
+display : flex;
+margin-bottom : 30px;
+flex-direction : row;
+align-items : center;
+justify-content :center;
+`
+
+const DialogDiv = styled.div`
+padding : 20px 30px;
+overflow : visible !important;
+`
+
+const HeaderDiv = styled.div`
+display : flex;
+flex-direction : row;
+align-items : center;
+align-content : center;
+justify-content : space-between;
+max-width : 100%;
+`
+const StyledH2 = styled.h2`
+font-size : 26px;
+font-weight : normal;
+margin-top : 20px;
+margin-bottom : 10px;
+font-family: inherit;
+line-height: 1.1;
+color: inherit;
+`
+const StyledCloseModalButton = styled(Button)`
+display : inline-block;
+position : relative;
+float : right !important;
+background : transparent !important;
+min-width: 0 !important;
+width : 40px;
+border-radius : 50%;
+padding : 8px;
+height : 40px;
+margin : 0 6px;
+`
diff --git a/src/Admin/Components/Components/Inputs/CreateItem/CreateItem.js b/src/Admin/Components/Components/Inputs/CreateItem/CreateItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..39c4d62f36bd779e8b33e631329b3f7e1f818de0
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateItem/CreateItem.js
@@ -0,0 +1,409 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext } from 'react';
+//imports material ui componets
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardAction from '@material-ui/core/CardActions';
+import { Typography, TextField, 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';
+import MenuItem from "@material-ui/core/MenuItem";
+//imports local files
+import SnackBar from '../../../../../Components/SnackbarComponent';
+import { Store } from '../../../../../Store';
+import { postRequest } from '../../../../../Components/HelperFunctions/getAxiosConfig'
+import Unauthorized from '../../Unauthorized';
+import ModalAddPhoto from "./ModalAddPhoto"
+//router
+import { Link } from 'react-router-dom';
+
+const CreateItem = (props) => {
+    const { state } = useContext(Store);
+
+    const [name, setName] = useState('Novo item');
+    const [description, setDescription] = useState('');
+    const [price, setPrice] = useState('');
+    const [discount, setDiscount] = useState('');
+    const [itemState, setItemState] = useState("active");
+    const [itemType, setItemType] = useState('avatar_frame');
+    const [achievementID, setAchievementID] = useState('');
+    const [isLoading, setIsLoading] = useState(false)
+    const [open, setOpen] = useState(false)
+    const [errorInName, setErrorInName] = useState({
+        error: false,
+        message: '',
+    })
+    const [errorInDescription, setErrorInDescription] = useState({
+        error: false,
+        message: '',
+    })
+    const [errorInPrice, setErrorInPrice] = useState({
+        error: false,
+        message: ''
+    })
+    const [errorInObjType, setErrorInObjType] = useState({
+        error: false,
+        message: ''
+    })
+
+    const [snackInfo, setSnackInfo] = useState({
+        message: '',
+        icon: '',
+        open: false,
+        color: '',
+    })
+
+    const stateOptions = [
+        { name: "active", value: "Ativo" },
+        { name: "inactive", value: "Inativo" },
+        { name: "removed", value: "Removido" },
+    ];
+
+    const typesOptions = [
+        { name: "avatar_frame", value: "Moldura de avatar" },
+        { name: "badge", value: "Insígnia" },
+        { name: "card_frame", value: "Moldura de card do usuário" },
+        { name: "cover_frame", value: "Moldura de capa" },
+
+    ];
+
+
+    const NameHandler = (e) => {
+        if (errorInName.error) {
+            setErrorInName({
+                error: false,
+                message: ''
+            })
+        }
+        setName(e.target.value)
+    }
+    const DescriptionHandler = (e) => {
+        if (errorInDescription.error)
+            setErrorInDescription({
+                error: false,
+                message: ''
+            })
+        setDescription(e.target.value)
+    }
+    const priceHandler = (e) => {
+        if (errorInPrice.error)
+            setErrorInPrice({
+                error: false,
+                message: ''
+            })
+        setPrice(e.target.value)
+    }
+    const itemTypeHandler = (e) => {
+        if (errorInObjType.error)
+            setErrorInObjType({
+                error: false,
+                message: ''
+            })
+        setItemType(e.target.value)
+    }
+    const discountHandler = (e) => {
+        setDiscount(e.target.value)
+    }
+    const itemStateHandler = (e) => {
+        console.log(e)
+        setItemState(e.target.value)
+    }
+    const achievementIdHandler = (e) => {
+        setAchievementID(e.target.value)
+    }
+
+    // Handle snack infos
+    const HandleSnack = (message, state, icon, color) => {
+        setSnackInfo({
+            message: message,
+            icon: icon,
+            open: state,
+            color: color
+        })
+    }
+
+    const CheckUserPermission = () => {
+        let canUserEdit = false;
+
+        if (state.userIsLoggedIn) {
+            const roles = [...state.currentUser.roles];
+            for (let i = 0; i < roles.length; i++)
+                if (roles[i].name === 'admin' || roles[i].name === 'editor')
+                    canUserEdit = true;
+        }
+        else {
+            canUserEdit = false;
+        }
+
+        return canUserEdit;
+    }
+
+
+    //Handle submit 
+    async function onSubmit(img) {
+        setIsLoading(true)
+        const api = '/items'
+        const body = {
+            "item": {
+                "name": name,
+                "description": description,
+                "price": parseInt(price),
+                "discount": parseInt(discount),
+                "state": itemState,
+                "item_type": itemType,
+                "achievement_id": parseInt(achievementID),
+                "image": img
+            }
+        }
+        postRequest(
+            api,
+            body,
+            (data) => {
+                if (data.id)
+                    HandleSnack('O item foi criada com sucesso', true, 'success', '#228B22')
+                else {
+                    if (data.errors) {
+                        HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+                    }
+                    if (data.name) {
+                        let nameError = "";
+                        data.name.map((msg) => (
+                            nameError = nameError + msg + " e "
+                        ))
+                        setErrorInName({
+                            error: true,
+                            message: nameError
+                        })
+                    }
+                    if (data.price) {
+                        let priceError = "";
+                        data.price.map((msg) => (
+                            priceError = priceError + msg + " e "
+                        ))
+                        setErrorInPrice({
+                            error: true,
+                            message: priceError
+                        })
+                    }
+                    if (data.description) {
+                        let descriptionError = "";
+                        data.description.map((msg) => (
+                            descriptionError = descriptionError + msg + " e "
+                        ))
+                        setErrorInDescription({
+                            error: true,
+                            message: descriptionError
+                        })
+                    }
+                    if (data.item_type) {
+                        let objTypeError = "";
+                        data.objType.map((msg) => (
+                            objTypeError = objTypeError + msg + " e "
+                        ))
+                        setErrorInObjType({
+                            error: true,
+                            message: objTypeError
+                        })
+                    }
+                }
+                setIsLoading(false)
+            },
+            (error) => {
+                HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+                setIsLoading(false)
+            }
+        )
+    }
+
+    // Fields
+    const fields = [
+        {
+            select: false,
+            label: 'Nome',
+            value: name,
+            required: true,
+            error: errorInName.error,
+            errorMessage: errorInName.message,
+            onChange: (event) => NameHandler(event)
+        },
+        {
+            select: false,
+            label: 'Descrição',
+            value: description,
+            required: false,
+            error: errorInDescription.error,
+            errorMessage: errorInDescription.message,
+            onChange: (event) => DescriptionHandler(event)
+        },
+        {
+            select: false,
+            label: 'Preço',
+            value: price,
+            required: false,
+            error: errorInPrice.error,
+            errorMessage: errorInPrice.message,
+            onChange: (event) => priceHandler(event)
+        },
+        {
+            select: false,
+            label: 'Desconto',
+            value: discount,
+            required: false,
+            onChange: (event) => discountHandler(event)
+        },
+        {
+            select: true,
+            label: 'Estado',
+            value: itemState,
+            options: [...stateOptions],
+            required: false,
+            onChange: (event) => itemStateHandler(event)
+        },
+        {
+            select: true,
+            label: 'Tipo',
+            value: itemType,
+            required: false,
+            options: [...typesOptions],
+            error: errorInObjType.error,
+            errorMessage: errorInObjType.message,
+            onChange: (event) => itemTypeHandler(event)
+        },
+        {
+            select: false,
+            label: 'ID do achievement',
+            value: achievementID,
+            required: false,
+            onChange: (event) => achievementIdHandler(event)
+        },
+    ]
+
+    if (CheckUserPermission()) {
+        return (
+            <Card>
+                <ModalAddPhoto
+                    open={open}
+                    handleClose={() => { setOpen(false) }}
+                    handleComplete={(img) => {
+                        setOpen(false)
+                        onSubmit(img)
+                    }}
+                    userAvatar={null}
+                    id={state.currentUser.id}
+                />
+                <SnackBar
+                    severity={snackInfo.icon}
+                    text={snackInfo.message}
+                    snackbarOpen={snackInfo.open}
+                    color={snackInfo.color}
+                    handleClose={() => setSnackInfo({
+                        message: '',
+                        icon: '',
+                        open: false,
+                        color: ''
+                    })}
+                />
+                <CardContent>
+                    <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+                        <Grid item>
+                            <Typography variant='h4'>
+                                {name}
+                            </Typography>
+                        </Grid>
+                        <Grid item>
+                            <Link style={{ textDecoration: 'none' }} to={'/admin/gamefication'}>
+                                <Button
+                                    onClick={props.BackToList}
+                                    startIcon={<ListRoundedIcon />}
+                                    variant='outlined'
+                                    color='primary'
+                                >
+                                    Listar
+                                </Button>
+                            </Link>
+                        </Grid>
+                    </Grid>
+
+                    <div style={{ height: '1em' }}></div>
+
+                    <form style={{ display: 'flex', flexDirection: 'column' }}>
+                        {fields.map((field, index) => (
+                            field.select ?
+                                <TextField
+                                    select
+                                    key={index}
+                                    required={field.required}
+                                    error={field.error}
+                                    helperText={field.error ? field.errorMessage : ''}
+                                    style={{ width: '250px', marginBottom: '1em' }}
+                                    label={field.label}
+                                    value={field.value}
+                                    onChange={field.onChange}
+                                    type="search"
+                                    multiline={true}
+                                >
+                                    {field.options.map((option, index) => (
+                                        <MenuItem
+                                            key={option.value}
+                                            value={option.name}
+                                            name={option.value}
+                                        >
+                                            {option.value}
+                                        </MenuItem>
+                                    ))}
+                                </TextField>
+                                :
+                                <TextField
+                                    key={index}
+                                    required={field.required}
+                                    error={field.error}
+                                    helperText={field.error ? field.errorMessage : ''}
+                                    style={{ width: '250px', marginBottom: '1em' }}
+                                    label={field.label}
+                                    value={field.value}
+                                    onChange={field.onChange}
+                                    type="search"
+                                    multiline={true}
+                                />
+                        ))}
+                    </form>
+                </CardContent>
+                <CardAction>
+                    <Button
+                        onClick={() => {
+                            setOpen(true)
+                        }}
+                        variant="contained"
+                        color="primary"
+                        disabled={isLoading}
+                        startIcon={isLoading ? null : <AddRoundedIcon />}
+                    >
+                        {
+                            isLoading ? <CircularProgress size={24} /> : 'Adicionar'
+                        }
+                    </Button>
+                </CardAction>
+            </Card>
+        );
+    } else return <Unauthorized />
+}
+
+export default CreateItem;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateItem/Cropper.js b/src/Admin/Components/Components/Inputs/CreateItem/Cropper.js
new file mode 100644
index 0000000000000000000000000000000000000000..ccccc4c2e57ca23d7b7de6500c630cf052a0a847
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateItem/Cropper.js
@@ -0,0 +1,140 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { PureComponent } from 'react';
+import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+
+
+export default class Cropper extends PureComponent {
+  state = {
+    src: this.props.src,
+    crop:this.props.crop
+  };
+
+
+  // If you setState the crop in here you should return false.
+  onImageLoaded = image => {
+    this.imageRef = image;
+  };
+
+  onCropComplete = crop => {
+    this.makeClientCrop(crop);
+  };
+
+  onCropChange = (crop, percentCrop) => {
+    // You could also use percentCrop:
+    // this.setState({ crop: percentCrop });
+    this.setState({ crop });
+  };
+
+  async makeClientCrop(crop) {
+    if (this.imageRef && crop.width && crop.height) {
+      // eslint-disable-next-line
+      const croppedImageUrl = await this.getCroppedImg(
+        this.imageRef,
+        crop,
+        'newFile.jpeg'
+      );
+
+
+    }
+  }
+
+
+
+  getCroppedImg(image, crop, fileName) {
+    const canvas = document.createElement('canvas');
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+    canvas.width = crop.width;
+    canvas.height = crop.height;
+    const ctx = canvas.getContext('2d');
+
+    ctx.drawImage(
+      image,
+      crop.x * scaleX,
+      crop.y * scaleY,
+      crop.width * scaleX,
+      crop.height * scaleY,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    const reader = new FileReader();
+    canvas.toBlob(blob => {
+        reader.readAsDataURL(blob)
+        reader.onloadend = () => {
+            // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+            this.props.update(reader.result)
+        }
+    })
+
+  }
+
+  render() {
+    // eslint-disable-next-line
+    const { crop, croppedImageUrl, src } = this.state;
+
+    return (
+        <>
+        {src && (
+          <ReactCrop
+            src={src}
+            crop={crop}
+            circularCrop={this.props.circularCrop}
+            onImageLoaded={this.onImageLoaded}
+            onComplete={this.onCropComplete}
+            onChange={this.onCropChange}
+            style={{maxHeight : "300px", maxWidth : "100%"}}
+          />
+        )}
+        {/*croppedImageUrl && (
+          <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+        )*/}
+        </>
+    );
+  }
+}
+
+
+
+
+/*License for this component:
+MIT License
+
+Copyright (c) 2020 ricardo.ch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.*/
diff --git a/src/Admin/Components/Components/Inputs/CreateItem/ModalAddPhoto.js b/src/Admin/Components/Components/Inputs/CreateItem/ModalAddPhoto.js
new file mode 100644
index 0000000000000000000000000000000000000000..f273b013170206796734a903ab1f11efb79a6150
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateItem/ModalAddPhoto.js
@@ -0,0 +1,63 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import ComponentAddImage from './CompAddImg'
+
+const StyledModal = styled(Modal)`
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+`
+
+export default function ModalAddImage (props){
+
+    return (
+
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+             
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+         >
+            <Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
+
+                <ComponentAddImage
+                    userAvatar={props.userAvatar}
+                    handleClose={props.handleClose}
+                    handleComplete={props.handleComplete}
+                    id={props.id}
+                />
+            </Fade>
+        </StyledModal>
+
+    )
+}
diff --git a/src/Admin/Components/Components/Inputs/CreateRequirement.js b/src/Admin/Components/Components/Inputs/CreateRequirement.js
new file mode 100644
index 0000000000000000000000000000000000000000..41e5128b07d920bb292aa83e12d53cc5cd68a139
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/CreateRequirement.js
@@ -0,0 +1,380 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import Chip from '@material-ui/core/Chip';
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent'
+import { Store } from '../../../../Store'
+import Unauthorized from '../Unauthorized'
+import { postRequest } from "../../../../Components/HelperFunctions/getAxiosConfig"
+//router
+import { Link } from 'react-router-dom'
+
+
+const CreateRequirement = () => {
+  const { state } = useContext(Store)
+
+  const [description, setDescription] = useState('')
+  const [goal, setGoal] = useState('')
+  const [resettable, setResettable] = useState('')
+  const [actionId, setActionId] = useState('')
+  const [achievements, setAchievements] = useState([])
+  const [stringReq, setStringReq] = useState("")
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [errorInGoal, setErrorInGoal] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInActionId, setErrorInActionId] = useState({
+    error: false,
+    message: '',
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const resettableOptions = [
+    { name: 1, value: "Sim" },
+    { name: 0, value: "Não" },
+
+  ]
+
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const goalHandler = (e) => {
+    if (errorInGoal.error)
+      setErrorInGoal({
+        error: false,
+        message: ''
+      })
+    setGoal(e.target.value)
+  }
+  const actionIdHandler = (e) => {
+    if (errorInActionId.error)
+      setErrorInActionId({
+        error: false,
+        message: ''
+      })
+    setActionId(e.target.value)
+  };
+
+  const resettableHandler = (e) => {
+    setResettable(e.target.value)
+  }
+  const stringReqHandler = (e) => {
+    setStringReq(e.target.value)
+  };
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+  //Handle submit 
+  async function onSubmit() {
+    setIsLoading(true)
+    const api = `/requirements`
+    const body = {
+      "requirement": {
+        "description": description,
+        "goal": goal,
+        "repeatable": resettable,
+        "action_id": parseInt(actionId),
+        "achievements": achievements
+      }
+    }
+    postRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O requisito foi criado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.goal) {
+            let goalError = ""
+            data.goal.map((msg) => (
+              goalError = goalError + msg + " e "
+            ))
+            setErrorInGoal({
+              error: true,
+              message: goalError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.action) {
+            let actionError = ""
+            data.action.map((msg) => (
+              actionError = actionError + msg + " e "
+            ))
+            setErrorInActionId({
+              error: true,
+              message: actionError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  const HandleDelete = (i) => {
+    const copyReq = [...achievements];
+    copyReq.splice(i, 1);
+    setAchievements(copyReq);
+  };
+
+  const OnKeyPressHandler = (key) => {
+    if (key === 13) {
+      const copyReq = [...achievements];
+      copyReq.push(parseInt(stringReq));
+      setAchievements(copyReq);
+      setStringReq("");
+    }
+  };
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Meta',
+      value: goal,
+      error: errorInGoal.error,
+      errorMessage: errorInGoal.message,
+      required: false,
+      onChange: (event) => goalHandler(event)
+    },
+    {
+      select: false,
+      label: 'ID da ação',
+      value: actionId,
+      error: errorInActionId.error,
+      errorMessage: errorInActionId.message,
+      required: false,
+      onChange: (event) => actionIdHandler(event)
+    },
+    {
+      select: true,
+      label: 'Repetível',
+      value: resettable,
+      required: false,
+      options: [...resettableOptions],
+      onChange: (event) => resettableHandler(event)
+    },
+  ]
+
+  if (CheckUserPermission()) {
+    return (
+      <Card>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                Criar requisito
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/requirements'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+            <>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  marginBottom: "1em"
+                }}
+              >
+                {achievements.map((req, index) => (
+                  <li key={req.id} style={{ listStyleType: "none", marginBottom: "0.5em", marginRight: "0.5em" }}>
+                    <Chip
+                      label={req}
+                      onDelete={() => HandleDelete(index)}
+                    />
+                  </li>
+                ))}
+              </div>
+
+              <TextField
+                id="outlined-input"
+                label="Requisitos"
+                rows={1}
+                value={stringReq}
+                onKeyPress={(key) => OnKeyPressHandler(key.which)}
+                onChange={stringReqHandler}
+                // onBlur={ShowEmails}
+                helperText="Digite o ID do requisito, um por vez, e pressione Enter"
+                style={{ marginBottom: "1em", width: '250px' }}
+              />
+            </>
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Criar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default CreateRequirement
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditAchievement.js b/src/Admin/Components/Components/Inputs/EditAchievement.js
new file mode 100644
index 0000000000000000000000000000000000000000..95116c9f75c0a576c20fd3de624ed7f15be86acd
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditAchievement.js
@@ -0,0 +1,468 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext, useEffect } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import Chip from '@material-ui/core/Chip';
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent'
+import { Store } from '../../../../Store'
+import Unauthorized from '../Unauthorized'
+import { getRequest, putRequest } from "../../../../Components/HelperFunctions/getAxiosConfig"
+import LoadingSpinner from '../../../../Components/LoadingSpinner'
+import { GetAData } from '../../../Filters'
+//router
+import { Link } from 'react-router-dom'
+
+
+const EditAchievement = ({ match }) => {
+  const { state } = useContext(Store)
+
+  const [name, setName] = useState('Editar Item')
+  const [description, setDescription] = useState('')
+  const [rewardXP, setRewardXP] = useState('')
+  const [rewardPT, setRewardPT] = useState('')
+  const [itemState, setItemState] = useState('')
+  const [repeatable, setRepeatable] = useState('')
+  const [resettable, setResettable] = useState('')
+  const [requirements, setRequirements] = useState([])
+  const [stringReq, setStringReq] = useState("")
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [error, setError] = useState(false)
+
+  const [errorInName, setErrorInName] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInRewardPoints, setErrorInRewardPoints] = useState({
+    error: false,
+    message: '',
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const stateOptions = [
+    { name: "active", value: "Ativo" },
+    { name: "inactive", value: "Inativo" },
+    { name: "deleted", value: "Removido" },
+  ]
+
+  const repeatableOptions = [
+    { name: "never", value: "Nunca" },
+    { name: "daily", value: "Diariamente" },
+    { name: "weekly", value: "Semanalmente" },
+    { name: "monthly", value: "Mensalmente" },
+    { name: "yearly", value: "Anualmente" },
+  ]
+  const resettableOptions = [
+    { name: "true", value: "Sim" },
+    { name: "false", value: "Não" },
+
+  ]
+
+
+  const NameHandler = (e) => {
+    if (errorInName.error) {
+      setErrorInName({
+        error: false,
+        message: ''
+      })
+    }
+    setName(e.target.value)
+  }
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const rewardXPHandler = (e) => {
+    setRewardXP(e.target.value)
+  }
+  const repeatableHandler = (e) => {
+    setRepeatable(e.target.value)
+  }
+  const rewardPTHandler = (e) => {
+    if (errorInRewardPoints.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setRewardPT(e.target.value)
+  }
+  const itemStateHandler = (e) => {
+    setItemState(e.target.value)
+  }
+  const resettableHandler = (e) => {
+    setResettable(e.target.value)
+  }
+  const stringReqHandler = (e) => {
+    setStringReq(e.target.value)
+  };
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+
+  //Handle submit 
+  async function onSubmit() {
+    setIsLoading(true)
+    const api = `/achievements/${match.params.id}`
+    const body = {
+      "achievement": {
+        "name": name,
+        "description": description,
+        "reward_experience": rewardXP ? parseInt(rewardXP) : 0,
+        "reward_points": parseInt(rewardPT),
+        "state": itemState,
+        "repeatable": repeatable,
+        "resettable": resettable,
+        "requirements": requirements
+      }
+    }
+    putRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O item foi alterado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.name) {
+            let nameError = ""
+            data.name.map((msg) => (
+              nameError = nameError + msg + " e "
+            ))
+            setErrorInName({
+              error: true,
+              message: nameError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.reward_points) {
+            let reward_pointsError = ""
+            data.reward_points.map((msg) => (
+              reward_pointsError = reward_pointsError + msg + " e "
+            ))
+            setErrorInRewardPoints({
+              error: true,
+              message: reward_pointsError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  const HandleDelete = (i) => {
+    const copyReq = [...requirements];
+    copyReq.splice(i, 1);
+    setRequirements(copyReq);
+  };
+
+  const OnKeyPressHandler = (key) => {
+    if (key === 13) {
+      const copyReq = [...requirements];
+      copyReq.push(parseInt(stringReq));
+      setRequirements(copyReq);
+      setStringReq("");
+    }
+  };
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Nome',
+      value: name,
+      required: true,
+      error: errorInName.error,
+      errorMessage: errorInName.message,
+      onChange: (event) => NameHandler(event)
+    },
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Experiência ganha',
+      value: rewardXP,
+      required: false,
+      onChange: (event) => rewardXPHandler(event)
+    },
+    {
+      select: false,
+      label: 'Points ganhos',
+      value: rewardPT,
+      error: errorInRewardPoints.error,
+      errorMessage: errorInRewardPoints.message,
+      required: false,
+      onChange: (event) => rewardPTHandler(event)
+    },
+    {
+      select: true,
+      label: 'Estado',
+      value: itemState,
+      options: [...stateOptions],
+      required: false,
+      onChange: (event) => itemStateHandler(event)
+    },
+    {
+      select: true,
+      label: 'Repetível',
+      value: repeatable,
+      required: false,
+      options: [...repeatableOptions],
+      onChange: (event) => repeatableHandler(event)
+    },
+    {
+      select: true,
+      label: 'Reajustável',
+      value: resettable,
+      required: false,
+      options: [...resettableOptions],
+      onChange: (event) => resettableHandler(event)
+    },
+  ]
+
+  useEffect(() => {
+    getRequest(
+      GetAData("achievements", match.params.id),
+      (data, header) => {
+        const requirementsID = []
+        setName(data.name)
+        setDescription(data.description)
+        setRewardXP(data.reward_experience)
+        setRewardPT(data.reward_points)
+        setItemState(data.state)
+        setRepeatable(data.repeatable)
+        setResettable(data.resettable)
+        for (let index = 0; index < data.requirements.length; index++) {
+          const element = data.requirements[index];
+          requirementsID.push(element.id)
+        }
+        setRequirements(requirementsID)
+        setError(false)
+        setIsLoaded(true)
+      },
+      (error) => {
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [])
+
+  if (error) {
+    return <div> Error... </div>
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    return (
+      <Card>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                {name}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/achievements'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+            <>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  marginBottom: "1em"
+                }}
+              >
+                {requirements.map((req, index) => (
+                  <li key={req.id} style={{ listStyleType: "none", marginBottom: "0.5em", marginRight: "0.5em" }}>
+                    <Chip
+                      label={req}
+                      onDelete={() => HandleDelete(index)}
+                    />
+                  </li>
+                ))}
+              </div>
+
+              <TextField
+                id="outlined-input"
+                label="Requisitos"
+                rows={1}
+                value={stringReq}
+                onKeyPress={(key) => OnKeyPressHandler(key.which)}
+                onChange={stringReqHandler}
+                // onBlur={ShowEmails}
+                helperText="Digite o ID do requisito, um por vez, e pressione Enter"
+                style={{ marginBottom: "1em", width: '250px' }}
+              />
+            </>
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Editar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default EditAchievement
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditAction.js b/src/Admin/Components/Components/Inputs/EditAction.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbc928b727ee91edaaecdebc1f406bd912788434
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditAction.js
@@ -0,0 +1,332 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext, useEffect } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent'
+import { Store } from '../../../../Store'
+import Unauthorized from '../Unauthorized'
+import { getRequest, putRequest } from "../../../../Components/HelperFunctions/getAxiosConfig"
+import LoadingSpinner from '../../../../Components/LoadingSpinner'
+import { GetAData } from '../../../Filters'
+//router
+import { Link } from 'react-router-dom'
+
+const EditAction = ({ match }) => {
+  const { state } = useContext(Store)
+
+  const [name, setName] = useState('Editar Item')
+  const [description, setDescription] = useState('')
+  const [rewardXP, setRewardXP] = useState('')
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [error, setError] = useState(false)
+
+  const [errorInName, setErrorInName] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInRewardXP, setErrorInRewardXP] = useState({
+    error: false,
+    message: '',
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const NameHandler = (e) => {
+    if (errorInName.error) {
+      setErrorInName({
+        error: false,
+        message: ''
+      })
+    }
+    setName(e.target.value)
+  }
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const rewardXPHandler = (e) => {
+    if (errorInRewardXP.error)
+      setErrorInRewardXP({
+        error: false,
+        message: ''
+      })
+    setRewardXP(e.target.value)
+  }
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+
+  //Handle submit 
+  async function onSubmit() {
+    setIsLoading(true)
+    const api = `/actions/${match.params.id}`
+    const body = {
+      "action_params": {
+        "name": name,
+        "description": description,
+        "reward_experience": rewardXP ? parseInt(rewardXP) : 0,
+      }
+    }
+    putRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O item foi alterado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.name) {
+            let nameError = ""
+            data.name.map((msg) => (
+              nameError = nameError + msg + " e "
+            ))
+            setErrorInName({
+              error: true,
+              message: nameError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.reward_experience) {
+            let reward_experienceError = ""
+            data.reward_experience.map((msg) => (
+              reward_experienceError = reward_experienceError + msg + " e "
+            ))
+            setErrorInRewardXP({
+              error: true,
+              message: reward_experienceError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Nome',
+      value: name,
+      required: true,
+      error: errorInName.error,
+      errorMessage: errorInName.message,
+      onChange: (event) => NameHandler(event)
+    },
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Experiência ganha',
+      value: rewardXP,
+      error: errorInRewardXP.error,
+      errorMessage: errorInRewardXP.message,
+      required: false,
+      onChange: (event) => rewardXPHandler(event)
+    },
+  ]
+
+  useEffect(() => {
+    getRequest(
+      GetAData("actions", match.params.id),
+      (data, header) => {
+        setName(data.name)
+        setDescription(data.description)
+        setIsLoaded(true)
+        setError(false)
+      },
+      (error) => {
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [])
+
+  if (error) {
+    return <div> Error... </div>
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    return (
+      <Card>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                {name}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/actions'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Editar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default EditAction
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js b/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d2c2c2db2fb10a4d6e11b8c1b4eb71fb2780a5d
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js
@@ -0,0 +1,272 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState } from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../../../../../img/default_profile0.png'
+import Cropper from './Cropper.js'
+import { apiDomain } from '../../../../../env'
+
+function ChooseImage(props) {
+  console.log(props)
+  return (
+    <div style={{ marginTop: "0" }}>
+      <DivAlterarFoto>
+        <DivFlowHolder>
+          <AvatarCircleDiv>
+            <img src={props.avatar}
+              alt="user avatar" style={{ maxHeight: "inherit", maxWidth: "100%", objectFit: "cover" }}
+            />
+            <input accept="image/*" id="avatar-file"
+              type="file"
+              onChange={(e) => props.handleFile(e.target.files)}
+              style={{ display: "none" }}
+            />
+            <label for="avatar-file" style={{ width: "inherit" }}>
+              <ChangeAvatarDiv >
+                <span>Alterar</span>
+              </ChangeAvatarDiv>
+            </label>
+          </AvatarCircleDiv>
+        </DivFlowHolder>
+      </DivAlterarFoto>
+      {
+        props.tempImg &&
+        <img alt="" src={props.tempImg} />
+      }
+      <ButtonsDiv>
+        <ButtonCancelar onClick={() => props.handleComplete('')}>
+          <span>Cancelar</span>
+        </ButtonCancelar>
+
+      </ButtonsDiv>
+    </div>
+  )
+}
+
+
+export default function ComponentAlterarAvatar(props) {
+  const [uploadingImage, setUploading] = useState(false)
+
+  const handleFile = (selectorFiles) => {
+    const objectURL = URL.createObjectURL(selectorFiles[0])
+    console.log(objectURL)
+    setTempImg(objectURL)
+    setUploading(true)
+  }
+
+  const [tempImgURL, setTempImg] = useState(null)
+
+  const [newAvatar, setNewAvatar] = useState('')
+  const updateAvatar = (avatar) => {
+    setNewAvatar(avatar)
+  }
+
+  const [crop] = useState({
+    unit: "%",
+    width: 30,
+    aspect: 1
+  });
+
+  const completeSelection = () => {
+    props.handleComplete(newAvatar)
+  }
+
+  return (
+    <ModalDiv>
+      <HeaderDiv>
+        <span style={{ width: "32px" }} />
+        <StyledH2>{uploadingImage ? 'Alterar foto do Item' : 'Editar foto do Item'}</StyledH2>
+        <StyledCloseModalButton onClick={props.handleClose}>
+          <CloseIcon style={{ color: "#666" }} />
+        </StyledCloseModalButton>
+      </HeaderDiv>
+      <DialogDiv>
+        {
+          uploadingImage ?
+            (
+              [
+                <>
+                  <EditarDiv>
+                    <TextoEditarDiv>
+                      Clique nos ícones e arraste para selecionar a parte que você quer da foto
+                    </TextoEditarDiv>
+                    <div style={{ maxWidth: "500px", maxHeight: "300px" }}>
+                      <Cropper src={tempImgURL} crop={crop} circularCrop={true} update={updateAvatar} />
+                    </div>
+                  </EditarDiv>
+                  <FooterButtonsDiv>
+                    <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+                    <ButtonConfirmar onClick={() => { completeSelection() }}>SELECIONAR FOTO</ButtonConfirmar>
+                  </FooterButtonsDiv>
+                </>
+              ]
+            )
+            :
+            (
+              [
+                <>
+                  <ChooseImage
+                    avatar={props.userAvatar ? apiDomain + props.userAvatar : Profile}
+                    handleFile={handleFile}
+                    handleClose={props.handleClose}
+                    handleComplete={props.handleComplete}
+                    tempImg={tempImgURL}
+                  />
+                </>
+              ]
+            )
+        }
+      </DialogDiv>
+    </ModalDiv>
+  )
+
+}
+
+const FooterButtonsDiv = styled.div`
+    padding : 0 30px 20px;
+    display : flex;
+    flex-direction : row;
+    align-content : center;
+    justify-content : space-between;
+    Button {
+        margin-top : 20px;
+    }
+`
+
+const TextoEditarDiv = styled.div`
+    margin-bottom : 15px;
+    align-self : center;
+    text-align : center;
+    font-size : 15px;
+`
+
+const EditarDiv = styled.div`
+    position : relative;
+    background-color : #f4f4f4;
+    padding : 20px 30px 40px;
+`
+
+const ChangeAvatarDiv = styled.div`
+    color : rgba(255,255,255,.7);
+    background-color:rgba(0,0,0,.5);
+    position: absolute;
+    bottom: 0;
+    width: inherit;
+    text-align: center;
+    font-size: 18px;
+    padding-bottom: 5px;
+    font-weight: 400;
+    height: 30%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
+const ModalDiv = styled.div`
+    background-color : #fff;
+    border-radius : 4px;
+    min-width : 560px;
+    color : #666;
+    display: flex;
+    flex-direction : column;
+    @media screen and (max-width: 959px) {
+        height : 100%;
+        width : 100%;
+    }
+`
+const ButtonConfirmar = styled(Button)`
+    background-color : #00bcd4 !important;
+    color : #fff !important;
+    border-radius : 3px !important;
+`
+
+const ButtonCancelar = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    background-color : #fff !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+`
+
+const ButtonsDiv = styled.div`
+display : flex;
+justify-content:flex-end;
+`
+
+const AvatarCircleDiv = styled.div`
+margin-bottom : 0;
+border-radius : 50%;
+height : 150px;
+width : 150px;
+position : relative;
+overflow: hidden;
+`
+
+const DivFlowHolder = styled.div`
+align-self : auto;
+`
+
+const DivAlterarFoto = styled.div`
+display : flex;
+margin-bottom : 30px;
+flex-direction : row;
+align-items : center;
+justify-content :center;
+`
+
+const DialogDiv = styled.div`
+padding : 20px 30px;
+overflow : visible !important;
+`
+
+const HeaderDiv = styled.div`
+display : flex;
+flex-direction : row;
+align-items : center;
+align-content : center;
+justify-content : space-between;
+max-width : 100%;
+`
+const StyledH2 = styled.h2`
+font-size : 26px;
+font-weight : normal;
+margin-top : 20px;
+margin-bottom : 10px;
+font-family: inherit;
+line-height: 1.1;
+color: inherit;
+`
+const StyledCloseModalButton = styled(Button)`
+display : inline-block;
+position : relative;
+float : right !important;
+background : transparent !important;
+min-width: 0 !important;
+width : 40px;
+border-radius : 50%;
+padding : 8px;
+height : 40px;
+margin : 0 6px;
+`
diff --git a/src/Admin/Components/Components/Inputs/EditItem/Cropper.js b/src/Admin/Components/Components/Inputs/EditItem/Cropper.js
new file mode 100644
index 0000000000000000000000000000000000000000..ccccc4c2e57ca23d7b7de6500c630cf052a0a847
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditItem/Cropper.js
@@ -0,0 +1,140 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { PureComponent } from 'react';
+import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+
+
+export default class Cropper extends PureComponent {
+  state = {
+    src: this.props.src,
+    crop:this.props.crop
+  };
+
+
+  // If you setState the crop in here you should return false.
+  onImageLoaded = image => {
+    this.imageRef = image;
+  };
+
+  onCropComplete = crop => {
+    this.makeClientCrop(crop);
+  };
+
+  onCropChange = (crop, percentCrop) => {
+    // You could also use percentCrop:
+    // this.setState({ crop: percentCrop });
+    this.setState({ crop });
+  };
+
+  async makeClientCrop(crop) {
+    if (this.imageRef && crop.width && crop.height) {
+      // eslint-disable-next-line
+      const croppedImageUrl = await this.getCroppedImg(
+        this.imageRef,
+        crop,
+        'newFile.jpeg'
+      );
+
+
+    }
+  }
+
+
+
+  getCroppedImg(image, crop, fileName) {
+    const canvas = document.createElement('canvas');
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+    canvas.width = crop.width;
+    canvas.height = crop.height;
+    const ctx = canvas.getContext('2d');
+
+    ctx.drawImage(
+      image,
+      crop.x * scaleX,
+      crop.y * scaleY,
+      crop.width * scaleX,
+      crop.height * scaleY,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    const reader = new FileReader();
+    canvas.toBlob(blob => {
+        reader.readAsDataURL(blob)
+        reader.onloadend = () => {
+            // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+            this.props.update(reader.result)
+        }
+    })
+
+  }
+
+  render() {
+    // eslint-disable-next-line
+    const { crop, croppedImageUrl, src } = this.state;
+
+    return (
+        <>
+        {src && (
+          <ReactCrop
+            src={src}
+            crop={crop}
+            circularCrop={this.props.circularCrop}
+            onImageLoaded={this.onImageLoaded}
+            onComplete={this.onCropComplete}
+            onChange={this.onCropChange}
+            style={{maxHeight : "300px", maxWidth : "100%"}}
+          />
+        )}
+        {/*croppedImageUrl && (
+          <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+        )*/}
+        </>
+    );
+  }
+}
+
+
+
+
+/*License for this component:
+MIT License
+
+Copyright (c) 2020 ricardo.ch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.*/
diff --git a/src/Admin/Components/Components/Inputs/EditItem/EditItem.js b/src/Admin/Components/Components/Inputs/EditItem/EditItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed31960cf7670d9a7ca1d50ae49367f4d81e3686
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditItem/EditItem.js
@@ -0,0 +1,453 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext, useEffect } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../../Components/SnackbarComponent'
+import { Store } from '../../../../../Store'
+import Unauthorized from '../../Unauthorized'
+import ModalEditPhoto from "./ModalEditPhoto"
+import { getRequest, putRequest } from "../../../../../Components/HelperFunctions/getAxiosConfig"
+import LoadingSpinner from '../../../../../Components/LoadingSpinner'
+import { GetAData } from '../../../../Filters'
+//router
+import { Link } from 'react-router-dom'
+
+const EditItem = ({ match }) => {
+  const { state } = useContext(Store)
+
+  const [name, setName] = useState('Editar Item')
+  const [description, setDescription] = useState('')
+  const [price, setPrice] = useState('')
+  const [discount, setDiscount] = useState('')
+  const [itemState, setItemState] = useState('')
+  const [itemType, setItemType] = useState('')
+  const [achievementID, setAchievementID] = useState('')
+  const [img, setImg] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [error, setError] = useState(false)
+
+  const [errorInName, setErrorInName] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInPrice, setErrorInPrice] = useState({
+    error: false,
+    message: ''
+  })
+  const [errorInObjType, setErrorInObjType] = useState({
+    error: false,
+    message: ''
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const stateOptions = [
+    { name: "active", value: "Ativo" },
+    { name: "inactive", value: "Inativo" },
+    { name: "removed", value: "Removido" },
+  ]
+
+  const typesOptions = [
+    { name: "avatar_frame", value: "Moldura de avatar" },
+    { name: "badge", value: "Insígnia" },
+    { name: "card_frame", value: "Moldura de card do usuário" },
+    { name: "cover_frame", value: "Moldura de capa" },
+  ]
+
+
+  const NameHandler = (e) => {
+    if (errorInName.error) {
+      setErrorInName({
+        error: false,
+        message: ''
+      })
+    }
+    setName(e.target.value)
+  }
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const priceHandler = (e) => {
+    if (errorInPrice.error)
+      setErrorInPrice({
+        error: false,
+        message: ''
+      })
+    setPrice(e.target.value)
+  }
+  const itemTypeHandler = (e) => {
+    if (errorInObjType.error)
+      setErrorInObjType({
+        error: false,
+        message: ''
+      })
+    setItemType(e.target.value)
+  }
+  const discountHandler = (e) => {
+    setDiscount(e.target.value)
+  }
+  const itemStateHandler = (e) => {
+    console.log(e)
+    setItemState(e.target.value)
+  }
+  const achievementIdHandler = (e) => {
+    setAchievementID(e.target.value)
+  }
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+
+  //Handle submit 
+  async function onSubmit(image) {
+    setIsLoading(true)
+    const api = `/items/${match.params.id}`
+    let body = {}
+    if (!image)
+      body = {
+        "item": {
+          "name": name,
+          "description": description,
+          "price": parseInt(price),
+          "discount": discount ? parseInt(discount) : 0,
+          "state": itemState,
+          "item_type": itemType,
+          "achievement_id": parseInt(achievementID),
+        }
+      }
+    else
+      body = {
+        "item": {
+          "name": name,
+          "description": description,
+          "price": parseInt(price),
+          "discount": discount ? parseInt(discount) : 0,
+          "state": itemState,
+          "item_type": itemType,
+          "achievement_id": parseInt(achievementID),
+          "image" : image
+        }
+      }
+    putRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O item foi alterado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.name) {
+            let nameError = ""
+            data.name.map((msg) => (
+              nameError = nameError + msg + " e "
+            ))
+            setErrorInName({
+              error: true,
+              message: nameError
+            })
+          }
+          if (data.price) {
+            let priceError = ""
+            data.price.map((msg) => (
+              priceError = priceError + msg + " e "
+            ))
+            setErrorInPrice({
+              error: true,
+              message: priceError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.item_type) {
+            let objTypeError = ""
+            data.objType.map((msg) => (
+              objTypeError = objTypeError + msg + " e "
+            ))
+            setErrorInObjType({
+              error: true,
+              message: objTypeError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Nome',
+      value: name,
+      required: true,
+      error: errorInName.error,
+      errorMessage: errorInName.message,
+      onChange: (event) => NameHandler(event)
+    },
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Preço',
+      value: price,
+      required: false,
+      error: errorInPrice.error,
+      errorMessage: errorInPrice.message,
+      onChange: (event) => priceHandler(event)
+    },
+    {
+      select: false,
+      label: 'Desconto',
+      value: discount,
+      required: false,
+      onChange: (event) => discountHandler(event)
+    },
+    {
+      select: true,
+      label: 'Estado',
+      value: itemState,
+      options: [...stateOptions],
+      required: false,
+      onChange: (event) => itemStateHandler(event)
+    },
+    {
+      select: true,
+      label: 'Tipo',
+      value: itemType,
+      required: false,
+      options: [...typesOptions],
+      error: errorInObjType.error,
+      errorMessage: errorInObjType.message,
+      onChange: (event) => itemTypeHandler(event)
+    },
+    {
+      select: false,
+      label: 'ID do achievement',
+      value: achievementID,
+      required: false,
+      onChange: (event) => achievementIdHandler(event)
+    },
+  ]
+
+  useEffect(() => {
+    getRequest(
+      GetAData("items", match.params.id),
+      (data, header) => {
+        setName(data.name)
+        setDescription(data.description)
+        setPrice(data.price)
+        setDiscount(data.discount)
+        setItemState(data.state)
+        setItemType(data.item_type)
+        setAchievementID(data.achievement ? data.achievement.id : "")
+        setImg(data.image)
+        setError(false)
+        setIsLoaded(true)
+      },
+      (error) => {
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [])
+
+  if (error) {
+    return <div> Error... </div>
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    return (
+      <Card>
+        <ModalEditPhoto
+          open={open}
+          handleClose={() => { setOpen(false) }}
+          handleComplete={(img) => {
+            setOpen(false)
+            onSubmit(img)
+          }}
+          userAvatar={img}
+          id={state.currentUser.id}
+        />
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                {name}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/gamefication'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={() => {
+              setOpen(true)
+            }}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Editar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default EditItem
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditItem/ModalEditPhoto.js b/src/Admin/Components/Components/Inputs/EditItem/ModalEditPhoto.js
new file mode 100644
index 0000000000000000000000000000000000000000..600e9fa2744473e314dc62be237fe252fd7b993a
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditItem/ModalEditPhoto.js
@@ -0,0 +1,63 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import ComponentAddImage from './CompEditImg'
+
+const StyledModal = styled(Modal)`
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+`
+
+export default function ModalAddImage (props){
+
+    return (
+
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+             
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+         >
+            <Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
+
+                <ComponentAddImage
+                    userAvatar={props.userAvatar}
+                    handleClose={props.handleClose}
+                    handleComplete={props.handleComplete}
+                    id={props.id}
+                />
+            </Fade>
+        </StyledModal>
+
+    )
+}
diff --git a/src/Admin/Components/Components/Inputs/EditRequirements.js b/src/Admin/Components/Components/Inputs/EditRequirements.js
new file mode 100644
index 0000000000000000000000000000000000000000..db4b459a75af88221ca0f8593f88832a105c7665
--- /dev/null
+++ b/src/Admin/Components/Components/Inputs/EditRequirements.js
@@ -0,0 +1,413 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useContext, useEffect } from 'react'
+//imports material ui componets
+import Card from "@material-ui/core/Card"
+import CardContent from "@material-ui/core/CardContent"
+import CardAction from '@material-ui/core/CardActions'
+import { Typography, TextField, 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'
+import Chip from '@material-ui/core/Chip';
+import MenuItem from "@material-ui/core/MenuItem"
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent'
+import { Store } from '../../../../Store'
+import Unauthorized from '../Unauthorized'
+import { getRequest, putRequest } from "../../../../Components/HelperFunctions/getAxiosConfig"
+import LoadingSpinner from '../../../../Components/LoadingSpinner'
+import { GetAData } from '../../../Filters'
+//router
+import { Link } from 'react-router-dom'
+
+
+const EditRequirements = ({ match }) => {
+  const { state } = useContext(Store)
+
+  const [description, setDescription] = useState('')
+  const [goal, setGoal] = useState('')
+  const [resettable, setResettable] = useState('')
+  const [actionId, setActionId] = useState('')
+  const [achievements, setAchievements] = useState([])
+  const [stringReq, setStringReq] = useState("")
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [error, setError] = useState(false)
+
+  const [errorInGoal, setErrorInGoal] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInDescription, setErrorInDescription] = useState({
+    error: false,
+    message: '',
+  })
+  const [errorInActionId, setErrorInActionId] = useState({
+    error: false,
+    message: '',
+  })
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const resettableOptions = [
+    { name: 1, value: "Sim" },
+    { name: 0, value: "Não" },
+
+  ]
+
+  const DescriptionHandler = (e) => {
+    if (errorInDescription.error)
+      setErrorInDescription({
+        error: false,
+        message: ''
+      })
+    setDescription(e.target.value)
+  }
+  const goalHandler = (e) => {
+    if (errorInGoal.error)
+      setErrorInGoal({
+        error: false,
+        message: ''
+      })
+    setGoal(e.target.value)
+  }
+  const actionIdHandler = (e) => {
+    if (errorInActionId.error)
+      setErrorInActionId({
+        error: false,
+        message: ''
+      })
+    setActionId(e.target.value)
+  };
+
+  const resettableHandler = (e) => {
+    setResettable(e.target.value)
+  }
+  const stringReqHandler = (e) => {
+    setStringReq(e.target.value)
+  };
+  
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles]
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true
+    }
+    else {
+      canUserEdit = false
+    }
+
+    return canUserEdit
+  }
+
+  //Handle submit 
+  async function onSubmit() {
+    setIsLoading(true)
+    const api = `/requirements/${match.params.id}`
+    const body = {
+      "requirement": {
+        "description": description,
+        "goal": goal,
+        "repeatable": resettable,
+        "action_id" : parseInt(actionId),
+        "achievements": achievements
+      }
+    }
+    putRequest(
+      api,
+      body,
+      (data) => {
+        if (data.id)
+          HandleSnack('O item foi alterado com sucesso!', true, 'success', '#228B22')
+        else {
+          if (data.errors) {
+            HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+          }
+          if (data.goal) {
+            let goalError = ""
+            data.goal.map((msg) => (
+              goalError = goalError + msg + " e "
+            ))
+            setErrorInGoal({
+              error: true,
+              message: goalError
+            })
+          }
+          if (data.description) {
+            let descriptionError = ""
+            data.description.map((msg) => (
+              descriptionError = descriptionError + msg + " e "
+            ))
+            setErrorInDescription({
+              error: true,
+              message: descriptionError
+            })
+          }
+          if (data.action) {
+            let actionError = ""
+            data.action.map((msg) => (
+              actionError = actionError + msg + " e "
+            ))
+            setErrorInActionId({
+              error: true,
+              message: actionError
+            })
+          }
+        }
+        setIsLoading(false)
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+        setIsLoading(false)
+      }
+    )
+  }
+
+  const HandleDelete = (i) => {
+    const copyReq = [...achievements];
+    copyReq.splice(i, 1);
+    setAchievements(copyReq);
+  };
+
+  const OnKeyPressHandler = (key) => {
+    if (key === 13) {
+      const copyReq = [...achievements];
+      copyReq.push(parseInt(stringReq));
+      setAchievements(copyReq);
+      setStringReq("");
+    }
+  };
+
+  // Fields
+  const fields = [
+    {
+      select: false,
+      label: 'Descrição',
+      value: description,
+      required: false,
+      error: errorInDescription.error,
+      errorMessage: errorInDescription.message,
+      onChange: (event) => DescriptionHandler(event)
+    },
+    {
+      select: false,
+      label: 'Meta',
+      value: goal,
+      error: errorInGoal.error,
+      errorMessage: errorInGoal.message,
+      required: false,
+      onChange: (event) => goalHandler(event)
+    },
+    {
+      select: false,
+      label: 'ID da ação',
+      value: actionId,
+      error: errorInActionId.error,
+      errorMessage: errorInActionId.message,
+      required: false,
+      onChange: (event) => actionIdHandler(event)
+    },
+    {
+      select: true,
+      label: 'Repetível',
+      value: resettable,
+      required: false,
+      options: [...resettableOptions],
+      onChange: (event) => resettableHandler(event)
+    },
+  ]
+
+  useEffect(() => {
+    getRequest(
+      GetAData("requirements", match.params.id),
+      (data, header) => {
+        const achievementsId = []
+        for (let index = 0; index < data.achievements.length; index++) {
+          const element = data.achievements[index];
+          achievementsId.push(element.id)
+        }
+        setAchievements(achievementsId)
+        setDescription(data.description)
+        setGoal(data.goal)
+        setResettable(data.repeatable)
+        setActionId(data.action.id)
+        
+        setError(false)
+        setIsLoaded(true)
+      },
+      (error) => {
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [])
+
+  if (error) {
+    return <div> Error... </div>
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    return (
+      <Card>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() => setSnackInfo({
+            message: '',
+            icon: '',
+            open: false,
+            color: ''
+          })}
+        />
+        <CardContent>
+          <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+            <Grid item>
+              <Typography variant='h4'>
+                Editar requisito
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link style={{ textDecoration: 'none' }} to={'/admin/requirements'}>
+                <Button
+                  // onClick={props.BackToList}
+                  startIcon={<ListRoundedIcon />}
+                  variant='outlined'
+                  color='primary'
+                >
+                  Listar
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+
+          <div style={{ height: '1em' }}></div>
+          <form style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map((field, index) => (
+              field.select ?
+                <TextField
+                  select
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                >
+                  {field.options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+                :
+                <TextField
+                  key={index}
+                  required={field.required}
+                  error={field.error}
+                  helperText={field.error ? field.errorMessage : ''}
+                  style={{ width: '250px', marginBottom: '1em' }}
+                  label={field.label}
+                  value={field.value}
+                  onChange={field.onChange}
+                  type="search"
+                  multiline={true}
+                />
+            ))}
+            <>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  marginBottom: "1em"
+                }}
+              >
+                {achievements.map((req, index) => (
+                  <li key={req.id} style={{ listStyleType: "none", marginBottom: "0.5em", marginRight: "0.5em" }}>
+                    <Chip
+                      label={req}
+                      onDelete={() => HandleDelete(index)}
+                    />
+                  </li>
+                ))}
+              </div>
+
+              <TextField
+                id="outlined-input"
+                label="Requisitos"
+                rows={1}
+                value={stringReq}
+                onKeyPress={(key) => OnKeyPressHandler(key.which)}
+                onChange={stringReqHandler}
+                // onBlur={ShowEmails}
+                helperText="Digite o ID do requisito, um por vez, e pressione Enter"
+                style={{ marginBottom: "1em", width: '250px' }}
+              />
+            </>
+          </form>
+        </CardContent>
+        <CardAction>
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="primary"
+            disabled={isLoading}
+            startIcon={isLoading ? null : <AddRoundedIcon />}
+          >
+            {
+              isLoading ? <CircularProgress size={24} /> : 'Editar'
+            }
+          </Button>
+        </CardAction>
+      </Card>
+    )
+  } else return <Unauthorized />
+}
+
+export default EditRequirements
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index 1dadf1b4f6367c975ea280184916d353a0cc2fbd..73a42e96bf77ee04eb29cefc25ba18c305b91cf0 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -291,10 +291,9 @@ const EditUser = ({ match }) => {
         deleteRequest(
             `/users/${userId}`,
             (data) => {
-                if(data.errors)
+                if (data.errors)
                     HandleSnack("Erro!", true, "warning", "#FA8072");
-                else
-                {
+                else {
                     HandleSnack(`${name} deletado com sucesso!`, true, "success", "#228B22");
                     history.push("/admin/usersList")
                 }
@@ -329,7 +328,7 @@ const EditUser = ({ match }) => {
                 if (data.id)
                     HandleSnack(`O usuário: ${name} foi atualizado`, true, 'success', '#228B22')
                 else {
-                    if(data.errors){
+                    if (data.errors) {
                         HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
                     }
                     if (data.email) {
@@ -381,12 +380,14 @@ const EditUser = ({ match }) => {
             body,
             (data) => {
                 setIsLoading(false)
-                if (data.id)
-                {
+                if (data.id) {
                     HandleSnack(`O usuário: ${name} foi criado`, true, 'success', '#228B22')
                     history.push("/admin/usersList")
                 }
                 else {
+                    if (data.errors) {
+                        HandleSnack(`${data.errors[0]}`, true, 'warning', '#FA8072')
+                    }
                     if (data.password) {
                         let passError = "";
                         data.password.map((msg) => (
@@ -453,9 +454,9 @@ const EditUser = ({ match }) => {
                     const currRolesList = [...rolesList];
                     const auxiliarRolesId = [
                         1, 2, 3, 4, 5, 6, 7, 9, 10, 11
-                    ] 
-                    for (let i = 0; i <  data.roles.length; i++) {
-                        const rol =  data.roles[i];
+                    ]
+                    for (let i = 0; i < data.roles.length; i++) {
+                        const rol = data.roles[i];
                         const index = auxiliarRolesId.indexOf(rol.id);
                         currRolesList.splice(index, 1);
                         auxiliarRolesId.splice(index, 1);
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 0b7a55e5eb445605db721c1a44394b19e53e2172..438b27cb4442b0a48c7d922945d21d75ae44ba2a 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -246,8 +246,7 @@ const EmailInputs = (props) => {
             if (role.isChecked)
                 rolesArr.push(role.value)
         }
-        console.log(rolesArr)
-        console.log(sendToAll)
+
         const api = `/email`;
         const body = {
             "email": {
diff --git a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
index 99405165da5b74310a7c9f4fb7c794ce4fea3106..f3520c9f12319310eba1544dd60d551aa001a29e 100644
--- a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
+++ b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Paper from "@material-ui/core/Paper"
 import Grid from "@material-ui/core/Grid"
 import Button from "@material-ui/core/Button"
diff --git a/src/Admin/Pages/AdminLabelTabs/LabelTabs.js b/src/Admin/Pages/AdminLabelTabs/LabelTabs.js
index eddb77be77677a6c655745ba407cff0219c8b02a..b8779a8aedd56f61eb6d7d2e8181e1a52a586530 100644
--- a/src/Admin/Pages/AdminLabelTabs/LabelTabs.js
+++ b/src/Admin/Pages/AdminLabelTabs/LabelTabs.js
@@ -18,70 +18,133 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 //This file has the labels of the left menu navigation from admin page
 
+import React from "react";
+import HomeIcon from "@material-ui/icons/Home";
+import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
+import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
+import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
+import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
+import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
+import StarRoundedIcon from "@material-ui/icons/StarRounded";
+import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded";
+import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
+import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
+import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
+import PersonRoundedIcon from "@material-ui/icons/PersonRounded";
+import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
+import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
+import EmailRoundedIcon from "@material-ui/icons/EmailRounded";
+import AllOutIcon from "@material-ui/icons/AllOut";
+import SportsEsportsRoundedIcon from '@material-ui/icons/SportsEsportsRounded';
+import { GiAchievement } from "react-icons/gi"
+import { DiRequirejs } from "react-icons/di"
+import { FaRegHandPointer } from 'react-icons/fa'
+
+const orange = "#ff7f00";
+const pink = "#e81f4f";
+const purple = "#673ab7";
+const blue = "#00bcd4";
+
 const TabsItens = [
     {
-        label: "Home", 
-        href: '/admin/home'
+        label: "Home",
+        href: '/admin/home',
+        icon: <HomeIcon style={{ fill: orange }} />,
     },
     {
         label: 'Coleções',
         href: '/admin/Collections',
+        icon: <PeopleRoundedIcon style={{ fill: pink }} />
     },
     {
         label: "Atividades",
         href: '/admin/activities',
+        icon: <AllOutIcon style={{ fill: purple }} />,
     },
     {
         label: "Dúvidas da comunidade",
-        href: '/admin/CommunityQuestions'
+        href: '/admin/CommunityQuestions',
+        icon: <ContactSupportRoundedIcon style={{ fill: blue }} />,
     },
     {
         label: "Instituições",
-        href: '/admin/intitutions'
+        href: '/admin/intitutions',
+        icon: <AccountBalanceRoundedIcon style={{ fill: orange }} />,
     },
     {
         label: "Linguagens",
         href: '/admin/languages',
+        icon: <LanguageRoundedIcon style={{ fill: pink }} />,
     },
     {
         label: "Objetos educacionais",
         href: "/admin/learningObjects",
+        icon: <MenuBookRoundedIcon style={{ fill: purple }} />,
     },
     {
         label: "Rating",
-        href : '/admin/Ratings'
+        href: '/admin/Ratings',
+        icon: <StarRoundedIcon style={{ fill: blue }} />,
     },
     {
         label: "Permissões do usuário",
         href: "/admin/permissions",
+        icon: <AccountCircleRoundedIcon style={{ fill: orange }} />,
     },
     {
-        label: "Variáveis de nota", 
-        href:'/admin/noteVars'
+        label: "Variáveis de nota",
+        href: '/admin/noteVars',
+        icon: <TrendingUpRoundedIcon style={{ fill: pink }} />,
     },
     {
         label: "Perguntas curadoria",
-        href: "/admin/Questions"
+        href: "/admin/Questions",
+        icon: <HelpRoundedIcon style={{ fill: purple }} />,
     },
     {
         label: "Aprovação de professores",
-        href: "/admin/users/teacher_requests"
+        href: "/admin/users/teacher_requests",
+        icon: <CheckRoundedIcon style={{ fill: blue }} />,
     },
     {
         label: "Usuários",
-        href : "/admin/usersList"
+        href: "/admin/usersList",
+        icon: <PersonRoundedIcon style={{ fill: orange }} />,
     },
     {
         label: "Usuários bloqueados",
-        href : "/admin/BlockedUsers"
+        href: "/admin/BlockedUsers",
+        icon: <BlockRoundedIcon style={{ fill: pink }} />,
     },
     {
         label: "Denúncias",
         href: "/admin/complaints",
+        icon: <AnnouncementRoundedIcon style={{ fill: purple }} />,
     },
     {
         label: "Enviar email",
-        href:'/admin/sendEmail/none'
+        href: '/admin/sendEmail/none',
+        icon: <EmailRoundedIcon style={{ fill: blue }} />,
+    },
+    {
+        label: "Items",
+        href: '/admin/gamefication',
+        icon: <SportsEsportsRoundedIcon style={{ fill: orange }} />,
+    },
+    {
+        label: "Conquistas",
+        href: '/admin/achievements',
+        icon: <GiAchievement size={24} style={{ fill: pink }} />,
+    },
+    {
+        label: "Requisitos",
+        href: '/admin/requirements',
+        icon: <DiRequirejs size={24} style={{ fill: purple }} />,
+    },
+    {
+        label: "Ações",
+        href: '/admin/actions',
+        icon: <FaRegHandPointer size={24} style={{ fill: blue }} />,
     },
 ];
 
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index 25d622a09195fd25f1d3a2cbe65583b15f6c0e57..bd43798ce0eaf4537d57fec7974e6de4b2dbb21c 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -24,6 +24,8 @@ import SnackBar from "../../../../Components/SnackbarComponent";
 import { Url } from "../../../Filters";
 import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
+import PageHeader from '../../../Components/Components/PageHeader'
 //imports from material ui
 import { withStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
@@ -32,7 +34,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import IconButton from "@material-ui/core/IconButton";
-import { Button, Typography, Paper, Grid } from "@material-ui/core";
+import { Button, Paper } from "@material-ui/core";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -43,463 +45,382 @@ import AllOutIcon from "@material-ui/icons/AllOut";
 import { Link } from 'react-router-dom';
 import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import styled from "styled-components"
-import PageHeader from "../../../Components/Components/PageHeader"
-
-let currPage = 0;
 
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        "&:nth-of-type(odd)": {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Activity = () => {
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = [
-        "CRIADO EM",
-        "DONO(A)",
-        "ATIVIDADE",
-        "PRIVACIDADE",
-        "VISUALIZAR",
-    ]; //Labels from Table
-    const WINDOW_WIDTH = window.innerWidth
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-
-    const [showFilter, setShowFilter] = useState(false);
-
-    const [option, setOption] = useState("Todos os usuários"); //labels of the text field 'to'
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: "",
-        icon: "",
-        open: false,
-        color: "",
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "CRIADO EM",
+    "DONO(A)",
+    "ATIVIDADE",
+    "PRIVACIDADE",
+    "VISUALIZAR",
+  ]; //Labels from Table
+  const WINDOW_WIDTH = window.innerWidth
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+  const [showFilter, setShowFilter] = useState(false);
+  const [option, setOption] = useState(); //labels of the text field 'to'
+  const [currPage, setCurrPage] = useState(0)
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const options = [
+    {
+      name: "private",
+      value: "Privado",
+    },
+    {
+      name: "public",
+      value: "Público",
+    },
+  ];
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
     });
-
-    const options = [
-        {
-            value: "private",
-            label: "Privado",
-        },
-        {
-            value: "public",
-            label: "Público",
-        },
-    ];
-
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color,
-        });
-    };
-
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true);
-        getRequest(api,
-            (data, header) => {
-                const arrData = [...data];
-                if (arrData.length === 0) {
-                    HandleSnack(
-                        "Não há mais dados para serem carregados",
-                        true,
-                        "warning",
-                        "#FFC125"
-                    );
-                } else {
-                    const arrItems = [...items];
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-                    const arrResult = arrItems.concat(arrData);
-                    setItems(arrResult.concat(ADD_ONE_LENGHT));
-                }
-                setIsLoadingMoreItems(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoadingMoreItems(false);
-            }
-        )
-    };
-
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true);
-        getRequest(api,
-            (data, header) => {
-                HandleSnack(
-                    "A lista de dados foi atualizada",
-                    true,
-                    "success",
-                    "#228B22"
-                );
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT))
-                setIsUpdating(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsUpdating(false);
-            }
-        )
-    };
-
-    const handleChange = (e) => {
-        setIsLoaded(false)
-        const value = e.target.value;
-        currPage = 0;
-        setOption(value);
-
-        getRequest(Url("activities", `"privacy" : "${value}"`, `${currPage}`, "DESC"),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
-        )
-    };
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url("activities", "", `${currPage}`, "DESC"),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsLoaded(true);
-                setError(false);
+  };
+
+  const handleChange = (e) => {
+    setOption(e.target.value);
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const buildUrl = (privacyOpt) => {
+    if (privacyOpt)
+      return Url("activities", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
+
+    return Url("activities", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(option),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, option])
+
+  useEffect(() => {
+    setOption()
+    setCurrPage(0)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+
+    if (WINDOW_WIDTH <= 820) {
+      return <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+
+        <MobilePageHeader
+          title="Atividades"
+          actions={[
+            {
+              name: "Atualizar",
+              isLoading: false,
+              func: () => {
+                setCurrPage(0)
+              },
+              icon: <UpdateRoundedIcon />
             },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-                setError(true);
+            {
+              name: "Filtrar",
+              isLoading: false,
+              func: () => {
+                setShowFilter(!showFilter);
+              },
+              icon: <FilterListRoundedIcon />
             }
-        )
-    }, []);
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-
-        if (WINDOW_WIDTH <= 758) {
-            return <>
-                <SnackBar
-                    severity={snackInfo.icon}
-                    text={snackInfo.message}
-                    snackbarOpen={snackInfo.open}
-                    color={snackInfo.color}
-                    handleClose={() =>
-                        setSnackInfo({
-                            message: "",
-                            icon: "",
-                            open: false,
-                            color: "",
-                        })
-                    }
-                />
-
-                <Paper style={{ padding: "1em" }}>
-                    <Grid container spacing={3} direction="row" alignItems="center">
-                        <Grid item xs={12}>
-                            <Typography variant="h4">Atividades</Typography>
-                        </Grid>
-                        <Grid
-                            item
-                            xs={12}
-                        >
-                            <Grid container justify="flex-start" spacing={3}>
-                                <Grid item>
-                                    <Button
-                                        variant="contained"
-                                        color="secondary"
-                                        disabled={isUpdating}
-                                        onClick={() => {
-                                            currPage = 0;
-                                            UpdateHandler(
-                                                Url("activities", "", `${currPage}`, "DESC")
-                                            );
-                                        }}
-                                        startIcon={<UpdateRoundedIcon />}
-                                    >
-                                        {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                    </Button>
-                                </Grid>
-                                <Grid item>
-                                    <Button
-                                        variant="contained"
-                                        color="secondary"
-                                        onClick={() => {
-                                            setShowFilter(!showFilter);
-                                        }}
-                                        startIcon={<FilterListRoundedIcon />}
-                                    >
-                                        Filtrar
-                                </Button>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Grid>
-
-                    {showFilter ? (
-                        <>
-                            <div style={{ height: "1em" }}></div>
-
-                            <div style={{ alignSelf: "flex-end" }}>
-                                <TextField
-                                    select={true}
-                                    label="Filtro"
-                                    value={option ? option : ""}
-                                    onChange={handleChange}
-                                    helperText="Por favor, selecione uma das opções"
-                                >
-                                    {options.map((option, index) => (
-                                        <MenuItem
-                                            key={option.value}
-                                            value={option.value}
-                                        >
-                                            {option.label}
-                                        </MenuItem>
-                                    ))}
-                                </TextField>
-                            </div>
-                        </>
-                    ) : null}
-                </Paper>
-
-                <div style={{ height: "2em" }}></div>
-
-                {items.map((row, index) =>
-                    index === items.length - 1 ? (
-                        <StyledDivButton>
-                            <Button
-                                key={index}
-                                color="primary"
-                                variant="text"
-                                // disabled={isLoadingMoreItems}
-                                startIcon={<AddRoundedIcon />}
-                                disabled={isLoadingMoreItems}
-                                onClick={() => {
-                                    currPage++;
-                                    if (showFilter) {
-                                        LoadMoreItens(
-                                            Url("activities", `"privacy" : "${option}"`, `${currPage}`, "DESC")
-                                        );
-                                    } else {
-                                        LoadMoreItens(
-                                            Url("activities", "", `${currPage}`, "DESC")
-                                        );
-                                    }
-                                }}
-                            >
-                                {isLoadingMoreItems ? (
-                                    <CircularProgress size={24} />
-                                ) : (
-                                        "Carregar mais itens"
-                                    )}
-                            </Button>
-                        </StyledDivButton>
-                    ) : (
-                            <>
-                                <MobileList
-                                    key={index}
-                                    title={row.id}
-                                    subtitle={row.privacy}
-                                    backColor={"#673ab7"}
-                                    avatar={<AllOutIcon />}
-                                    href={`/admin/activity/${row.id}`}
-                                    reset={() => {
-                                        currPage = 0;
-                                    }}
-                                    data={
-                                        [
-                                            {
-                                                title: "Dono(a)",
-                                                subtitle: row.owner ? row.owner.name : "Sem dados"
-
-                                            },
-                                            {
-                                                title: "Criado em",
-                                                subtitle: DisplayDate(row.created_at)
-                                            },
-                                            {
-                                                title: "Atividade",
-                                                subtitle: row.activity
-                                            }
-                                        ]
-                                    }
-                                />
-                                <div style={{ height: "0.5em" }} />
-                            </>
-                        )
-                )}
+          ]}
+        >
+          {showFilter ? (
+            <>
+              <div style={{ height: "1em" }}></div>
+
+              <div style={{ alignSelf: "flex-end" }}>
+                <TextField
+                  select
+                  label="Filtro"
+                  value={option ? option : ""}
+                  onChange={handleChange}
+                  helperText="Por favor, selecione uma das opções"
+                >
+                  {options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </div>
             </>
-        }
-        else {
-            return <>
-                <SnackBar
-                    severity={snackInfo.icon}
-                    text={snackInfo.message}
-                    snackbarOpen={snackInfo.open}
-                    color={snackInfo.color}
-                    handleClose={() =>
-                        setSnackInfo({
-                            message: "",
-                            icon: "",
-                            open: false,
-                            color: "",
-                        })
-                    }
+          ) : null}
+        </MobilePageHeader>
+
+        <div style={{ height: "2em" }}></div>
+
+        {items.map((row, index) =>
+          index === items.length - 1 ? (
+            <StyledDivButton
+              key="Load more"
+            >
+              <Button
+                key={index}
+                color="primary"
+                variant="text"
+                // disabled={isLoadingMoreItems}
+                startIcon={<AddRoundedIcon />}
+                disabled={isLoadingMoreItems}
+                onClick={() => {
+                  setCurrPage(currPage + 1)
+                }}
+              >
+                {isLoadingMoreItems ? (
+                  <CircularProgress size={24} />
+                ) : (
+                    "Carregar mais itens"
+                  )}
+              </Button>
+            </StyledDivButton>
+          ) : (
+              <>
+                <MobileList
+                  key={index}
+                  title={row.id}
+                  subtitle={row.privacy}
+                  backColor={"#673ab7"}
+                  avatar={<AllOutIcon />}
+                  href={`/admin/activity/${row.id}`}
+                  reset={() => {
+
+                  }}
+                  data={
+                    [
+                      {
+                        title: "Dono(a)",
+                        subtitle: row.owner ? row.owner.name : "Sem dados"
+
+                      },
+                      {
+                        title: "Criado em",
+                        subtitle: DisplayDate(row.created_at)
+                      },
+                      {
+                        title: "Atividade",
+                        subtitle: row.activity
+                      }
+                    ]
+                  }
                 />
-                <PageHeader
-                    title="Atividades"
-                    actions={[
-                        {
-                            name: "Atualizar",
-                            isLoading: isUpdating,
-                            func: () => {
-                                currPage = 0;
-                                UpdateHandler(
-                                    Url("activities", "", `${currPage}`, "DESC")
-                                );
-                            },
-                            icon: <UpdateRoundedIcon />
-                        },
-                        {
-                            name: "Filtrar",
-                            isLoading: false,
-                            func: () => {
-                                setShowFilter(!showFilter);
-                            },
-                            icon: <FilterListRoundedIcon />
-                        }
-                    ]}
+                <div style={{ height: "0.5em" }} />
+              </>
+            )
+        )}
+      </>
+    }
+    else {
+      return <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+        <PageHeader
+          title="Atividades"
+          actions={[
+            {
+              name: "Atualizar",
+              isLoading: false,
+              func: () => {
+                setCurrPage(0)
+              },
+              icon: <UpdateRoundedIcon />
+            },
+            {
+              name: "Filtrar",
+              isLoading: false,
+              func: () => {
+                setShowFilter(!showFilter);
+              },
+              icon: <FilterListRoundedIcon />
+            }
+          ]}
+        >
+          {showFilter ? (
+            <>
+              <div style={{ height: "1em" }}></div>
+
+              <div style={{ alignSelf: "flex-end" }}>
+                <TextField
+                  select
+                  label="Filtro"
+                  value={option ? option : ""}
+                  onChange={handleChange}
+                  helperText="Por favor, selecione uma das opções"
                 >
-                    {showFilter ? (
-                        <>
-                            <div style={{ height: "1em" }}></div>
-
-                            <div style={{ alignSelf: "flex-end" }}>
-                                <TextField
-                                    select
-                                    label="Filtro"
-                                    value={option ? option : ""}
-                                    onChange={handleChange}
-                                    helperText="Por favor, selecione uma das opções"
-                                >
-                                    {options.map((option, index) => (
-                                        <MenuItem
-                                            key={option.value}
-                                            value={option.value}
-                                        >
-                                            {option.label}
-                                        </MenuItem>
-                                    ))}
-                                </TextField>
-                            </div>
-                        </>
-                    ) : null}
-                </PageHeader>
-
-                <div style={{ height: "2em" }}></div>
-
-                <TableData top={TOP_LABELS}>
-                    <TableBody>
-                        {items.map((row, index) =>
-                            index === items.length - 1 ? (
-                                <StyledTableRow key={index} style={{ padding: "1em" }}>
-                                    {/* Button to load more data */}
-                                    <StyledTableCell>
-                                        <Button
-                                            color="primary"
-                                            variant="text"
-                                            // disabled={isLoadingMoreItems}
-                                            startIcon={<AddRoundedIcon />}
-                                            disabled={isLoadingMoreItems}
-                                            onClick={() => {
-                                                currPage++;
-                                                if (showFilter) {
-                                                    LoadMoreItens(
-                                                        Url("activities", `"privacy" : "${option}"`, `${currPage}`, "DESC")
-                                                    );
-                                                } else {
-                                                    LoadMoreItens(
-                                                        Url("activities", "", `${currPage}`, "DESC")
-                                                    );
-                                                }
-                                            }}
-                                        >
-                                            {isLoadingMoreItems ? (
-                                                <CircularProgress size={24} />
-                                            ) : (
-                                                    "Carregar mais itens"
-                                                )}
-                                        </Button>
-                                    </StyledTableCell>
-                                </StyledTableRow>
-                            ) : (
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">
-                                            {DisplayDate(row.created_at)}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row.owner ? row.owner.name : ""
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {row.activity}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">{row.privacy}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/activity/${row.id}`}>
-                                                <IconButton onClick={() => { currPage = 0 }}>
-                                                    <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                </IconButton>
-                                            </Link>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                                )
-                        )}
-                    </TableBody>
-                </TableData>
+                  {options.map((option, index) => (
+                    <MenuItem
+                      key={option.value}
+                      value={option.name}
+                      name={option.value}
+                    >
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </div>
             </>
-        }
+          ) : null}
+        </PageHeader>
+
+        <div style={{ height: "2em" }}></div>
+
+        <TableData top={TOP_LABELS}>
+          <TableBody>
+            {items.map((row, index) =>
+              index === items.length - 1 ? (
+                <StyledTableRow key={row.created_at} style={{ padding: "1em" }}>
+                  {/* Button to load more data */}
+                  <StyledTableCell>
+                    <Button
+                      color="primary"
+                      variant="text"
+                      // disabled={isLoadingMoreItems}
+                      startIcon={<AddRoundedIcon />}
+                      disabled={isLoadingMoreItems}
+                      onClick={() => {
+                        setCurrPage(currPage + 1)
+                      }}
+                    >
+                      {isLoadingMoreItems ? (
+                        <CircularProgress size={24} />
+                      ) : (
+                          "Carregar mais itens"
+                        )}
+                    </Button>
+                  </StyledTableCell>
+                </StyledTableRow>
+              ) : (
+                  <StyledTableRow key={index}>
+                    <StyledTableCell component="th" scope="row">
+                      {DisplayDate(row.created_at)}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row.owner ? row.owner.name : ""
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {row.activity}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">{row.privacy}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/activity/${row.id}`}>
+                        <IconButton>
+                          <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                        </IconButton>
+                      </Link>
+                    </StyledTableCell>
+                  </StyledTableRow>
+                )
+            )}
+          </TableBody>
+        </TableData>
+      </>
     }
+  }
 };
 export default Activity;
 
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index df9cbfff609dadd19a830e7ac6f23fca0901a1aa..b6cbc6974bb92d5d118569cc6367a1e2cae2d13e 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useEffect, useState, useContext } from "react";
 import moment from "moment";
+import styled from "styled-components";
 //imports from local files
 import TableData from "../../../Components/Components/Table";
 import SnackBar from "../../../../Components/SnackbarComponent";
@@ -25,9 +26,15 @@ import { Url } from "../../../Filters";
 import { Store } from "../../../../Store";
 import LoadingSpinner from "../../../../Components/LoadingSpinner";
 import {
-    getRequest,
-    postRequest,
+  getRequest,
+  postRequest,
 } from "../../../../Components/HelperFunctions/getAxiosConfig";
+import Unauthorized from "../../../Components/Components/Unauthorized";
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader";
+import PageHeader from "../../../Components/Components/PageHeader";
+import { apiDomain } from '../../../../env';
+import noAvatar from "../../../../img/default_profile.png"
 //imports from material ui
 import { withStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
@@ -36,7 +43,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import IconButton from "@material-ui/core/IconButton";
-import { Button, Typography, Paper, Grid } from "@material-ui/core";
+import { Button, Paper, Grid } from "@material-ui/core";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -44,862 +51,716 @@ import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
 import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
+import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 //routers
 import { Link } from "react-router-dom";
-import Unauthorized from "../../../Components/Components/Unauthorized";
-import styled from "styled-components";
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList";
-import { apiDomain } from '../../../../env';
-import noAvatar from "../../../../img/default_profile.png";
-import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 
-let currPage = 0;
-let currStateFilter = "requested";
-let currNameFilter = "";
-let currEmailFilter = "";
 
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        "&:nth-of-type(odd)": {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const AproveTeacher = () => {
-    const { state } = useContext(Store);
-    const WINDOW_WIDTH = window.innerWidth;
-
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = [
-        "ESTADO DO PEDIDO",
-        "ID",
-        "NOME",
-        "EMAIL",
-        "PEDIDO EM(MM/DD/YYYY)",
-        "VISUALIZAR",
-        "AÇÕES",
-    ]; //Labels from Table
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-
-    const [showFilter, setShowFilter] = useState(false);
-
-    const [option, setOption] = useState("requested");
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: "",
-        icon: "",
-        open: false,
-        color: "",
+  const { state } = useContext(Store);
+  const WINDOW_WIDTH = window.innerWidth;
+
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ESTADO DO PEDIDO",
+    "ID",
+    "NOME",
+    "EMAIL",
+    "PEDIDO EM(MM/DD/YYYY)",
+    "VISUALIZAR",
+    "AÇÕES",
+  ]; //Labels from Table
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+  const [currPage, setCurrPage] = useState(0)
+  const [showFilter, setShowFilter] = useState(false);
+
+  const [option, setOption] = useState("requested");
+  const [name, setName] = useState("");
+  const [nameValue, setNameValue] = useState("")
+  const [email, setEmail] = useState("");
+  const [emailValue, setEmailValue] = useState("")
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const StateOptions = [
+    { name: "requested", value: "Pendente" },
+    { name: "accepted", value: "Aceito" },
+    { name: "rejected", value: "Rejeitado" },
+  ];
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
     });
-
-    const StateOptions = [
-        { id: "requested", name: "Pendente" },
-        { id: "accepted", name: "Aceito" },
-        { id: "rejected", name: "Rejeitado" },
-    ];
-
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color,
-        });
-    };
-
-    const CheckUserPermission = () => {
-        let canUserEdit = false;
-
-        if (state.userIsLoggedIn) {
-            const roles = [...state.currentUser.roles];
-            for (let i = 0; i < roles.length; i++)
-                if (roles[i].name === "admin" || roles[i].name === "editor")
-                    canUserEdit = true;
-        } else {
-            canUserEdit = false;
-        }
-
-        return canUserEdit;
-    };
-
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true);
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                if (arrData.length === 0) {
-                    HandleSnack(
-                        "Não há mais dados para serem carregados",
-                        true,
-                        "warning",
-                        "#FFC125"
-                    );
-                } else {
-                    const arrItems = [...items];
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-                    const arrResult = arrItems.concat(arrData);
-                    setItems(arrResult.concat(ADD_ONE_LENGHT));
-                }
-                setIsLoadingMoreItems(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoadingMoreItems(false);
-            }
+  };
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === "admin" || roles[i].name === "editor")
+          canUserEdit = true;
+    } else {
+      canUserEdit = false;
+    }
+
+    return canUserEdit;
+  };
+
+  const handleChange = (e, type) => {
+    const value = e.target.value;
+    setOption(value);
+  };
+
+  const NameHandler = (e) => {
+    setNameValue(e.target.value)
+  };
+
+  const EmailHandler = (e) => {
+    setEmailValue(e.target.value)
+  };
+
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
+      }
+    }
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
+    }
+  }
+
+  const ComplaintStatus = (status) => {
+    switch (status) {
+      case "accepted":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#228B22",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            ACEITO
+          </Paper>
         );
-    };
-
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true);
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack(
-                    "A lista de dados foi atualizada",
-                    true,
-                    "success",
-                    "#228B22"
-                );
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsUpdating(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsUpdating(false);
-            }
+      case "requested":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            PENDENTE
+          </Paper>
         );
-    };
-
-    const handleChange = (e, type) => {
-        const value = e.target.value;
-        setOption(value);
-    };
-
-    const ApplyFilter = (id, type) => {
-        currStateFilter = id;
-        currPage = 0;
-        getRequest(
-            Url(
-                "users",
-                `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${email}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
+      case "rejected":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FA8072",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            Rejeitado
+          </Paper>
         );
-    };
-
-    const NameHandler = (e) => {
-        currPage = 0;
-        currNameFilter = e.target.value;
-        setName(currNameFilter);
-        getRequest(
-            Url(
-                "users",
-                `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${email}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
+      default:
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#797D7F ",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            Não requisitado
+          </Paper>
         );
+    }
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const handleAprove = (userId, userName) => {
+    const url = `/users/${userId}/add_teacher`;
+    const body = {
+      approves: true,
     };
-
-    const EmailHandler = (e) => {
-        currPage = 0;
-        currEmailFilter = e.target.value;
-        setEmail(currEmailFilter);
-        getRequest(
-            Url(
-                "users",
-                `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
-        );
-    };
-
-    const ComplaintStatus = (status) => {
-        switch (status) {
-            case "accepted":
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#228B22",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        ACEITO
-                    </Paper>
-                );
-            case "requested":
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#FF8C00",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        PENDENTE
-                    </Paper>
-                );
-            case "rejected":
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#FA8072",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        Rejeitado
-                    </Paper>
-                );
-            default:
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#797D7F ",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        Não requisitado
-                    </Paper>
-                );
+    postRequest(
+      url,
+      body,
+      (data) => {
+        if (data.errors) HandleSnack("Erro!", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            `${userName} aceito como professor!`,
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          removeItemFromList(userId)
         }
+      },
+      (error) => {
+        HandleSnack("Erro!", true, "warning", "#FA8072");
+      }
+    );
+  };
+
+  const handleReject = (userId, userName) => {
+    const url = `/users/${userId}/add_teacher`;
+    const body = {
+      approves: false,
     };
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    const handleAprove = (userId, userName) => {
-        const url = `/users/${userId}/add_teacher`;
-        const body = {
-            approves: true,
-        };
-        postRequest(
-            url,
-            body,
-            (data) => {
-                if (data.errors) HandleSnack("Erro!", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        `${userName} aceito como professor!`,
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    UpdateHandler(
-                        Url(
-                            "users",
-                            `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                            `${currPage}`,
-                            "DESC"
-                        )
-                    );
-                }
-            },
-            (error) => {
-                HandleSnack("Erro!", true, "warning", "#FA8072");
-            }
-        );
-    };
-
-    const handleReject = (userId, userName) => {
-        const url = `/users/${userId}/add_teacher`;
-        const body = {
-            approves: false,
-        };
-        postRequest(
-            url,
-            body,
-            (data) => {
-                if (data.errors) HandleSnack("Erro!", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        `${userName} rejeitado como professor!`,
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    UpdateHandler(
-                        Url(
-                            "users",
-                            `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                            `${currPage}`,
-                            "DESC"
-                        )
-                    );
-                }
-            },
-            (error) => {
-                HandleSnack("Erro!", true, "warning", "#FA8072");
-            }
-        );
-    };
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url(
-                "users",
-                `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsLoaded(true);
-                setError(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-                setError(true);
+    postRequest(
+      url,
+      body,
+      (data) => {
+        if (data.errors) HandleSnack("Erro!", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            `${userName} rejeitado como professor!`,
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          removeItemFromList(userId)
+        }
+      },
+      (error) => {
+        HandleSnack("Erro!", true, "warning", "#FA8072");
+      }
+    );
+  };
+
+  const buildUrl = (email, submitter_request, name) => {
+    if (email && submitter_request && name)
+      return Url("users", `"submitter_request" : "${submitter_request}", "email" : "${email}", "name" : "${name}"`, currPage, "DESC")
+
+    else if (email && name)
+      return Url("users", `"email" : "${email}", "name" : "${name}"`, currPage, "DESC")
+    else if (email && submitter_request)
+      return Url("users", `"email" : "${email}", "submitter_request" : "${submitter_request}"`, currPage, "DESC")
+    else if (name && submitter_request)
+      return Url("users", `"name" : "${name}", "submitter_request" : "${submitter_request}"`, currPage, "DESC")
+
+    else if (email)
+      return Url("users", `"email" : "${email}"`, currPage, "DESC")
+    else if (submitter_request)
+      return Url("users", `"submitter_request" : "${submitter_request}"`, currPage, "DESC")
+    else if (name)
+      return Url("users", `"name" : ${name}`, currPage, "DESC")
+    else
+      return Url("users", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(email, option, name),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, option, email, name])
+
+  useEffect(() => {
+    setOption("requested")
+    setName("")
+    setNameValue("")
+    setEmail("")
+    setEmailValue("")
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else if (CheckUserPermission()) {
+    if (WINDOW_WIDTH <= 1130) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
             }
-        );
-    }, []);
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />;
-    } else if (CheckUserPermission()) {
-        if (WINDOW_WIDTH <= 1075) {
-            return (
+          />
+          <MobilePageHeader
+            title="Aprovação de professores"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <>
+                <div style={{ height: "1em" }}></div>
+                {showFilter ? (
+                  <Grid
+                    container
+                    direction="row"
+                    justify="space-between"
+                    alignItems="center"
+                    alignContent="flex-end"
+                    spacing={3}
+                    xs={12}
+                  >
+                    <Grid item>
+                      <TextField
+                        select
+                        label="Estado"
+                        value={option ? option : ""}
+                        onChange={handleChange}
+                        helperText="Por favor, selecione uma das opções"
+                      >
+                        {StateOptions.map((option, index) => (
+                          <MenuItem
+                            key={option.value}
+                            value={option.name}
+                            name={option.value}
+                          >
+                            {option.value}
+                          </MenuItem>
+                        ))}
+                      </TextField>
+                    </Grid>
+                    <Grid item>
+                      <TextField
+                        label="Nome"
+                        onChange={NameHandler}
+                        value={nameValue}
+                        onBlur={(event) => { setName(event.target.value) }}
+                        helperText="Retire o foco do campo de texto ao terminar de digitar"
+                      />
+                    </Grid>
+                    <Grid item>
+                      <TextField
+                        label="Email"
+                        onChange={EmailHandler}
+                        value={emailValue}
+                        onBlur={(event) => { setEmail(event.target.value) }}
+                        helperText="Retire o foco do campo de texto ao terminar de digitar"
+                      />
+                    </Grid>
+                  </Grid>
+                ) : null}
+              </>
+            ) : null}
+          </MobilePageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton>
+                <Button
+                  key={index}
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
+                    )}
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Lista de pedidos para professores
-                                </Typography>
-                            </Grid>
-
-                            <Grid item xs={12}>
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                UpdateHandler(
-                                                    Url(
-                                                        "users",
-                                                        `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                                                        `${currPage}`,
-                                                        "DESC"
-                                                    )
-                                                );
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? (
-                                                <CircularProgress size={24} />
-                                            ) : (
-                                                    "Atualizar"
-                                                )}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        {showFilter ? (
-                            <Grid
-                                container
-                                direction="row"
-                                justify="space-between"
-                                alignItems="center"
-                                alignContent="flex-end"
-                                spacing={3}
-                                xs={12}
+                  <MobileList
+                    key={index}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#00bcd4"}
+                    avatar={
+                      <img
+                        src={row.avatar ? apiDomain + row.avatar : noAvatar}
+                        alt="user avatar"
+                        style={{
+                          height: "100%",
+                          width: "100%",
+                          borderRadius: "50%",
+                        }}
+                      />
+                    }
+                    href={`/admin/user/${row.id}`}
+                    reset={() => {
+
+                    }}
+                    data={[
+                      {
+                        title: "Email",
+                        subtitle: row.email ?
+                          <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+                            <Button
+                              variant='text'
+                              color='primary'
+                              startIcon={<EmailRoundedIcon />}
                             >
-                                <Grid item>
-                                    <TextField
-                                        select
-                                        label="Estado"
-                                        value={option ? option : ""}
-                                        onChange={handleChange}
-                                        helperText="Por favor, selecione uma das opções"
-                                    >
-                                        {StateOptions.map((option, index) => (
-                                            <MenuItem
-                                                key={option.id}
-                                                value={option.name}
-                                                name={option.id}
-                                                onClick={() =>
-                                                    ApplyFilter(option.id, "submitter_request")
-                                                }
-                                            >
-                                                {option.name}
-                                            </MenuItem>
-                                        ))}
-                                    </TextField>
-                                </Grid>
-                                <Grid item>
-                                    <TextField label="Nome" onChange={NameHandler} value={name} />
-                                </Grid>
-                                <Grid item>
-                                    <TextField
-                                        label="Email"
-                                        onChange={EmailHandler}
-                                        value={email}
-                                    />
-                                </Grid>
-                            </Grid>
-                        ) : null}
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++;
-                                        LoadMoreItens(
-                                            Url(
-                                                "users",
-                                                `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                                                `${currPage}`,
-                                                "DESC"
-                                            )
-                                        );
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#00bcd4"}
-                                        avatar={
-                                            <img
-                                                src={row.avatar ? apiDomain + row.avatar : noAvatar}
-                                                alt="user avatar"
-                                                style={{
-                                                    height: "100%",
-                                                    width: "100%",
-                                                    borderRadius: "50%",
-                                                }}
-                                            />
-                                        }
-                                        href={`/admin/user/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                            currNameFilter = "";
-                                            currEmailFilter = "";
-                                        }}
-                                        data={[
-                                            {
-                                                title: "Email",
-                                                subtitle: row.email ?
-                                                    <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
-                                                        <Button
-                                                            variant='text'
-                                                            color='primary'
-                                                            startIcon={<EmailRoundedIcon />}
-                                                        >
-                                                            {row.email}
-                                                        </Button>
-                                                    </Link> : null
-
-                                            },
-                                            {
-                                                title: "Pedido em",
-                                                subtitle: DisplayDate(row.created_at),
-                                            },
-                                            {
-                                                title: "Situação do pedido",
-                                                subtitle: ComplaintStatus(row.submitter_request),
-                                            },
-                                            {
-                                                title: "Ações rápidas",
-                                                subtitle: <>
-                                                    <Button
-                                                        variant="contained"
-                                                        color="secondary"
-                                                        style={{ width: "100%" }}
-                                                        disabled={
-                                                            row.submitter_request === "requested" ? false : true
-                                                        }
-                                                        startIcon={
-                                                            <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
-                                                        }
-                                                        onClick={() => {
-                                                            handleReject(row.id, row.name);
-                                                        }}
-                                                    >
-                                                        Recusar
+                              {row.email}
+                            </Button>
+                          </Link> : null
+
+                      },
+                      {
+                        title: "Pedido em",
+                        subtitle: DisplayDate(row.created_at),
+                      },
+                      {
+                        title: "Situação do pedido",
+                        subtitle: ComplaintStatus(row.submitter_request),
+                      },
+                      {
+                        title: "Ações rápidas",
+                        subtitle: <>
+                          <Button
+                            variant="contained"
+                            color="secondary"
+                            style={{ width: "100%" }}
+                            disabled={
+                              row.submitter_request === "requested" ? false : true
+                            }
+                            startIcon={
+                              <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
+                            }
+                            onClick={() => {
+                              handleReject(row.id, row.name);
+                            }}
+                          >
+                            Recusar
                                                     </Button>
-                                                    <div style={{ height: "0.5em" }} />
-                                                    <Button
-                                                        variant="contained"
-                                                        color="primary"
-                                                        style={{ width: "100%" }}
-                                                        disabled={
-                                                            row.submitter_request === "requested" ? false : true
-                                                        }
-                                                        startIcon={
-                                                            <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
-                                                        }
-                                                        onClick={() => {
-                                                            handleAprove(row.id, row.name);
-                                                        }}
-                                                    >
-                                                        Aceitar
+                          <div style={{ height: "0.5em" }} />
+                          <Button
+                            variant="contained"
+                            color="primary"
+                            style={{ width: "100%" }}
+                            disabled={
+                              row.submitter_request === "requested" ? false : true
+                            }
+                            startIcon={
+                              <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
+                            }
+                            onClick={() => {
+                              handleAprove(row.id, row.name);
+                            }}
+                          >
+                            Aceitar
                                                     </Button>
-                                                </>
-                                            }
-                                        ]}
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
-                    )}
+                        </>
+                      }
+                    ]}
+                  />
+                  <div style={{ height: "0.5em" }} />
                 </>
-            );
-        } else {
-            return (
-                <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Lista de pedidos para professores
-                                </Typography>
-                            </Grid>
-
-                            <Grid item xs={6}>
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                UpdateHandler(
-                                                    Url(
-                                                        "users",
-                                                        `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                                                        `${currPage}`,
-                                                        "DESC"
-                                                    )
-                                                );
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? (
-                                                <CircularProgress size={24} />
-                                            ) : (
-                                                    "Atualizar"
-                                                )}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        {showFilter ? (
-                            <Grid
-                                container
-                                direction="row"
-                                justify="space-between"
-                                alignItems="center"
-                                alignContent="flex-end"
-                                spacing={3}
-                                xs={12}
-                            >
-                                <Grid item>
-                                    <TextField
-                                        select
-                                        label="Estado"
-                                        value={option ? option : ""}
-                                        onChange={handleChange}
-                                        helperText="Por favor, selecione uma das opções"
-                                    >
-                                        {StateOptions.map((option, index) => (
-                                            <MenuItem
-                                                key={option.id}
-                                                value={option.name}
-                                                name={option.id}
-                                                onClick={() =>
-                                                    ApplyFilter(option.id, "submitter_request")
-                                                }
-                                            >
-                                                {option.name}
-                                            </MenuItem>
-                                        ))}
-                                    </TextField>
-                                </Grid>
-                                <Grid item>
-                                    <TextField label="Nome" onChange={NameHandler} value={name} />
-                                </Grid>
-                                <Grid item>
-                                    <TextField
-                                        label="Email"
-                                        onChange={EmailHandler}
-                                        value={email}
-                                    />
-                                </Grid>
-                            </Grid>
-                        ) : null}
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    <Grid xs={12} container>
-                        <TableData top={TOP_LABELS}>
-                            <TableBody>
-                                {items.map((row, index) =>
-                                    index === items.length - 1 ? (
-                                        <StyledTableRow key={index}>
-                                            {/* Button to load more data */}
-                                            <StyledTableCell>
-                                                <Button
-                                                    color="primary"
-                                                    variant="text"
-                                                    // disabled={isLoadingMoreItems}
-                                                    startIcon={<AddRoundedIcon />}
-                                                    disabled={isLoadingMoreItems}
-                                                    onClick={() => {
-                                                        currPage++;
-                                                        LoadMoreItens(
-                                                            Url(
-                                                                "users",
-                                                                `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
-                                                                `${currPage}`,
-                                                                "DESC"
-                                                            )
-                                                        );
-                                                    }}
-                                                >
-                                                    {isLoadingMoreItems ? (
-                                                        <CircularProgress size={24} />
-                                                    ) : (
-                                                            "Carregar mais itens"
-                                                        )}
-                                                </Button>
-                                            </StyledTableCell>
-                                        </StyledTableRow>
-                                    ) : (
-                                            <StyledTableRow
-                                                key={index}
-                                                style={{ flex: 1, width: "100%" }}
-                                            >
-                                                <StyledTableCell component="th" scope="row">
-                                                    {ComplaintStatus(row.submitter_request)}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">{row.id}</StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {row.name}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {row.email}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {DisplayDate(row.created_at)}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    <Link to={`/admin/user/${row.id}`}>
-                                                        <IconButton
-                                                            onClick={() => {
-                                                                currPage = 0;
-                                                                currNameFilter = "";
-                                                                currEmailFilter = "";
-                                                            }}
-                                                        >
-                                                            <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                        </IconButton>
-                                                    </Link>
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    <Button
-                                                        variant="contained"
-                                                        color="secondary"
-                                                        style={{ width: "100%" }}
-                                                        disabled={
-                                                            row.submitter_request === "requested" ? false : true
-                                                        }
-                                                        startIcon={
-                                                            <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
-                                                        }
-                                                        onClick={() => {
-                                                            handleReject(row.id, row.name);
-                                                        }}
-                                                    >
-                                                        Recusar
+              )
+          )}
+        </>
+      );
+    } else {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
+            }
+          />
+
+          <PageHeader
+            title="Aprovação de professores"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <>
+                <div style={{ height: "1em" }}></div>
+                {showFilter ? (
+                  <Grid
+                    container
+                    direction="row"
+                    justify="space-between"
+                    alignItems="center"
+                    alignContent="flex-end"
+                    spacing={3}
+                    xs={12}
+                  >
+                    <Grid item>
+                      <TextField
+                        select
+                        label="Estado"
+                        value={option ? option : ""}
+                        onChange={handleChange}
+                        helperText="Por favor, selecione uma das opções"
+                      >
+                        {StateOptions.map((option, index) => (
+                          <MenuItem
+                            key={option.value}
+                            value={option.name}
+                            name={option.value}
+                          >
+                            {option.value}
+                          </MenuItem>
+                        ))}
+                      </TextField>
+                    </Grid>
+                    <Grid item>
+                      <TextField
+                        label="Nome"
+                        onChange={NameHandler}
+                        value={nameValue}
+                        onBlur={(event) => { setName(event.target.value) }}
+                        helperText="Retire o foco do campo de texto ao terminar de digitar"
+                      />
+                    </Grid>
+                    <Grid item>
+                      <TextField
+                        label="Email"
+                        onChange={EmailHandler}
+                        value={emailValue}
+                        onBlur={(event) => { setEmail(event.target.value) }}
+                        helperText="Retire o foco do campo de texto ao terminar de digitar"
+                      />
+                    </Grid>
+                  </Grid>
+                ) : null}
+              </>
+            ) : null}
+          </PageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          <Grid xs={12} container>
+            <TableData top={TOP_LABELS}>
+              <TableBody>
+                {items.map((row, index) =>
+                  index === items.length - 1 ? (
+                    <StyledTableRow key={index}>
+                      {/* Button to load more data */}
+                      <StyledTableCell>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          // disabled={isLoadingMoreItems}
+                          startIcon={<AddRoundedIcon />}
+                          disabled={isLoadingMoreItems}
+                          onClick={() => {
+                            setCurrPage(currPage + 1)
+                          }}
+                        >
+                          {isLoadingMoreItems ? (
+                            <CircularProgress size={24} />
+                          ) : (
+                              "Carregar mais itens"
+                            )}
+                        </Button>
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ) : (
+                      <StyledTableRow
+                        key={index}
+                        style={{ flex: 1, width: "100%" }}
+                      >
+                        <StyledTableCell component="th" scope="row">
+                          {ComplaintStatus(row.submitter_request)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">{row.id}</StyledTableCell>
+                        <StyledTableCell align="right">
+                          {row.name}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {row.email}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.created_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Link to={`/admin/user/${row.id}`}>
+                            <IconButton>
+                              <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                            </IconButton>
+                          </Link>
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Button
+                            variant="contained"
+                            color="secondary"
+                            style={{ width: "100%" }}
+                            disabled={
+                              row.submitter_request === "requested" ? false : true
+                            }
+                            startIcon={
+                              <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
+                            }
+                            onClick={() => {
+                              handleReject(row.id, row.name);
+                            }}
+                          >
+                            Recusar
                                                     </Button>
-                                                    <div style={{ height: "0.5em" }} />
-                                                    <Button
-                                                        variant="contained"
-                                                        color="primary"
-                                                        style={{ width: "100%" }}
-                                                        disabled={
-                                                            row.submitter_request === "requested" ? false : true
-                                                        }
-                                                        startIcon={
-                                                            <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
-                                                        }
-                                                        onClick={() => {
-                                                            handleAprove(row.id, row.name);
-                                                        }}
-                                                    >
-                                                        Aceitar
+                          <div style={{ height: "0.5em" }} />
+                          <Button
+                            variant="contained"
+                            color="primary"
+                            style={{ width: "100%" }}
+                            disabled={
+                              row.submitter_request === "requested" ? false : true
+                            }
+                            startIcon={
+                              <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
+                            }
+                            onClick={() => {
+                              handleAprove(row.id, row.name);
+                            }}
+                          >
+                            Aceitar
                                                     </Button>
-                                                </StyledTableCell>
-                                            </StyledTableRow>
-                                        )
-                                )}
-                            </TableBody>
-                        </TableData>
-                    </Grid>
-                </>
-            );
-        }
-    } else return <Unauthorized />;
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    )
+                )}
+              </TableBody>
+            </TableData>
+          </Grid>
+        </>
+      );
+    }
+  } else return <Unauthorized />;
 };
 export default AproveTeacher;
 
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index c89b08bdbc5642225bb3bd45a0eb595db831964b..0e2dc4da2a147619a915d415a47087a16fd5249e 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -17,6 +17,7 @@ You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 import React, { useEffect, useState } from 'react';
 import moment from "moment";
+import styled from "styled-components"
 //Material ui componets
 import { withStyles } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
@@ -28,7 +29,7 @@ import TextField from "@material-ui/core/TextField";
 import TableCell from '@material-ui/core/TableCell';
 import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
 import VisibilityIcon from '@material-ui/icons/Visibility';
-import { Button, Typography } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
@@ -37,616 +38,463 @@ import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 import TableData from '../../../Components/Components/Table';
 import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import { apiDomain } from '../../../../env';
+import noAvatar from "../../../../img/default_profile.png";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //Services
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Url } from '../../../Filters';
 //routers
 import { Link } from 'react-router-dom';
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import styled from "styled-components"
-import { apiDomain } from '../../../../env';
-import noAvatar from "../../../../img/default_profile.png";
-
-let currPage = 0; //var that controlls the current page that we are  
-let currContentFilter = 1;
-let transformListToAsc = false;
 
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const BlockedUsers = () => {
-    const AddOneLenght = [''];
-    const WINDOW_WIDTH = window.innerWidth
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
-    const [isUpdating, setIsUpdating] = useState(false)
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
-    })
-
-    const StateOptions = [
-        {
-            id: 1,
-            name: "Semanal"
-        },
-        {
-            id: 2,
-            name: "Permanente"
-        }
-    ];
-
-    // Handle snack infos
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
+  const ADD_ONE_LENGHT = [''];
+  const WINDOW_WIDTH = window.innerWidth
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+  const [stateOpt, setStateOpt] = useState(1)
+  const [currPage, setCurrPage] = useState(0)
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  const StateOptions = [
+    {
+      name: 1,
+      value: "Semanal"
+    },
+    {
+      name: 2,
+      value: "Permanente"
     }
-
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(AddOneLenght))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
+  ];
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
+
+  const handleChange = (event) => {
+    const type = event.target.value
+    setStateOpt(type)
+  }
+
+  const BlockStatus = (status) => {
+    switch (status) {
+      case "blocked":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            SEMANAL
+          </Paper>
+        );
+      case "banished":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "red",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            PERMANENTE
+          </Paper>
+        );
+      default:
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#797D7F",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            Não avaliado
+          </Paper>
+        );
     }
-
-    const handleChange = (event) => {
-        const type = event.target.value
-        switch (type) {
-            case "Semanal":
-                currPage = 0;
-                currContentFilter = 1;
-                getRequest(
-                    Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'),
-                    (data, header) => {
-                        HandleSnack("Filtro aplicado com sucesso!", true, 'success', '#228B22')
-                        const arrData = [...data]
-                        setItems(arrData.concat(AddOneLenght))
-                        setIsUpdating(false)
-                    },
-                    (error) => {
-                        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                        setIsUpdating(false)
-                    }
-                )
-                break;
-            case "Permanente":
-                currPage = 0;
-                currContentFilter = 2;
-                getRequest(
-                    Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'),
-                    (data, header) => {
-                        HandleSnack("Filtro aplicado com sucesso!", true, 'success', '#228B22')
-                        const arrData = [...data]
-                        setItems(arrData.concat(AddOneLenght))
-                        setIsUpdating(false)
-                    },
-                    (error) => {
-                        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                        setIsUpdating(false)
-                    }
-                )
-                break;
-            default:
-                currPage = 0;
-                currContentFilter = 1;
-                getRequest(
-                    Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'),
-                    (data, header) => {
-                        HandleSnack("Filtro aplicado com sucesso!", true, 'success', '#228B22')
-                        const arrData = [...data]
-                        setItems(arrData.concat(AddOneLenght))
-                        setIsUpdating(false)
-                    },
-                    (error) => {
-                        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                        setIsUpdating(false)
-                    }
-                )
-                break;
+  };
+
+  const ReactiveUser = (userId, index) => {
+    putRequest(
+      `/users/${userId}/reactivate_user`,
+      {},
+      (data) => {
+        if (data.errors)
+          HandleSnack('Erro!', true, 'warning', '#FA8072')
+        else {
+          HandleSnack('Usuário foi reativado com sucesso!', true, 'success', '#228B22')
+          removeItemFromList(index)
+          setCurrPage(0)
         }
-    }
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+      },
+      (error) => {
+        HandleSnack('Erro!', true, 'warning', '#FA8072')
+      }
+    )
+  }
+
+  const removeItemFromList = (index) => {
+    const copyList = [...items]
+    copyList.splice(index, 1)
+    setItems(copyList)
+  }
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      Url('users', `"state" : ${stateOpt}`, currPage, 'DESC'),
+
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
         } else {
-            getRequest(
-                Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    }
-
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(AddOneLenght))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
-    }
-
-    const BlockStatus = (status) => {
-        switch (status) {
-            case 1:
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#FF8C00",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        SEMANAL
-                    </Paper>
-                );
-            case 2:
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "red",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        PERMANENTE
-                    </Paper>
-                );
-            default:
-                return (
-                    <Paper
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, stateOpt])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+
+    //Words in the top part of the table
+    const topTable = ['ID', 'ESTADO', 'NAME', 'EMAIL', 'BLOQUEADO EM', 'AÇÕES'];
+    if (WINDOW_WIDTH <= 899) {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <MobilePageHeader
+            title="Lista de usuários bloqueados"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+            ]}
+          >
+            <Grid item>
+              <TextField
+                select
+                label="Estado de bloqueio"
+                onChange={handleChange}
+                helperText="Por favor, selecione uma das opções"
+              >
+                {StateOptions.map((option, index) => (
+                  <MenuItem
+                    key={option.value}
+                    value={option.name}
+                    name={option.value}
+                  >
+                    {option.value}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          </MobilePageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton>
+                <Button
+                  key={index}
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
+                    )}
+                </Button>
+              </StyledDivButton>
+            ) : (
+                <>
+                  <MobileList
+                    key={index}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#e81f4f"}
+                    avatar={
+                      <img
+                        src={row.avatar ? apiDomain + row.avatar : noAvatar}
+                        alt="user avatar"
                         style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#797D7F",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
+                          height: "100%",
+                          width: "100%",
+                          borderRadius: "50%",
                         }}
-                    >
-                        Não avaliado
-                    </Paper>
-                );
-        }
-    };
-
-    const ReactiveUser = (userId) => {
-        putRequest(
-            `/users/${userId}/reactivate_user`,
-            {},
-            (data) => {
-                if (data.errors)
-                    HandleSnack('Erro!', true, 'warning', '#FA8072')
-                else {
-                    currPage = 0
-                    HandleSnack('Usuário foi reativado com sucesso!', true, 'success', '#228B22')
-                    UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
-                }
-            },
-            (error) => {
-                HandleSnack('Erro!', true, 'warning', '#FA8072')
-            }
-        )
-    }
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    useEffect(() => {
-        getRequest(
-            Url('users', `"state" : "${currContentFilter}"`, '0', 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(AddOneLenght));
-            },
-            (error) => {
-                setError(true);
-            }
-        )
-    }, []);
-
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-
-        //Words in the top part of the table
-        const topTable = ['ID', 'ESTADO', 'NAME', 'EMAIL', 'BLOQUEADO EM', 'AÇÕES'];
-        if (WINDOW_WIDTH <= 899) {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container direction="row" alignItems="center">
-                            <Grid container spacing={3} >
-                                <Grid item xs={12}>
-                                    <Typography variant="h4">
-                                        Lista de usuários bloqueados
-                                    </Typography>
-                                </Grid>
-                                <Grid
-                                    item
-                                    xs={12} 
-                                
-                                >
-                                    <Grid container justify="flex-start" spacing={3}>
-                                        <Grid item>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                disabled={isUpdating}
-                                                onClick={() => {
-                                                    currPage = 0
-                                                    transformListToAsc = false
-                                                    UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
-                                                }}
-                                                startIcon={<UpdateRoundedIcon />}
-                                            >
-                                                {
-                                                    isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                                }
-                                            </Button>
-                                        </Grid>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                            <Grid item>
-                                <TextField
-                                    select
-                                    label="Estado de bloqueio"
-                                    onChange={handleChange}
-                                    helperText="Por favor, selecione uma das opções"
-                                >
-                                    {StateOptions.map((option, index) => (
-                                        <MenuItem
-                                            key={option.id}
-                                            value={option.name}
-                                            name={option.id}
-                                        >
-                                            {option.name}
-                                        </MenuItem>
-                                    ))}
-                                </TextField>
-                            </Grid>
-
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#e81f4f"}
-                                        avatar={
-                                            <img
-                                                src={row.avatar ? apiDomain + row.avatar : noAvatar}
-                                                alt="user avatar"
-                                                style={{
-                                                    height: "100%",
-                                                    width: "100%",
-                                                    borderRadius: "50%",
-                                                }}
-                                            />
-                                        }
-                                        href={`/admin/user/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0; transformListToAsc = false; currContentFilter = 1
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Email",
-                                                    subtitle: row.email ?
-                                                        <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
-                                                            <Button
-                                                                variant='text'
-                                                                color='primary'
-                                                                startIcon={<EmailRoundedIcon />}
-                                                            >
-                                                                {row.email}
-                                                            </Button>
-                                                        </Link> : null
-
-                                                },
-                                                {
-                                                    title: "Estado",
-                                                    subtitle: BlockStatus(currContentFilter)
-                                                },
-                                                {
-                                                    title: "Ações rápidas",
-                                                    subtitle: <Button
-                                                        style={{ width: "100%", marginBottom: "0.5em" }}
-                                                        variant="contained"
-                                                        color="secondary"
-                                                        startIcon={<RemoveCircleOutlineRoundedIcon />}
-                                                        onClick={() => ReactiveUser(row.id)}
-                                                    >
-                                                        Desbloquear
+                      />
+                    }
+                    href={`/admin/user/${row.id}`}
+                    reset={() => {
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Email",
+                          subtitle: row.email ?
+                            <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+                              <Button
+                                variant='text'
+                                color='primary'
+                                startIcon={<EmailRoundedIcon />}
+                              >
+                                {row.email}
+                              </Button>
+                            </Link> : null
+
+                        },
+                        {
+                          title: "Estado",
+                          subtitle: BlockStatus(row.state)
+                        },
+                        {
+                          title: "Ações rápidas",
+                          subtitle: <Button
+                            style={{ width: "100%", marginBottom: "0.5em" }}
+                            variant="contained"
+                            color="secondary"
+                            startIcon={<RemoveCircleOutlineRoundedIcon />}
+                            onClick={() => ReactiveUser(row.id, index)}
+                          >
+                            Desbloquear
                                                     </Button>
-                                                }
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
-                    )}
-                </div>
-            )
-        }
-        else {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container direction="row" alignItems="center">
-                            <Grid container spacing={3} >
-                                <Grid item xs={6}>
-                                    <Typography variant="h4">
-                                        Lista de usuários bloqueados
-                                    </Typography>
-                                </Grid>
-                                <Grid
-                                    item
-                                    xs={6}
-                                >
-                                    <Grid container justify="flex-end" spacing={3}>
-                                        <Grid item>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                disabled={isUpdating}
-                                                onClick={() => {
-                                                    currPage = 0
-                                                    transformListToAsc = false
-                                                    UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
-                                                }}
-                                                startIcon={<UpdateRoundedIcon />}
-                                            >
-                                                {
-                                                    isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                                }
-                                            </Button>
-                                        </Grid>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                            <Grid item>
-                                <TextField
-                                    select
-                                    label="Estado de bloqueio"
-                                    onChange={handleChange}
-                                    helperText="Por favor, selecione uma das opções"
-                                >
-                                    {StateOptions.map((option, index) => (
-                                        <MenuItem
-                                            key={option.id}
-                                            value={option.name}
-                                            name={option.id}
-                                        >
-                                            {option.name}
-                                        </MenuItem>
-                                    ))}
-                                </TextField>
-                            </Grid>
-
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    <TableData
-                        top={topTable}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-
-                                    :
-
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {BlockStatus(currContentFilter)}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row.email ?
-                                                    <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
-                                                        <Button
-                                                            variant='text'
-                                                            color='primary'
-                                                            startIcon={<EmailRoundedIcon />}
-                                                        >
-                                                            {row.email}
-                                                        </Button>
-                                                    </Link> : null
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {DisplayDate(row.suspended_at)}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Button
-                                                style={{ width: "100%", marginBottom: "0.5em" }}
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<RemoveCircleOutlineRoundedIcon />}
-                                                onClick={() => ReactiveUser(row.id)}
-                                            >
-                                                Desbloquear
+                        }
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+        </div>
+      )
+    }
+    else {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <PageHeader
+            title="Lista de usuários bloqueados"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+            ]}
+          >
+            <Grid item>
+              <TextField
+                select
+                label="Estado de bloqueio"
+                onChange={handleChange}
+                helperText="Por favor, selecione uma das opções"
+              >
+                {StateOptions.map((option, index) => (
+                  <MenuItem
+                    key={option.value}
+                    value={option.name}
+                    name={option.value}
+                  >
+                    {option.value}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          </PageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          <TableData
+            top={topTable}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key={index}>
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {
+                          isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+                        }
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+
+                  :
+
+                  <StyledTableRow key={index}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {BlockStatus(row.state)}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row.email ?
+                          <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+                            <Button
+                              variant='text'
+                              color='primary'
+                              startIcon={<EmailRoundedIcon />}
+                            >
+                              {row.email}
+                            </Button>
+                          </Link> : null
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {DisplayDate(row.suspended_at)}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Button
+                        style={{ width: "100%", marginBottom: "0.5em" }}
+                        variant="contained"
+                        color="secondary"
+                        startIcon={<RemoveCircleOutlineRoundedIcon />}
+                        onClick={() => ReactiveUser(row.id, index)}
+                      >
+                        Desbloquear
                                             </Button>
-                                            <Link to={`/admin/user/${row.id}`}>
-                                                <Button
-                                                    onClick={() => { currPage = 0; transformListToAsc = false; currContentFilter = 1 }}
-                                                    style={{ width: "100%" }}
-                                                    variant="contained"
-                                                    color="primary"
-                                                    startIcon={<VisibilityIcon />}
-                                                >
-                                                    Visualizar
+                      <Link to={`/admin/user/${row.id}`}>
+                        <Button
+                          style={{ width: "100%" }}
+                          variant="contained"
+                          color="primary"
+                          startIcon={<VisibilityIcon />}
+                        >
+                          Visualizar
                                                 </Button>
-                                            </Link>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
-                </div>
-            )
-        }
+                      </Link>
+                    </StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+        </div>
+      )
     }
+  }
 }
 
 
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index 763aa71ea6aaf28df4411103b5fd0ad77c850c15..493d50a296f8fe1e4b9d104f8802e63596a97b5e 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -24,6 +24,9 @@ import SnackBar from "../../../../Components/SnackbarComponent";
 import { Url, DeleteFilter } from "../../../Filters";
 import AlertDialog from "../../../Components/Components/AlertDialog";
 import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //imports from material ui
 import { withStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
@@ -33,7 +36,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import IconButton from "@material-ui/core/IconButton";
-import { Button, Typography, Paper, Grid } from "@material-ui/core";
+import { Button, Paper, Grid } from "@material-ui/core";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -41,654 +44,561 @@ import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import DeleteIcon from "@material-ui/icons/Delete";
 import {
-    deleteRequest,
-    getRequest,
+  deleteRequest,
+  getRequest,
 } from "../../../../Components/HelperFunctions/getAxiosConfig";
 //routers
 import { Link } from "react-router-dom";
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import styled from 'styled-components'
 
-let currPage = 0;
-let currPrivacyFilter = "";
-let currNameFilter = "";
-
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        "&:nth-of-type(odd)": {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Collections = () => {
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = [
-        "NOME",
-        "DESCRIÇÃO",
-        "DONO(A)",
-        "CRIAÇÃO",
-        "ATUALIZAÇÃO",
-        "PRIVACIDADE",
-        "VISUALIZAR",
-        "DELETAR",
-    ]; //Labels from Table
-
-    const WINDOW_WIDTH = window.innerWidth;
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-
-    const [showFilter, setShowFilter] = useState(false);
-    const [search, setSearch] = useState("");
-
-    const [openAlertDialog, setOpenAlertDialog] = useState(false);
-    const [deleteItem, setDeleteItem] = useState({}); //Delete Item
-    const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
-
-    const [option, setOption] = useState("Todos os usuários"); //labels of the text field 'to'
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: "",
-        icon: "",
-        open: false,
-        color: "",
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "NOME",
+    "DESCRIÇÃO",
+    "DONO(A)",
+    "CRIAÇÃO",
+    "ATUALIZAÇÃO",
+    "PRIVACIDADE",
+    "VISUALIZAR",
+    "DELETAR",
+  ]; //Labels from Table
+
+  const WINDOW_WIDTH = window.innerWidth;
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+
+  const [showFilter, setShowFilter] = useState(false);
+  const [valueOfSearch, setValueOfSearch] = useState("")
+  const [search, setSearch] = useState("");
+  const [currPage, setCurrPage] = useState(0)
+
+  const [openAlertDialog, setOpenAlertDialog] = useState(false);
+  const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+  const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+  const [option, setOption] = useState(); //labels of the text field 'to'
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const privacyOptions = [
+    { name: "private", value: "Privado" },
+    { name: "public", value: "Público" }
+  ];
+
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
     });
-
-    const options = [
-        {
-            value: "private",
-            label: "Privado",
-        },
-        {
-            value: "public",
-            label: "Público",
-        },
-    ];
-
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color,
-        });
-    };
-
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true);
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                if (arrData.length === 0) {
-                    HandleSnack(
-                        "Não há mais dados para serem carregados",
-                        true,
-                        "warning",
-                        "#FFC125"
-                    );
-                } else {
-                    const arrItems = [...items];
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-                    const arrResult = arrItems.concat(arrData);
-                    setItems(arrResult.concat(ADD_ONE_LENGHT));
-                }
-                setIsLoadingMoreItems(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoadingMoreItems(false);
-            }
-        );
-    };
-
-    //Defines which row must show the circular progress
-    const HandleStateCircularProgress = (i) => {
-        setIsLoadingToDelete(i);
-    };
-
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true);
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack(
-                    "A lista de dados foi atualizada",
-                    true,
-                    "success",
-                    "#228B22"
-                );
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsUpdating(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsUpdating(false);
-            }
-        );
-    };
-
-    //Called when user want to delete one institution
-    async function DeleteHandler() {
-        const id = deleteItem.id;
-        HandleStateAlertDialog(null);
-        deleteRequest(
-            DeleteFilter("collections", id),
-            (data) => {
-                if (data.errors)
-                    HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        "A Coleção foi deletada com sucesso",
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    HandleStateCircularProgress(null);
-                    UpdateHandler(Url("collections", "", `${currPage}`, "DESC"));
-                }
-            },
-            (error) => {
-                HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                HandleStateCircularProgress(null);
-            }
-        );
+  };
+
+  //Defines which row must show the circular progress
+  const HandleStateCircularProgress = (i) => {
+    setIsLoadingToDelete(i);
+  };
+
+  //Called when user want to delete one institution
+  async function DeleteHandler() {
+    const id = deleteItem.id;
+    HandleStateAlertDialog(null);
+    deleteRequest(
+      DeleteFilter("collections", id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "A Coleção foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          HandleStateCircularProgress(null);
+          removeItemFromList(id);
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        HandleStateCircularProgress(null);
+      }
+    );
+  }
+
+  //Controlls the state of the Alert Dialog
+  const HandleStateAlertDialog = (i) => {
+    const obj = { ...items[i] };
+    setDeleteItem(obj);
+    setOpenAlertDialog(!openAlertDialog);
+  };
+
+  // handle change of privacy
+  const handleChange = (e) => {
+    setOption(e.target.value);
+  };
+
+  const HandleSearch = (e) => {
+    setValueOfSearch(e.target.value)
+  }
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const buildUrl = (privacyOpt, name) => {
+    if (privacyOpt && name)
+      return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
+    else if (privacyOpt)
+      return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
+    else if (name)
+      return Url("collections", `"name" : "${name}"`, currPage, "DESC")
+    else
+      return Url("collections", "", currPage, "DESC")
+  }
+
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
+      }
     }
-
-    //Controlls the state of the Alert Dialog
-    const HandleStateAlertDialog = (i) => {
-        const obj = { ...items[i] };
-        setDeleteItem(obj);
-        setOpenAlertDialog(!openAlertDialog);
-    };
-
-    const ApplyFilter = (value) => {
-        currPrivacyFilter = value
-        currPage = 0;
-        setIsLoaded(false);
-        getRequest(
-            Url(
-                "collections",
-                `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
-        );
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
     }
-
-    // handle change of privacy
-    const handleChange = (e) => {
-        setOption(e.target.value);
-    };
-
-    //Handle the search filter
-    const HandleSearch = (event) => {
-        currNameFilter = event.target.value
-        setSearch(currNameFilter);
-        getRequest(
-            Url(
-                "collections",
-                `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
-        );
-    };
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url(
-                "collections",
-                `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                `${currPage}`,
-                "DESC"
-            ),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsLoaded(true);
-                setError(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(false);
-                setError(true);
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(option, search),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, search, option])
+
+  useEffect(() => {
+    setCurrPage(0)
+    setOption()
+    setSearch("")
+    setValueOfSearch("")
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    if (WINDOW_WIDTH <= 1024) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
             }
-        );
-    }, []);
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />;
-    } else {
-        if (WINDOW_WIDTH <= 954) {
-            return (
-                <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">Coleções</Typography>
-                            </Grid>
-                            <Grid item xs={12}>
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                UpdateHandler(
-                                                    Url(
-                                                        "collections",
-                                                        `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                                                        `${currPage}`,
-                                                        "DESC"
-                                                    )
-                                                );
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        {showFilter ? (
-                            <>
-                                <div style={{ height: "1em" }}></div>
-
-                                <Grid
-                                    container
-                                    alignItems="center"
-                                    alignContent="center"
-                                    xs={12}
-                                    direction="row"
-                                    justify="space-between"
-                                >
-                                    <Grid item>
-                                        <TextField
-                                            select
-                                            label="Filtro"
-                                            value={option ? option : ""}
-                                            onChange={handleChange}
-                                            helperText="Por favor, selecione uma das opções"
-                                        >
-                                            {options.map((option, index) => (
-                                                <MenuItem key={index} value={option.value} onClick={() => { ApplyFilter(option.value) }}>
-                                                    {option.label}
-                                                </MenuItem>
-                                            ))}
-                                        </TextField>
-                                    </Grid>
-
-                                    <Grid item>
-                                        <TextField
-                                            label="Pesquisa"
-                                            value={search}
-                                            onChange={(event) => HandleSearch(event)}
-                                        ></TextField>
-                                    </Grid>
-                                </Grid>
-                            </>
-                        ) : null}
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++;
-                                        LoadMoreItens(
-                                            Url(
-                                                "collections",
-                                                `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                                                `${currPage}`,
-                                                "DESC"
-                                            )
-                                        );
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.privacy}
-                                        backColor={"#e81f4f"}
-                                        avatar={<PeopleRoundedIcon />}
-                                        href={`/admin/Collection/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                            currPrivacyFilter = "";
-                                            currNameFilter = "";
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "ID",
-                                                    subtitle: row.id
-
-                                                },
-                                                {
-                                                    title: "Dono(a)",
-                                                    subtitle: row.owner ? row.owner.name : "Sem dados"
-
-                                                },
-                                                {
-                                                    title: "Criado em",
-                                                    subtitle: DisplayDate(row.created_at)
-                                                },
-                                                {
-                                                    title: "Atualizado em",
-                                                    subtitle: DisplayDate(row.updated_at)
-                                                }
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
+          />
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+          <MobilePageHeader
+            title="Coleções"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <>
+                <div style={{ height: "1em" }}></div>
+
+                <Grid
+                  container
+                  alignItems="center"
+                  alignContent="center"
+                  xs={12}
+                  direction="row"
+                  justify="space-between"
+                >
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Filtro"
+                      value={option}
+                      onChange={handleChange}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {privacyOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+
+                  <Grid item>
+                    <TextField
+                      label="Pesquisa"
+                      value={valueOfSearch}
+                      helperText="Ao digitar, tire o foco do campo de texto"
+                      onChange={(event) => HandleSearch(event)}
+                      onBlur={(event) => setSearch(event.target.value)}
+                    ></TextField>
+                  </Grid>
+                </Grid>
+              </>
+            ) : null}
+          </MobilePageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton
+                key="Load more"
+              >
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
                     )}
-                </>
-            );
-        }
-        else {
-            return (
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
+                  <MobileList
+                    key={index}
+                    title={row.name}
+                    subtitle={row.privacy}
+                    backColor={"#e81f4f"}
+                    avatar={<PeopleRoundedIcon />}
+                    href={`/admin/Collection/${row.id}`}
+                    reset={() => {
+
+                    }}
+                    data={
+                      [
+                        {
+                          title: "ID",
+                          subtitle: row.id
+
+                        },
+                        {
+                          title: "Dono(a)",
+                          subtitle: row.owner ? row.owner.name : "Sem dados"
+
+                        },
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                        {
+                          title: "Atualizado em",
+                          subtitle: DisplayDate(row.updated_at)
+                        },
+                        {
+                          title: "Deletar",
+                          subtitle:
+                            <Button
+                              variant="contained"
+                              color="secondary"
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
+                              startIcon={<DeleteIcon />}
+                            >
+                              Deletar
+                            </Button>
                         }
-                    />
-
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">Coleções</Typography>
-                            </Grid>
-                            <Grid item xs={6}>
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                UpdateHandler(
-                                                    Url(
-                                                        "collections",
-                                                        `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                                                        `${currPage}`,
-                                                        "DESC"
-                                                    )
-                                                );
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        {showFilter ? (
-                            <>
-                                <div style={{ height: "1em" }}></div>
-
-                                <Grid
-                                    container
-                                    alignItems="center"
-                                    alignContent="center"
-                                    xs={12}
-                                    direction="row"
-                                    justify="space-between"
-                                >
-                                    <Grid item>
-                                        <TextField
-                                            select
-                                            label="Filtro"
-                                            value={option ? option : ""}
-                                            onChange={handleChange}
-                                            helperText="Por favor, selecione uma das opções"
-                                        >
-                                            {options.map((option, index) => (
-                                                <MenuItem key={index} value={option.value} onClick={() => { ApplyFilter(option.value) }}>
-                                                    {option.label}
-                                                </MenuItem>
-                                            ))}
-                                        </TextField>
-                                    </Grid>
-
-                                    <Grid item>
-                                        <TextField
-                                            label="Pesquisa"
-                                            value={search}
-                                            onChange={(event) => HandleSearch(event)}
-                                        ></TextField>
-                                    </Grid>
-                                </Grid>
-                            </>
-                        ) : null}
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    <TableData top={TOP_LABELS}>
-                        <TableBody>
-                            {items.map((row, index) =>
-                                index === items.length - 1 ? (
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell>
-                                            <Button
-                                                key={index}
-                                                color="primary"
-                                                variant="text"
-                                                // disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                disabled={isLoadingMoreItems}
-                                                onClick={() => {
-                                                    currPage++;
-                                                    LoadMoreItens(
-                                                        Url(
-                                                            "collections",
-                                                            `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
-                                                            `${currPage}`,
-                                                            "DESC"
-                                                        )
-                                                    );
-                                                }}
-                                            >
-                                                {isLoadingMoreItems ? (
-                                                    <CircularProgress size={24} />
-                                                ) : (
-                                                        "Carregar mais itens"
-                                                    )}
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                                ) : (
-                                        <StyledTableRow key={index}>
-                                            <StyledTableCell component="th" scope="row">
-                                                {row.name}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                <div
-                                                    dangerouslySetInnerHTML={{ __html: row.description }}
-                                                ></div>
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {row.owner ? row.owner.name : "Sem dados"}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {DisplayDate(row.created_at)}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {DisplayDate(row.updated_at)}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">{row.privacy}</StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                <Link to={`/admin/Collection/${row.id}`}>
-                                                    <IconButton
-                                                        onClick={() => {
-                                                            currPage = 0;
-                                                            currPrivacyFilter = "";
-                                                            currNameFilter = "";
-                                                        }}
-                                                    >
-                                                        <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                    </IconButton>
-                                                </Link>
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {isLoadingToDelete === index ? (
-                                                    <CircularProgress size={24} color="primary" />
-                                                ) : (
-                                                        <IconButton
-                                                            onClick={() => {
-                                                                HandleStateAlertDialog(index);
-                                                                HandleStateCircularProgress(index);
-                                                            }}
-                                                        >
-                                                            <DeleteIcon style={{ fill: "#FF0000" }} />
-                                                        </IconButton>
-                                                    )}
-                                            </StyledTableCell>
-                                        </StyledTableRow>
-                                    )
-                            )}
-                        </TableBody>
-                    </TableData>
-
-                    {/* This alert will be displayed if the user click to delete an institution */}
-                    <AlertDialog
-                        open={openAlertDialog}
-                        OnDelete={DeleteHandler}
-                        deleteItem={deleteItem}
-                        HandleClose={() => {
-                            setOpenAlertDialog(false);
-                            HandleStateCircularProgress(null);
-                        }}
-                    />
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
                 </>
-            );
-        }
+              )
+          )}
+        </>
+      );
+    }
+    else {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
+            }
+          />
+
+          <PageHeader
+            title="Coleções"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <>
+                <div style={{ height: "1em" }}></div>
+
+                <Grid
+                  container
+                  alignItems="center"
+                  alignContent="center"
+                  xs={12}
+                  direction="row"
+                  justify="space-between"
+                >
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Filtro"
+                      value={option}
+                      onChange={handleChange}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {privacyOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+
+                  <Grid item>
+                    <TextField
+                      label="Pesquisa"
+                      value={valueOfSearch}
+                      helperText="Ao digitar, tire o foco do campo de texto"
+                      onChange={(event) => HandleSearch(event)}
+                      onBlur={(event) => setSearch(event.target.value)}
+                    ></TextField>
+                  </Grid>
+                </Grid>
+              </>
+            ) : null}
+          </PageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          <TableData top={TOP_LABELS}>
+            <TableBody>
+              {items.map((row, index) =>
+                index === items.length - 1 ? (
+                  <StyledTableRow key={row.created_at}>
+                    <StyledTableCell>
+                      <Button
+                        key={index}
+                        color="primary"
+                        variant="text"
+                        // disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        disabled={isLoadingMoreItems}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {isLoadingMoreItems ? (
+                          <CircularProgress size={24} />
+                        ) : (
+                            "Carregar mais itens"
+                          )}
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+                ) : (
+                    <StyledTableRow key={index}>
+                      <StyledTableCell component="th" scope="row">
+                        {row.name}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        <div
+                          dangerouslySetInnerHTML={{ __html: row.description }}
+                        ></div>
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        {row.owner ? row.owner.name : "Sem dados"}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        {DisplayDate(row.created_at)}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        {DisplayDate(row.updated_at)}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">{row.privacy}</StyledTableCell>
+                      <StyledTableCell align="right">
+                        <Link to={`/admin/Collection/${row.id}`}>
+                          <IconButton>
+                            <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                          </IconButton>
+                        </Link>
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        {isLoadingToDelete === index ? (
+                          <CircularProgress size={24} color="primary" />
+                        ) : (
+                            <IconButton
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
+                            >
+                              <DeleteIcon style={{ fill: "#FF0000" }} />
+                            </IconButton>
+                          )}
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  )
+              )}
+            </TableBody>
+          </TableData>
+
+          {/* This alert will be displayed if the user click to delete an institution */}
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+        </>
+      );
     }
+  }
 };
 export default Collections;
 
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 8941b8c8d298f11c0ad42917738d09a58473c236..c3a78462f902dac0099fbeee4d00ed18f3b28d14 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -26,753 +26,507 @@ import { Url } from "../../../Filters";
 import { Store } from '../../../../Store';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import PageHeader from "../../../Components/Components/PageHeader"
 //imports from material ui
 import { withStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
-import Popover from "@material-ui/core/Popover";
 import IconButton from "@material-ui/core/IconButton";
-import { Button, Typography, Paper, Grid } from "@material-ui/core";
+import { Button, Paper, Grid } from "@material-ui/core";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
-import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
 import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
 //routers
 import { Link } from 'react-router-dom';
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import styled from "styled-components"
 
-let currPage = 0;
-
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        "&:nth-of-type(odd)": {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const CommunityQuestion = () => {
-    const { state } = useContext(Store);
-
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = [
-        "ID",
-        "DATA DE CONTATO",
-        "NOME",
-        "EMAIL",
-        "MENSAGEM",
-        "VISUALIZAR"
-    ]; //Labels from Table
-    const WINDOW_WIDTH = window.innerWidth
-
-    const [anchorEl, setAnchorEl] = React.useState(null);
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-
-    //Works with the filter
-    const [showMessageFilter, setShowMessageFilter] = useState(false);
-    const [showEmailFilter, setShowEmailFilter] = useState(false);
-    const [showNameFilter, setShowNameFilter] = useState(false);
-    const [message, setMessage] = useState("");
-    const [email, setEmail] = useState("");
-    const [name, setName] = useState("");
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: "",
-        icon: "",
-        open: false,
-        color: "",
+  const { state } = useContext(Store);
+
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ID",
+    "DATA DE CONTATO",
+    "NOME",
+    "EMAIL",
+    "MENSAGEM",
+    "VISUALIZAR"
+  ]; //Labels from Table
+  const WINDOW_WIDTH = window.innerWidth
+
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+  const [currPage, setCurrPage] = useState(0)
+
+  //Works with the filter
+  const [showFilter, setShowFilter] = useState(false)
+  const [valueOfMessageField, setValueOfMessageField] = useState("")
+  const [message, setMessage] = useState("");
+  const [valueOfEmailField, setValueOfEmailField] = useState("")
+  const [email, setEmail] = useState("");
+  const [valueOfNameField, setValueOfNameField] = useState("")
+  const [name, setName] = useState("");
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  //handle with the message filter
+  const valueOfMessageHandler = (e) => {
+    setValueOfMessageField(e.target.value)
+  }
+
+  //handle with the email filter
+  const valueOfEmailHandler = (e) => {
+    setValueOfEmailField(e.target.value)
+  }
+
+  //handle with the name filter
+  const valueOfNameHandler = (e) => {
+    setValueOfNameField(e.target.value)
+  }
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
     });
-
-    //handle with the message filter
-    const MessageFilterHandler = (e) => {
-        setMessage(e.target.value)
-        getRequest(
-            Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, currPage, 'DESC'),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-            },
-            (error) => {
-                HandleSnack("Não achamos nada na nossa base de dados!", true, "warning", "#FA8072");
-            }
-        )
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true;
     }
-
-    //handle with the email filter
-    const EmailFilterHandler = (e) => {
-        setEmail(e.target.value)
-        getRequest(
-            Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, currPage, 'DESC'),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-            },
-            (error) => {
-                HandleSnack("Não achamos nada na nossa base de dados!", true, "warning", "#FA8072");
-            }
-        )
-    }
-
-    //handle with the name filter
-    const NameFilterHandler = (e) => {
-        setName(e.target.value)
-        getRequest(
-            Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, currPage, 'DESC'),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-            },
-            (error) => {
-                HandleSnack("Não achamos nada na nossa base de dados!", true, "warning", "#FA8072");
-            }
-        )
+    else {
+      canUserEdit = false;
     }
 
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color,
-        });
-    };
-
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const open = Boolean(anchorEl);
-    const id = open ? 'simple-popover' : undefined;
-
-    //handle load more items
-    const LoadMoreItens = (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                if (arrData.length === 0) {
-                    HandleSnack(
-                        "Não há mais dados para serem carregados",
-                        true,
-                        "warning",
-                        "#FFC125"
-                    );
-                } else {
-                    const arrItems = [...items];
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-                    const arrResult = arrItems.concat(arrData);
-                    setItems(arrResult.concat(ADD_ONE_LENGHT));
-                }
-                setIsLoadingMoreItems(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoadingMoreItems(false);
-            }
-        )
-    };
-
-    // handle update list data
-    const UpdateHandler = (api) => {
-        setIsUpdating(true);
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack(
-                    "A lista de dados foi atualizada",
-                    true,
-                    "success",
-                    "#228B22"
-                );
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsUpdating(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsUpdating(false);
-            }
-        )
-    };
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    const CheckUserPermission = () => {
-        let canUserEdit = false;
-
-        if (state.userIsLoggedIn) {
-            const roles = [...state.currentUser.roles];
-            for (let i = 0; i < roles.length; i++)
-                if (roles[i].name === 'admin' || roles[i].name === 'editor')
-                    canUserEdit = true;
+    return canUserEdit;
+  }
+
+  const buildUrl = (message, email, name) => {
+    if (message && email && name)
+      return Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, currPage, "DESC")
+
+    else if (message && name)
+      return Url("contacts", `"message" : "${message}", "name" : "${name}"`, currPage, "DESC")
+    else if (message && email)
+      return Url("contacts", `"message" : "${message}", "email" : "${email}"`, currPage, "DESC")
+    else if (name && email)
+      return Url("contacts", `"name" : "${name}", "email" : "${email}"`, currPage, "DESC")
+
+    else if (message)
+      return Url("contacts", `"message" : "${message}"`, currPage, "DESC")
+    else if (email)
+      return Url("contacts", `"email" : "${email}"`, currPage, "DESC")
+    else if (name)
+      return Url("contacts", `"name" : "${name}"`, currPage, "DESC")
+    else
+      return Url("contacts", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(message, email, name),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-        else {
-            canUserEdit = false;
-        }
-
-        return canUserEdit;
-    }
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC"),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsLoaded(true);
-                setError(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-                setError(true);
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, message, email, name])
+
+  useEffect(() => {
+    setCurrPage(0)
+    setName("")
+    setValueOfNameField("")
+    setEmail("")
+    setValueOfEmailField("")
+    setMessage("")
+    setValueOfMessageField("")
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    if (WINDOW_WIDTH <= 1200) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
             }
-        )
-    }, []);
- 
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else if (CheckUserPermission()) {
-        if (WINDOW_WIDTH <= 1200) {
-            return (
+          />
+          <MobilePageHeader
+            title="Dúvidas da comunidade"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <Grid
+                container
+                direction="row"
+                justify="space-between"
+                alignItems="center"
+                alignContent="flex-end"
+                spacing={3}
+                xs={12}
+              >
+                <Grid item>
+                  <TextField
+                    label="Email"
+                    value={valueOfEmailField}
+                    onChange={valueOfEmailHandler}
+                    onBlur={(e) => { setEmail(e.target.value) }}
+                    helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+                  >
+                  </TextField>
+                </Grid>
+                <Grid item>
+                  <TextField
+                    label="Mensagem"
+                    value={valueOfMessageField}
+                    onChange={valueOfMessageHandler}
+                    onBlur={(e) => { setMessage(e.target.value) }}
+                    helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+                  >
+                  </TextField>
+                </Grid>
+                <Grid item>
+                  <TextField
+                    label="Nome"
+                    value={valueOfNameField}
+                    onChange={valueOfNameHandler}
+                    onBlur={(e) => { setName(e.target.value) }}
+                    helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                  >
+                  </TextField>
+                </Grid>
+              </Grid>
+            ) : null}
+          </MobilePageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton
+                key="Load more"
+              >
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
+                    )}
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">Dúvidas da comunidade</Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                UpdateHandler(
-                                                    Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
-                                                );
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={(e) => {
-                                                handleClick(e);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                        <Popover
-                                            id={id}
-                                            open={open}
-                                            anchorEl={anchorEl}
-                                            onClose={handleClose}
-                                            anchorOrigin={{
-                                                vertical: 'bottom',
-                                                horizontal: 'center',
-                                            }}
-                                            transformOrigin={{
-                                                vertical: 'top',
-                                                horizontal: 'center',
-                                            }}
-                                        >
-                                            <Button
-                                                onClick={() => setShowEmailFilter(!showEmailFilter)}
-                                                color={showEmailFilter ? 'primary' : 'default'}
-                                                variant='text'
-                                            >
-                                                EMAIL
-                                            </Button>
-
-                                            <Button
-                                                onClick={() => setShowMessageFilter(!showMessageFilter)}
-                                                color={showMessageFilter ? 'primary' : 'default'}
-                                                variant='text'
-                                            >
-                                                MENSAGEM
-                                            </Button>
-
-                                            <Button
-                                                onClick={() => setShowNameFilter(!showNameFilter)}
-                                                color={showNameFilter ? 'primary' : 'default'}
-                                                variant='text'
-                                            >
-                                                NOME
-                                            </Button>
-                                        </Popover>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <div style={{ height: '1.5em' }}></div>
-
-                        <Grid item xs={12}>
-                            <Grid container justify="space-between" spacing={3}>
-                                {
-                                    showMessageFilter ?
-                                        <Grid item >
-                                            <TextField
-                                                label='Mensagem'
-                                                type="search"
-                                                onChange={(e) => MessageFilterHandler(e)}
-                                            />
-                                            <IconButton
-                                                size="small"
-                                                color="primary"
-                                                onClick={() => {
-                                                    currPage = 0;
-                                                    setMessage("")
-                                                    UpdateHandler(
-                                                        Url("contacts", `"message" : "", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
-                                                    );
-                                                    setShowMessageFilter(false)
-                                                }}
-                                            >
-                                                <CancelRoundedIcon />
-                                            </IconButton>
-                                        </Grid> : null
-                                }
-                                {
-                                    showEmailFilter ?
-                                        <Grid item>
-                                            <TextField
-                                                label='Email'
-                                                type="search"
-                                                onChange={(e) => EmailFilterHandler(e)}
-                                            />
-                                            <IconButton
-                                                size="small"
-                                                color="primary"
-                                                onClick={() => {
-                                                    currPage = 0;
-                                                    setEmail("")
-                                                    UpdateHandler(
-                                                        Url("contacts", `"message" : "${message}", "email" : "", "name" : "${name}"`, `${currPage}`, "DESC")
-                                                    );
-                                                    setShowEmailFilter(false)
-                                                }}
-                                            >
-                                                <CancelRoundedIcon />
-                                            </IconButton>
-                                        </Grid> : null
-                                }
-                                {
-                                    showNameFilter ?
-                                        <Grid item>
-                                            <TextField
-                                                label='Nome'
-                                                type="search"
-                                                onChange={(e) => NameFilterHandler(e)}
-                                            />
-                                            <IconButton
-                                                size="small"
-                                                color="primary"
-                                                onClick={() => {
-                                                    currPage = 0;
-                                                    setName("")
-                                                    UpdateHandler(
-                                                        Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : ""`, `${currPage}`, "DESC")
-                                                    );
-                                                    setShowNameFilter(false)
-                                                }}
-                                            >
-                                                <CancelRoundedIcon />
-                                            </IconButton>
-                                        </Grid> : null
-                                }
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
+                  <MobileList
+                    key={index}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#00bcd4"}
+                    avatar={<ContactSupportRoundedIcon />}
+                    href={`/admin/CommunityQuestion/${row.id}`}
+                    reset={() => {
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Email",
+                          subtitle:
+                            row.email ?
+                              <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
                                 <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++;
-                                        LoadMoreItens(
-                                            Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
-                                        );
-                                    }}
+                                  variant='text'
+                                  color='primary'
+                                  startIcon={<EmailRoundedIcon />}
                                 >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
+                                  {row.email}
                                 </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#00bcd4"}
-                                        avatar={<ContactSupportRoundedIcon />}
-                                        href={`/admin/CommunityQuestion/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Email",
-                                                    subtitle:
-                                                        row.email ?
-                                                            <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
-                                                                <Button
-                                                                    variant='text'
-                                                                    color='primary'
-                                                                    startIcon={<EmailRoundedIcon />}
-                                                                >
-                                                                    {row.email}
-                                                                </Button>
-                                                            </Link> : null
-
-                                                },
-                                                {
-                                                    title: "Mensagem",
-                                                    subtitle: row.message
-
-                                                },
-                                                {
-                                                    title: "Criado em",
-                                                    subtitle: DisplayDate(row.created_at)
-                                                },
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
-                    )}
-                </>
-            )
-        }
-        else {
-            return <>
-                <SnackBar
-                    severity={snackInfo.icon}
-                    text={snackInfo.message}
-                    snackbarOpen={snackInfo.open}
-                    color={snackInfo.color}
-                    handleClose={() =>
-                        setSnackInfo({
-                            message: "",
-                            icon: "",
-                            open: false,
-                            color: "",
-                        })
+                              </Link> : null
+
+                        },
+                        {
+                          title: "Mensagem",
+                          subtitle: row.message
+
+                        },
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                      ]
                     }
-                />
-
-                <Paper style={{ padding: "1em" }}>
-                    <Grid container spacing={3} direction="row" alignItems="center">
-                        <Grid item xs={6}>
-                            <Typography variant="h4">Dúvidas da comunidade</Typography>
-                        </Grid>
-                        <Grid
-                            item
-                            xs={6}
-                        >
-                            <Grid container justify="flex-end" spacing={3}>
-                                <Grid item>
-                                    <Button
-                                        variant="contained"
-                                        color="secondary"
-                                        disabled={isUpdating}
-                                        onClick={() => {
-                                            currPage = 0;
-                                            UpdateHandler(
-                                                Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
-                                            );
-                                        }}
-                                        startIcon={<UpdateRoundedIcon />}
-                                    >
-                                        {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                    </Button>
-                                </Grid>
-                                <Grid item>
-                                    <Button
-                                        variant="contained"
-                                        color="secondary"
-                                        onClick={(e) => {
-                                            handleClick(e);
-                                        }}
-                                        startIcon={<FilterListRoundedIcon />}
-                                    >
-                                        Filtrar
-                                </Button>
-                                    <Popover
-                                        id={id}
-                                        open={open}
-                                        anchorEl={anchorEl}
-                                        onClose={handleClose}
-                                        anchorOrigin={{
-                                            vertical: 'bottom',
-                                            horizontal: 'center',
-                                        }}
-                                        transformOrigin={{
-                                            vertical: 'top',
-                                            horizontal: 'center',
-                                        }}
-                                    >
-                                        <Button
-                                            onClick={() => setShowEmailFilter(!showEmailFilter)}
-                                            color={showEmailFilter ? 'primary' : 'default'}
-                                            variant='text'
-                                        >
-                                            EMAIL
-                                    </Button>
-
-                                        <Button
-                                            onClick={() => setShowMessageFilter(!showMessageFilter)}
-                                            color={showMessageFilter ? 'primary' : 'default'}
-                                            variant='text'
-                                        >
-                                            MENSAGEM
-                                    </Button>
-
-                                        <Button
-                                            onClick={() => setShowNameFilter(!showNameFilter)}
-                                            color={showNameFilter ? 'primary' : 'default'}
-                                            variant='text'
-                                        >
-                                            NOME
-                                    </Button>
-                                    </Popover>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Grid>
-
-                    <div style={{ height: '1.5em' }}></div>
-
-                    <Grid item xs={12}>
-                        <Grid container justify="space-between" spacing={3}>
-                            {
-                                showMessageFilter ?
-                                    <Grid item >
-                                        <TextField
-                                            label='Mensagem'
-                                            type="search"
-                                            onChange={(e) => MessageFilterHandler(e)}
-                                        />
-                                        <IconButton
-                                            size="small"
-                                            color="primary"
-                                            onClick={() => {
-                                                currPage = 0;
-                                                setMessage("")
-                                                UpdateHandler(
-                                                    Url("contacts", `"message" : "", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
-                                                );
-                                                setShowMessageFilter(false)
-                                            }}
-                                        >
-                                            <CancelRoundedIcon />
-                                        </IconButton>
-                                    </Grid> : null
-                            }
-                            {
-                                showEmailFilter ?
-                                    <Grid item>
-                                        <TextField
-                                            label='Email'
-                                            type="search"
-                                            onChange={(e) => EmailFilterHandler(e)}
-                                        />
-                                        <IconButton
-                                            size="small"
-                                            color="primary"
-                                            onClick={() => {
-                                                currPage = 0;
-                                                setEmail("")
-                                                UpdateHandler(
-                                                    Url("contacts", `"message" : "${message}", "email" : "", "name" : "${name}"`, `${currPage}`, "DESC")
-                                                );
-                                                setShowEmailFilter(false)
-                                            }}
-                                        >
-                                            <CancelRoundedIcon />
-                                        </IconButton>
-                                    </Grid> : null
-                            }
-                            {
-                                showNameFilter ?
-                                    <Grid item>
-                                        <TextField
-                                            label='Nome'
-                                            type="search"
-                                            onChange={(e) => NameFilterHandler(e)}
-                                        />
-                                        <IconButton
-                                            size="small"
-                                            color="primary"
-                                            onClick={() => {
-                                                currPage = 0;
-                                                setName("")
-                                                UpdateHandler(
-                                                    Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : ""`, `${currPage}`, "DESC")
-                                                );
-                                                setShowNameFilter(false)
-                                            }}
-                                        >
-                                            <CancelRoundedIcon />
-                                        </IconButton>
-                                    </Grid> : null
-                            }
-                        </Grid>
-                    </Grid>
-                </Paper>
-
-                <div style={{ height: "2em" }}></div>
-
-                <TableData top={TOP_LABELS}>
-                    <TableBody>
-                        {items.map((row, index) =>
-                            index === items.length - 1 ? (
-                                <StyledTableRow key={index} style={{ padding: "1em" }}>
-                                    {/* Button to load more data */}
-                                    <StyledTableCell>
-                                        <Button
-                                            color="primary"
-                                            variant="text"
-                                            startIcon={<AddRoundedIcon />}
-                                            disabled={isLoadingMoreItems}
-                                            onClick={() => {
-                                                currPage++;
-                                                LoadMoreItens(
-                                                    Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
-                                                );
-                                            }}
-                                        >
-                                            {isLoadingMoreItems ? (
-                                                <CircularProgress size={24} />
-                                            ) : (
-                                                    "Carregar mais itens"
-                                                )}
-                                        </Button>
-                                    </StyledTableCell>
-                                </StyledTableRow>
-                            ) : (
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">
-                                            {row.id}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {DisplayDate(row.created_at)}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {row.name}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row.email ?
-                                                    <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
-                                                        <Button
-                                                            variant='text'
-                                                            color='primary'
-                                                            startIcon={<EmailRoundedIcon />}
-                                                        >
-                                                            {row.email}
-                                                        </Button>
-                                                    </Link> : null
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {row.message}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/CommunityQuestion/${row.id}`}>
-                                                <IconButton onClick={() => { currPage = 0 }}>
-                                                    <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                </IconButton>
-                                            </Link>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                                )
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+        </>
+      )
+    }
+    else {
+      return <>
+        <SnackBar
+          severity={snackInfo.icon}
+          text={snackInfo.message}
+          snackbarOpen={snackInfo.open}
+          color={snackInfo.color}
+          handleClose={() =>
+            setSnackInfo({
+              message: "",
+              icon: "",
+              open: false,
+              color: "",
+            })
+          }
+        />
+
+        <PageHeader
+          title="Dúvidas da comunidade"
+          actions={[
+            {
+              name: "Atualizar",
+              isLoading: false,
+              func: () => {
+                setCurrPage(0)
+              },
+              icon: <UpdateRoundedIcon />
+            },
+            {
+              name: "Filtrar",
+              isLoading: false,
+              func: () => {
+                setShowFilter(!showFilter);
+              },
+              icon: <FilterListRoundedIcon />
+            }
+          ]}
+        >
+          {showFilter ? (
+            <Grid
+              container
+              direction="row"
+              justify="space-between"
+              alignItems="center"
+              alignContent="flex-end"
+              spacing={3}
+              xs={12}
+            >
+              <Grid item>
+                <TextField
+                  label="Email"
+                  value={valueOfEmailField}
+                  onChange={valueOfEmailHandler}
+                  onBlur={(e) => { setEmail(e.target.value) }}
+                  helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+                >
+                </TextField>
+              </Grid>
+              <Grid item>
+                <TextField
+                  label="Mensagem"
+                  value={valueOfMessageField}
+                  onChange={valueOfMessageHandler}
+                  onBlur={(e) => { setMessage(e.target.value) }}
+                  helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+                >
+                </TextField>
+              </Grid>
+              <Grid item>
+                <TextField
+                  label="Nome"
+                  value={valueOfNameField}
+                  onChange={valueOfNameHandler}
+                  onBlur={(e) => { setName(e.target.value) }}
+                  helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                >
+                </TextField>
+              </Grid>
+            </Grid>
+          ) : null}
+        </PageHeader>
+
+        <div style={{ height: "2em" }}></div>
+
+        <TableData top={TOP_LABELS}>
+          <TableBody>
+            {items.map((row, index) =>
+              index === items.length - 1 ? (
+                <StyledTableRow key={row.created_at} style={{ padding: "1em" }}>
+                  {/* Button to load more data */}
+                  <StyledTableCell>
+                    <Button
+                      color="primary"
+                      variant="text"
+                      startIcon={<AddRoundedIcon />}
+                      disabled={isLoadingMoreItems}
+                      onClick={() => {
+                        setCurrPage(currPage + 1)
+                      }}
+                    >
+                      {isLoadingMoreItems ? (
+                        <CircularProgress size={24} />
+                      ) : (
+                          "Carregar mais itens"
                         )}
-                    </TableBody>
-                </TableData>
-            </>
-        }
+                    </Button>
+                  </StyledTableCell>
+                </StyledTableRow>
+              ) : (
+                  <StyledTableRow key={index}>
+                    <StyledTableCell component="th" scope="row">
+                      {row.id}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {DisplayDate(row.created_at)}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {row.name}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row.email ?
+                          <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+                            <Button
+                              variant='text'
+                              color='primary'
+                              startIcon={<EmailRoundedIcon />}
+                            >
+                              {row.email}
+                            </Button>
+                          </Link> : null
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {row.message}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/CommunityQuestion/${row.id}`}>
+                        <IconButton>
+                          <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                        </IconButton>
+                      </Link>
+                    </StyledTableCell>
+                  </StyledTableRow>
+                )
+            )}
+          </TableBody>
+        </TableData>
+      </>
+    }
 
-    } else return <Unauthorized />
+  } else return <Unauthorized />
 }
 export default CommunityQuestion;
 
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index 452aaf767e40435fc33ffac975610bbb2e82016c..0b1cc0a06aa198948b72e5a8bae6bb7bd78ad9b4 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -25,6 +25,10 @@ import { Url } from "../../../Filters";
 import { Store } from '../../../../Store';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
+import Unauthorized from "../../../Components/Components/Unauthorized";
 //imports from material ui
 import { withStyles } from "@material-ui/core/styles";
 import TableBody from "@material-ui/core/TableBody";
@@ -33,7 +37,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 import IconButton from "@material-ui/core/IconButton";
-import { Button, Typography, Paper, Grid } from "@material-ui/core";
+import { Button, Paper, Grid } from "@material-ui/core";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -42,841 +46,604 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
 import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
 //routers
 import { Link } from "react-router-dom";
-import Unauthorized from "../../../Components/Components/Unauthorized";
 import styled from "styled-components"
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
 
-let currPage = 0;
-let currStateFilter = "0"
-let currComplainReasonId;
-let currDescriptionFilter = "";
-
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        "&:nth-of-type(odd)": {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Complaints = () => {
-    const { state } = useContext(Store);
-    const WINDOW_WIDTH = window.innerWidth
-
-    const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
-
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = [
-        "ESTADO DO RECURSO",
-        "ID",
-        "DESCRIÇÃO",
-        "ID OBJETO",
-        "TIPO",
-        "DATA(MM/DD/YYYY)",
-        "VISUALIZAR",
-        "VISITAR",
-    ]; //Labels from Table
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-
-    const [showFilter, setShowFilter] = useState(false);
-
-    const [stateOption, setStateOption] = useState("Pendente");
-    const [complainOption, setComplainOption] = useState("");
-    const [description, setDescription] = useState("");
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: "",
-        icon: "",
-        open: false,
-        color: "",
+  const { state } = useContext(Store);
+  const WINDOW_WIDTH = window.innerWidth
+
+  const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
+
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ESTADO DO RECURSO",
+    "ID",
+    "DESCRIÇÃO",
+    "ID OBJETO",
+    "TIPO",
+    "DATA(MM/DD/YYYY)",
+    "VISUALIZAR",
+    "VISITAR",
+  ]; //Labels from Table
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+  const [showFilter, setShowFilter] = useState(false);
+
+  const [stateOption, setStateOption] = useState(0);
+  const [complainOption, setComplainOption] = useState("");
+  const [description, setDescription] = useState("");
+  const [valueOfDescField, setValueOfDescField] = useState("")
+  const [currPage, setCurrPage] = useState(0)
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const stateOptions = [
+    { name: 0, value: "Pendente" },
+    { name: 1, value: "Ativo" },
+    { name: 2, value: "Removido" },
+  ];
+
+  const ComplaintReasons = [
+    { name: 1, value: "Viola direitos autorais" },
+    { name: 2, value: "Conteúdo ofensivo/abusivo" },
+    { name: 3, value: "Conta falsa" },
+    { name: 4, value: "Spam" },
+    { name: 5, value: "Descrição diverge do conteúdo" },
+  ];
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
     });
+  };
 
-    const StateOptions = [
-        { id: 0, name: "Pendente" },
-        { id: 1, name: "Ativo" },
-        { id: 2, name: "Bloqueado / Removido" },
-    ];
-
-    const ComplaintReasons = [
-        { id: 1, name: "Viola direitos autorais" },
-        { id: 2, name: "Conteúdo ofensivo/abusivo" },
-        { id: 3, name: "Conta falsa" },
-        { id: 4, name: "Spam" },
-        { id: 5, name: "Descrição diverge do conteúdo" },
-    ];
-
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color,
-        });
-    };
-
-    const CheckUserPermission = () => {
-        let canUserEdit = false;
-
-        if (state.userIsLoggedIn) {
-            const roles = [...state.currentUser.roles];
-            for (let i = 0; i < roles.length; i++)
-                if (roles[i].name === 'admin' || roles[i].name === 'editor')
-                    canUserEdit = true;
-        }
-        else {
-            canUserEdit = false;
-        }
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
 
-        return canUserEdit;
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin' || roles[i].name === 'editor')
+          canUserEdit = true;
+    }
+    else {
+      canUserEdit = false;
     }
 
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true);
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                if (arrData.length === 0) {
-                    HandleSnack(
-                        "Não há mais dados para serem carregados",
-                        true,
-                        "warning",
-                        "#FFC125"
-                    );
-                } else {
-                    const arrItems = [...items];
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-                    const arrResult = arrItems.concat(arrData);
-                    setItems(arrResult.concat(ADD_ONE_LENGHT));
-                }
-                setIsLoadingMoreItems(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoadingMoreItems(false);
-            }
-        )
-    };
-
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true);
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack(
-                    "A lista de dados foi atualizada",
-                    true,
-                    "success",
-                    "#228B22"
-                );
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsUpdating(false);
-
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsUpdating(false);
-
-            }
-        )
-    };
-
-    const handleChangeState = (e, type) => {
-        const value = e.target.value;
-        setStateOption(value);
-    };
-
-    const handleChangeComplain = (e, type) => {
-        const value = e.target.value;
-        setComplainOption(value);
-    };
-
-    const ApplyFilterState = (id, type) => {
-        currPage = 0;
-        currStateFilter = id;
-        let url;
-        if (currComplainReasonId) {
-            url = Url("complaints",
-                `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                `${currPage}`,
-                "DESC"
-            )
-        }
-        else {
-            url = Url("complaints",
-                `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                `${currPage}`,
-                "DESC"
-            )
-        }
-        getRequest(
-            url,
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
-        )
-    };
-
-    const ApplyFilterComplainReason = (id, type) => {
-        currPage = 0;
-        currComplainReasonId = id;
-        let url;
-        if (currComplainReasonId) {
-            url = Url("complaints",
-                `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                `${currPage}`,
-                "DESC"
-            )
-        }
-        else {
-            url = Url("complaints",
-                `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                `${currPage}`,
-                "DESC"
-            )
-        }
-        getRequest(
-            url,
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-            }
-        )
-    };
-
-    const DescriptionHandler = (e) => {
-        currPage = 0;
-        currDescriptionFilter = e.target.value;
-        setDescription(currDescriptionFilter)
-        let url;
-        if (currComplainReasonId) {
-            url = Url("complaints",
-                `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                `${currPage}`,
-                "DESC"
-            )
-        }
-        else {
-            url = Url("complaints",
-                `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                `${currPage}`,
-                "DESC"
-            )
-        }
-        getRequest(
-            url,
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                HandleSnack("Filtro aplicado com sucesso", true, "success", "#228B22");
-                setIsLoaded(true);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
+    return canUserEdit;
+  }
+
+  const handleChangeState = (e, type) => {
+    const value = e.target.value;
+    setStateOption(value);
+  };
+
+  const handleChangeComplain = (e, type) => {
+    const value = e.target.value;
+    setComplainOption(value);
+  };
+
+  const DescriptionHandler = (e) => {
+    setValueOfDescField(e.target.value)
+  }
+
+  const convertToLink = (type, id) => {
+    switch (type) {
+      case "LearningObject":
+        return `recurso?id=${id}/`;
+      case "User":
+        return `usuario-publico/${id}/`;
+      default:
+        return "";
+    }
+  };
+
+  const ComplaintStatus = (status, type) => {
+    switch (status) {
+      case "accepted":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FA8072",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            {
+              type === "User" ? "BLOQUEADO" : "REMOVIDO"
             }
-        )
+          </Paper>
+        );
+      case "complained":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            PENDENTE
+          </Paper>
+        );
+      case "rejected":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#228B22",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            REJEITADO
+          </Paper>
+        );
+      default:
+        return "NOTHING";
     }
-
-    const convertToLink = (type, id) => {
-        switch (type) {
-            case "LearningObject":
-                return `recurso?id=${id}/`;
-            case "User":
-                return `usuario-publico/${id}/`;
-            default:
-                return "";
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const buildUrl = (complainOpt, state, description) => {
+    if (complainOpt && (state >= 0 && state <= 2) && description)
+      return Url("complaints", `"state" : ${state}, "complaint_reason_id" : ${complainOpt}, "description" : "${description}"`, currPage, "DESC")
+
+    else if (complainOpt && description)
+      return Url("complaints", `"complaint_reason_id" : ${complainOpt}, "description" : "${description}"`, currPage, "DESC")
+    else if (complainOpt && (state >= 0 && state <= 2))
+      return Url("complaints", `"complaint_reason_id" : ${complainOpt}, "state" : ${state}`, currPage, "DESC")
+    else if (description && (state >= 0 && state <= 2))
+      return Url("complaints", `"description" : "${description}", "state" : ${state}`, currPage, "DESC")
+
+    else if (complainOpt)
+      return Url("complaints", `"complaint_reason_id" : ${complainOpt}`, currPage, "DESC")
+    else if (state >= 0 && state <= 2)
+      return Url("complaints", `"state" : ${state}`, currPage, "DESC")
+    else if (description)
+      return Url("complaints", `"description" : ${description}`, currPage, "DESC")
+    else
+      return Url("complaints", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(complainOption, stateOption, description),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    };
-
-    const ComplaintStatus = (status, type) => {
-        switch (status) {
-            case "accepted":
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#FA8072",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        {
-                            type === "User" ? "BLOQUEADO" : "REMOVIDO"
-                        }
-                    </Paper>
-                );
-            case "complained":
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#FF8C00",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        PENDENTE
-                    </Paper>
-                );
-            case "rejected":
-                return (
-                    <Paper
-                        style={{
-                            textAlign: "center",
-                            padding: "0.5em",
-                            backgroundColor: "#228B22",
-                            fontWeight: "500",
-                            color: "#FFFAFA",
-                        }}
-                    >
-                        REJEITADO
-                    </Paper>
-                );
-            default:
-                return "NOTHING";
-        }
-    };
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url("complaints", `"state" : "${currStateFilter}"`, `${currPage}`, "DESC"),
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(ADD_ONE_LENGHT));
-                setIsLoaded(true);
-                setError(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoaded(true);
-                setError(true);
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, complainOption, stateOption, description])
+
+  useEffect(() => {
+    setComplainOption()
+    setDescription("")
+    setValueOfDescField("")
+    setStateOption(0)
+    setCurrPage(0)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    if (WINDOW_WIDTH <= 994) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
             }
-        )
-    }, []);
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else if (CheckUserPermission()) {
-        if (WINDOW_WIDTH <= 994) {
-            return (
-                <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">Denúncias</Typography>
-                            </Grid>
-
-                            <Grid
-                                item
-                                xs={12}        
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                if (currComplainReasonId) {
-                                                    UpdateHandler(
-                                                        Url("complaints",
-                                                            `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                                                            `${currPage}`,
-                                                            "DESC"
-                                                        )
-                                                    );
-                                                }
-                                                else {
-                                                    UpdateHandler(
-                                                        Url("complaints",
-                                                            `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                                                            `${currPage}`,
-                                                            "DESC"
-                                                        )
-                                                    );
-                                                }
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        {showFilter ? (
-                            <Grid
-                                container
-                                direction="row"
-                                justify="space-between"
-                                alignItems="center"
-                                alignContent="flex-end"
-                                spacing={3}
-                                xs={12}
-                            >
-                                <Grid item>
-                                    <TextField
-                                        select
-                                        label="Motivo"
-                                        value={complainOption}
-                                        onChange={handleChangeComplain}
-                                        helperText="Por favor, selecione uma das opções"
-                                    >
-                                        {ComplaintReasons.map((option, index) => (
-                                            <MenuItem
-                                                key={option.id}
-                                                value={option.name}
-                                                name={option.id}
-                                                onClick={() =>
-                                                    ApplyFilterComplainReason(option.id, "complaint_reason_id")
-                                                }
-                                            >
-                                                {option.name}
-                                            </MenuItem>
-                                        ))}
-                                    </TextField>
-                                </Grid>
-                                <Grid item>
-                                    <TextField
-                                        select
-                                        label="Estado"
-                                        value={stateOption}
-                                        onChange={handleChangeState}
-                                        helperText="Por favor, selecione uma das opções"
-                                    >
-                                        {StateOptions.map((option, index) => (
-                                            <MenuItem
-                                                key={option.id}
-                                                value={option.name}
-                                                name={option.id}
-                                                onClick={() => ApplyFilterState(option.id, "state")}
-                                            >
-                                                {option.name}
-                                            </MenuItem>
-                                        ))}
-                                    </TextField>
-                                </Grid>
-                                <Grid item>
-                                    <TextField label="Descrição" onChange={DescriptionHandler} value={description} />
-                                </Grid>
-                            </Grid>
-                        ) : null}
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++;
-                                        if (currComplainReasonId) {
-                                            LoadMoreItens(
-                                                Url("complaints",
-                                                    `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                                                    `${currPage}`,
-                                                    "DESC"
-                                                )
-                                            );
-                                        }
-                                        else {
-                                            LoadMoreItens(
-                                                Url("complaints",
-                                                    `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                                                    `${currPage}`,
-                                                    "DESC"
-                                                )
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.complainable_type}
-                                        subtitle={row.id}
-                                        backColor={"#673ab7"}
-                                        avatar={<AnnouncementRoundedIcon />}
-                                        href={`/admin/complaint/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0
-                                            currStateFilter = "0"
-                                            currDescriptionFilter = ""
-                                            currComplainReasonId = null;
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "ID do objeto",
-                                                    subtitle: row.complainable_id
-
-                                                },
-                                                {
-                                                    title: "Criado em",
-                                                    subtitle: DisplayDate(row.created_at)
-                                                },
-                                                {
-                                                    title: "Descrição",
-                                                    subtitle: row.description
-                                                },
-                                                {
-                                                    title: "Estado",
-                                                    subtitle: ComplaintStatus(row.state, row.complainable_type)
-                                                }
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
+          />
+          <MobilePageHeader
+            title="Denúncias"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <Grid
+                container
+                direction="row"
+                justify="space-between"
+                alignItems="center"
+                alignContent="flex-end"
+                spacing={3}
+                xs={12}
+              >
+                <Grid item>
+                  <TextField
+                    select
+                    label="Motivo"
+                    value={complainOption}
+                    onChange={handleChangeComplain}
+                    helperText="Por favor, selecione uma das opções"
+                  >
+                    {ComplaintReasons.map((option, index) => (
+                      <MenuItem
+                        key={option.value}
+                        value={option.name}
+                        name={option.value}
+                      >
+                        {option.value}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+                <Grid item>
+                  <TextField
+                    select
+                    label="Estado"
+                    value={stateOption}
+                    onChange={handleChangeState}
+                    helperText="Por favor, selecione uma das opções"
+                  >
+                    {stateOptions.map((option, index) => (
+                      <MenuItem
+                        key={option.value}
+                        value={option.name}
+                        name={option.value}
+                      >
+                        {option.value}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+                <Grid item>
+                  <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+                </Grid>
+              </Grid>
+            ) : null}
+          </MobilePageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton
+                key="Load more items"
+              >
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
                     )}
-                </>
-            );
-        }
-        else {
-            return (
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">Denúncias</Typography>
-                            </Grid>
+                  <MobileList
+                    key={row.created_at}
+                    title={row.complainable_type}
+                    subtitle={row.id}
+                    backColor={"#673ab7"}
+                    avatar={<AnnouncementRoundedIcon />}
+                    href={`/admin/complaint/${row.id}`}
+                    reset={() => {
+
+                    }}
+                    data={
+                      [
+                        {
+                          title: "ID do objeto",
+                          subtitle: row.complainable_id
 
-                            <Grid
-                                item
-                                xs={6}
+                        },
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        {
+                          title: "Estado",
+                          subtitle: ComplaintStatus(row.state, row.complainable_type)
+                        }
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+        </>
+      );
+    }
+    else {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
+            }
+          />
+
+          <PageHeader
+            title="Denúncias"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {showFilter ? (
+              <Grid
+                container
+                direction="row"
+                justify="space-between"
+                alignItems="center"
+                alignContent="flex-end"
+                spacing={3}
+                xs={12}
+              >
+                <Grid item>
+                  <TextField
+                    select
+                    label="Motivo"
+                    value={complainOption}
+                    onChange={handleChangeComplain}
+                    helperText="Por favor, selecione uma das opções"
+                  >
+                    {ComplaintReasons.map((option, index) => (
+                      <MenuItem
+                        key={option.value}
+                        value={option.name}
+                        name={option.value}
+                      >
+                        {option.value}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+                <Grid item>
+                  <TextField
+                    select
+                    label="Estado"
+                    value={stateOption}
+                    onChange={handleChangeState}
+                    helperText="Por favor, selecione uma das opções"
+                  >
+                    {stateOptions.map((option, index) => (
+                      <MenuItem
+                        key={option.value}
+                        value={option.name}
+                        name={option.value}
+                      >
+                        {option.value}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+                <Grid item>
+                  <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+                </Grid>
+              </Grid>
+            ) : null}
+          </PageHeader>
+
+          <div style={{ height: "2em" }}></div>
+
+          <Grid xs={12} container>
+            <TableData top={TOP_LABELS}>
+              <TableBody>
+                {items.map((row, index) =>
+                  index === items.length - 1 ? (
+                    <StyledTableRow key={row.created_at}>
+                      {/* Button to load more data */}
+                      <StyledTableCell>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          // disabled={isLoadingMoreItems}
+                          startIcon={<AddRoundedIcon />}
+                          disabled={isLoadingMoreItems}
+                          onClick={() => {
+                            setCurrPage(currPage + 1)
+                          }}
+                        >
+                          {isLoadingMoreItems ? (
+                            <CircularProgress size={24} />
+                          ) : (
+                              "Carregar mais itens"
+                            )}
+                        </Button>
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ) : (
+                      <StyledTableRow
+                        key={index}
+                        style={{ flex: 1, width: "100%" }}
+                      >
+                        <StyledTableCell component="th" scope="row">
+                          {ComplaintStatus(row.state, row.complainable_type)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">{row.id}</StyledTableCell>
+                        <StyledTableCell align="right">
+                          {row.description}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {row.complainable_id}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {row.complainable_type}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.created_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Link to={`/admin/complaint/${row.id}`}>
+                            <IconButton
+                              onClick={() => {
+                              }}
                             >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                if (currComplainReasonId) {
-                                                    UpdateHandler(
-                                                        Url("complaints",
-                                                            `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                                                            `${currPage}`,
-                                                            "DESC"
-                                                        )
-                                                    );
-                                                }
-                                                else {
-                                                    UpdateHandler(
-                                                        Url("complaints",
-                                                            `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                                                            `${currPage}`,
-                                                            "DESC"
-                                                        )
-                                                    );
-                                                }
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter);
-                                            }}
-                                            startIcon={<FilterListRoundedIcon />}
-                                        >
-                                            Filtrar
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        {showFilter ? (
-                            <Grid
-                                container
-                                direction="row"
-                                justify="space-between"
-                                alignItems="center"
-                                alignContent="flex-end"
-                                spacing={3}
-                                xs={12}
+                              <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                            </IconButton>
+                          </Link>
+                        </StyledTableCell>
+                        <StyledTableCell 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 +
+                                convertToLink(
+                                  row.complainable_type,
+                                  row.complainable_id
+                                )
+                              }
                             >
-                                <Grid item>
-                                    <TextField
-                                        select
-                                        label="Motivo"
-                                        value={complainOption}
-                                        onChange={handleChangeComplain}
-                                        helperText="Por favor, selecione uma das opções"
-                                    >
-                                        {ComplaintReasons.map((option, index) => (
-                                            <MenuItem
-                                                key={option.id}
-                                                value={option.name}
-                                                name={option.id}
-                                                onClick={() =>
-                                                    ApplyFilterComplainReason(option.id, "complaint_reason_id")
-                                                }
-                                            >
-                                                {option.name}
-                                            </MenuItem>
-                                        ))}
-                                    </TextField>
-                                </Grid>
-                                <Grid item>
-                                    <TextField
-                                        select
-                                        label="Estado"
-                                        value={stateOption}
-                                        onChange={handleChangeState}
-                                        helperText="Por favor, selecione uma das opções"
-                                    >
-                                        {StateOptions.map((option, index) => (
-                                            <MenuItem
-                                                key={option.id}
-                                                value={option.name}
-                                                name={option.id}
-                                                onClick={() => ApplyFilterState(option.id, "state")}
-                                            >
-                                                {option.name}
-                                            </MenuItem>
-                                        ))}
-                                    </TextField>
-                                </Grid>
-                                <Grid item>
-                                    <TextField label="Descrição" onChange={DescriptionHandler} value={description} />
-                                </Grid>
-                            </Grid>
-                        ) : null}
-                    </Paper>
-
-                    <div style={{ height: "2em" }}></div>
-
-                    <Grid xs={12} container>
-                        <TableData top={TOP_LABELS}>
-                            <TableBody>
-                                {items.map((row, index) =>
-                                    index === items.length - 1 ? (
-                                        <StyledTableRow key={index}>
-                                            {/* Button to load more data */}
-                                            <StyledTableCell>
-                                                <Button
-                                                    color="primary"
-                                                    variant="text"
-                                                    // disabled={isLoadingMoreItems}
-                                                    startIcon={<AddRoundedIcon />}
-                                                    disabled={isLoadingMoreItems}
-                                                    onClick={() => {
-                                                        currPage++;
-                                                        if (currComplainReasonId) {
-                                                            LoadMoreItens(
-                                                                Url("complaints",
-                                                                    `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
-                                                                    `${currPage}`,
-                                                                    "DESC"
-                                                                )
-                                                            );
-                                                        }
-                                                        else {
-                                                            LoadMoreItens(
-                                                                Url("complaints",
-                                                                    `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
-                                                                    `${currPage}`,
-                                                                    "DESC"
-                                                                )
-                                                            );
-                                                        }
-                                                    }}
-                                                >
-                                                    {isLoadingMoreItems ? (
-                                                        <CircularProgress size={24} />
-                                                    ) : (
-                                                            "Carregar mais itens"
-                                                        )}
-                                                </Button>
-                                            </StyledTableCell>
-                                        </StyledTableRow>
-                                    ) : (
-                                            <StyledTableRow
-                                                key={index}
-                                                style={{ flex: 1, width: "100%" }}
-                                            >
-                                                <StyledTableCell component="th" scope="row">
-                                                    {ComplaintStatus(row.state, row.complainable_type)}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">{row.id}</StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {row.description}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {row.complainable_id}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {row.complainable_type}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    {DisplayDate(row.created_at)}
-                                                </StyledTableCell>
-                                                <StyledTableCell align="right">
-                                                    <Link to={`/admin/complaint/${row.id}`}>
-                                                        <IconButton
-                                                            onClick={() => {
-                                                                currPage = 0
-                                                                currStateFilter = "0"
-                                                                currDescriptionFilter = ""
-                                                                currComplainReasonId = null;
-                                                            }}
-                                                        >
-                                                            <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                        </IconButton>
-                                                    </Link>
-                                                </StyledTableCell>
-                                                <StyledTableCell 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 +
-                                                                convertToLink(
-                                                                    row.complainable_type,
-                                                                    row.complainable_id
-                                                                )
-                                                            }
-                                                        >
-                                                            MEC RED
+                              MEC RED
                                                         </a>
-                                                    </Button>
-                                                </StyledTableCell>
-                                            </StyledTableRow>
-                                        )
-                                )}
-                            </TableBody>
-                        </TableData>
-                    </Grid>
-                </>
-            );
-        }
-    } else return <Unauthorized />
+                          </Button>
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    )
+                )}
+              </TableBody>
+            </TableData>
+          </Grid>
+        </>
+      );
+    }
+  } else return <Unauthorized />
 };
 export default Complaints;
 
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index a4219eea0efbc89a1af6c218b2d0fce6ca5b47da..a5df3138934acaf217e3078dd14916ecfbf1263c 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -23,6 +23,9 @@ import TableData from "../../../Components/Components/Table";
 import SnackBar from "../../../../Components/SnackbarComponent";
 import AlertDialog from "../../../Components/Components/AlertDialog";
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 // Imports about icon
 import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -31,16 +34,14 @@ import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import IconButton from "@material-ui/core/IconButton";
-import CancelRoundedIcon from "@material-ui/icons/CancelRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import DeleteIcon from "@material-ui/icons/Delete";
 // Import from material-ui
-import { withStyles, makeStyles } from "@material-ui/core/styles";
+import { withStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
-import { Typography, CircularProgress } from "@material-ui/core";
-import Popover from "@material-ui/core/Popover";
+import { CircularProgress } from "@material-ui/core";
 import TextField from "@material-ui/core/TextField";
 // services
 import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -50,9 +51,6 @@ import { Url, DeleteFilter } from "../../../Filters";
 import { Link } from 'react-router-dom';
 import styled from 'styled-components'
 import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-
-let currPage = 0;
 
 const StyledTableCell = withStyles((theme) => ({
   head: {
@@ -72,35 +70,19 @@ const StyledTableRow = withStyles((theme) => ({
   },
 }))(TableRow);
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  paper: {
-    padding: theme.spacing(1),
-    textAlign: "start",
-  },
-  button: {
-    margin: theme.spacing(1),
-    alignSelf: "flex-end",
-  },
-}));
-
 const EducationalObjects = () => {
-  const classes = useStyles();
   const WINDOW_WIDTH = window.innerWidth
 
-  const addOndeLenght = [""];
+  const ADD_ONE_LENGHT = [""];
 
   const [error, setError] = useState(null); //Necessary to consult the API, catch errors
   const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
   const [items, setItems] = useState([]); //Necessary to consult the API, data
-
+  const [currPage, setCurrPage] = useState(0)
   const [deleteItem, setDeleteItem] = useState({}); //Delete Item
   const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
-  const [isUpdating, setIsUpdating] = useState(false);
   const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
-
+  const [showFilter, setShowFilter] = useState(false)
   const [openAlertDialog, setOpenAlertDialog] = useState(false);
 
   const [snackInfo, setSnackInfo] = useState({
@@ -110,87 +92,25 @@ const EducationalObjects = () => {
     color: "",
   });
 
-  // **************** About the PopOver Menu ****************
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [showAuthorField, setShowAuthorField] = useState(false); //show the text field of filter by Author
-  const [showDescriptionField, setShowDescriptionField] = useState(false); //show the text field of the filter by description
-  const [showStandadSearch, setShowStandarSearchField] = useState(false);
 
   const [search, setSeacrh] = useState("");
+  const [valueSearch, setValueSearch] = useState("")
   const [author, setAuthor] = useState("");
-  const [description, setDescription] = useState(null);
-
-  const AuthorHandler = () => {
-    setAuthor("")
-    setShowAuthorField(!showAuthorField);
-    let url;
-    if (description)
-      url = Url("learning_objects", `"name" : "${search}", "author" : "", "description" : "${description}"`, currPage, "DESC")
-    else
-      url = Url("learning_objects", `"name" : "${search}", "author" : ""`, currPage, "DESC")
-    Filter(url);
-  };
+  const [valueAuthor, setValueAuthor] = useState("")
+  const [description, setDescription] = useState("");
+  const [valueDescription, setValueDescription] = useState("")
 
-  const DescHandler = () => {
-    setDescription(null)
-    setShowDescriptionField(!showDescriptionField);
-    let url;
-    url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
-    Filter(url);
+  const AuthorHandler = (event) => {
+    setValueAuthor(event.target.value)
   };
 
-  const StandartHandler = () => {
-    setSeacrh("")
-    setShowStandarSearchField(!showStandadSearch);
-    let url;
-    if (description)
-      url = Url("learning_objects", `"name" : "", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
-    else
-      url = Url("learning_objects", `"name" : "", "author" : "${author}"`, currPage, "DESC")
-    Filter(url);
-  };
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
-
-  const OnChangeSearchHandler = (e) => {
-    setSeacrh(e.target.value);
-    let url;
-    if (description)
-      url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
-    else
-      url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
-    Filter(url);
-  };
-
-  const onChangeAuthorHandler = (e) => {
-    setAuthor(e.target.value);
-    let url;
-    if (description)
-      url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
-    else
-      url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
-    Filter(url);
+  const DescHandler = (event) => {
+    setValueDescription(event.target.value)
   };
 
-  const onChangeDescriptionHandler = (e) => {
-    setDescription(e.target.value);
-    let url;
-    if (description)
-      url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
-    else
-      url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
-    Filter(url);
+  const StandartHandler = (event) => {
+    setValueSearch(event.target.value)
   };
-  // **************** About the PopOverMenu ****************
 
   //Controlls the state of the Alert Dialog
   const HandleStateAlertDialog = (i) => {
@@ -214,47 +134,12 @@ const EducationalObjects = () => {
     setIsLoadingToDelete(i);
   };
 
-  //Filters the search
-  const Filter = (api) => {
-    getRequest(
-      api,
-      (data, header) => {
-        const arrData = [...data];
-        setItems(arrData.concat(addOndeLenght));
-      },
-      (error) => {
-        setError(true);
-      }
-    )
-  };
-
-  //This function updates List every time the content of the api changes
-  const UpdtateListData = (api) => {
-    getRequest(
-      api,
-      (data, header) => {
-        setItems([...data.concat(addOndeLenght)]);
-        HandleSnack(
-          "A lista de dados foi atualizada",
-          true,
-          "success",
-          "#228B22"
-        );
-        setIsUpdating(false);
-      },
-      (error) => {
-        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-        setIsUpdating(false);
-      }
-    )
-  };
-
   //Called when user want to delete one institution
   async function DeleteHandler() {
     const id = deleteItem.id;
     HandleStateAlertDialog(null);
     deleteRequest(
-      DeleteFilter("institutions", id),
+      DeleteFilter("learning_objects", id),
       (data) => {
         if (data.errors)
           HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
@@ -265,9 +150,9 @@ const EducationalObjects = () => {
             "success",
             "#228B22"
           );
-          currPage = 0;
-          UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
+          setCurrPage(0)
           HandleStateCircularProgress(null);
+          removeItemFromList(id)
         }
       },
       (error) => {
@@ -277,33 +162,21 @@ const EducationalObjects = () => {
     )
   }
 
-  const LoadMoreItens = async (api) => {
-    setIsLoadingMoreItems(true);
-    getRequest(
-      api,
-      (data, header) => {
-        const arrData = [...data];
-        if (arrData.length === 0) {
-          HandleSnack(
-            "Não há mais dados para serem carregados",
-            true,
-            "warning",
-            "#FFC125"
-          );
-        } else {
-          const arrItems = [...items];
-          arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-          const arrResult = arrItems.concat(arrData);
-          setItems(arrResult.concat(addOndeLenght));
-        }
-        setIsLoadingMoreItems(false);
-      },
-      (error) => {
-        HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-        setIsLoadingMoreItems(false);
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
       }
-    )
-  };
+    }
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
+    }
+  }
 
   const DisplayDate = (date) => {
     const convertedData = moment.utc(date);
@@ -312,19 +185,70 @@ const EducationalObjects = () => {
       .toString();
   };
 
+  const buildUrl = (author, description, name) => {
+    if (author && description && name)
+      return Url("learning_objects", `"author" : "${author}", "description" : "${description}", "name" : "${name}"`, currPage, "DESC")
+
+    else if (author && name)
+      return Url("learning_objects", `"author" : "${author}", "name" : "${name}"`, currPage, "DESC")
+    else if (author && description)
+      return Url("learning_objects", `"author" : "${author}", "description" : "${description}"`, currPage, "DESC")
+    else if (name && description)
+      return Url("learning_objects", `"name" : "${name}", "description" : "${description}"`, currPage, "DESC")
+
+    else if (author)
+      return Url("learning_objects", `"author" : "${author}"`, currPage, "DESC")
+    else if (description)
+      return Url("learning_objects", `"description" : "${description}"`, currPage, "DESC")
+    else if (name)
+      return Url("learning_objects", `"name" : "${name}"`, currPage, "DESC")
+    else
+      return Url("learning_objects", "", currPage, "DESC")
+  }
+
   useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
     getRequest(
-      Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, `${currPage}`, "DESC"),
+      buildUrl(author, description, search),
       (data, header) => {
-        setIsLoaded(true);
-        setItems(data.concat(addOndeLenght));
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
       },
       (error) => {
-        setError(true);
-
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
       }
     )
-  }, []);
+  }, [currPage, search, description, author])
+
+  useEffect(() => {
+    setCurrPage(0)
+    setSeacrh("")
+    setValueSearch("")
+    setDescription("")
+    setValueDescription("")
+    setAuthor("")
+    setValueAuthor("")
+  }, [showFilter])
 
   if (error) {
     return <div>Error: {error.message}</div>;
@@ -343,44 +267,28 @@ const EducationalObjects = () => {
       "DELETAR",
     ];
 
-    //Buttons from PopOverMenu
-    const flatButtonsFromPopOverMenu = [
-      {
-        label: "Pesquisa padrão",
-        onClick: StandartHandler,
-        color: showStandadSearch ? "primary" : "default",
-      },
-      {
-        label: "Autor",
-        onClick: AuthorHandler,
-        color: showAuthorField ? "primary" : "default",
-      },
-      {
-        label: "Descrição",
-        onClick: DescHandler,
-        color: showDescriptionField ? "primary" : "default",
-      },
-    ];
-
     //Field of the Filter
     const TextFieldOfTheFilter = [
       {
         label: "Pesquisar",
-        show: showStandadSearch,
-        onChange: (event) => OnChangeSearchHandler(event),
-        hide: StandartHandler,
+        value: valueSearch,
+        onChange: (event) => StandartHandler(event),
+        onBlur: (event) => setSeacrh(event.target.value),
+        helperText: "Ao terminar de digitar no campo, retire o foco do campo de texto"
       },
       {
         label: "Autor",
-        show: showAuthorField,
-        onChange: (event) => onChangeAuthorHandler(event),
-        hide: AuthorHandler,
+        value: valueAuthor,
+        onChange: (event) => AuthorHandler(event),
+        onBlur: (event) => setAuthor(event.target.value),
+        helperText: "Ao terminar de digitar no campo, retire o foco do campo de texto"
       },
       {
         label: "Descrição",
-        show: showDescriptionField,
-        onChange: (event) => onChangeDescriptionHandler(event),
-        hide: DescHandler,
+        value: valueDescription,
+        onChange: (event) => DescHandler(event),
+        onBlur: (event) => setDescription(event.target.value),
+        helperText: "Ao terminar de digitar no campo, retire o foco do campo de texto"
       },
     ];
     if (WINDOW_WIDTH <= 1058) {
@@ -400,109 +308,58 @@ const EducationalObjects = () => {
               })
             }
           />
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
           {/************** Start of the header **************/}
-          <Paper style={{ padding: "1em" }}>
-            <Grid container spacing={3} direction="row" alignItems="center">
+          <MobilePageHeader
+            title="Objetos educacionais"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {
+              showFilter &&
               <Grid item xs={12}>
-                <Typography className={classes.paper} variant="h4">
-                  Lista de objetos educacionais
-                </Typography>
-              </Grid>
-              <Grid
-                item
-                xs={12} 
-              
-              >
-                <Grid container justify="flex-start" spacing={3}>
-                  <Grid item>
-                    <Button
-                      aria-describedby={id}
-                      variant="contained"
-                      color="secondary"
-                      className={classes.button}
-                      onClick={(event) => {
-                        handleClick(event)
-                      }}
-                      startIcon={
-                        <FilterListRoundedIcon style={{ fill: "white" }} />
-                      }
-                    >
-                      Filtrar
-                    </Button>
-                    <Popover
-                      id={id}
-                      open={open}
-                      anchorEl={anchorEl}
-                      onClose={handleClose}
-                      anchorOrigin={{
-                        vertical: "bottom",
-                        horizontal: "center",
-                      }}
-                      transformOrigin={{
-                        vertical: "top",
-                        horizontal: "center",
-                      }}
-                    >
-                      {flatButtonsFromPopOverMenu.map((flat, index) => (
-                        <Button
-                          key={index}
-                          onClick={flat.onClick}
-                          color={flat.color}
-                        >
-                          {flat.label}
-                        </Button>
-                      ))}
-                    </Popover>
-                  </Grid>
-
-                  <Grid item>
-                    <Button
-                      variant="contained"
-                      color="secondary"
-                      className={classes.button}
-                      startIcon={<UpdateRoundedIcon />}
-                      disabled={isUpdating}
-                      onClick={() => {
-                        currPage = 0;
-                        setIsUpdating(true);
-                        if (description)
-                          UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
-                        else
-                          UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
-                      }}
-                    >
-                      {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                    </Button>
-                  </Grid>
+                <Grid container justify="space-between" spacing={3}>
+                  {TextFieldOfTheFilter.map((field, index) => (
+                    <Grid item key={field.label}>
+                      <TextField
+                        id={index}
+                        label={field.label}
+                        type="search"
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                        value={field.value}
+                        helperText={field.helperText}
+                      />
+                    </Grid>
+                  ))}
                 </Grid>
               </Grid>
-            </Grid>
-            <Grid item xs={12}>
-              <Grid container justify="space-between" spacing={3}>
-                {TextFieldOfTheFilter.map((field, index) => (
-                  <Grid item key={index}>
-                    {field.show ? (
-                      <div>
-                        <TextField
-                          id={index}
-                          label={field.label}
-                          type="search"
-                          onChange={field.onChange}
-                        />
-                        <IconButton
-                          size="small"
-                          color="primary"
-                          onClick={field.hide}
-                        >
-                          <CancelRoundedIcon />
-                        </IconButton>
-                      </div>
-                    ) : null}
-                  </Grid>
-                ))}
-              </Grid>
-            </Grid>
-          </Paper>
+            }
+          </MobilePageHeader>
           {/************** End of the header **************/}
 
           <div style={{ height: "2em" }}></div>
@@ -519,11 +376,7 @@ const EducationalObjects = () => {
                   startIcon={<AddRoundedIcon />}
                   disabled={isLoadingMoreItems}
                   onClick={() => {
-                    currPage++
-                    if (description)
-                      LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
-                    else
-                      LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
+                    setCurrPage(currPage + 1)
                   }}
                 >
                   {isLoadingMoreItems ? (
@@ -543,7 +396,7 @@ const EducationalObjects = () => {
                     avatar={<MenuBookRoundedIcon />}
                     href={`/admin/learningObject/${row.id}`}
                     reset={() => {
-                      currPage = 0;
+
                     }}
                     data={
                       [
@@ -563,6 +416,21 @@ const EducationalObjects = () => {
                           title: "Score",
                           subtitle: row.score
                         },
+                        {
+                          title: "Deletar",
+                          subtitle:
+                            <Button
+                              variant="contained"
+                              color="secondary"
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
+                              startIcon={<DeleteIcon />}
+                            >
+                              Deletar
+                            </Button>
+                        }
                       ]
                     }
                   />
@@ -592,107 +460,48 @@ const EducationalObjects = () => {
             }
           />
           {/************** Start of the header **************/}
-          <Paper style={{ padding: "1em" }}>
-            <Grid container spacing={3} direction="row" alignItems="center">
-              <Grid item xs={6}>
-                <Typography className={classes.paper} variant="h4">
-                  Lista de objetos educacionais
-                                </Typography>
-              </Grid>
-              <Grid
-                item
-                xs={6}
-              >
-                <Grid container justify="flex-end" spacing={3}>
-                  <Grid item>
-                    <Button
-                      aria-describedby={id}
-                      variant="contained"
-                      color="secondary"
-                      className={classes.button}
-                      onClick={(event) => {
-                        handleClick(event)
-                      }}
-                      startIcon={
-                        <FilterListRoundedIcon style={{ fill: "white" }} />
-                      }
-                    >
-                      Filtrar
-                                        </Button>
-                    <Popover
-                      id={id}
-                      open={open}
-                      anchorEl={anchorEl}
-                      onClose={handleClose}
-                      anchorOrigin={{
-                        vertical: "bottom",
-                        horizontal: "center",
-                      }}
-                      transformOrigin={{
-                        vertical: "top",
-                        horizontal: "center",
-                      }}
-                    >
-                      {flatButtonsFromPopOverMenu.map((flat, index) => (
-                        <Button
-                          key={index}
-                          onClick={flat.onClick}
-                          color={flat.color}
-                        >
-                          {flat.label}
-                        </Button>
-                      ))}
-                    </Popover>
-                  </Grid>
-
-                  <Grid item>
-                    <Button
-                      variant="contained"
-                      color="secondary"
-                      className={classes.button}
-                      startIcon={<UpdateRoundedIcon />}
-                      disabled={isUpdating}
-                      onClick={() => {
-                        currPage = 0;
-                        setIsUpdating(true);
-                        if (description)
-                          UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
-                        else
-                          UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
-                      }}
-                    >
-                      {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                    </Button>
-                  </Grid>
+          <PageHeader
+            title="Objetos educacionais"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              }
+            ]}
+          >
+            {
+              showFilter &&
+              <Grid item xs={12}>
+                <Grid container justify="space-between" spacing={3}>
+                  {TextFieldOfTheFilter.map((field, index) => (
+                    <Grid item key={field.label}>
+                      <TextField
+                        id={index}
+                        label={field.label}
+                        type="search"
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                        value={field.value}
+                        helperText={field.helperText}
+                      />
+                    </Grid>
+                  ))}
                 </Grid>
               </Grid>
-            </Grid>
-            <Grid item xs={12}>
-              <Grid container justify="space-between" spacing={3}>
-                {TextFieldOfTheFilter.map((field, index) => (
-                  <Grid item key={index}>
-                    {field.show ? (
-                      <div>
-                        <TextField
-                          id={index}
-                          label={field.label}
-                          type="search"
-                          onChange={field.onChange}
-                        />
-                        <IconButton
-                          size="small"
-                          color="primary"
-                          onClick={field.hide}
-                        >
-                          <CancelRoundedIcon />
-                        </IconButton>
-                      </div>
-                    ) : null}
-                  </Grid>
-                ))}
-              </Grid>
-            </Grid>
-          </Paper>
+            }
+          </PageHeader>
           {/************** End of the header **************/}
 
           <div style={{ height: "2em" }}></div>
@@ -713,11 +522,7 @@ const EducationalObjects = () => {
                           isLoadingMoreItems
                         }
                         onClick={() => {
-                          currPage++
-                          if (description)
-                            LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
-                          else
-                            LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
+                          setCurrPage(currPage + 1)
                         }}
                       >
                         {isLoadingMoreItems ? (
@@ -747,10 +552,7 @@ const EducationalObjects = () => {
                       </StyledTableCell>
                       <StyledTableCell align="right">
                         <Link to={`/admin/learningObject/${row.id}`}>
-                          <IconButton onClick={() => {
-                            currPage = 0
-
-                          }}>
+                          <IconButton>
                             <VisibilityIcon style={{ fill: "#00bcd4" }} />
                           </IconButton>
                         </Link>
diff --git a/src/Admin/Pages/Pages/SubPages/Gamefication.js b/src/Admin/Pages/Pages/SubPages/Gamefication.js
new file mode 100644
index 0000000000000000000000000000000000000000..e055d8fa83d733b4cad7c121569a72696e5f49fe
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/Gamefication.js
@@ -0,0 +1,840 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useContext, useEffect, useState } from "react";
+import moment from "moment";
+import Unauthorized from "../../../Components/Components/Unauthorized";
+import { Store } from "../../../../Store";
+import { Link, useHistory } from "react-router-dom";
+import { getRequest, deleteRequest, putRequest } from "../../../../Components/HelperFunctions/getAxiosConfig";
+import { Url, DeleteFilter, EditFilter } from "../../../Filters";
+import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
+import { withStyles } from "@material-ui/core/styles";
+import AddRoundedIcon from "@material-ui/icons/AddRounded";
+import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import PageHeader from "../../../Components/Components/PageHeader";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import TableData from "../../../Components/Components/Table";
+import TextField from "@material-ui/core/TextField";
+import MenuItem from "@material-ui/core/MenuItem";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import styled from 'styled-components'
+import { apiDomain } from '../../../../env';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import noAvatar from "../../../../img/default_profile.png";
+import { Grid, Typography } from "@material-ui/core";
+import AlertDialog from "../../../Components/Components/AlertDialog"
+
+
+const StyledTableCell = withStyles((theme) => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+}))(TableRow);
+
+const Gamefication = () => {
+  const history = useHistory()
+  const WINDOW_WIDTH = window.innerWidth
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ESTADO",
+    "ID",
+    "NAME",
+    "TIPO",
+    "CRIADO EM",
+    "ATUALIZADO EM",
+    "AÇÕES",
+    "VISUALIZAR"
+  ]; //Labels from Table
+  const { state } = useContext(Store);
+  const [currPage, setcurrPage] = useState(0);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(true);
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [items, setItems] = useState([]);
+  const [stateOpt, setStateOpt] = useState(1)
+  const [typeOpt, setTypeOpt] = useState("")
+  const [name, setName] = useState("")
+  const [valueNameField, setValueNameField] = useState("")
+  const [open, setOpen] = useState(false)
+  const [deleteItem, setDeleteItem] = useState({})
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const stateOptions = [
+    { name: 0, value: "Inativo" },
+    { name: 1, value: "Ativo" },
+    { name: 2, value: "Removido" },
+  ];
+
+  const typesOptions = [
+    { name: "avatar_frame", value: "Moldura de avatar" },
+    { name: "badge", value: "Insígnia" },
+    { name: "card_frame", value: "Moldura de card do usuário" },
+    { name: "cover_frame", value: "Moldura de capa" },
+
+  ];
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === "admin" || roles[i].name === "editor")
+          canUserEdit = true;
+    } else {
+      canUserEdit = false;
+    }
+
+    return canUserEdit;
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const FastActions = (item, index) => {
+    switch (item.state) {
+      case "removed":
+        return (
+          <Grid container alignItems="center" justify={WINDOW_WIDTH <= 920 ? "flex-start" : "flex-end"} spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                onClick={() => inactiveItem(item, index)}
+              >
+                Inativar
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item, index)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "inactive":
+        return (
+          <Grid container alignItems="center" justify={WINDOW_WIDTH <= 920 ? "flex-start" : "flex-end"} spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                onClick={() => handleAlertDialog(item)}
+              >
+                Remover
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item, index)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "active":
+        return (
+          <Grid container alignItems="center" justify={WINDOW_WIDTH <= 920 ? "flex-start" : "flex-end"} spacing={1}>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => handleAlertDialog(item)}
+              >
+                Remover
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => inactiveItem(item, index)}
+              >
+                Inativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  const StateItem = (state) => {
+    switch (state) {
+      case "removed":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FA8072",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            REMOVIDO
+          </Paper>
+        );
+      case "inactive":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            INATIVO
+          </Paper>
+        );
+      case "active":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#228B22",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            ATIVO
+          </Paper>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  const handleAlertDialog = (item) => {
+    setOpen(true)
+    setDeleteItem(item)
+  }
+
+  const findIndexOfWantedItem = (item) => {
+    const index = items.findIndex((item) => item.id === deleteItem.id)
+    return index;
+  }
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("items", deleteItem.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          handleChangeStateItem(findIndexOfWantedItem(deleteItem), "removed")
+        }
+        setcurrPage(0)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const inactiveItem = (item, index) => {
+    const body = {
+      "item": {
+        "state": "inactive"
+      }
+    }
+    putRequest(
+      EditFilter("items", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi inativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        handleChangeStateItem(index, "inactive")
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const activeItem = (item, index) => {
+    const body = {
+      "item": {
+        "state": "active"
+      }
+    }
+    putRequest(
+      EditFilter("items", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O item foi ativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+        }
+        handleChangeStateItem(index, "active")
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const handleChangeStateItem = (index, state) => {
+    const currItems = [...items]
+    currItems.splice(index, 1)
+    setItems(currItems)
+  }
+
+  const buildUrl = (objType, state, name) => {
+    if (objType && (state >= 0 && state <= 2) && name)
+      return Url("items", `"state" : ${state}, "item_type" : "${objType}", "name" : "${name}"`, currPage, "DESC")
+
+    else if (objType && name)
+      return Url("items", `"item_type" : "${objType}", "name" : "${name}"`, currPage, "DESC")
+    else if (objType && (state >= 0 && state <= 2))
+      return Url("items", `"item_type" : "${objType}", "state" : ${state}`, currPage, "DESC")
+    else if (name && (state >= 0 && state <= 2))
+      return Url("items", `"name" : "${name}", "state" : ${state}`, currPage, "DESC")
+
+    else if (objType)
+      return Url("items", `"item_type" : "${objType}"`, currPage, "DESC")
+    else if (state >= 0 && state <= 2)
+      return Url("items", `"state" : ${state}`, currPage, "DESC")
+    else if (name)
+      return Url("items", `"name" : ${name}`, currPage, "DESC")
+    else
+      return Url("items", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(typeOpt, stateOpt, name),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, typeOpt, stateOpt, name])
+
+  useEffect(() => {
+    setTypeOpt("")
+    setName("")
+    setValueNameField("")
+    setStateOpt(1)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error</div>;
+  } else if (!loaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    if (CheckUserPermission()) {
+      if (WINDOW_WIDTH <= 950) {
+        return (
+          <>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <MobilePageHeader
+              title="Itens da gameficação"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/createItem")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Estado"
+                      value={stateOpt}
+                      onChange={(e) => { setStateOpt(e.target.value) }}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {stateOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Tipo"
+                      value={typeOpt}
+                      onChange={(e) => { setTypeOpt(e.target.value) }}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {typesOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Nome"
+                      value={valueNameField}
+                      onChange={(e) => { setValueNameField(e.target.value) }}
+                      onBlur={(e) => { setName(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    >
+                    </TextField>
+                  </Grid>
+                </Grid>
+              ) : null}
+            </MobilePageHeader>
+            <div style={{ height: '2em' }}></div>
+
+            {items.map((row, index) =>
+              index === items.length - 1 ? (
+                <StyledDivButton>
+                  <Button
+                    key={index}
+                    color="primary"
+                    variant="text"
+                    // disabled={isLoadingMoreItems}
+                    startIcon={<AddRoundedIcon />}
+                    disabled={isLoadingMoreItems}
+                    onClick={() => {
+                      setcurrPage(currPage + 1)
+                    }}
+                  >
+                    {isLoadingMoreItems ? (
+                      <CircularProgress size={24} />
+                    ) : (
+                        "Carregar mais itens"
+                      )}
+                  </Button>
+                </StyledDivButton>
+              ) : (
+                  <>
+                    <MobileList
+                      key={index}
+                      title={row.name}
+                      subtitle={row.id}
+                      backColor={"#00bcd4"}
+                      avatar={
+                        <img
+                          src={row.image ? apiDomain + row.image : noAvatar}
+                          alt="user avatar"
+                          style={{
+                            height: "100%",
+                            width: "100%",
+                            borderRadius: "50%",
+                          }}
+                        />
+                      }
+                      href={`/admin/item/${row.id}`}
+                      reset={() => { }}
+                      data={[
+
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                        {
+                          title: "Atualizado em",
+                          subtitle: DisplayDate(row.updated_at)
+                        },
+                        {
+                          title: "Tipo",
+                          subtitle: row.item_type
+                        },
+                        {
+                          title: "Preço",
+                          subtitle: row.price + " points"
+                        },
+                        {
+                          title: "Desconto",
+                          subtitle: <Typography style={{ color: "#FA8072" }}>
+                            {"-" + row.discount + " points"}
+                          </Typography>
+                        },
+                        {
+                          title: "Preço a se pagar",
+                          subtitle: <Typography style={{ color: "#228B22" }}>
+                            {(row.price - row.discount) + " points"}
+                          </Typography>
+                        },
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        {
+                          title: "Estado",
+                          subtitle: StateItem(row.state)
+                        },
+                        {
+                          title: "Ações rapidos",
+                          subtitle: FastActions(row, index)
+                        },
+                      ]}
+                    />
+                    <div style={{ height: "0.5em" }} />
+                  </>
+                )
+            )}
+          </>
+        )
+      } else {
+        return (
+          <>
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <PageHeader
+              title="Itens da gameficação"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/createItem")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Estado"
+                      value={stateOpt}
+                      onChange={(e) => { setStateOpt(e.target.value) }}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {stateOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Tipo"
+                      value={typeOpt}
+                      onChange={(e) => { setTypeOpt(e.target.value) }}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {typesOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Nome"
+                      value={valueNameField}
+                      onChange={(e) => { setValueNameField(e.target.value) }}
+                      onBlur={(e) => { setName(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    >
+                    </TextField>
+                  </Grid>
+                </Grid>
+              ) : null}
+            </PageHeader>
+
+            <div style={{ height: "2em" }}></div>
+
+            <TableData top={TOP_LABELS}>
+              <TableBody>
+                {items.map((row, index) =>
+                  index === items.length - 1 ? (
+                    <StyledTableRow key={index} style={{ padding: "1em" }}>
+                      {/* Button to load more data */}
+                      <StyledTableCell>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          // disabled={isLoadingMoreItems}
+                          startIcon={<AddRoundedIcon />}
+                          disabled={isLoadingMoreItems}
+                          onClick={() => {
+                            setcurrPage(currPage + 1);
+                          }}
+                        >
+                          {isLoadingMoreItems ? (
+                            <CircularProgress size={24} />
+                          ) : (
+                              "Carregar mais itens"
+                            )}
+                        </Button>
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ) : (
+                      <StyledTableRow key={index}>
+                        <StyledTableCell component="th" scope="row">
+                          {StateItem(row.state)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">{row.id}</StyledTableCell>
+                        <StyledTableCell align="right">{row.name}</StyledTableCell>
+                        <StyledTableCell align="right">
+                          {row.item_type}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.created_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.updated_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {FastActions(row, index)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Link to={`/admin/item/${row.id}`}>
+                            <IconButton>
+                              <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                            </IconButton>
+                          </Link>
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    )
+                )}
+              </TableBody>
+            </TableData>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+          </>
+        );
+      }
+    } else return <Unauthorized />;
+  }
+};
+export default Gamefication;
+
+const StyledDivButton = styled(Paper)`
+    width : 100%;
+    display : flex; 
+    justify-content : center; 
+    align-items : center; 
+`
+
+
diff --git a/src/Admin/Pages/Pages/SubPages/GameficationAchieves.js b/src/Admin/Pages/Pages/SubPages/GameficationAchieves.js
new file mode 100644
index 0000000000000000000000000000000000000000..93909b137ef1a64165238866a5da473ea6edfd41
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/GameficationAchieves.js
@@ -0,0 +1,772 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useContext, useEffect, useState } from "react";
+import moment from "moment";
+import Unauthorized from "../../../Components/Components/Unauthorized";
+import { Store } from "../../../../Store";
+import { Link, useHistory } from "react-router-dom";
+import { getRequest, deleteRequest, putRequest } from "../../../../Components/HelperFunctions/getAxiosConfig";
+import { Url, DeleteFilter, EditFilter } from "../../../Filters";
+import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
+import { withStyles } from "@material-ui/core/styles";
+import AddRoundedIcon from "@material-ui/icons/AddRounded";
+import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import PageHeader from "../../../Components/Components/PageHeader";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import TableData from "../../../Components/Components/Table";
+import TextField from "@material-ui/core/TextField";
+import MenuItem from "@material-ui/core/MenuItem";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import styled from 'styled-components'
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import { Grid, Typography } from "@material-ui/core";
+import AlertDialog from "../../../Components/Components/AlertDialog"
+import { GiAchievement } from 'react-icons/gi'
+
+const StyledTableCell = withStyles((theme) => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+}))(TableRow);
+
+const GameficationAchieves = () => {
+  const history = useHistory()
+  const WINDOW_WIDTH = window.innerWidth
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ESTADO",
+    "ID",
+    "NAME",
+    "CRIADO EM",
+    "ATUALIZADO EM",
+    "AÇÕES",
+    "VISUALIZAR"
+  ]; //Labels from Table
+  const { state } = useContext(Store);
+  const [currPage, setcurrPage] = useState(0);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(true);
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [items, setItems] = useState([]);
+  const [stateOpt, setStateOpt] = useState(1)
+  const [name, setName] = useState("")
+  const [valueNameField, setValueNameField] = useState("")
+  const [open, setOpen] = useState(false)
+  const [deleteItem, setDeleteItem] = useState({})
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const stateOptions = [
+    { name: 0, value: "Inativo" },
+    { name: 1, value: "Ativo" },
+    { name: 2, value: "Removido" },
+  ];
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === "admin" || roles[i].name === "editor")
+          canUserEdit = true;
+    } else {
+      canUserEdit = false;
+    }
+
+    return canUserEdit;
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const FastActions = (item, index) => {
+    switch (item.state) {
+      case "deleted":
+        return (
+          <Grid container alignItems="center" justify={WINDOW_WIDTH <= 950 ? "flex-start" : "flex-end"} spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                onClick={() => inactiveItem(item, index)}
+              >
+                Inativar
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item, index)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "inactive":
+        return (
+          <Grid container alignItems="center" justify={WINDOW_WIDTH <= 950 ? "flex-start" : "flex-end"} spacing={1}>
+            <Grid item>
+              <Button
+                color="primary"
+                variant="contained"
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                onClick={() => handleAlertDialog(item)}
+              >
+                Remover
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                color="primary"
+                style={{ backgroundColor: "#228B22", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => activeItem(item, index)}
+              >
+                Ativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      case "active":
+        return (
+          <Grid container alignItems="center" justify={WINDOW_WIDTH <= 950 ? "flex-start" : "flex-end"} spacing={1}>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FA8072", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => handleAlertDialog(item)}
+              >
+                Remover
+                            </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                style={{ backgroundColor: "#FF8C00", color: "#FFFAFA", width: "150px" }}
+                variant="contained"
+                onClick={() => inactiveItem(item, index)}
+              >
+                Inativar
+                            </Button>
+            </Grid>
+          </Grid>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  const StateItem = (state) => {
+    switch (state) {
+      case "deleted":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FA8072",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            REMOVIDO
+          </Paper>
+        );
+      case "inactive":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#FF8C00",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            INATIVO
+          </Paper>
+        );
+      case "active":
+        return (
+          <Paper
+            style={{
+              textAlign: "center",
+              padding: "0.5em",
+              backgroundColor: "#228B22",
+              fontWeight: "500",
+              color: "#FFFAFA",
+            }}
+          >
+            ATIVO
+          </Paper>
+        );
+      default:
+        return "NOTHING";
+    }
+  };
+
+  const handleAlertDialog = (item) => {
+    setOpen(true)
+    setDeleteItem(item)
+  }
+
+  const findIndexOfWantedItem = (item) => {
+    const index = items.findIndex((item) => item.id === deleteItem.id)
+    return index;
+  }
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("achievements", deleteItem.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          handleChangeStateItem(findIndexOfWantedItem(deleteItem), "deleted")
+        }
+        setcurrPage(0)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const inactiveItem = (item, index) => {
+    const body = {
+      "achievement": {
+        "state": "inactive"
+      }
+    }
+    putRequest(
+      EditFilter("achievements", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi inativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          handleChangeStateItem(index, "inactive")
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const activeItem = (item, index) => {
+    const body = {
+      "achievement": {
+        "state": "active"
+      }
+    }
+    putRequest(
+      EditFilter("achievements", item.id),
+      body,
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi ativado com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          handleChangeStateItem(index, "active")
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const handleChangeStateItem = (index, state) => {
+    const currItems = [...items]
+    currItems.splice(index, 1)
+    setItems(currItems)
+  }
+
+  const buildUrl = (name, state) => {
+    if (name && (state >= 0 && state <= 2))
+      return Url("achievements", `"state" : ${stateOpt}, "name" : "${name}"`, currPage, "DESC")
+    else if (name)
+      return Url("achievements", `"name" : "${name}"`, currPage, "DESC")
+    else if (state >= 0 && state <= 2)
+      return Url("achievements", `"state" : ${stateOpt}`, currPage, "DESC")
+    else
+      return Url("achievements", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(name, stateOpt),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, name, stateOpt])
+
+  useEffect(() => {
+    setName("")
+    setStateOpt(1)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error</div>;
+  } else if (!loaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    if (CheckUserPermission()) {
+      if (WINDOW_WIDTH <= 950) {
+        return (
+          <>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <MobilePageHeader
+              title="Conquistas"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/createAchievements")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Estado"
+                      value={stateOpt}
+                      onChange={(e) => { setStateOpt(e.target.value) }}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {stateOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Nome"
+                      value={valueNameField}
+                      onChange={(e) => { setValueNameField(e.target.value) }}
+                      onBlur={(e) => { setName(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null}
+            </MobilePageHeader>
+            <div style={{ height: '2em' }}></div>
+
+            {items.map((row, index) =>
+              index === items.length - 1 ? (
+                <StyledDivButton>
+                  <Button
+                    key={index}
+                    color="primary"
+                    variant="text"
+                    // disabled={isLoadingMoreItems}
+                    startIcon={<AddRoundedIcon />}
+                    disabled={isLoadingMoreItems}
+                    onClick={() => {
+                      setcurrPage(currPage + 1)
+                    }}
+                  >
+                    {isLoadingMoreItems ? (
+                      <CircularProgress size={24} />
+                    ) : (
+                        "Carregar mais itens"
+                      )}
+                  </Button>
+                </StyledDivButton>
+              ) : (
+                  <>
+                    <MobileList
+                      key={index}
+                      title={row.name}
+                      subtitle={row.id}
+                      backColor={"#e81f4f"}
+                      avatar={
+                        <GiAchievement size={20} color="white" />
+
+                      }
+                      href={`/admin/achievement/${row.id}`}
+                      reset={() => { }}
+                      data={[
+
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                        {
+                          title: "Atualizado em",
+                          subtitle: DisplayDate(row.updated_at)
+                        },
+                        {
+                          title: "Experiência ganha",
+                          subtitle: <Typography style={{ color: "#228B22" }}>
+                            {"+" + (row.reward_experience) + " experiência"}
+                          </Typography>
+                        },
+                        {
+                          title: "Points ganho",
+                          subtitle: <Typography style={{ color: "#228B22" }}>
+                            {"+" + (row.reward_points) + " points"}
+                          </Typography>
+                        },
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        {
+                          title: "Requisitos",
+                          subtitle: <ul>
+                            {
+                              row.requirements.map((req) => {
+                                return (
+                                  <li key={req.created_at}>
+                                    {req.description}
+                                  </li>
+                                )
+                              })
+                            }
+                          </ul>
+                        },
+                        {
+                          title: "Estado",
+                          subtitle: StateItem(row.state)
+                        },
+                        {
+                          title: "Ações rapidos",
+                          subtitle: FastActions(row, index)
+                        },
+                      ]}
+                    />
+                    <div style={{ height: "0.5em" }} />
+                  </>
+                )
+            )}
+          </>
+        )
+      } else {
+        return (
+          <>
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <PageHeader
+              title="Conquistas"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/createAchievements")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      select
+                      label="Estado"
+                      value={stateOpt}
+                      onChange={(e) => { setStateOpt(e.target.value) }}
+                      helperText="Por favor, selecione uma das opções"
+                    >
+                      {stateOptions.map((option, index) => (
+                        <MenuItem
+                          key={option.value}
+                          value={option.name}
+                          name={option.value}
+                        >
+                          {option.value}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Nome"
+                      value={valueNameField}
+                      onChange={(e) => { setValueNameField(e.target.value) }}
+                      onBlur={(e) => { setName(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null}
+            </PageHeader>
+
+            <div style={{ height: "2em" }}></div>
+
+            <TableData top={TOP_LABELS}>
+              <TableBody>
+                {items.map((row, index) =>
+                  index === items.length - 1 ? (
+                    <StyledTableRow key={index} style={{ padding: "1em" }}>
+                      {/* Button to load more data */}
+                      <StyledTableCell>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          // disabled={isLoadingMoreItems}
+                          startIcon={<AddRoundedIcon />}
+                          disabled={isLoadingMoreItems}
+                          onClick={() => {
+                            setcurrPage(currPage + 1);
+                          }}
+                        >
+                          {isLoadingMoreItems ? (
+                            <CircularProgress size={24} />
+                          ) : (
+                              "Carregar mais itens"
+                            )}
+                        </Button>
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ) : (
+                      <StyledTableRow key={index}>
+                        <StyledTableCell component="th" scope="row">
+                          {StateItem(row.state)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">{row.id}</StyledTableCell>
+                        <StyledTableCell align="right">{row.name}</StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.created_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.updated_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {FastActions(row, index)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Link to={`/admin/achievement/${row.id}`}>
+                            <IconButton>
+                              <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                            </IconButton>
+                          </Link>
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    )
+                )}
+              </TableBody>
+            </TableData>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+          </>
+        );
+      }
+    } else return <Unauthorized />;
+  }
+};
+export default GameficationAchieves;
+
+const StyledDivButton = styled(Paper)`
+    width : 100%;
+    display : flex; 
+    justify-content : center; 
+    align-items : center; 
+`
+
+
diff --git a/src/Admin/Pages/Pages/SubPages/GameficationActions.js b/src/Admin/Pages/Pages/SubPages/GameficationActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..450bb1812a61f89d82be0f79ffdd8bc969dde74f
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/GameficationActions.js
@@ -0,0 +1,570 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useContext, useEffect, useState } from "react";
+import moment from "moment";
+import Unauthorized from "../../../Components/Components/Unauthorized";
+import { Store } from "../../../../Store";
+import { Link, useHistory } from "react-router-dom";
+import { getRequest, deleteRequest } from "../../../../Components/HelperFunctions/getAxiosConfig";
+import { Url, DeleteFilter } from "../../../Filters";
+import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
+import { withStyles } from "@material-ui/core/styles";
+import AddRoundedIcon from "@material-ui/icons/AddRounded";
+import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import PageHeader from "../../../Components/Components/PageHeader";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import TableData from "../../../Components/Components/Table";
+import TextField from "@material-ui/core/TextField";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Paper from "@material-ui/core/Paper";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import styled from 'styled-components'
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import { Grid } from "@material-ui/core";
+import AlertDialog from "../../../Components/Components/AlertDialog"
+import { FaRegHandPointer } from 'react-icons/fa'
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+
+const StyledTableCell = withStyles((theme) => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+}))(TableRow);
+
+const GameficationActions = () => {
+  const history = useHistory()
+  const WINDOW_WIDTH = window.innerWidth
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ID",
+    "NAME",
+    "DESCRIÇÃO",
+    "CRIADO EM",
+    "ATUALIZADO EM",
+    "AÇÕES"
+  ]; //Labels from Table
+  const { state } = useContext(Store);
+  const [currPage, setcurrPage] = useState(0);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(true);
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [items, setItems] = useState([]);
+  const [stateOpt, setStateOpt] = useState(1)
+  const [descricao, setDescricao] = useState("")
+  const [valueDescricaoField, setValueDescricaoField] = useState("")
+  const [name, setName] = useState("")
+  const [valueNameField, setValueNameField] = useState("")
+  const [open, setOpen] = useState(false)
+  const [deleteItem, setDeleteItem] = useState({})
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === "admin" || roles[i].name === "editor")
+          canUserEdit = true;
+    } else {
+      canUserEdit = false;
+    }
+
+    return canUserEdit;
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const handleAlertDialog = (item) => {
+    setOpen(true)
+    setDeleteItem(item)
+  }
+
+  const findIndexOfWantedItem = (item) => {
+    const index = items.findIndex((item) => item.id === deleteItem.id)
+    return index;
+  }
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("actions", deleteItem.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          handleChangeStateItem(findIndexOfWantedItem(deleteItem), "deleted")
+        }
+        setcurrPage(0)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const handleChangeStateItem = (index, state) => {
+    const currItems = [...items]
+    currItems.splice(index, 1)
+    setItems(currItems)
+  }
+
+  const buildUrl = (description, name) => {
+    if (description && name)
+      return Url("actions", `"description" : "${description}", "name" : "${name}"`, currPage, "DESC")
+    if (description)
+      return Url("actions", `"description" : "${description}"`, currPage, "DESC")
+    if (name)
+      return Url("actions", `"name" : "${name}"`, currPage, "DESC")
+    else
+      return Url("actions", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(descricao, name),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setLoaded(true)
+        setError(true)
+        setIsLoadingMoreItems(false)
+      }
+    )
+  }, [currPage, descricao, name, stateOpt])
+
+  useEffect(() => {
+    setDescricao("")
+    setName("")
+    setValueNameField("")
+    setValueDescricaoField("")
+    setStateOpt(1)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error</div>;
+  } else if (!loaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    if (CheckUserPermission()) {
+      if (WINDOW_WIDTH <= 950) {
+        return (
+          <>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <MobilePageHeader
+              title="Ações"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/CreateAction")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      label="Descrição"
+                      value={valueDescricaoField}
+                      onChange={(e) => { setValueDescricaoField(e.target.value) }}
+                      onBlur={(e) => { setDescricao(e.target.value) }}
+                      helperText="Por favor, ao digitar o Descrição que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Nome"
+                      value={valueNameField}
+                      onChange={(e) => { setValueNameField(e.target.value) }}
+                      onBlur={(e) => { setName(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null}
+            </MobilePageHeader>
+            <div style={{ height: '2em' }}></div>
+
+            {items.map((row, index) =>
+              index === items.length - 1 ? (
+                <StyledDivButton>
+                  <Button
+                    key={index}
+                    color="primary"
+                    variant="text"
+                    // disabled={isLoadingMoreItems}
+                    startIcon={<AddRoundedIcon />}
+                    disabled={isLoadingMoreItems}
+                    onClick={() => {
+                      setcurrPage(currPage + 1)
+                    }}
+                  >
+                    {isLoadingMoreItems ? (
+                      <CircularProgress size={24} />
+                    ) : (
+                        "Carregar mais itens"
+                      )}
+                  </Button>
+                </StyledDivButton>
+              ) : (
+                  <>
+                    <MobileList
+                      key={index}
+                      title={row.name}
+                      subtitle={row.id}
+                      backColor={"#00bcd4"}
+                      avatar={
+                        <FaRegHandPointer size={20} color="white" />
+                      }
+                      href={`/admin/action/${row.id}`}
+                      reset={() => { }}
+                      data={[
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                        {
+                          title: "Atualizado em",
+                          subtitle: DisplayDate(row.updated_at)
+                        },
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        row.requirements.length >= 1 ?
+                          {
+                            title: "Requisitos que dependem dessa ação",
+                            subtitle: <ul>
+                              {
+                                row.requirements.map((req) => {
+                                  return (
+                                    <li key={req.created_at}>
+                                      <Link to={`/admin/requirement/${req.id}`}>
+                                        <span style={{ color: "#00bcd4", textDecoration: "none" }}>
+                                          {req.description}
+                                        </span>
+                                      </Link>
+                                    </li>
+                                  )
+                                })
+                              }
+                            </ul>
+                          } : {},
+                        {
+                          title: "Ações",
+                          subtitle: <Button
+                            variant="contained"
+                            color="secondary"
+                            startIcon={<DeleteRoundedIcon />}
+                            onClick={() => handleAlertDialog(row)}
+                          >
+                            Deletar
+                          </Button>
+                        },
+                      ]}
+                    />
+                    <div style={{ height: "0.5em" }} />
+                  </>
+                )
+            )}
+          </>
+        )
+      } else {
+        return (
+          <>
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <PageHeader
+              title="Ações "
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/CreateAction")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      label="Descrição"
+                      value={valueDescricaoField}
+                      onChange={(e) => { setValueDescricaoField(e.target.value) }}
+                      onBlur={(e) => { setDescricao(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Nome"
+                      value={valueNameField}
+                      onChange={(e) => { setValueNameField(e.target.value) }}
+                      onBlur={(e) => { setName(e.target.value) }}
+                      helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null}
+            </PageHeader>
+
+            <div style={{ height: "2em" }}></div>
+
+            <TableData top={TOP_LABELS}>
+              <TableBody>
+                {items.map((row, index) =>
+                  index === items.length - 1 ? (
+                    <StyledTableRow key={index} style={{ padding: "1em" }}>
+                      {/* Button to load more data */}
+                      <StyledTableCell>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          // disabled={isLoadingMoreItems}
+                          startIcon={<AddRoundedIcon />}
+                          disabled={isLoadingMoreItems}
+                          onClick={() => {
+                            setcurrPage(currPage + 1);
+                          }}
+                        >
+                          {isLoadingMoreItems ? (
+                            <CircularProgress size={24} />
+                          ) : (
+                              "Carregar mais itens"
+                            )}
+                        </Button>
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ) : (
+                      <StyledTableRow key={index}>
+                        <StyledTableCell component="th" scope="row">
+                          {row.id}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">{row.name}</StyledTableCell>
+                        <StyledTableCell align="right">{row.description}</StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.created_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.updated_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Link to={`/admin/action/${row.id}`}>
+                            <Button
+                              style={{ width: "100%", marginBottom: "0.5em" }}
+                              variant="contained"
+                              color="primary"
+                              startIcon={<VisibilityIcon />}
+                            >
+                              Visualizar
+                            </Button>
+                          </Link>
+
+                          <Button
+                            style={{ width: "100%" }}
+                            variant="contained"
+                            color="secondary"
+                            startIcon={<DeleteRoundedIcon />}
+                            onClick={() => handleAlertDialog(row)}
+                          >
+                            Deletar
+                          </Button>
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    )
+                )}
+              </TableBody>
+            </TableData>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+          </>
+        );
+      }
+    } else return <Unauthorized />;
+  }
+};
+export default GameficationActions;
+
+const StyledDivButton = styled(Paper)`
+    width : 100%;
+    display : flex; 
+    justify-content : center; 
+    align-items : center; 
+`
+
+
diff --git a/src/Admin/Pages/Pages/SubPages/GameficationRequires.js b/src/Admin/Pages/Pages/SubPages/GameficationRequires.js
new file mode 100644
index 0000000000000000000000000000000000000000..e38325fed859997fd5e9f5de7ae8ef964a2036f5
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/GameficationRequires.js
@@ -0,0 +1,546 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useContext, useEffect, useState } from "react";
+import moment from "moment";
+import Unauthorized from "../../../Components/Components/Unauthorized";
+import { Store } from "../../../../Store";
+import { Link, useHistory } from "react-router-dom";
+import { getRequest, deleteRequest } from "../../../../Components/HelperFunctions/getAxiosConfig";
+import { Url, DeleteFilter } from "../../../Filters";
+import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
+import { withStyles } from "@material-ui/core/styles";
+import AddRoundedIcon from "@material-ui/icons/AddRounded";
+import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import PageHeader from "../../../Components/Components/PageHeader";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import TableData from "../../../Components/Components/Table";
+import TextField from "@material-ui/core/TextField";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Paper from "@material-ui/core/Paper";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import styled from 'styled-components'
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import { Grid } from "@material-ui/core";
+import AlertDialog from "../../../Components/Components/AlertDialog"
+import { DiRequirejs } from 'react-icons/di'
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+
+const StyledTableCell = withStyles((theme) => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+}))(TableRow);
+
+const GameficationRequires = () => {
+  const history = useHistory()
+  const WINDOW_WIDTH = window.innerWidth
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = [
+    "ID",
+    "NAME",
+    "DESCRIÇÃO",
+    "META",
+    "REPETIVEL",
+    "CRIADO EM",
+    "ATUALIZADO EM",
+    "AÇÕES"
+  ]; //Labels from Table
+  const { state } = useContext(Store);
+  const [currPage, setcurrPage] = useState(0);
+  const [error, setError] = useState(false);
+  const [loaded, setLoaded] = useState(true);
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [items, setItems] = useState([]);
+  const [stateOpt, setStateOpt] = useState(1)
+  const [descricao, setDescricao] = useState("")
+  const [valueDescricaoField, setValueDescricaoField] = useState("")
+  const [open, setOpen] = useState(false)
+  const [deleteItem, setDeleteItem] = useState({})
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
+    });
+  };
+
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
+
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === "admin" || roles[i].name === "editor")
+          canUserEdit = true;
+    } else {
+      canUserEdit = false;
+    }
+
+    return canUserEdit;
+  };
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const handleAlertDialog = (item) => {
+    setOpen(true)
+    setDeleteItem(item)
+  }
+
+  const findIndexOfWantedItem = (item) => {
+    const index = items.findIndex((item) => item.id === deleteItem.id)
+    return index;
+  }
+
+  const deleteHandler = () => {
+    deleteRequest(
+      DeleteFilter("requirements", deleteItem.id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O achievement foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          handleChangeStateItem(findIndexOfWantedItem(deleteItem), "deleted")
+        }
+        setcurrPage(0)
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+      }
+    )
+  }
+
+  const handleChangeStateItem = (index, state) => {
+    const currItems = [...items]
+    currItems.splice(index, 1)
+    setItems(currItems)
+  }
+
+  const buildUrl = (description) => {
+    if (description)
+      return Url("requirements", `"description" : "${description}"`, currPage, "DESC")
+    else
+      return Url("requirements", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(descricao),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, descricao, stateOpt])
+
+  useEffect(() => {
+    setDescricao("")
+    setStateOpt(1)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error</div>;
+  } else if (!loaded) {
+    return <LoadingSpinner text="Carregando..." />;
+  } else {
+    if (CheckUserPermission()) {
+      if (WINDOW_WIDTH <= 950) {
+        return (
+          <>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <MobilePageHeader
+              title="Requisitos"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/CreateRequirement")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      label="Descrição"
+                      value={valueDescricaoField}
+                      onChange={(e) => { setValueDescricaoField(e.target.value) }}
+                      onBlur={(e) => { setDescricao(e.target.value) }}
+                      helperText="Por favor, ao digitar o descrição que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null}
+            </MobilePageHeader>
+            <div style={{ height: '2em' }}></div>
+
+            {items.map((row, index) =>
+              index === items.length - 1 ? (
+                <StyledDivButton>
+                  <Button
+                    key={index}
+                    color="primary"
+                    variant="text"
+                    // disabled={isLoadingMoreItems}
+                    startIcon={<AddRoundedIcon />}
+                    disabled={isLoadingMoreItems}
+                    onClick={() => {
+                      setcurrPage(currPage + 1)
+                    }}
+                  >
+                    {isLoadingMoreItems ? (
+                      <CircularProgress size={24} />
+                    ) : (
+                        "Carregar mais itens"
+                      )}
+                  </Button>
+                </StyledDivButton>
+              ) : (
+                  <>
+                    <MobileList
+                      key={index}
+                      title={row.action.name}
+                      subtitle={row.id}
+                      backColor={"#673ab7"}
+                      avatar={
+                        <DiRequirejs size={20} color="white" />
+                      }
+                      href={`/admin/requirement/${row.id}`}
+                      reset={() => { }}
+                      data={[
+                        {
+                          title: "Criado em",
+                          subtitle: DisplayDate(row.created_at)
+                        },
+                        {
+                          title: "Atualizado em",
+                          subtitle: DisplayDate(row.updated_at)
+                        },
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        {
+                          title: "Achivements que depende desse requisito",
+                          subtitle: <ul>
+                            {
+                              row.achievements.map((achieve) => {
+                                return (
+                                  <li key={achieve.created_at}>
+                                    <Link to={`/admin/achievement/${achieve.id}`}>
+                                      <span style={{textDecoration: "none", color: '#673ab7', backgroundColor:'none'}}>
+                                        {achieve.name}
+                                      </span>
+                                    </Link>
+                                  </li>
+                                )
+                              })
+                            }
+                          </ul>
+                        },
+                        {
+                          title: "Ações",
+                          subtitle: <Button
+                            variant="contained"
+                            color="secondary"
+                            startIcon={<DeleteRoundedIcon />}
+                            onClick={() => handleAlertDialog(row)}
+                          >
+                            Deletar
+                          </Button>
+                        },
+                      ]}
+                    />
+                    <div style={{ height: "0.5em" }} />
+                  </>
+                )
+            )}
+          </>
+        )
+      } else {
+        return (
+          <>
+            <SnackBar
+              severity={snackInfo.icon}
+              text={snackInfo.message}
+              snackbarOpen={snackInfo.open}
+              color={snackInfo.color}
+              handleClose={() =>
+                setSnackInfo({
+                  message: "",
+                  icon: "",
+                  open: false,
+                  color: "",
+                })
+              }
+            />
+            <PageHeader
+              title="Requisitos"
+              actions={[
+                {
+                  name: "Atualizar",
+                  isLoading: false,
+                  func: () => {
+                    setcurrPage(0);
+                  },
+                  icon: <UpdateRoundedIcon />,
+                },
+                {
+                  name: "Filtrar",
+                  isLoading: false,
+                  func: () => {
+                    setShowFilter(!showFilter);
+                  },
+                  icon: <FilterListRoundedIcon />,
+                },
+                {
+                  name: "Novo",
+                  isLoading: false,
+                  func: () => {
+                    history.push("/admin/CreateRequirement")
+                  },
+                  icon: <AddRoundedIcon />,
+                },
+              ]}
+            >
+              {showFilter ? (
+                <Grid
+                  container
+                  direction="row"
+                  justify="space-between"
+                  alignItems="center"
+                  alignContent="flex-end"
+                  spacing={3}
+                  xs={12}
+                >
+                  <Grid item>
+                    <TextField
+                      label="Descrição"
+                      value={valueDescricaoField}
+                      onChange={(e) => { setValueDescricaoField(e.target.value) }}
+                      onBlur={(e) => { setDescricao(e.target.value) }}
+                      helperText="Por favor, ao digitar o descrição que você quer filtar, retire o foco do campo de texto"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null}
+            </PageHeader>
+
+            <div style={{ height: "2em" }}></div>
+
+            <TableData top={TOP_LABELS}>
+              <TableBody>
+                {items.map((row, index) =>
+                  index === items.length - 1 ? (
+                    <StyledTableRow key={index} style={{ padding: "1em" }}>
+                      {/* Button to load more data */}
+                      <StyledTableCell>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          // disabled={isLoadingMoreItems}
+                          startIcon={<AddRoundedIcon />}
+                          disabled={isLoadingMoreItems}
+                          onClick={() => {
+                            setcurrPage(currPage + 1);
+                          }}
+                        >
+                          {isLoadingMoreItems ? (
+                            <CircularProgress size={24} />
+                          ) : (
+                              "Carregar mais itens"
+                            )}
+                        </Button>
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ) : (
+                      <StyledTableRow key={index}>
+                        <StyledTableCell component="th" scope="row">
+                          {row.id}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">{row.action.name}</StyledTableCell>
+                        <StyledTableCell align="right">{row.description}</StyledTableCell>
+                        <StyledTableCell align="right">{row.goal}</StyledTableCell>
+                        <StyledTableCell align="right">{row.repeatable}</StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.created_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          {DisplayDate(row.updated_at)}
+                        </StyledTableCell>
+                        <StyledTableCell align="right">
+                          <Link to={`/admin/requirement/${row.id}`}>
+                            <Button
+                              style={{ width: "100%", marginBottom: "0.5em" }}
+                              variant="contained"
+                              color="primary"
+                              startIcon={<VisibilityIcon />}
+                            >
+                              Visualizar
+                            </Button>
+                          </Link>
+
+                          <Button
+                            style={{ width: "100%" }}
+                            variant="contained"
+                            color="secondary"
+                            startIcon={<DeleteRoundedIcon />}
+                            onClick={() => handleAlertDialog(row)}
+                          >
+                            Deletar
+                          </Button>
+                        </StyledTableCell>
+                      </StyledTableRow>
+                    )
+                )}
+              </TableBody>
+            </TableData>
+            <AlertDialog
+              open={open}
+              OnDelete={deleteHandler}
+              deleteItem={deleteItem}
+              HandleClose={() => {
+                setOpen(false)
+              }}
+            />
+          </>
+        );
+      }
+    } else return <Unauthorized />;
+  }
+};
+export default GameficationRequires;
+
+const StyledDivButton = styled(Paper)`
+    width : 100%;
+    display : flex; 
+    justify-content : center; 
+    align-items : center; 
+`
+
+
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index d8f41e7dac618091750a2fd09e8bb5e0d72c6e48..cf77c1e40cdc0a57ff52461055acce2c3fbf2d20 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -22,6 +22,9 @@ import TableData from "../../../Components/Components/Table";
 import SnackBar from "../../../../Components/SnackbarComponent";
 import AlertDialog from "../../../Components/Components/AlertDialog";
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 // Imports about icon
 import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -30,833 +33,567 @@ import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import IconButton from "@material-ui/core/IconButton";
-import CancelRoundedIcon from "@material-ui/icons/CancelRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import DeleteIcon from "@material-ui/icons/Delete";
 // Import from material-ui
-import { withStyles, makeStyles } from "@material-ui/core/styles";
+import { withStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
-import { Typography, CircularProgress } from "@material-ui/core";
-import Popover from "@material-ui/core/Popover";
+import { CircularProgress } from "@material-ui/core";
 import TextField from "@material-ui/core/TextField";
 // services
 import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 //Filters
-import { Url, GetOneOfAllUrl, DeleteFilter } from "../../../Filters";
+import { Url, DeleteFilter } from "../../../Filters";
 //router 
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import styled from "styled-components"
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
 
-let currPage = 0;
-let transformListToAsc = false
-
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        "&:nth-of-type(odd)": {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
-const useStyles = makeStyles((theme) => ({
-    root: {
-        flexGrow: 1,
-    },
-    paper: {
-        padding: theme.spacing(1),
-        textAlign: "start",
-    },
-    button: {
-        margin: theme.spacing(1),
-        alignSelf: "flex-end",
-    },
-}));
-
 const Institutions = () => {
-    const classes = useStyles();
-    const WINDOW_WIDTH = window.innerWidth
-
-    const addOndeLenght = [""];
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-
-    const [deleteItem, setDeleteItem] = useState({}); //Delete Item
-    const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
-    const [isUpdating, setIsUpdating] = useState(false);
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
-
-    const [openAlertDialog, setOpenAlertDialog] = useState(false);
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: "",
-        icon: "",
-        open: false,
-        color: "",
+  const WINDOW_WIDTH = window.innerWidth
+  const router = useHistory()
+  const ADD_ONE_LENGHT = [""];
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+  const [showFilter, setShowFilter] = useState(false)
+  const [currPage, setCurrPage] = useState(0)
+  const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+  const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+
+  const [openAlertDialog, setOpenAlertDialog] = useState(false);
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: "",
+    icon: "",
+    open: false,
+    color: "",
+  });
+
+  const [search, setSeacrh] = useState("");
+  const [valueOfSearch, setValueOfSearch] = useState("")
+  const [city, setCity] = useState("");
+  const [valueOfCity, setValueOfCity] = useState("")
+  const [country, setCountry] = useState("");
+  const [valueOfCountry, setValueOfCountry] = useState("")
+  const [description, setDescription] = useState("");
+  const [valueOfDescription, setValueOfDescription] = useState("")
+
+  const OnChangeSearchHandler = (e) => {
+    setValueOfSearch(e.target.value);
+  };
+
+  const onChangeCityHandler = (e) => {
+    setValueOfCity(e.target.value);
+  };
+
+  const onChangeCountryHandler = (e) => {
+    setValueOfCountry(e.target.value);
+  };
+
+  const onChangeDescriptionHandler = (e) => {
+    setValueOfDescription(e.target.value);
+  };
+  // **************** About the PopOverMenu ****************
+
+  //Controlls the state of the Alert Dialog
+  const HandleStateAlertDialog = (i) => {
+    const obj = { ...items[i] };
+    setDeleteItem(obj);
+    setOpenAlertDialog(!openAlertDialog);
+  };
+
+  //Controlls the state and the informations of the snack
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color,
     });
-
-    // **************** About the PopOver Menu ****************
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const [showCityField, setShowCityField] = useState(false); //show the text field of filter by city
-    const [showContryField, setShowCountryField] = useState(false); //show the text field of the filter by country
-    const [showDescriptionField, setShowDescriptionField] = useState(false); //show the text field of the filter by description
-    const [showStandadSearch, setShowStandarSearchField] = useState(false);
-
-    const [isFilteringByName, setisFilteringByName] = useState(false);
-    const [isFilteringByCity, setisFilteringByCity] = useState(false);
-    const [isFilteringByCounty, setisFilteringByCountry] = useState(false);
-    const [isFilteringByDesc, setisFilteringByDesc] = useState(false);
-
-    const [search, setSeacrh] = useState("");
-    const [city, setCity] = useState("");
-    const [country, setCountry] = useState("");
-    const [description, setDescription] = useState("");
-
-    const CityHandler = () => {
-        currPage = 0;
-        transformListToAsc = false
-        setShowCityField(!showCityField);
-        setisFilteringByCity(!isFilteringByCity);
-        UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
-    };
-
-    const CountryHandler = () => {
-        currPage = 0;
-        transformListToAsc = false
-        setShowCountryField(!showContryField);
-        UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
-        setisFilteringByCountry(!isFilteringByCounty);
-    };
-
-    const DescHandler = () => {
-        currPage = 0;
-        transformListToAsc = false
-        setShowDescriptionField(!showDescriptionField);
-        setisFilteringByDesc(!isFilteringByDesc);
-        UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
-    };
-
-    const StandartHandler = () => {
-        currPage = 0;
-        transformListToAsc = false
-        setShowStandarSearchField(!showStandadSearch);
-        setisFilteringByName(!isFilteringByName);
-        UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
-    };
-
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const open = Boolean(anchorEl);
-    const id = open ? "simple-popover" : undefined;
-
-    const OnChangeSearchHandler = (e) => {
-        setSeacrh(e.target.value);
-        Filter(GetOneOfAllUrl("institutions", `"name" : "${search}"`));
-    };
-
-    const onChangeCityHandler = (e) => {
-        setCity(e.target.value);
-        Filter(GetOneOfAllUrl("institutions", `"city" : "${city}"`));
-    };
-
-    const onChangeCountryHandler = (e) => {
-        setCountry(e.target.value);
-        Filter(GetOneOfAllUrl("institutions", `"country" : "${country}"`));
-    };
-
-    const onChangeDescriptionHandler = (e) => {
-        setDescription(e.target.value);
-        Filter(GetOneOfAllUrl("institutions", `"description" : "${description}"`));
-    };
-    // **************** About the PopOverMenu ****************
-
-    //Controlls the state of the Alert Dialog
-    const HandleStateAlertDialog = (i) => {
-        const obj = { ...items[i] };
-        setDeleteItem(obj);
-        setOpenAlertDialog(!openAlertDialog);
-    };
-
-    //Controlls the state and the informations of the snack
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color,
-        });
-    };
-
-    //Defines which row must show the circular progress
-    const HandleStateCircularProgress = (i) => {
-        setIsLoadingToDelete(i);
-    };
-
-    //Filters the search
-    const Filter = (api) => {
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                transformListToAsc = false
-                setItems(arrData.concat(addOndeLenght));
-            },
-            (error) => {
-                setError(true);
-            }
-        )
-    };
-
-    //This function updates List every time the content of the api changes
-    const UpdtateListData = (api) => {
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                setItems(arrData.concat(addOndeLenght));
-                HandleSnack(
-                    "A lista de dados foi atualizada",
-                    true,
-                    "success",
-                    "#228B22"
-                );
-                setIsUpdating(false);
-            },
-            (error) => {
-                HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                setIsUpdating(false);
-            }
-        )
-    };
-
-    //Called when user want to delete one institution
-    async function DeleteHandler() {
-        const id = deleteItem.id;
-        HandleStateAlertDialog(null);
-        deleteRequest(
-            DeleteFilter("institutions", id),
-            (data) => {
-                if (data.errors)
-                    HandleSnack("Ocorreu algum erro!", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        "A instituição foi deletada com sucesso",
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    transformListToAsc = false
-                    UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
-                    HandleStateCircularProgress(null);
-                }
-            },
-            (error) => {
-                HandleSnack("Ocorreu algum erro!", true, "warning", "#FA8072");
-                HandleStateCircularProgress(null);
-            }
-        )
+  };
+
+  //Defines which row must show the circular progress
+  const HandleStateCircularProgress = (i) => {
+    setIsLoadingToDelete(i);
+  };
+
+  //Called when user want to delete one institution
+  async function DeleteHandler() {
+    const id = deleteItem.id;
+    HandleStateAlertDialog(null);
+    deleteRequest(
+      DeleteFilter("institutions", id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro!", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "A instituição foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          removeItemFromList(id);
+          HandleStateCircularProgress(null);
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro!", true, "warning", "#FA8072");
+        HandleStateCircularProgress(null);
+      }
+    )
+  }
+
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
+      }
     }
-
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true);
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data];
-                console.log(arrData);
-                if (arrData.length === 0) {
-                    HandleSnack(
-                        "Não há mais dados para serem carregados",
-                        true,
-                        "warning",
-                        "#FFC125"
-                    );
-                } else {
-                    const arrItems = [...items];
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
-                    const arrResult = arrItems.concat(arrData);
-                    setItems(arrResult.concat(addOndeLenght));
-                }
-                setIsLoadingMoreItems(false);
-            },
-            (error) => {
-                HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
-                setIsLoadingMoreItems(false);
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
+    }
+  }
+
+  const buildUrl = () => {
+    return Url("institutions", `"name" : "${search}", "description" : "${description}", "city" : "${city}", "country" : "${country}"`, currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
+        }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage, description, country, search, city])
+
+  useEffect(() => {
+    setSeacrh("")
+    setDescription("")
+    setCountry("")
+    setCity("")
+    setValueOfDescription("")
+    setValueOfSearch("")
+    setValueOfCountry("")
+    setValueOfCity("")
+    setCurrPage(0)
+  }, [showFilter])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+  if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+    //Words that defines that column
+    const topTable = [
+      "ID",
+      "NOME",
+      "DESCRIÇÃO",
+      "CIDADE",
+      "PAÍS",
+      "VISUALIZAR",
+      "DELETAR",
+    ];
+
+    //Field of the Filter
+    const TextFieldOfTheFilter = [
+      {
+        label: "Pesquisar",
+        value: valueOfSearch,
+        helperText: "Ao digitar, retire o foco do campo",
+        onChange: (event) => OnChangeSearchHandler(event),
+        onBlur: (event) => setSeacrh(event.target.value)
+      },
+      {
+        label: "Cidade",
+        value: valueOfCity,
+        helperText: "Ao digitar, retire o foco do campo",
+        onChange: (event) => onChangeCityHandler(event),
+        onBlur: (event) => setCity(event.target.value)
+      },
+      {
+        label: "País",
+        value: valueOfCountry,
+        helperText: "Ao digitar, retire o foco do campo",
+        onChange: (event) => onChangeCountryHandler(event),
+        onBlur: (event) => setCountry(event.target.value)
+
+      },
+      {
+        label: "Descrição",
+        value: valueOfDescription,
+        helperText: "Ao digitar, retire o foco do campo",
+        onChange: (event) => onChangeDescriptionHandler(event),
+        onBlur: (event) => setDescription(event.target.value)
+      },
+    ];
+
+    if (WINDOW_WIDTH <= 977) {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
             }
-        )
-    };
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('institutions', '', `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(addOndeLenght))
+          />
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+          {/************** Start of the header **************/}
+          <MobilePageHeader
+            title="Instituições"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
                 },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
-        } else {
-            getRequest(
-                Url('institutions', '', `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(addOndeLenght))
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
                 },
-                (error) => {
-                    HandleSnack('institutions ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
-        }
-    }
-
-    useEffect(() => {
-        getRequest(
-            Url("institutions", "", `${currPage}`, "DESC"),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(addOndeLenght));
-            },
-            (error) => {
-                setError(true);
+                icon: <FilterListRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/InstitutionCreate')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+            {
+              showFilter &&
+              <Grid item xs={12}>
+                <Grid container justify="space-between" spacing={3}>
+                  {TextFieldOfTheFilter.map((field, index) => (
+                    <Grid item key={field.label}>
+                      <TextField
+                        id={index}
+                        label={field.label}
+                        value={field.value}
+                        helperText={field.helperText}
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              </Grid>
             }
-        )
-    }, []);
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
+          </MobilePageHeader>
+          {/************** End of the header **************/}
+
+          <div style={{ height: "2em" }}></div>
+
+          {/************** Start of display data in table **************/}
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton
+                key="Load more"
+              >
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
+                    )}
+                </Button>
+              </StyledDivButton>
+            ) : (
+                <>
+                  <MobileList
+                    key={index}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#ff7f00"}
+                    avatar={<AccountBalanceRoundedIcon />}
+                    href={`/admin/institution/${row.id}`}
+                    reset={() => {
+
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Descrição",
+                          subtitle: row.description ? row.description : "Sem dado"
+
+                        },
+                        {
+                          title: "Cidade",
+                          subtitle: row.city ? row.city : "Sem dado"
+
+                        },
+                        {
+                          title: "País",
+                          subtitle: row.country ? row.country : "Sem dado"
+                        },
+                        {
+                          title: "Deletar",
+                          subtitle:
+                            <Button
+                              variant="contained"
+                              color="secondary"
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
+                              startIcon={<DeleteIcon />}
+                            >
+                              Deletar
+                            </Button>
+                        }
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+          {/************** End of display data in table **************/}
+
+          {/* This alert will be displayed if the user click to delete an institution */}
+        </div>
+      )
     }
-    if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-        //Words that defines that column
-        const topTable = [
-            "ID",
-            "NOME",
-            "DESCRIÇÃO",
-            "CIDADE",
-            "PAÍS",
-            "VISUALIZAR",
-            "DELETAR",
-        ];
-
-        //Buttons from PopOverMenu
-        const flatButtonsFromPopOverMenu = [
-            {
-                label: "Pesquisa padrão",
-                onClick: StandartHandler,
-                color: showStandadSearch ? "primary" : "default",
-            },
-            {
-                label: "Cidade",
-                onClick: CityHandler,
-                color: showCityField ? "primary" : "default",
-            },
-            {
-                label: "País",
-                onClick: CountryHandler,
-                color: showContryField ? "primary" : "default",
-            },
-            {
-                label: "Descrição",
-                onClick: DescHandler,
-                color: showDescriptionField ? "primary" : "default",
-            },
-        ];
-
-        //Field of the Filter
-        const TextFieldOfTheFilter = [
-            {
-                label: "Pesquisar",
-                show: showStandadSearch,
-                onChange: (event) => OnChangeSearchHandler(event),
-                hide: StandartHandler,
-            },
-            {
-                label: "Cidade",
-                show: showCityField,
-                onChange: (event) => onChangeCityHandler(event),
-                hide: CityHandler,
-            },
-            {
-                label: "País",
-                show: showContryField,
-                onChange: (event) => onChangeCountryHandler(event),
-                hide: CountryHandler,
-            },
+    else {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() =>
+              setSnackInfo({
+                message: "",
+                icon: "",
+                open: false,
+                color: "",
+              })
+            }
+          />
+          {/************** Start of the header **************/}
+          <PageHeader
+            title="Instituições"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/InstitutionCreate')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
             {
-                label: "Descrição",
-                show: showDescriptionField,
-                onChange: (event) => onChangeDescriptionHandler(event),
-                hide: DescHandler,
-            },
-        ];
-
-        if (WINDOW_WIDTH <= 977) {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-                    {/************** Start of the header **************/}
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography className={classes.paper} variant="h4">
-                                    Lista de Instituições
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}     
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            aria-describedby={id}
-                                            variant="contained"
-                                            color="secondary"
-                                            className={classes.button}
-                                            onClick={handleClick}
-                                            startIcon={
-                                                <FilterListRoundedIcon style={{ fill: "white" }} />
-                                            }
-                                        >
-                                            Filtrar
-                                        </Button>
-                                        <Popover
-                                            id={id}
-                                            open={open}
-                                            anchorEl={anchorEl}
-                                            onClose={handleClose}
-                                            anchorOrigin={{
-                                                vertical: "bottom",
-                                                horizontal: "center",
-                                            }}
-                                            transformOrigin={{
-                                                vertical: "top",
-                                                horizontal: "center",
-                                            }}
-                                        >
-                                            {flatButtonsFromPopOverMenu.map((flat, index) => (
-                                                <Button
-                                                    key={index}
-                                                    onClick={flat.onClick}
-                                                    color={flat.color}
-                                                >
-                                                    {flat.label}
-                                                </Button>
-                                            ))}
-                                        </Popover>
-                                    </Grid>
-
-                                    <Grid item>
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/InstitutionCreate'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                className={classes.button}
-                                                startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
-                                                onClick={() => {
-                                                    currPage = 0
-                                                    transformListToAsc = false
-                                                }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            className={classes.button}
-                                            startIcon={<UpdateRoundedIcon />}
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                transformListToAsc = false
-                                                setIsUpdating(true);
-                                                UpdtateListData(
-                                                    Url("institutions", "", `${currPage}`, "DESC")
-                                                );
-                                            }}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12}>
-                            <Grid container justify="space-between" spacing={3}>
-                                {TextFieldOfTheFilter.map((field, index) => (
-                                    <Grid item key={index}>
-                                        {field.show ? (
-                                            <div>
-                                                <TextField
-                                                    id={index}
-                                                    label={field.label}
-                                                    type="search"
-                                                    onChange={field.onChange}
-                                                />
-                                                <IconButton
-                                                    size="small"
-                                                    color="primary"
-                                                    onClick={field.hide}
-                                                >
-                                                    <CancelRoundedIcon />
-                                                </IconButton>
-                                            </div>
-                                        ) : null}
-                                    </Grid>
-                                ))}
-                            </Grid>
-                        </Grid>
-                    </Paper>
-                    {/************** End of the header **************/}
-
-                    <div style={{ height: "2em" }}></div>
-
-                    {/************** Start of display data in table **************/}
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('institutions', '', `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('institutions', '', `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
+              showFilter &&
+              <Grid item xs={12}>
+                <Grid container justify="space-between" spacing={3}>
+                  {TextFieldOfTheFilter.map((field, index) => (
+                    <Grid item key={field.label}>
+                      <TextField
+                        id={index}
+                        label={field.label}
+                        value={field.value}
+                        helperText={field.helperText}
+                        onChange={field.onChange}
+                        onBlur={field.onBlur}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              </Grid>
+            }
+          </PageHeader>
+          {/************** End of the header **************/}
+
+          <div style={{ height: "2em" }}></div>
+
+          {/************** Start of display data in table **************/}
+          <TableData top={topTable}>
+            <TableBody>
+              {items.map((row, index) =>
+                index === items.length - 1 ? (
+                  <StyledTableRow key={row.created_at}>
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color="primary"
+                        variant="text"
+                        startIcon={<AddRoundedIcon />}
+                        disabled={isLoadingMoreItems}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {isLoadingMoreItems ? (
+                          <CircularProgress size={24} />
                         ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#ff7f00"}
-                                        avatar={<AccountBalanceRoundedIcon />}
-                                        href={`/admin/institution/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0
-                                            transformListToAsc = false
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Descrição",
-                                                    subtitle: row.description ? row.description : "Sem dado"
-
-                                                },
-                                                {
-                                                    title: "Cidade",
-                                                    subtitle: row.city ? row.city : "Sem dado"
-
-                                                },
-                                                {
-                                                    title: "País",
-                                                    subtitle: row.country ? row.country : "Sem dado"
-                                                },
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
-                    )}
-                    {/************** End of display data in table **************/}
-
-                    {/* This alert will be displayed if the user click to delete an institution */}
-                </div>
-            )
-        }
-        else {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() =>
-                            setSnackInfo({
-                                message: "",
-                                icon: "",
-                                open: false,
-                                color: "",
-                            })
-                        }
-                    />
-                    {/************** Start of the header **************/}
-                    <Paper style={{ padding: "1em" }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography className={classes.paper} variant="h4">
-                                    Lista de Instituições
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
+                            "Carregar mais itens"
+                          )}
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+                ) : (
+                    <StyledTableRow key={index}>
+                      <StyledTableCell component="th" scope="row">
+                        {row.id}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">{row.name}</StyledTableCell>
+                      <StyledTableCell align="right">
+                        {row.description}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">{row.city}</StyledTableCell>
+                      <StyledTableCell align="right">
+                        {row.country}
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        <Link to={`/admin/institution/${row.id}`}>
+                          <IconButton>
+                            <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                          </IconButton>
+                        </Link>
+                      </StyledTableCell>
+                      <StyledTableCell align="right">
+                        {isLoadingToDelete === index ? (
+                          <CircularProgress size={24} color="primary" />
+                        ) : (
+                            <IconButton
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
                             >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            aria-describedby={id}
-                                            variant="contained"
-                                            color="secondary"
-                                            className={classes.button}
-                                            onClick={handleClick}
-                                            startIcon={
-                                                <FilterListRoundedIcon style={{ fill: "white" }} />
-                                            }
-                                        >
-                                            Filtrar
-                                        </Button>
-                                        <Popover
-                                            id={id}
-                                            open={open}
-                                            anchorEl={anchorEl}
-                                            onClose={handleClose}
-                                            anchorOrigin={{
-                                                vertical: "bottom",
-                                                horizontal: "center",
-                                            }}
-                                            transformOrigin={{
-                                                vertical: "top",
-                                                horizontal: "center",
-                                            }}
-                                        >
-                                            {flatButtonsFromPopOverMenu.map((flat, index) => (
-                                                <Button
-                                                    key={index}
-                                                    onClick={flat.onClick}
-                                                    color={flat.color}
-                                                >
-                                                    {flat.label}
-                                                </Button>
-                                            ))}
-                                        </Popover>
-                                    </Grid>
-
-                                    <Grid item>
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/InstitutionCreate'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                className={classes.button}
-                                                startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
-                                                onClick={() => {
-                                                    currPage = 0
-                                                    transformListToAsc = false
-                                                }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            className={classes.button}
-                                            startIcon={<UpdateRoundedIcon />}
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0;
-                                                transformListToAsc = false
-                                                setIsUpdating(true);
-                                                UpdtateListData(
-                                                    Url("institutions", "", `${currPage}`, "DESC")
-                                                );
-                                            }}
-                                        >
-                                            {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12}>
-                            <Grid container justify="space-between" spacing={3}>
-                                {TextFieldOfTheFilter.map((field, index) => (
-                                    <Grid item key={index}>
-                                        {field.show ? (
-                                            <div>
-                                                <TextField
-                                                    id={index}
-                                                    label={field.label}
-                                                    type="search"
-                                                    onChange={field.onChange}
-                                                />
-                                                <IconButton
-                                                    size="small"
-                                                    color="primary"
-                                                    onClick={field.hide}
-                                                >
-                                                    <CancelRoundedIcon />
-                                                </IconButton>
-                                            </div>
-                                        ) : null}
-                                    </Grid>
-                                ))}
-                            </Grid>
-                        </Grid>
-                    </Paper>
-                    {/************** End of the header **************/}
-
-                    <div style={{ height: "2em" }}></div>
-
-                    {/************** Start of display data in table **************/}
-                    <TableData top={topTable} onIconPressed={InvertList}>
-                        <TableBody>
-                            {items.map((row, index) =>
-                                index === items.length - 1 ? (
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color="primary"
-                                                variant="text"
-                                                startIcon={<AddRoundedIcon />}
-                                                disabled={
-                                                    isLoadingMoreItems ||
-                                                    isFilteringByCity ||
-                                                    isFilteringByCounty ||
-                                                    isFilteringByDesc ||
-                                                    isFilteringByName
-                                                }
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('institutions', '', `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('institutions', '', `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {isLoadingMoreItems ? (
-                                                    <CircularProgress size={24} />
-                                                ) : (
-                                                        "Carregar mais itens"
-                                                    )}
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                                ) : (
-                                        <StyledTableRow key={index}>
-                                            <StyledTableCell component="th" scope="row">
-                                                {row.id}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {row.description}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">{row.city}</StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {row.country}
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                <Link to={`/admin/institution/${row.id}`}>
-                                                    <IconButton onClick={() => {
-                                                        currPage = 0
-                                                        transformListToAsc = false
-                                                    }}>
-                                                        <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                    </IconButton>
-                                                </Link>
-                                            </StyledTableCell>
-                                            <StyledTableCell align="right">
-                                                {isLoadingToDelete === index ? (
-                                                    <CircularProgress size={24} color="primary" />
-                                                ) : (
-                                                        <IconButton
-                                                            onClick={() => {
-                                                                HandleStateAlertDialog(index);
-                                                                HandleStateCircularProgress(index);
-                                                            }}
-                                                        >
-                                                            <DeleteIcon style={{ fill: "#FF0000" }} />
-                                                        </IconButton>
-                                                    )}
-                                            </StyledTableCell>
-                                        </StyledTableRow>
-                                    )
-                            )}
-                        </TableBody>
-                    </TableData>
-                    {/************** End of display data in table **************/}
-
-                    {/* This alert will be displayed if the user click to delete an institution */}
-                    <AlertDialog
-                        open={openAlertDialog}
-                        OnDelete={DeleteHandler}
-                        deleteItem={deleteItem}
-                        HandleClose={() => {
-                            setOpenAlertDialog(false);
-                            HandleStateCircularProgress(null);
-                        }}
-                    />
-                </div>
-            )
-        }
+                              <DeleteIcon style={{ fill: "#FF0000" }} />
+                            </IconButton>
+                          )}
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  )
+              )}
+            </TableBody>
+          </TableData>
+          {/************** End of display data in table **************/}
+
+          {/* This alert will be displayed if the user click to delete an institution */}
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+        </div>
+      )
     }
+  }
 };
 
 export default Institutions;
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index 00693f02998a332451f42f0bc8aa744e8d4e28d9..deb622b6c719b5d130f75d4335f9a0e8060cbbf3 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -25,469 +25,399 @@ 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 MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //imports from material ui 
 import { withStyles } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import IconButton from '@material-ui/core/IconButton';
-import { Button, Typography, Paper, Grid } from '@material-ui/core';
+import { Button, Paper } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
 import EditRoundedIcon from '@material-ui/icons/EditRounded';
 import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 //router
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import styled from "styled-components"
 import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-
-let currPage = 0;
-let transformListToAsc = false;
 
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Languages = () => {
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table  
-    const WINDOW_WIDTH = window.innerWidth
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data 
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-    const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog 
-
-    const [deleteItem, setDeleteItem] = useState({}); //Delete Item
-    const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table  
+  const WINDOW_WIDTH = window.innerWidth
+  const router = useHistory()
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data 
+
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
+  const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog 
+  const [currPage, setCurrPage] = useState(0)
+
+  const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+  const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
     })
-
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
-    }
-
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(ADD_ONE_LENGHT))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
-    }
-
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(ADD_ONE_LENGHT))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
+  }
+
+  //handle Delete
+  async function DeleteHandler() {
+    const id = deleteItem.id;
+    HandleStateAlertDialog(null);
+    deleteRequest(
+      DeleteFilter("languages", id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "A língua foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          HandleStateCircularProgress(null);
+          removeItemFromList(id)
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        HandleStateCircularProgress(null);
+      }
+    )
+  }
+
+  const HandleStateCircularProgress = (i) => {
+    setIsLoadingToDelete(i);
+  };
+
+  const HandleStateAlertDialog = (i) => {
+    const obj = { ...items[i] };
+    setDeleteItem(obj);
+    setOpenAlertDialog(!openAlertDialog);
+  };
+
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
+      }
     }
-
-    //handle Delete
-    async function DeleteHandler() {
-        const id = deleteItem.id;
-        HandleStateAlertDialog(null);
-        deleteRequest(
-            DeleteFilter("languages", id),
-            (data) => {
-                if (data.errors)
-                    HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        "A língua foi deletada com sucesso",
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    transformListToAsc = false
-                    UpdateHandler(Url("languages", "", `${currPage}`, "DESC"));
-                    HandleStateCircularProgress(null);
-                }
-            },
-            (error) => {
-                HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                HandleStateCircularProgress(null);
-            }
-        )
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
     }
-
-    const HandleStateCircularProgress = (i) => {
-        setIsLoadingToDelete(i);
-    };
-
-    const HandleStateAlertDialog = (i) => {
-        const obj = { ...items[i] };
-        setDeleteItem(obj);
-        setOpenAlertDialog(!openAlertDialog);
-    };
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('languages', '', `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(ADD_ONE_LENGHT))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+  }
+
+  //getting data from server
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      Url("languages", "", currPage, "DESC"),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
         } else {
-            getRequest(
-                Url('languages', '', `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(ADD_ONE_LENGHT))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    }
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url('languages', '', `${currPage}`, 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(ADD_ONE_LENGHT));
-            },
-            (error) => {
-                setError(true);
-            }
-        )
-    }, []);
-
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-        if (WINDOW_WIDTH <= 755) {
-            return (
-                <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Linguagens
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('languages', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/languageCreate'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('languages', '', `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('languages', '', `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#e81f4f"}
-                                        avatar={<LanguageRoundedIcon />}
-                                        href={`/admin/languageEdit/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                            transformListToAsc = false
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Code",
-                                                    subtitle: row.code
-
-                                                },
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage])
+
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+    if (WINDOW_WIDTH <= 800) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+          <MobilePageHeader
+            title="Linguagens"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/languageCreate')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+          </MobilePageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton key="Load">
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
                     )}
-                </>
-            );
-        }
-        else {
-            return (
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Linguagens
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
+                  <MobileList
+                    key={row.created_at}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#e81f4f"}
+                    avatar={<LanguageRoundedIcon />}
+                    href={`/admin/languageEdit/${row.id}`}
+                    reset={() => {
+
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Code",
+                          subtitle: row.code
+
+                        },
+                        {
+                          title: "Deletar",
+                          subtitle:
+                            <Button
+                              variant="contained"
+                              color="secondary"
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
+                              startIcon={<DeleteRoundedIcon />}
                             >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('languages', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/languageCreate'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    <TableData
-                        top={TOP_LABELS}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                // disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                disabled={isLoadingMoreItems}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('languages', '', `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('languages', '', `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-
-                                    :
-
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.code}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/languageEdit/${row.id}`}>
-                                                <IconButton onClick={() => { currPage = 0; transformListToAsc = false }}>
-                                                    <EditRoundedIcon style={{ fill: '#00bcd4' }} />
-                                                </IconButton>
-                                            </Link>
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {isLoadingToDelete === index ? (
-                                                <CircularProgress size={24} color="primary" />
-                                            ) : (
-                                                    <IconButton
-                                                        onClick={() => {
-                                                            HandleStateAlertDialog(index);
-                                                            HandleStateCircularProgress(index);
-                                                        }}
-                                                    >
-                                                        <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
-                                                    </IconButton>
-                                                )}
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
-
-                    {/* This alert will be displayed if the user click to delete an institution */}
-                    <AlertDialog
-                        open={openAlertDialog}
-                        OnDelete={DeleteHandler}
-                        deleteItem={deleteItem}
-                        HandleClose={() => {
-                            setOpenAlertDialog(false);
-                            HandleStateCircularProgress(null);
-                        }}
-                    />
+                              Deletar
+                            </Button>
+                        }
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
                 </>
-            );
-        }
+              )
+          )}
+        </>
+      );
+    }
+    else {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+
+          <PageHeader
+            title="Linguagens"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/languageCreate')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+          </PageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          <TableData
+            top={TOP_LABELS}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key="Load more">
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        // disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        disabled={isLoadingMoreItems}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {
+                          isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+                        }
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+
+                  :
+
+                  <StyledTableRow key={row.created_at}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                    <StyledTableCell align="right">{row.code}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/languageEdit/${row.id}`}>
+                        <IconButton>
+                          <EditRoundedIcon style={{ fill: '#00bcd4' }} />
+                        </IconButton>
+                      </Link>
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {isLoadingToDelete === index ? (
+                        <CircularProgress size={24} color="primary" />
+                      ) : (
+                          <IconButton
+                            onClick={() => {
+                              HandleStateAlertDialog(index);
+                              HandleStateCircularProgress(index);
+                            }}
+                          >
+                            <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+                          </IconButton>
+                        )}
+                    </StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+
+          {/* This alert will be displayed if the user click to delete an institution */}
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+        </>
+      );
     }
+  }
 }
 export default Languages;
 
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 16c39487c44ed81523beab4d0351ef1e07a5c093..e3b15ae41070af1264e6d8ce46db4e8715e7f5cc 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -19,7 +19,6 @@ import React, { useEffect, useState } from 'react';
 //Material ui componets
 import { withStyles } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
-import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
@@ -35,386 +34,287 @@ import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
 import TableData from '../../../Components/Components/Table';
 import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
+
 //Services
 import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Url } from '../../../Filters';
 //routers
 import { Link } from 'react-router-dom';
 import styled from "styled-components"
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
 
-let currPage = 0; //var that controlls the current page that we are  
-let transformListToAsc = false;
-
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const NoteVariables = () => {
-    const WINDOW_WIDTH = window.innerWidth
-    const AddOneLenght = [''];
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
-    const [isUpdating, setIsUpdating] = useState(false)
+  const WINDOW_WIDTH = window.innerWidth
+  const ADD_ONE_LENGHT = [""];
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
+  const [currPage, setCurrPage] = useState(0)
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
 
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
-    })
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
 
-    // Handle snack infos
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
-    }
-
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(AddOneLenght))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
-    }
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
+    })
+  }
 
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('scores', '', `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      Url("scores", "", currPage, "DESC"),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
         } else {
-            getRequest(
-                Url('scores', '', `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    }
-
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(AddOneLenght))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
-    }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage])
 
-    useEffect(() => {
-        getRequest(
-            Url('scores', '', '0', 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(AddOneLenght));
-            },
-            (error) => {
-                setError(true);
-            }
-        )
-    }, []);
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
 
+    //Words in the top part of the table
+    const topTable = ['ID', 'NOME', 'CÓDIGO', 'PESO', 'ATIVO', 'SCORE TYPE', 'VISUALIZAR'];
 
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-
-        //Words in the top part of the table
-        const topTable = ['ID', 'NOME', 'CÓDIGO', 'PESO', 'ATIVO', 'SCORE TYPE', 'VISUALIZAR'];
-
-        if (WINDOW_WIDTH <= 961) {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Variáveis de nota
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('scores', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
+    if (WINDOW_WIDTH <= 1000) {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <MobilePageHeader
+            title="Variáveis de nota"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+            ]}
+          >
+          </MobilePageHeader>
 
-                    <div style={{ height: '2em' }}></div>
+          <div style={{ height: '2em' }}></div>
 
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('scores', '', `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('scores', '', `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#e81f4f"}
-                                        avatar={<TrendingUpRoundedIcon />}
-                                        href={`/admin/noteVar/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Código",
-                                                    subtitle: row.code
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton key="Load">
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
+                    )}
+                </Button>
+              </StyledDivButton>
+            ) : (
+                <>
+                  <MobileList
+                    key={row.created_at}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#e81f4f"}
+                    avatar={<TrendingUpRoundedIcon />}
+                    href={`/admin/noteVar/${row.id}`}
+                    reset={() => {
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Código",
+                          subtitle: row.code
 
-                                                },
-                                                {
-                                                    title: "Score Type",
-                                                    subtitle: row.score_type
+                        },
+                        {
+                          title: "Score Type",
+                          subtitle: row.score_type
 
-                                                },
-                                                {
-                                                    title: "Ativo",
-                                                    subtitle: row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
-                                                },
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
-                    )}
-                </div>
-            )
-        }
-        else {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Variáveis de nota
-                                    </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
-                            >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('scores', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24}/> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
+                        },
+                        {
+                          title: "Ativo",
+                          subtitle: row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+                        },
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+        </div>
+      )
+    }
+    else {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <PageHeader
+            title="Linguagens"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+            ]}
+          >
+          </PageHeader>
 
-                    <div style={{ height: '2em' }}></div>
+          <div style={{ height: '2em' }}></div>
 
-                    <TableData
-                        top={topTable}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('scores', '', `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('scores', '', `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
+          <TableData
+            top={topTable}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key="Load more">
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {
+                          isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
+                        }
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
 
-                                    :
+                  :
 
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.code}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.weight}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row['score_type'].map((item) => (
-                                                    <Typography key={item} style={{ fontSize: 14 }}>
-                                                        {item}
-                                                    </Typography>
-                                                ))
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/noteVar/${row.id}`}>
-                                                <IconButton onClick={() => { currPage = 0; transformListToAsc = false }}>
-                                                    <VisibilityIcon style={{ fill: '#00bcd4' }} />
-                                                </IconButton>
-                                            </Link>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
-                </div>
-            )
-        }
+                  <StyledTableRow key={row.created_at}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                    <StyledTableCell align="right">{row.code}</StyledTableCell>
+                    <StyledTableCell align="right">{row.weight}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row['score_type'].map((item) => (
+                          <Typography key={item} style={{ fontSize: 14 }}>
+                            {item}
+                          </Typography>
+                        ))
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/noteVar/${row.id}`}>
+                        <IconButton>
+                          <VisibilityIcon style={{ fill: '#00bcd4' }} />
+                        </IconButton>
+                      </Link>
+                    </StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+        </div>
+      )
     }
+  }
 }
 
 
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index a630739ddad8d375b8255faff563043b878694bf..c4aba3f892f11449722ea65d7c6c7f539cee7df9 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -25,479 +25,403 @@ 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 MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //imports from material ui 
 import { withStyles } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import { Button, Typography, Paper, Grid } from '@material-ui/core';
+import { Button, Paper } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
 import EditRoundedIcon from '@material-ui/icons/EditRounded';
 import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 //router
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import styled from "styled-components"
 import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded"
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-
-let currPage = 0;
-let transformListToAsc = false;
 
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const UserPermissions = () => {
-    const ADD_ONE_LENGHT = [""];
-    const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table 
-    const WINDOW_WIDTH = window.innerWidth
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data 
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-    const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog 
-
-    const [deleteItem, setDeleteItem] = useState({}); //Delete Item
-    const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
+  const ADD_ONE_LENGHT = [""];
+  const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table 
+  const WINDOW_WIDTH = window.innerWidth
+  const router = useHistory()
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data 
+  const [currPage, setCurrPage] = useState(0)
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
+  const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog 
+
+  const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+  const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
     })
-
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
-    }
-
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(ADD_ONE_LENGHT))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
-    }
-
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(ADD_ONE_LENGHT))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
+  }
+
+  //handle Delete
+  async function DeleteHandler() {
+    const id = deleteItem.id;
+    HandleStateAlertDialog(null);
+    deleteRequest(
+      DeleteFilter("roles", id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "A língua foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          HandleStateCircularProgress(null);
+          removeItemFromList(id)
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        HandleStateCircularProgress(null);
+      }
+    )
+  }
+
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
+      }
     }
-
-    //handle Delete
-    async function DeleteHandler() {
-        const id = deleteItem.id;
-        HandleStateAlertDialog(null);
-        deleteRequest(
-            DeleteFilter("roles", id),
-            (data) => {
-                if (data.errors)
-                    HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        "A língua foi deletada com sucesso",
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    transformListToAsc = false
-                    UpdateHandler(Url("roles", "", `${currPage}`, "DESC"));
-                    HandleStateCircularProgress(null);
-                }
-            },
-            (error) => {
-                HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                HandleStateCircularProgress(null);
-            }
-        )
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
     }
-
-    const HandleStateCircularProgress = (i) => {
-        setIsLoadingToDelete(i);
-    };
-
-    const HandleStateAlertDialog = (i) => {
-        const obj = { ...items[i] };
-        setDeleteItem(obj);
-        setOpenAlertDialog(!openAlertDialog);
-    };
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('roles', '', `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(ADD_ONE_LENGHT))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+  }
+
+  const HandleStateCircularProgress = (i) => {
+    setIsLoadingToDelete(i);
+  };
+
+  const HandleStateAlertDialog = (i) => {
+    const obj = { ...items[i] };
+    setDeleteItem(obj);
+    setOpenAlertDialog(!openAlertDialog);
+  };
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      Url("roles", "", currPage, "DESC"),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
         } else {
-            getRequest(
-                Url('roles', '', `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(ADD_ONE_LENGHT))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    }
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url('roles', '', `${currPage}`, 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(ADD_ONE_LENGHT));
-            },
-            (error) => {
-                setError(true);
-            }
-        )
-    }, []);
-
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-        if (WINDOW_WIDTH <= 760) {
-            return (
-                <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Lista de permissões de usuário
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('roles', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRole'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => { currPage = 0 }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('roles', '', `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('roles', '', `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#ff7f00"}
-                                        avatar={<AccountCircleRoundedIcon />}
-                                        href={`/admin/EditPermissions/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Descrição",
-                                                    subtitle: row.description
-
-                                                },
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage])
+
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+    if (WINDOW_WIDTH <= 800) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+          <MobilePageHeader
+            title="Lista de permissões de usuário"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/CreateRole')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+          </MobilePageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton key="Load">
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
                     )}
-                </>
-            );
-        }
-        else {
-            return (
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Lista de permissões de usuário
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
-                            >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('roles', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRole'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => { currPage = 0 }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    <TableData
-                        top={TOP_LABELS}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                // disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                disabled={isLoadingMoreItems}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('roles', '', `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('roles', '', `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-
-                                    :
-
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.description}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/EditPermissions/${row.id}`}>
-                                                <Button
-                                                    style={{ width: "100%", marginBottom: "0.5em" }}
-                                                    variant="contained"
-                                                    color="primary"
-                                                    onClick={() => { currPage = 0 }}
-                                                    startIcon={<EditRoundedIcon />}
-                                                >
-                                                    Editar
-                                                </Button>
-                                            </Link>
-
-                                            {isLoadingToDelete === index ? (
-                                                <CircularProgress size={24} color="primary" />
-                                            ) : (
-                                                    <Button
-                                                        style={{ width: "100%" }}
-                                                        variant="contained"
-                                                        color="secondary"
-                                                        onClick={() => {
-                                                            HandleStateAlertDialog(index)
-                                                            HandleStateCircularProgress(index)
-                                                        }}
-                                                        startIcon={<DeleteRoundedIcon />}
-                                                    >
-                                                        Deletar
+                  <MobileList
+                    key={row.created_at}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#ff7f00"}
+                    avatar={<AccountCircleRoundedIcon />}
+                    href={`/admin/EditPermissions/${row.id}`}
+                    reset={() => {
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+
+                        },
+                        {
+                          title: "Ações",
+                          subtitle: <Button
+                            variant="contained"
+                            color="secondary"
+                            onClick={() => {
+                              HandleStateAlertDialog(index)
+                              HandleStateCircularProgress(index)
+                            }}
+                            startIcon={<DeleteRoundedIcon />}
+                          >
+                            Deletar
                                                     </Button>
-                                                )}
-
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
-
-                    {/* This alert will be displayed if the user click to delete an institution */}
-                    <AlertDialog
-                        open={openAlertDialog}
-                        OnDelete={DeleteHandler}
-                        deleteItem={deleteItem}
-                        HandleClose={() => {
-                            setOpenAlertDialog(false);
-                            HandleStateCircularProgress(null);
-                        }}
-                    />
+                        },
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
                 </>
-            );
-        }
+              )
+          )}
+        </>
+      );
+    }
+    else {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+
+          <PageHeader
+            title="Lista de permissões de usuário"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/CreateRole')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+          </PageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          <TableData
+            top={TOP_LABELS}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key="Load more">
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        // disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        disabled={isLoadingMoreItems}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {
+                          isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+                        }
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+
+                  :
+
+                  <StyledTableRow key={row.created_at}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                    <StyledTableCell align="right">{row.description}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/EditPermissions/${row.id}`}>
+                        <Button
+                          style={{ width: "100%", marginBottom: "0.5em" }}
+                          variant="contained"
+                          color="primary"
+                          startIcon={<EditRoundedIcon />}
+                        >
+                          Editar
+                                                </Button>
+                      </Link>
+
+                      {isLoadingToDelete === index ? (
+                        <CircularProgress size={24} color="primary" />
+                      ) : (
+                          <Button
+                            style={{ width: "100%" }}
+                            variant="contained"
+                            color="secondary"
+                            onClick={() => {
+                              HandleStateAlertDialog(index)
+                              HandleStateCircularProgress(index)
+                            }}
+                            startIcon={<DeleteRoundedIcon />}
+                          >
+                            Deletar
+                          </Button>
+                        )}
+
+                    </StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+
+          {/* This alert will be displayed if the user click to delete an institution */}
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+        </>
+      );
     }
+  }
 }
 export default UserPermissions;
 
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index 8118ec31d8bc7667baeffd9b349337efa591e5b3..58b80d4b5b6771b120311a8aebdc510b35ffe667 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -26,543 +26,405 @@ import { Url, EditFilter } from '../../../Filters';
 import { Store } from '../../../../Store';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //imports from material ui 
 import { withStyles } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import { Button, Typography, Paper, Grid } from '@material-ui/core';
+import { Button, Paper } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
-import CheckCircleRoundedIcon from '@material-ui/icons/CheckCircleRounded';
-import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
 import Switch from '@material-ui/core/Switch';
 //router
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import styled from "styled-components"
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
 
-let currPage = 0;
-let transformListToAsc = false;
-
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Questions = () => {
-    const { state } = useContext(Store);
-
-    const ADD_ONE_LENGHT = [""];
-    const WINDOW_WIDTH = window.innerWidth
-    const TOP_LABELS = ['ID', 'CRIAÇÃO EM', 'DESCRIÇÃO', 'STATUS', 'ATUALIZAÇÃO EM'] //Labels from Table  
-
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
-    const [items, setItems] = useState([]); //Necessary to consult the API, data 
-
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
-    const [isUpdating, setIsUpdating] = useState(false); //controlls the state of updating data
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
+  const { state } = useContext(Store);
+
+  const ADD_ONE_LENGHT = [""];
+  const WINDOW_WIDTH = window.innerWidth
+  const TOP_LABELS = ['ID', 'CRIAÇÃO EM', 'DESCRIÇÃO', 'STATUS', 'ATUALIZAÇÃO EM'] //Labels from Table  
+  const router = useHistory()
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+  const [items, setItems] = useState([]); //Necessary to consult the API, data 
+  const [currPage, setCurrPage] = useState(0)
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  //handle snack info
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
     })
+  }
 
-    //handle snack info
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
-    }
+  const CheckUserPermission = () => {
+    let canUserEdit = false;
 
-    const CheckUserPermission = () => {
-        let canUserEdit = false;
-
-        if (state.userIsLoggedIn) {
-            const roles = [...state.currentUser.roles];
-            for (let i = 0; i < roles.length; i++)
-                if (roles[i].name === 'admin')
-                    canUserEdit = true;
-        }
-        else {
-            canUserEdit = false;
-        }
-
-        return canUserEdit;
+    if (state.userIsLoggedIn) {
+      const roles = [...state.currentUser.roles];
+      for (let i = 0; i < roles.length; i++)
+        if (roles[i].name === 'admin')
+          canUserEdit = true;
     }
-
-    //handle load more items
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(ADD_ONE_LENGHT))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
+    else {
+      canUserEdit = false;
     }
 
-    // handle update list data
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(ADD_ONE_LENGHT))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
+    return canUserEdit;
+  }
+
+  const changeStateItem = (index, currState) => {
+    const copyItems = [...items]
+    copyItems[index].status = currState
+    setItems(copyItems)
+  }
+
+  const handleChange = async (index, status) => {
+    const id = items[index].id;
+    const description = items[index].description;
+    if (status === 'active') {
+      const body = {
+        "question": {
+          "description": description,
+          "status": "inactive"
+        }
+      }
+      putRequest(
+        EditFilter('questions', id),
+        body,
+        (data) => {
+          if (data.errors)
+            HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+          else {
+            HandleSnack('Question modificada com sucesso', true, 'success', '#228B22')
+            changeStateItem(index, "inactive")
+            setCurrPage(0)
+          }
+        },
+        (error) => {
+          HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        }
+      )
+    } else {
+      const body = {
+        "question": {
+          "description": description,
+          "status": "active"
+        }
+      }
+      putRequest(
+        EditFilter('questions', id),
+        body,
+        (data) => {
+          if (data.errors)
+            HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+          else {
+            setCurrPage(0)
+            HandleSnack('Question modificada com sucesso', true, 'success', '#228B22')
+            changeStateItem(index, "active")
+          }
+        },
+        (error) => {
+          HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        }
+      )
     }
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('questions', '', `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(ADD_ONE_LENGHT))
-                },
-                () => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+  }
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      Url("questions", "", currPage, "DESC"),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
         } else {
-            getRequest(
-                Url('questions', '', `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(ADD_ONE_LENGHT))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    }
-
-    const handleChange = async (index, status) => {
-        const id = items[index].id;
-        const description = items[index].description;
-        if (status === 'active') {
-            const body = {
-                "question": {
-                    "description": description,
-                    "status": "inactive"
-                }
-            }
-            putRequest(
-                EditFilter('questions', id),
-                body,
-                (data) => {
-                    if (data.errors)
-                        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                    else {
-                        currPage = 0
-                        transformListToAsc = false
-                        UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
-                    }
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage])
+
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else if (CheckUserPermission()) {
+    if (WINDOW_WIDTH <= 800) {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+
+          <MobilePageHeader
+            title="Perguntas da curadoria"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
                 },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
-        } else {
-            const body = {
-                "question": {
-                    "description": description,
-                    "status": "active"
-                }
-            }
-            putRequest(
-                EditFilter('questions', id),
-                body,
-                (data) => {
-                    if (data.errors)
-                        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                    else {
-                        currPage = 0
-                        transformListToAsc = false
-                        UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
-                    }
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/CreateQuestion')
                 },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
-        }
-    }
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    //getting data from server
-    useEffect(() => {
-        getRequest(
-            Url('questions', '', `${currPage}`, 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(ADD_ONE_LENGHT));
-            },
-            (error) => {
-                setError(true)
-            }
-        )
-    }, []);
-
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else if (CheckUserPermission()) {
-        if (WINDOW_WIDTH <= 761) {
-            return (
-                <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Perguntas da curadoria
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/CreateQuestion'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => { currPage = 0 }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('questions', '', `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('questions', '', `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.id}
-                                        subtitle={DisplayDate(row.created_at)}
-                                        backColor={"#673ab7"}
-                                        avatar={<HelpRoundedIcon />}
-                                        reset={() => {
-                                            currPage = 0; transformListToAsc = false
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Descrição",
-                                                    subtitle: row.description
-                                                },
-                                                {
-                                                    title: "Status",
-                                                    subtitle:
-                                                        row.status === 'active' ?
-                                                            <Grid container direction='row'>
-                                                                <Grid item>
-                                                                    <CheckCircleRoundedIcon style={{ fill: '#3CB371' }} />
-
-                                                                    <Switch
-                                                                        checked={true}
-                                                                        onChange={() => handleChange(index, row.status)}
-                                                                        name="checkedB"
-                                                                        color="primary"
-                                                                    />
-                                                                </Grid>
-                                                            </Grid>
-
-                                                            :
-
-                                                            <Grid container justify='flex-end' alignItems='center' direction='row'>
-                                                                <Grid item>
-                                                                    <CancelRoundedIcon style={{ fill: '#FA8072' }} />
-                                                                </Grid>
-
-                                                                <Grid item>
-                                                                    <Switch
-                                                                        checked={false}
-                                                                        onChange={() => handleChange(index, row.status)}
-                                                                        name="checkedB"
-                                                                        color="primary"
-                                                                    />
-                                                                </Grid>
-                                                            </Grid>
-                                                },
-                                                {
-                                                    title : "Atualizado em",
-                                                    subtitle : DisplayDate(row.updated_at)
-                                                }
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
+              }
+            ]}
+          >
+          </MobilePageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton
+                key="Load"
+              >
+                <Button
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
                     )}
-                </>
-            );
-        }
-        else {
-            return (
+                </Button>
+              </StyledDivButton>
+            ) : (
                 <>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Perguntas da curadoria
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
-                            >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/CreateQuestion'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => { currPage = 0; transformListToAsc = false }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    <TableData
-                        top={TOP_LABELS}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                // disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                disabled={isLoadingMoreItems}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('questions', '', `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('questions', '', `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-
-                                    :
-
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">{DisplayDate(row.created_at)}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.description}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row.status === 'active' ?
-                                                    <Grid container direction='row'>
-                                                        <Grid item>
-                                                            <CheckCircleRoundedIcon style={{ fill: '#3CB371' }} />
-
-                                                            <Switch
-                                                                checked={true}
-                                                                onChange={() => handleChange(index, row.status)}
-                                                                name="checkedB"
-                                                                color="primary"
-                                                            />
-                                                        </Grid>
-                                                    </Grid>
-
-                                                    :
-
-                                                    <Grid container justify='flex-end' alignItems='center' direction='row'>
-                                                        <Grid item>
-                                                            <CancelRoundedIcon style={{ fill: '#FA8072' }} />
-                                                        </Grid>
-
-                                                        <Grid item>
-                                                            <Switch
-                                                                checked={false}
-                                                                onChange={() => handleChange(index, row.status)}
-                                                                name="checkedB"
-                                                                color="primary"
-                                                            />
-                                                        </Grid>
-                                                    </Grid>
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
+                  <MobileList
+                    key={row.created_at}
+                    title={row.id}
+                    subtitle={DisplayDate(row.created_at)}
+                    backColor={"#673ab7"}
+                    avatar={<HelpRoundedIcon />}
+                    reset={() => {
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        {
+                          title: "Status",
+                          subtitle:
+                            row.status === 'active' ?
+                              <Switch
+                                checked={true}
+                                onChange={() => handleChange(index, row.status)}
+                                name="checkedB"
+                                color="primary"
+                              />
+                              :
+
+                              <Switch
+                                checked={false}
+                                onChange={() => handleChange(index, row.status)}
+                                name="checkedB"
+                                color="primary"
+                              />
+                        },
+                        {
+                          title: "Atualizado em",
+                          subtitle: DisplayDate(row.updated_at)
+                        }
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
                 </>
-            );
-        }
-    } else return <Unauthorized />
+              )
+          )}
+        </>
+      );
+    }
+    else {
+      return (
+        <>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+
+          <PageHeader
+            title="Perguntas da curadoria"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/CreateQuestion')
+                },
+              }
+            ]}
+          >
+          </PageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          <TableData
+            top={TOP_LABELS}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key="Load more">
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        // disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        disabled={isLoadingMoreItems}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
+                        {
+                          isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+                        }
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+
+                  :
+
+                  <StyledTableRow key={row.created_at}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">{DisplayDate(row.created_at)}</StyledTableCell>
+                    <StyledTableCell align="right">{row.description}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row.status === 'active' ?
+                          <Switch
+                            checked={true}
+                            onChange={() => handleChange(index, row.status)}
+                            name="checkedB"
+                            color="primary"
+                          />
+                          :
+
+                          <Switch
+                            checked={false}
+                            onChange={() => handleChange(index, row.status)}
+                            name="checkedB"
+                            color="primary"
+                          />
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+        </>
+      );
+    }
+  } else return <Unauthorized />
 }
 export default Questions;
 
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 547e140ddf41a9b427bc7fabe894d71bac16be5e..b6ecfe7ed04d7ccbd55c2ee9eb8386c428573cb6 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -20,13 +20,12 @@ import React, { useEffect, useState } from 'react';
 //Material ui componets
 import { withStyles } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
-import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import IconButton from '@material-ui/core/IconButton';
 import VisibilityIcon from '@material-ui/icons/Visibility';
-import { Button, Typography } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -35,461 +34,390 @@ import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 import TableData from '../../../Components/Components/Table';
 import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //Services
 import AlertDialog from "../../../Components/Components/AlertDialog";
 import { Url } from '../../../Filters';
 import { DeleteFilter } from '../../../Filters';
 import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 //routers
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import StarRoundedIcon from "@material-ui/icons/StarRounded";
 import styled from "styled-components"
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-
-let currPage = 0; //var that controlls the current page that we are  
-let transformListToAsc = false;
 
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Ratings = () => {
-    const WINDOW_WIDTH = window.innerWidth
-    const AddOneLenght = [''];
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
-    const [isUpdating, setIsUpdating] = useState(false)
-
-    const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog 
-    const [deleteItem, setDeleteItem] = useState({}); //Delete Item
-    const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
+  const WINDOW_WIDTH = window.innerWidth
+  const ADD_ONE_LENGHT = [""];
+  const router = useHistory()
+
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+  const [currPage, setCurrPage] = useState(0)
+  const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog 
+  const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+  const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
     })
-
-    // Handle snack infos
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
+  }
+
+  //handle Delete
+  async function DeleteHandler() {
+    const id = deleteItem.id;
+    HandleStateAlertDialog(null);
+    deleteRequest(
+      DeleteFilter("ratings", id),
+      (data) => {
+        if (data.errors)
+          HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        else {
+          HandleSnack(
+            "O rating foi deletada com sucesso",
+            true,
+            "success",
+            "#228B22"
+          );
+          setCurrPage(0)
+          HandleStateCircularProgress(null);
+          removeItemFromList(id)
+        }
+      },
+      (error) => {
+        HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+        HandleStateCircularProgress(null);
+      }
+    )
+  }
+
+  const removeItemFromList = (itemId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === itemId) {
+        index = i
+        break
+      }
     }
-
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(AddOneLenght))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems.splice(index, 1)
+      setItems(cpyItems)
     }
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('ratings', '', `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+  }
+
+  const HandleStateCircularProgress = (i) => {
+    setIsLoadingToDelete(i);
+  };
+
+  const HandleStateAlertDialog = (i) => {
+    const obj = { ...items[i] };
+    setDeleteItem(obj);
+    setOpenAlertDialog(!openAlertDialog);
+  };
+
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      Url("ratings", "", currPage, "DESC"),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
         } else {
-            getRequest(
-                Url('ratings', '', `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-    }
-
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(AddOneLenght))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
-    }
-
-    //handle Delete
-    async function DeleteHandler() {
-        const id = deleteItem.id;
-        HandleStateAlertDialog(null);
-        deleteRequest(
-            DeleteFilter("ratings", id),
-            (data) => {
-                if (data.errors)
-                    HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                else {
-                    HandleSnack(
-                        "O rating foi deletada com sucesso",
-                        true,
-                        "success",
-                        "#228B22"
-                    );
-                    currPage = 0;
-                    transformListToAsc = false
-                    UpdateHandler(Url("ratings", "", `${currPage}`, "DESC"));
-                    HandleStateCircularProgress(null);
-                }
-            },
-            (error) => {
-                HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
-                HandleStateCircularProgress(null);
-            }
-        )
-    }
-
-    const HandleStateCircularProgress = (i) => {
-        setIsLoadingToDelete(i);
-    };
-
-    const HandleStateAlertDialog = (i) => {
-        const obj = { ...items[i] };
-        setDeleteItem(obj);
-        setOpenAlertDialog(!openAlertDialog);
-    };
-
-
-    useEffect(() => {
-        getRequest(
-            Url('ratings', '', currPage, 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(AddOneLenght));
-            },
-            (error) => {
-                setError(true)
-            }
-        )
-    }, []);
-
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-
-        //Words in the top part of the table
-        const topTable = ['ID', 'NOME', 'DESCRIÇÃO', 'VISUALIZAR', 'DELETAR'];
-        if (WINDOW_WIDTH <= 760) {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Lista de ratings
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12}  
-                            >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('ratings', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRating'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
-                                                onClick={() => {
-                                                    currPage = 0
-                                                    transformListToAsc = false
-                                                }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('ratings', '', `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('ratings', '', `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#00bcd4"}
-                                        avatar={<StarRoundedIcon />}
-                                        href={`/admin/Rating/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                        }}
-                                        data={
-                                            [
-                                                {
-                                                    title: "Descrição",
-                                                    subtitle: row.description
-                                                }
-                                            ]
-                                        }
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoadingMoreItems(false)
+        setIsLoaded(true)
+        setError(true)
+      }
+    )
+  }, [currPage])
+
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+
+    //Words in the top part of the table
+    const topTable = ['ID', 'NOME', 'DESCRIÇÃO', 'VISUALIZAR', 'DELETAR'];
+    if (WINDOW_WIDTH <= 800) {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+          <MobilePageHeader
+            title="Lista de ratings"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/CreateRating')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+          </MobilePageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton key="Load">
+                <Button
+                  key={index}
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
                     )}
-                </div>
-            )
-        }
-        else {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
-                    />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Lista de ratings
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
+                </Button>
+              </StyledDivButton>
+            ) : (
+                <>
+                  <MobileList
+                    key={row.created_at}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#00bcd4"}
+                    avatar={<StarRoundedIcon />}
+                    href={`/admin/Rating/${row.id}`}
+                    reset={() => {
+
+                    }}
+                    data={
+                      [
+                        {
+                          title: "Descrição",
+                          subtitle: row.description
+                        },
+                        {
+                          title: "Deletar",
+                          subtitle:
+                            <Button
+                              variant="contained"
+                              color="secondary"
+                              onClick={() => {
+                                HandleStateAlertDialog(index);
+                                HandleStateCircularProgress(index);
+                              }}
+                              startIcon={<DeleteRoundedIcon />}
                             >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('ratings', '', `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRating'}>
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
-                                                onClick={() => {
-                                                    currPage = 0
-                                                    transformListToAsc = false
-                                                }}
-                                            >
-                                                Novo
-                                            </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    <TableData
-                        top={topTable}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('ratings', '', `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('ratings', '', `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-
-                                    :
-
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.description}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/Rating/${row.id}`}>
-                                                <IconButton onClick={() => { currPage = 0 }}>
-                                                    <VisibilityIcon style={{ fill: '#00bcd4' }} />
-                                                </IconButton>
-                                            </Link>
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {isLoadingToDelete === index ? (
-                                                <CircularProgress size={24} color="primary" />
-                                            ) : (
-                                                    <IconButton
-                                                        onClick={() => {
-                                                            HandleStateAlertDialog(index);
-                                                            HandleStateCircularProgress(index);
-                                                        }}
-                                                    >
-                                                        <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
-                                                    </IconButton>
-                                                )}
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
-
-                    {/* This alert will be displayed if the user click to delete an institution */}
-                    <AlertDialog
-                        open={openAlertDialog}
-                        OnDelete={DeleteHandler}
-                        deleteItem={deleteItem}
-                        HandleClose={() => {
-                            setOpenAlertDialog(false);
-                            HandleStateCircularProgress(null);
+                              Deletar
+                            </Button>
+                        }
+                      ]
+                    }
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+        </div>
+      )
+    }
+    else {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <PageHeader
+            title="Lista de ratings"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/CreateRating')
+                },
+                icon: <AddRoundedIcon />
+              }
+            ]}
+          >
+          </PageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          <TableData
+            top={topTable}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key={row.created_at}>
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
                         }}
-                    />
-                </div>
-            )
-        }
+                      >
+                        {
+                          isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+                        }
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+
+                  :
+
+                  <StyledTableRow key={row.created_at}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                    <StyledTableCell align="right">{row.description}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/Rating/${row.id}`}>
+                        <IconButton>
+                          <VisibilityIcon style={{ fill: '#00bcd4' }} />
+                        </IconButton>
+                      </Link>
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      {isLoadingToDelete === index ? (
+                        <CircularProgress size={24} color="primary" />
+                      ) : (
+                          <IconButton
+                            onClick={() => {
+                              HandleStateAlertDialog(index);
+                              HandleStateCircularProgress(index);
+                            }}
+                          >
+                            <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+                          </IconButton>
+                        )}
+                    </StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+
+          {/* This alert will be displayed if the user click to delete an institution */}
+          <AlertDialog
+            open={openAlertDialog}
+            OnDelete={DeleteHandler}
+            deleteItem={deleteItem}
+            HandleClose={() => {
+              setOpenAlertDialog(false);
+              HandleStateCircularProgress(null);
+            }}
+          />
+        </div>
+      )
     }
+  }
 }
 
 
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index fe3524c9e120bb5586a9965bbdccfa4a541f0d91..49f091d30d5ca7317ae80b8335c400ccd8adc4c7 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -25,624 +25,522 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import IconButton from '@material-ui/core/IconButton';
 import VisibilityIcon from '@material-ui/icons/Visibility';
-import { Button, Typography, Chip } from '@material-ui/core';
+import { Button, Chip } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import TextField from '@material-ui/core/TextField';
 import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
+import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 //Local files
 import TableData from '../../../Components/Components/Table';
 import SnackBar from '../../../../Components/SnackbarComponent';
 import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import PageHeader from "../../../Components/Components/PageHeader"
 //Services
 import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 import { Url } from '../../../Filters';
 //routers
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import moment from 'moment';
 import styled from 'styled-components'
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
 import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 import { apiDomain } from '../../../../env';
 import noAvatar from "../../../../img/default_profile.png";
 
-let currPage = 0; //var that controlls the current page that we are  
-let transformListToAsc = false;
-let nameFilter = "";
-let emailFilter = "";
 const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: theme.palette.common.black,
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
 }))(TableCell);
 
 const StyledTableRow = withStyles((theme) => ({
-    root: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: theme.palette.action.hover,
-        },
+  root: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: theme.palette.action.hover,
     },
+  },
 }))(TableRow);
 
 const Users = () => {
-    const AddOneLenght = [''];
-    const WINDOW_WIDTH = window.innerWidth
-    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
-    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
-    const [items, setItems] = useState([]); //Necessary to consult the API, data
-    const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
-    const [isUpdating, setIsUpdating] = useState(false)
-    const [showFilter, setShowFilter] = useState(false)
-
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-
-    const [snackInfo, setSnackInfo] = useState({
-        message: '',
-        icon: '',
-        open: false,
-        color: '',
+  const ADD_ONE_LENGHT = [''];
+  const router = useHistory()
+  const WINDOW_WIDTH = window.innerWidth
+  const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+  const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete 
+  const [items, setItems] = useState([]); //Necessary to consult the API, data
+  const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+  const [showFilter, setShowFilter] = useState(false)
+  const [currPage, setCurrPage] = useState(0)
+
+  const [name, setName] = useState("");
+  const [nameValue, setNameValue] = useState("")
+  const [email, setEmail] = useState("");
+  const [emailValue, setEmailValue] = useState("")
+
+  const [snackInfo, setSnackInfo] = useState({
+    message: '',
+    icon: '',
+    open: false,
+    color: '',
+  })
+
+  // Handle snack infos
+  const HandleSnack = (message, state, icon, color) => {
+    setSnackInfo({
+      message: message,
+      icon: icon,
+      open: state,
+      color: color
     })
-
-    // Handle snack infos
-    const HandleSnack = (message, state, icon, color) => {
-        setSnackInfo({
-            message: message,
-            icon: icon,
-            open: state,
-            color: color
-        })
+  }
+
+  const NameHandler = (event) => {
+    setNameValue(event.target.value)
+  }
+
+  const EmailHandler = (event) => {
+    setEmailValue(event.target.value)
+  }
+
+  const DisplayDate = (date) => {
+    const convertedData = moment.utc(date);
+    return moment(convertedData)
+      .format("LLL")
+      .toString();
+  };
+
+  const isUserPublisher = (userRoles) => {
+    for (let index = 0; index < userRoles.length; index++) {
+      if (userRoles[index].id === 10)
+        return true;
     }
-
-    const NameHandler = (event) => {
-        currPage = 0
-        setName(event.target.value)
-        nameFilter = event.target.value
-        getRequest(
-            Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'),
-            (data, header) => {
-                const arrData = [...data]
-                setItems(arrData.concat(AddOneLenght))
-                HandleSnack('Filtro aplicado com sucesso', true, 'success', '#228B22')
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-            }
-        )
-
+    return false;
+  }
+
+  const pushPublisherRole = (userId) => {
+    let index = -1;
+    for (let i = 0; i < items.length; i++) {
+      const element = items[i];
+      if (element.id === userId) {
+        index = i
+        break
+      }
     }
-
-    const EmailHandler = (event) => {
-        currPage = 0
-        setEmail(event.target.value)
-        emailFilter = event.target.value
-        getRequest(
-            Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'),
-            (data, header) => {
-                const arrData = [...data]
-                setItems(arrData.concat(AddOneLenght))
-                HandleSnack('Filtro aplicado com sucesso', true, 'success', '#228B22')
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-            }
-        )
+    if (index !== -1) {
+      const cpyItems = [...items]
+      cpyItems[index].roles.push({
+        id: 10,
+        name: "publisher"
+      })
+      setItems(cpyItems)
     }
-
-    const LoadMoreItens = async (api) => {
-        setIsLoadingMoreItems(true)
-        getRequest(
-            api,
-            (data, header) => {
-                const arrData = [...data]
-                if (arrData.length === 0) {
-                    HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
-                } else {
-                    const arrItems = [...items]
-                    arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
-                    const arrResult = arrItems.concat(arrData)
-                    setItems(arrResult.concat(AddOneLenght))
-                }
-                setIsLoadingMoreItems(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsLoadingMoreItems(false)
-            }
-        )
+  }
+
+  const turnUserPublisher = (userRoles, userId) => {
+    let roles_ids = [];
+    userRoles.map((role) => (
+      roles_ids.push(role.id)
+    ))
+    roles_ids.push(10);
+    const body = {
+      "user": {
+        "role_ids": roles_ids
+      }
     }
-
-    const InvertList = async () => {
-        transformListToAsc = !transformListToAsc
-        currPage = 0
-        if (transformListToAsc) {
-            getRequest(
-                Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'ASC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
-        } else {
-            getRequest(
-                Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'),
-                (data, header) => {
-                    const arrData = [...data]
-                    setItems(arrData.concat(AddOneLenght))
-                },
-                (error) => {
-                    HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                }
-            )
+    putRequest(
+      `/users/${userId}`,
+      body,
+      (data) => {
+        if (data.errors) {
+          HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
         }
-    }
-
-    const DisplayDate = (date) => {
-        const convertedData = moment.utc(date);
-        return moment(convertedData)
-            .format("LLL")
-            .toString();
-    };
-
-    const UpdateHandler = async (api) => {
-        setIsUpdating(true)
-        getRequest(
-            api,
-            (data, header) => {
-                HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
-                const arrData = [...data]
-                setItems(arrData.concat(AddOneLenght))
-                setIsUpdating(false)
-            },
-            (error) => {
-                HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
-                setIsUpdating(false)
-            }
-        )
-    }
-
-    const isUserPublisher = (userRoles) => {
-        for (let index = 0; index < userRoles.length; index++) {
-            if (userRoles[index].id === 10)
-                return true;
+        else {
+          HandleSnack(`O usuário ${userId}, agora é publicador`, true, 'success', '#228B22')
+          pushPublisherRole(userId)
+          setCurrPage(0)
         }
-        return false;
-    }
-
-    const turnUserPublisher = (userRoles, userId) => {
-        let roles_ids = [];
-        userRoles.map((role) => (
-            roles_ids.push(role.id)
-        ))
-        roles_ids.push(10);
-        const body = {
-            "user": {
-                "role_ids": roles_ids
-            }
+      },
+      (error) => {
+        HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+      }
+    )
+  }
+
+  const buildUrl = (email, name) => {
+    if (email && name)
+      return Url("users", `"email" : "${email}", "name" : "${name}"`, currPage, "DESC")
+    if (email)
+      return Url("users", `"email" : "${email}"`, currPage, "DESC")
+    if (name)
+      return Url("users", `"name" : "${name}"`, currPage, "DESC")
+    else
+      return Url("users", "", currPage, "DESC")
+  }
+
+  useEffect(() => {
+    if (currPage === 0)
+      setIsLoaded(false)
+    else
+      setIsLoadingMoreItems(true)
+    getRequest(
+      buildUrl(email, name),
+      (data, header) => {
+        const arrData = [...data]
+        if (arrData.length === 0) {
+          HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+        } else {
+          const arrItems = [...items]
+          if (currPage === 0) {
+            setItems(arrData.concat(ADD_ONE_LENGHT))
+          }
+          else {
+            arrItems.pop(); //Deleting the last position, that was used to display the button of load more items 
+            const arrResult = arrItems.concat(arrData)
+            setItems(arrResult.concat(ADD_ONE_LENGHT))
+          }
         }
-        putRequest(
-            `/users/${userId}`,
-            body,
-            (data) => {
-                if (data.errors) {
-                    HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
-                }
-                else {
-                    currPage = 0;
-                    HandleSnack(`O usuário ${userId}, agora é publicador`, true, 'success', '#228B22')
-                    UpdateHandler(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
-                }
-            },
-            (error) => {
-                HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
-            }
-        )
-    }
-
-    useEffect(() => {
-        getRequest(
-            Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, '0', 'DESC'),
-            (data, header) => {
-                setIsLoaded(true);
-                setItems(data.concat(AddOneLenght));
-            },
-            (error) => {
-                setError(true);
-            }
-        )
-    }, []);
-
-
-    if (error) {
-        return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-        return <LoadingSpinner text="Carregando..." />
-    } else {
-
-        //Words in the top part of the table
-        const topTable = ['ID', 'NOME', 'EMAIL', 'CRIADO EM', 'SCORE', 'PERMISSÃO', 'AÇÃO', "VISUALIZAR"];
-        if (WINDOW_WIDTH <= 1150) {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
+        setIsLoaded(true)
+        setIsLoadingMoreItems(false)
+      },
+      (error) => {
+        HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+        setIsLoaded(true)
+        setError(true)
+        setIsLoadingMoreItems(false)
+      }
+    )
+  }, [currPage, email, name])
+
+  useEffect(() => {
+    setNameValue("")
+    setName("")
+    setEmailValue("")
+    setEmail("")
+  }, [showFilter])
+
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <LoadingSpinner text="Carregando..." />
+  } else {
+
+    //Words in the top part of the table
+    const topTable = ['ID', 'NOME', 'EMAIL', 'CRIADO EM', 'SCORE', 'PERMISSÃO', 'AÇÃO', "VISUALIZAR"];
+    if (WINDOW_WIDTH <= 1150) {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <MobilePageHeader
+            title="Lista de usuários"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/EditUser/-1')
+                },
+              }
+            ]}
+          >
+            {
+              showFilter ? (
+                <Grid container direction="row" justify="space-between" alignItems="center">
+                  <Grid item>
+                    <TextField
+                      label="Name"
+                      value={nameValue}
+                      onChange={(e) => { NameHandler(e) }}
+                      onBlur={(e) => { setEmail(e.target.value) }}
+                      helperText="Ao digitar, retire o foco do campo"
                     />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={12}>
-                                <Typography variant="h4">
-                                    Lista de usuários
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={12} 
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Email"
+                      value={emailValue}
+                      onChange={(e) => { EmailHandler(e) }}
+                      onBlur={(e) => { setEmail(e.target.value) }}
+                      helperText="Ao digitar, retire o foco do campo"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null
+            }
+          </MobilePageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          {items.map((row, index) =>
+            index === items.length - 1 ? (
+              <StyledDivButton>
+                <Button
+                  key={index}
+                  color="primary"
+                  variant="text"
+                  // disabled={isLoadingMoreItems}
+                  startIcon={<AddRoundedIcon />}
+                  disabled={isLoadingMoreItems}
+                  onClick={() => {
+                    setCurrPage(currPage + 1)
+                  }}
+                >
+                  {isLoadingMoreItems ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                      "Carregar mais itens"
+                    )}
+                </Button>
+              </StyledDivButton>
+            ) : (
+                <>
+                  <MobileList
+                    key={index}
+                    title={row.name}
+                    subtitle={row.id}
+                    backColor={"#00bcd4"}
+                    avatar={
+                      <img
+                        src={row.avatar ? apiDomain + row.avatar : noAvatar}
+                        alt="user avatar"
+                        style={{
+                          height: "100%",
+                          width: "100%",
+                          borderRadius: "50%",
+                        }}
+                      />
+                    }
+                    href={`/admin/user/${row.id}`}
+                    reset={() => {
+                    }}
+                    data={[
+                      {
+                        title: "Email",
+                        subtitle: row.email ?
+                          <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+                            <Button
+                              variant='text'
+                              color='primary'
+                              startIcon={<EmailRoundedIcon />}
                             >
-                                <Grid container justify="flex-start" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter)
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            filtrar
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Link to="/admin/EditUser/-1">
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                            >
-                                                Novo
-                                        </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                        {
-                            showFilter ? (
-                                <Grid container direction="row" justify="space-between" alignItems="center">
-                                    <Grid item>
-                                        <TextField
-                                            label="Name"
-                                            value={name}
-                                            onChange={(e) => { NameHandler(e) }}
-                                        />
-                                    </Grid>
-                                    <Grid item>
-                                        <TextField
-                                            label="Email"
-                                            value={email}
-                                            onChange={(e) => { EmailHandler(e) }}
-                                        />
-                                    </Grid>
-                                </Grid>
-                            ) : null
-                        }
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    {items.map((row, index) =>
-                        index === items.length - 1 ? (
-                            <StyledDivButton>
-                                <Button
-                                    key={index}
-                                    color="primary"
-                                    variant="text"
-                                    // disabled={isLoadingMoreItems}
-                                    startIcon={<AddRoundedIcon />}
-                                    disabled={isLoadingMoreItems}
-                                    onClick={() => {
-                                        currPage++
-                                        if (transformListToAsc) {
-                                            LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'ASC'))
-                                        } else {
-                                            LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
-                                        }
-                                    }}
-                                >
-                                    {isLoadingMoreItems ? (
-                                        <CircularProgress size={24} />
-                                    ) : (
-                                            "Carregar mais itens"
-                                        )}
-                                </Button>
-                            </StyledDivButton>
-                        ) : (
-                                <>
-                                    <MobileList
-                                        key={index}
-                                        title={row.name}
-                                        subtitle={row.id}
-                                        backColor={"#00bcd4"}
-                                        avatar={
-                                            <img
-                                                src={row.avatar ? apiDomain + row.avatar : noAvatar}
-                                                alt="user avatar"
-                                                style={{
-                                                    height: "100%",
-                                                    width: "100%",
-                                                    borderRadius: "50%",
-                                                }}
-                                            />
-                                        }
-                                        href={`/admin/user/${row.id}`}
-                                        reset={() => {
-                                            currPage = 0;
-                                            transformListToAsc = false
-                                            nameFilter = ""
-                                            emailFilter = ""
-                                        }}
-                                        data={[
-                                            {
-                                                title: "Email",
-                                                subtitle: row.email ?
-                                                    <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
-                                                        <Button
-                                                            variant='text'
-                                                            color='primary'
-                                                            startIcon={<EmailRoundedIcon />}
-                                                        >
-                                                            {row.email}
-                                                        </Button>
-                                                    </Link> : null
-                                            },
-                                            {
-                                                title: "Criado em",
-                                                subtitle: DisplayDate(row.created_at)
-                                            },
-                                            {
-                                                title: "Score",
-                                                subtitle: row.score
-                                            },
-                                            {
-                                                title: "Permissão",
-                                                subtitle: row.roles.map((chip) => (
-                                                    <ChipDiv>
-                                                        <Chip label={chip.name} key={chip.id} />
-                                                    </ChipDiv>
-                                                ))
-                                            },
-                                            {
-                                                title: "Score",
-                                                subtitle: row.score
-                                            },
-                                            {
-                                                title: "Ações rápidas",
-                                                subtitle: <Button
-                                                    variant="contained"
-                                                    color="primary"
-                                                    disabled={isUserPublisher(row.roles)}
-                                                    onClick={() => { turnUserPublisher(row.roles, row.id) }}
-                                                >
-                                                    Tornar publicador
+                              {row.email}
+                            </Button>
+                          </Link> : null
+                      },
+                      {
+                        title: "Criado em",
+                        subtitle: DisplayDate(row.created_at)
+                      },
+                      {
+                        title: "Score",
+                        subtitle: row.score
+                      },
+                      {
+                        title: "Permissão",
+                        subtitle: row.roles.map((chip) => (
+                          <ChipDiv>
+                            <Chip label={chip.name} key={chip.id} />
+                          </ChipDiv>
+                        ))
+                      },
+                      {
+                        title: "Score",
+                        subtitle: row.score
+                      },
+                      {
+                        title: "Ações rápidas",
+                        subtitle: <Button
+                          variant="contained"
+                          color="primary"
+                          disabled={isUserPublisher(row.roles)}
+                          onClick={() => { turnUserPublisher(row.roles, row.id) }}
+                        >
+                          Tornar publicador
                                                 </Button>
-                                            }
-
-                                        ]}
-                                    />
-                                    <div style={{ height: "0.5em" }} />
-                                </>
-                            )
-                    )}
-                </div>
-            )
-        }
-        else {
-            return (
-                <div>
-                    <SnackBar
-                        severity={snackInfo.icon}
-                        text={snackInfo.message}
-                        snackbarOpen={snackInfo.open}
-                        color={snackInfo.color}
-                        handleClose={() => setSnackInfo({
-                            message: '',
-                            icon: '',
-                            open: false,
-                            color: ''
-                        })}
+                      }
+
+                    ]}
+                  />
+                  <div style={{ height: "0.5em" }} />
+                </>
+              )
+          )}
+        </div>
+      )
+    }
+    else {
+      return (
+        <div>
+          <SnackBar
+            severity={snackInfo.icon}
+            text={snackInfo.message}
+            snackbarOpen={snackInfo.open}
+            color={snackInfo.color}
+            handleClose={() => setSnackInfo({
+              message: '',
+              icon: '',
+              open: false,
+              color: ''
+            })}
+          />
+          <PageHeader
+            title="Lista de usuários"
+            actions={[
+              {
+                name: "Atualizar",
+                isLoading: false,
+                func: () => {
+                  setCurrPage(0)
+                },
+                icon: <UpdateRoundedIcon />
+              },
+              {
+                name: "Filtrar",
+                isLoading: false,
+                func: () => {
+                  setShowFilter(!showFilter);
+                },
+                icon: <FilterListRoundedIcon />
+              },
+              {
+                name: "Novo",
+                isLoading: false,
+                func: () => {
+                  router.push('/admin/EditUser/-1')
+                },
+              }
+            ]}
+          >
+            {
+              showFilter ? (
+                <Grid container direction="row" justify="space-between" alignItems="center">
+                  <Grid item>
+                    <TextField
+                      label="Name"
+                      value={nameValue}
+                      onChange={(e) => { NameHandler(e) }}
+                      onBlur={(e) => { setEmail(e.target.value) }}
+                      helperText="Ao digitar, retire o foco do campo"
                     />
-                    <Paper style={{ padding: '1em' }}>
-                        <Grid container spacing={3} direction="row" alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography variant="h4">
-                                    Lista de usuários
-                                </Typography>
-                            </Grid>
-                            <Grid
-                                item
-                                xs={6}
-                            >
-                                <Grid container justify="flex-end" spacing={3}>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            disabled={isUpdating}
-                                            onClick={() => {
-                                                currPage = 0
-                                                transformListToAsc = false
-                                                UpdateHandler(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            {
-                                                isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
-                                            }
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Button
-                                            variant="contained"
-                                            color="secondary"
-                                            onClick={() => {
-                                                setShowFilter(!showFilter)
-                                            }}
-                                            startIcon={<UpdateRoundedIcon />}
-                                        >
-                                            filtrar
-                                        </Button>
-                                    </Grid>
-                                    <Grid item>
-                                        <Link to="/admin/EditUser/-1">
-                                            <Button
-                                                variant="contained"
-                                                color="secondary"
-                                                startIcon={<AddRoundedIcon />}
-                                            >
-                                                Novo
-                                        </Button>
-                                        </Link>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
+                  </Grid>
+                  <Grid item>
+                    <TextField
+                      label="Email"
+                      value={emailValue}
+                      onChange={(e) => { EmailHandler(e) }}
+                      onBlur={(e) => { setEmail(e.target.value) }}
+                      helperText="Ao digitar, retire o foco do campo"
+                    />
+                  </Grid>
+                </Grid>
+              ) : null
+            }
+          </PageHeader>
+
+          <div style={{ height: '2em' }}></div>
+
+          <TableData
+            top={topTable}
+          >
+            <TableBody>
+              {items.map((row, index) => (
+                index === items.length - 1 ?
+                  <StyledTableRow key={index}>
+                    {/* Button to load more data */}
+                    <StyledTableCell>
+                      <Button
+                        color='primary'
+                        variant='text'
+                        disabled={isLoadingMoreItems}
+                        startIcon={<AddRoundedIcon />}
+                        onClick={() => {
+                          setCurrPage(currPage + 1)
+                        }}
+                      >
                         {
-                            showFilter ? (
-                                <Grid container direction="row" justify="space-between" alignItems="center">
-                                    <Grid item>
-                                        <TextField
-                                            label="Name"
-                                            value={name}
-                                            onChange={(e) => { NameHandler(e) }}
-                                        />
-                                    </Grid>
-                                    <Grid item>
-                                        <TextField
-                                            label="Email"
-                                            value={email}
-                                            onChange={(e) => { EmailHandler(e) }}
-                                        />
-                                    </Grid>
-                                </Grid>
-                            ) : null
+                          isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
                         }
-                    </Paper>
-
-                    <div style={{ height: '2em' }}></div>
-
-                    <TableData
-                        top={topTable}
-                        onIconPressed={InvertList}
-                    >
-                        <TableBody>
-                            {items.map((row, index) => (
-                                index === items.length - 1 ?
-                                    <StyledTableRow key={index}>
-                                        {/* Button to load more data */}
-                                        <StyledTableCell>
-                                            <Button
-                                                color='primary'
-                                                variant='text'
-                                                disabled={isLoadingMoreItems}
-                                                startIcon={<AddRoundedIcon />}
-                                                onClick={() => {
-                                                    currPage++
-                                                    if (transformListToAsc) {
-                                                        LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'ASC'))
-                                                    } else {
-                                                        LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
-                                                    }
-                                                }}
-                                            >
-                                                {
-                                                    isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
-                                                }
-                                            </Button>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-
-                                    :
-
-                                    <StyledTableRow key={index}>
-                                        <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.name}</StyledTableCell>
-                                        <StyledTableCell align="right">{row.email ? row.email : ""}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {DisplayDate(row.created_at)}
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">{row.score}</StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            {
-                                                row.roles.map((chip) => (
-                                                    <ChipDiv>
-                                                        <Chip label={chip.name} key={chip.id} />
-                                                    </ChipDiv>
-                                                ))
-                                            }
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Button
-                                                variant="contained"
-                                                color="primary"
-                                                disabled={isUserPublisher(row.roles)}
-                                                onClick={() => { turnUserPublisher(row.roles, row.id) }}
-                                            >
-                                                Tornar publicador
+                      </Button>
+                    </StyledTableCell>
+                  </StyledTableRow>
+
+                  :
+
+                  <StyledTableRow key={index}>
+                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                    <StyledTableCell align="right">{row.email ? row.email : ""}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {DisplayDate(row.created_at)}
+                    </StyledTableCell>
+                    <StyledTableCell align="right">{row.score}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {
+                        row.roles.map((chip) => (
+                          <ChipDiv>
+                            <Chip label={chip.name} key={chip.id} />
+                          </ChipDiv>
+                        ))
+                      }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        disabled={isUserPublisher(row.roles)}
+                        onClick={() => { turnUserPublisher(row.roles, row.id) }}
+                      >
+                        Tornar publicador
                                             </Button>
-                                        </StyledTableCell>
-                                        <StyledTableCell align="right">
-                                            <Link to={`/admin/user/${row.id}`}>
-                                                <IconButton onClick={() => {
-                                                    currPage = 0;
-                                                    transformListToAsc = false
-                                                    nameFilter = ""
-                                                    emailFilter = ""
-                                                }
-                                                }>
-                                                    <VisibilityIcon style={{ fill: '#00bcd4' }} />
-                                                </IconButton>
-                                            </Link>
-                                        </StyledTableCell>
-                                    </StyledTableRow>
-                            ))}
-                        </TableBody>
-                    </TableData>
-                </div>
-            )
-        }
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                      <Link to={`/admin/user/${row.id}`}>
+                        <IconButton>
+                          <VisibilityIcon style={{ fill: '#00bcd4' }} />
+                        </IconButton>
+                      </Link>
+                    </StyledTableCell>
+                  </StyledTableRow>
+              ))}
+            </TableBody>
+          </TableData>
+        </div>
+      )
     }
+  }
 }
 
 export default Users;
diff --git a/src/App.js b/src/App.js
index 1400c7a2cb90a656777c7f1b8608f48298cd20b5..7c5796bcf1eb441a6a15641b9452b51f67ad33fa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,7 +35,7 @@ import TabManageAc from "./Pages/TabsHelp/TabManageAc";
 import PasswordRecoveryPage from "./Pages/PasswordRecoveryPage.js";
 import PageProfessor from "./Pages/PageProfessor.js";
 import ResourcePage from "./Pages/ResourcePage";
-import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
 import { Store } from "./Store";
 import TermsPage from "./Pages/TermsPage.js";
 import PublicationPermissionsPage from "./Pages/PublicationPermissionsPage.js";
@@ -52,12 +52,8 @@ import FormationMaterialPage from "./Pages/FormationMaterialPage.js";
 import FormationMaterialIframe from "./Pages/FormationMaterialIframe.js";
 import MaterialPage from "./Pages/MaterialPage";
 
-//material ui
-import { Tab, Tabs } from "@material-ui/core";
-
 //admin
 import { makeStyles } from "@material-ui/core/styles";
-import DisplayIcon from "./Admin/Components/Components/DisplayIcon";
 import NoteVariables from "./Admin/Pages/Pages/SubPages/NoteVariables";
 import Institution from "./Admin/Pages/Pages/SubPages/Institutions";
 import SendEmail from "./Admin/Pages/Pages/SubPages/SendEmail";
@@ -96,43 +92,25 @@ import UserPermissions from "./Admin/Pages/Pages/SubPages/Permissions";
 import EditRole from "./Admin/Components/Components/Inputs/EditRoles";
 import CreateRole from "./Admin/Components/Components/Inputs/CreateRole";
 import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers";
-import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
-import AppBar from "@material-ui/core/AppBar";
+import Gamefication from "./Admin/Pages/Pages/SubPages/Gamefication"
+import GameficationCard from "./Admin/Components/Components/DataCards/GameficationCard"
+import CreateItem from "./Admin/Components/Components/Inputs/CreateItem/CreateItem"
+import EditItem from "./Admin/Components/Components/Inputs/EditItem/EditItem"
+import GameficationAchieves from './Admin/Pages/Pages/SubPages/GameficationAchieves'
+import AchievementCard from './Admin/Components/Components/DataCards/AchievementsCard'
+import EditAchievement from "./Admin/Components/Components/Inputs/EditAchievement"
+import CreateAchievements from './Admin/Components/Components/Inputs/CreateAchievements'
+import GameficationRequires from './Admin/Pages/Pages/SubPages/GameficationRequires'
+import EditRequirement from "./Admin/Components/Components/Inputs/EditRequirements"
+import CreateRequirement from './Admin/Components/Components/Inputs/CreateRequirement'
+import RequirementCard from './Admin/Components/Components/DataCards/RequirementCard'
+import GameficationActions from './Admin/Pages/Pages/SubPages/GameficationActions'
+import ActionCard from './Admin/Components/Components/DataCards/ActionCard'
+import EditAction from "./Admin/Components/Components/Inputs/EditAction"
+import CreateAction from "./Admin/Components/Components/Inputs/CreateAction"
+import AppBar from './Admin/Components/Components/AppBar'
 
-function TabPanel(props) {
-  const { children, value, index, ...other } = props;
 
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`nav-tabpanel-${index}`}
-      aria-labelledby={`nav-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box p={3}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
-    </div>
-  );
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
-function a11yProps(index) {
-  return {
-    id: `nav-tab-${index}`,
-    "aria-controls": `nav-tabpanel-${index}`,
-  };
-}
 
 const useStyles = makeStyles({
   list: {
@@ -149,11 +127,6 @@ export default function App() {
 
   const { dispatch } = useContext(Store);
   const [hideFooter, setHideFooter] = useState(false);
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
 
   useEffect(() => {
     setHideFooter(String(window.location.href).includes("iframe-colecao"));
@@ -235,128 +208,7 @@ export default function App() {
         <Route path="/iframe-colecao" component={FormationMaterialIframe} />
         <Route path="/material-formacao" component={MaterialPage} />
         <div style={{ backgroundColor: "	#D3D3D3" }}>
-          <AppBar position="static" color="default">
-            <Tabs
-              variant="scrollable"
-              scrollButtons="on"
-              value={value}
-              onChange={handleChange}
-              aria-label="nav tabs example"
-            >
-              <Tab
-                label="Home"
-                to="/admin/home"
-                icon={<DisplayIcon i={0} />}
-                component={Link}
-                {...a11yProps(0)}
-              />
-              <Tab
-                label="Coleções"
-                to="/admin/Collections"
-                icon={<DisplayIcon i={1} />}
-                component={Link}
-                {...a11yProps(1)}
-              />
-              <Tab
-                label="Atividades"
-                to="/admin/activities"
-                icon={<DisplayIcon i={2} />}
-                component={Link}
-                {...a11yProps(2)}
-              />
-              <Tab
-                label="Dúvidas da comunidade"
-                to="/admin/CommunityQuestions"
-                icon={<DisplayIcon i={3} />}
-                component={Link}
-                {...a11yProps(3)}
-              />
-              <Tab
-                label="Instituição"
-                to="/admin/intitutions"
-                icon={<DisplayIcon i={4} />}
-                component={Link}
-                {...a11yProps(4)}
-              />
-              <Tab
-                label="Linguagens"
-                to="/admin/languages"
-                icon={<DisplayIcon i={5} />}
-                component={Link}
-                {...a11yProps(5)}
-              />
-              <Tab
-                label="Objetos educacionais"
-                to="/admin/learningObjects"
-                icon={<DisplayIcon i={6} />}
-                component={Link}
-                {...a11yProps(6)}
-              />
-              <Tab
-                label="Rating"
-                to="/admin/Ratings"
-                icon={<DisplayIcon i={7} />}
-                component={Link}
-                {...a11yProps(7)}
-              />
-              <Tab
-                label="Permissões do usuário"
-                to="/admin/permissions"
-                icon={<DisplayIcon i={8} />}
-                component={Link}
-                {...a11yProps(8)}
-              />
-              <Tab
-                label="Variáveis de nota"
-                to="/admin/noteVars"
-                icon={<DisplayIcon i={9} />}
-                component={Link}
-                {...a11yProps(9)}
-              />
-              <Tab
-                label="Perguntas da curadoria"
-                to="/admin/Questions"
-                icon={<DisplayIcon i={10} />}
-                component={Link}
-                {...a11yProps(10)}
-              />
-              <Tab
-                label="Aprovação de professores"
-                to="/admin/users/teacher_requests"
-                icon={<DisplayIcon i={11} />}
-                component={Link}
-                {...a11yProps(11)}
-              />
-              <Tab
-                label="Usuários"
-                to="/admin/usersList"
-                icon={<DisplayIcon i={12} />}
-                component={Link}
-                {...a11yProps(12)}
-              />
-              <Tab
-                label="Usuários bloqueados"
-                to="/admin/BlockedUsers"
-                icon={<DisplayIcon i={13} />}
-                component={Link}
-                {...a11yProps(13)}
-              />
-              <Tab
-                label="Denúncias"
-                to="/admin/complaints"
-                icon={<DisplayIcon i={14} />}
-                component={Link}
-                {...a11yProps(14)}
-              />
-              <Tab
-                label="Enviar email"
-                to="/admin/sendEmail/:email"
-                icon={<DisplayIcon i={15} />}
-                component={Link}
-                {...a11yProps(15)}
-              />
-            </Tabs>
-          </AppBar>
+          <AppBar />
           <div style={{ padding: "2em" }}>
             <Route path="/admin/home" exact={true} component={Inframe} />
             <Route path="/admin/intitutions" component={Institution} />
@@ -423,6 +275,22 @@ export default function App() {
             <Route path="/admin/CreateRole" component={CreateRole} />
             <Route path="/admin/BlockedUsers" component={BlockedUser} />
             <Route path="/admin/sendEmail/:email" component={SendEmail} />
+            <Route path="/admin/gamefication" component={Gamefication} />
+            <Route path="/admin/item/:id" component={GameficationCard} />
+            <Route path="/admin/createItem" component={CreateItem} />
+            <Route path="/admin/EditItem/:id" component={EditItem} />
+            <Route path="/admin/achievements" component={GameficationAchieves} />
+            <Route path="/admin/achievement/:id" component={AchievementCard} />
+            <Route path="/admin/EditAchievement/:id" component={EditAchievement} />
+            <Route path="/admin/createAchievements" component={CreateAchievements} />
+            <Route path="/admin/requirements" component={GameficationRequires} />
+            <Route path="/admin/EditRequirement/:id" component={EditRequirement} />
+            <Route path="/admin/CreateRequirement" component={CreateRequirement} />
+            <Route path="/admin/requirement/:id" component={RequirementCard} />
+            <Route path="/admin/actions" component={GameficationActions} />
+            <Route path="/admin/action/:id" component={ActionCard} />
+            <Route path="/admin/EditAction/:id" component={EditAction} />
+            <Route path="/admin/CreateAction" component={CreateAction} />
           </div>
         </div>
       </Switch>