diff --git a/package-lock.json b/package-lock.json
index 43a1c84dc653fe49e201e1273ea0054d40e3f1d0..277f2d64e7cb7cd82dca8710ed7d34ec346a4190 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21445,7 +21445,8 @@
     },
     "y18n": {
       "version": "3.2.1",
-      "resolved": ""
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
     },
     "yallist": {
       "version": "3.1.1",
diff --git a/package.json b/package.json
index e0d4bec3b7d19d0b1719c4cc9da338be771cd854..fad77e19e42961e29fab49f1ac4bcbec12126a1e 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     }
   },
   "scripts": {
-    "start": "PORT=4000 react-scripts start watch",
+    "start": "PORT=7000 react-scripts start watch",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/src/App.css b/src/App.css
index 37753011ff3a47cc41ebad90f6ec9e9507d7bd48..4f0e301f55d22337795e1532fdeb14c891da8de7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,7 +17,19 @@ 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/>.*/
 
 .ContrastBackColor {
-  background-color: black !important;
+    background-color: black !important;
+}
+
+.BackColor {
+    background-color: white !important;
+}
+
+.ContrastText{
+    color: white !important;
+}
+
+.Text{
+    color: #666 !important;
 }
 
 .ContrastTextColor {
@@ -33,3 +45,11 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 .ContrastIconColor {
   color: white !important;
 }
+
+.ContrastBorder {
+    border: 1px solid white !important;
+}
+
+.Border {
+    border: 1px solid #666 !important;
+}
diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css
index 278dbe0d2b73e15816d2b330fc2c056d7d2fbcb0..ac0fb515a53fb80ccc6a0ff3487a31acfcd8b7e5 100644
--- a/src/Components/Acessibility/ContrastBar.css
+++ b/src/Components/Acessibility/ContrastBar.css
@@ -42,18 +42,6 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
   border-bottom: 1px solid white;
 }
 
-.text{
-  color: grey;
-  cursor: pointer;
-  width: 140px;
-  font-size: 13px;
-  padding-left: 10px;
-  padding-right: 10px;
-  text-align: center;
-  vertical-align: middle;
-  overflow: auto;
-}
-
 .Contrasttext{
   color: yellow;
   text-decoration: underline;
diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js
index 984e5c5276d097550913ef4af0317fddce4423e8..7ee0adc8d723138a5429cacedc2fc199cc80b546 100644
--- a/src/Components/Acessibility/ContrastBar.js
+++ b/src/Components/Acessibility/ContrastBar.js
@@ -26,84 +26,83 @@ import { Store } from '../../Store';
  * Bar allowing for the toggle of the high contrast mode on the page.
  */
 function ContrastBar() {
-  /* eslint-disable */
-
-  // Hook to set contrast context
-  const { state, dispatch } = React.useContext(Store);
-
-
-  const setContrastAction = (newContrast) => {
-    localStorage.setItem('@portalmec/contrast', newContrast)
-    return dispatch({
-      type: 'SET_CONTRAST',
-      payload: newContrast
-    })
-  }
-
-  const setFontSizeAction = (newFontSize) => {
-    return dispatch({
-      type: 'SET_FONT_SIZE',
-      payload: newFontSize
-    })
-  }
-
-  React.useEffect(() => { }, [state]);
-
-  const toggleContrast = () => {
-    var status = (state.contrast === '' ? 'Contrast' : '')
-
-    setContrastAction(status)
-  }
-  const incrementFontSize = () => {
-    document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
-    setFontSizeAction(parseInt(state.fontSize, 10) + 1);
-  }
-  const decrementFontSize = () => {
-    document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
-    setFontSizeAction(parseInt(state.fontSize, 10) - 1);
-  }
-  const defaultFontSize = () => {
-    setFontSizeAction(15);
-    document.getElementsByTagName("body")[0].style.fontSize = "15px";
-  }
-
-  return (
-    <React.Fragment>
-      <div className={`${state.contrast}bar`}>
-        <div className='textLeft hide-on-small-and-down'>
-          <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
-            Conteúdo 1
-          </a>
-          <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
-            Menu 2
-        </a>
-          <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
-            Rodapé 3
-        </a>
+    /* eslint-disable */
+
+    // Hook to set contrast context
+    const { state, dispatch } = React.useContext(Store);
+
+    const setContrastAction = (newContrast) => {
+        localStorage.setItem('@portalmec/contrast', newContrast)
+        return dispatch({
+        type: 'SET_CONTRAST',
+        payload: newContrast
+        })
+    }
+
+    const setFontSizeAction = (newFontSize) => {
+        return dispatch({
+        type: 'SET_FONT_SIZE',
+        payload: newFontSize
+        })
+    }
+
+    React.useEffect(() => { }, [state]);
+
+    const toggleContrast = () => {
+        var status = (state.contrast === '' ? 'Contrast' : '')
+
+        setContrastAction(status)
+    }
+    const incrementFontSize = () => {
+        document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
+        setFontSizeAction(parseInt(state.fontSize, 10) + 1);
+    }
+    const decrementFontSize = () => {
+        document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
+        setFontSizeAction(parseInt(state.fontSize, 10) - 1);
+    }
+    const defaultFontSize = () => {
+        setFontSizeAction(15);
+        document.getElementsByTagName("body")[0].style.fontSize = "15px";
+    }
+
+    return (
+        <React.Fragment>
+        <div className={`${state.contrast}bar`}>
+            <div className='textLeft hide-on-small-and-down'>
+            <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
+                Conteúdo 1
+            </a>
+            <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
+                Menu 2
+            </a>
+            <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
+                Rodapé 3
+            </a>
+            </div>
+            <div className='textRight'>
+            <div>
+                <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
+                A+
+            </a>
+                <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
+                A-
+            </a>
+                <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
+                A
+            </a>
+            </div>
+            <div onClick={toggleContrast}>
+                <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
+                <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
+                Contraste
+            </a>
+            </div>
+
+            </div>
         </div>
-        <div className='textRight'>
-          <div>
-            <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
-              A+
-          </a>
-            <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
-              A-
-          </a>
-            <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
-              A
-          </a>
-          </div>
-          <div onClick={toggleContrast}>
-            <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
-              <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
-            Contraste
-          </a>
-          </div>
-
-        </div>
-      </div>
-    </React.Fragment>
-  );
+        </React.Fragment>
+    );
 
 }
 
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 5168b306e684a9047af9d33a164bbd1050ada16b..2572241b668168cdeb25439571bb177e960b3df3 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -42,528 +42,530 @@ import { Store } from '../Store'
 import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles(theme => ({
-  contrastTextField: {
-    border: "1px solid white",
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: "black",
-  }
+    contrastTextField: {
+        border: "1px solid white",
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: "black",
+    }
 }))
 
 function objectsPerPage() {
-  var pageWidth = window.innerWidth
-  if (pageWidth >= 1200) {
-    return 3
-  }
-  else {
-    if (pageWidth > 766) {
-      return 2
+    var pageWidth = window.innerWidth
+    if (pageWidth >= 1200) {
+        return 3
     }
     else {
-      return 1
+        if (pageWidth > 766) {
+        return 2
+        }
+        else {
+        return 1
+        }
     }
-  }
 }
 
 function ReqResources(props) {
-  const [rows, setRows] = useState([])
-  const [isLoading, setIsLoading] = useState(false)
-
-  function onSuccessfulGet(data) {
-    var aux = []
-    var resources_per_page = objectsPerPage()
-    for (let i = 0; i < 12 / resources_per_page; i++) {
-      aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+    const [rows, setRows] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+
+    function onSuccessfulGet(data) {
+        var aux = []
+        var resources_per_page = objectsPerPage()
+        for (let i = 0; i < 12 / resources_per_page; i++) {
+        aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+        }
+        setRows(aux)
+        setIsLoading(false)
     }
-    setRows(aux)
-    setIsLoading(false)
-  }
-
-  useEffect(() => {
-    setIsLoading(true)
-    const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
-
-    getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
-  }, [props.order])
-
-  return (
-    isLoading ?
-      <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
-        <Grid item>
-          <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
-        </Grid>
-      </Grid>
-      :
-      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-        {
-          rows.length >= 1 ?
-            rows.map((row, index) => (
-              <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
-                {row.map((card) => (
-                  <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
-                    <ResourceCardFunction
-                      avatar={card.publisher.avatar}
-                      id={card.id}
-                      thumbnail={card.thumbnail}
-                      type={card.object_type ? card.object_type : "Outros"}
-                      title={card.name}
-                      published={card.state === "published" ? true : false}
-                      likeCount={card.likes_count}
-                      liked={card.liked}
-                      rating={card.review_average}
-                      author={card.publisher.name}
-                      tags={card.tags}
-                      href={"/recurso/" + card.id}
-                      downloadableLink={card.default_attachment_location}
-                    />
-                  </div>
-                ))}
-              </Row>
-            ))
-            :
-            <Grid container justify="center" alignItems="center">
-              <Grid item>
-                <img src={RecursoVazio} alt="Não há recursos" />
-              </Grid>
+
+    useEffect(() => {
+        setIsLoading(true)
+        const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
+
+        getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+    }, [props.order])
+
+    return (
+        isLoading ?
+        <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
+            <Grid item>
+            <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
             </Grid>
-        }
-      </Carousel>
+        </Grid>
+        :
+        <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+            {
+            rows.length >= 1 ?
+                rows.map((row, index) => (
+                <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+                    {row.map((card) => (
+                    <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+                        <ResourceCardFunction
+                        contrast={props.contrast}
+                        avatar={card.publisher.avatar}
+                        id={card.id}
+                        thumbnail={card.thumbnail}
+                        type={card.object_type ? card.object_type : "Outros"}
+                        title={card.name}
+                        published={card.state === "published" ? true : false}
+                        likeCount={card.likes_count}
+                        liked={card.liked}
+                        rating={card.review_average}
+                        author={card.publisher.name}
+                        tags={card.tags}
+                        href={"/recurso/" + card.id}
+                        downloadableLink={card.default_attachment_location}
+                        />
+                    </div>
+                    ))}
+                </Row>
+                ))
+                :
+                <Grid container justify="center" alignItems="center">
+                <Grid item>
+                    <img src={RecursoVazio} alt="Não há recursos" />
+                </Grid>
+                </Grid>
+            }
+        </Carousel>
 
-  )
+    )
 }
 
 function ReqCollections(props) {
-  const [rows, setRows] = useState([])
-  const [isLoading, setIsLoading] = useState(false)
-
-  function onSuccessfulGet(data) {
-    var aux = []
-    var collections_per_page = objectsPerPage()
-    for (let i = 0; i < 12 / collections_per_page; i++) {
-      aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+    const [rows, setRows] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+
+    function onSuccessfulGet(data) {
+        var aux = []
+        var collections_per_page = objectsPerPage()
+        for (let i = 0; i < 12 / collections_per_page; i++) {
+        aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+        }
+        setIsLoading(false)
+        setRows(aux)
     }
-    setIsLoading(false)
-    setRows(aux)
-  }
-
-  useEffect(() => {
-    setIsLoading(true)
-    const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
-
-    getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
-  }, [props.order])
-
-  return (
-    isLoading ?
-      <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
-        <Grid item>
-          <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
+
+    useEffect(() => {
+        setIsLoading(true)
+        const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
+
+        getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+    }, [props.order])
+
+    return (
+        isLoading ?
+        <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
+            <Grid item>
+            <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
+            </Grid>
         </Grid>
-      </Grid>
-      :
-      rows.length >= 1 ?
-        <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-          {
-            rows.map((row, index) => (
-              <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
-                {row.map((card) => (
-                  <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
-                    <CollectionCardFunction
-                      name={card.name}
-                      tags={card.tags}
-                      rating={card.score}
-                      id={card.id}
-                      author={card.owner ? card.owner.name : ""}
-                      description={card.description}
-                      thumbnails={card.items_thumbnails}
-                      avatar={card.owner ? card.owner.avatar : ""}
-                      likeCount={card.likes_count}
-                      followed={card.followed}
-                      liked={card.liked}
-                      collections={card.collection_items}
-                      authorID={card.owner ? card.owner.id : ""}
-                    />
-                  </div>
-                ))}
-              </Row>
-            ))}
-        </Carousel>
         :
-        <Grid container justify="center" alignItems="center">
-          <Grid item>
-            <img src={ColecaoVazia} alt="Não há coleções" />
-          </Grid>
-        </Grid>
-  )
+        rows.length >= 1 ?
+            <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+            {
+                rows.map((row, index) => (
+                <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+                    {row.map((card) => (
+                    <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+                        <CollectionCardFunction
+                        contrast={props.contrast}
+                        name={card.name}
+                        tags={card.tags}
+                        rating={card.score}
+                        id={card.id}
+                        author={card.owner ? card.owner.name : ""}
+                        description={card.description}
+                        thumbnails={card.items_thumbnails}
+                        avatar={card.owner ? card.owner.avatar : ""}
+                        likeCount={card.likes_count}
+                        followed={card.followed}
+                        liked={card.liked}
+                        collections={card.collection_items}
+                        authorID={card.owner ? card.owner.id : ""}
+                        />
+                    </div>
+                    ))}
+                </Row>
+                ))}
+            </Carousel>
+            :
+            <Grid container justify="center" alignItems="center">
+            <Grid item>
+                <img src={ColecaoVazia} alt="Não há coleções" />
+            </Grid>
+            </Grid>
+    )
 }
 
 function TabRecurso({ contrast }) {
-  const classes = useStyles()
-  const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
-  const [currOrder, setCurrOrder] = useState("Mais Relevante");
-  const [currValue, setCurrValue] = useState("score");
-  const [ordenar] = useState([
-    { label: "Mais Estrelas", value: "review_average" },
-    { label: "Mais Relevante", value: "score" },
-    { label: "Mais Baixados", value: "downloads" },
-    { label: "Mais Favoritados", value: "likes" },
-    { label: "Mais Recentes", value: "publicationdesc" },
-    { label: "Ordem Alfabética", value: "title" },
-  ]);
-
-  return (
-    <React.Fragment>
-      <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
-        <StyledTab container contrast={contrast}>
-          <Grid item md={3} xs={12}>
-            <img
-              src={recursos}
-              alt="aba recursos"
-              style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
-            />
-          </Grid>
-          {
-            window.innerWidth <= 501 &&
-            <h4>
-              Recursos Educacionais Digitais
-                        </h4>
-          }
-          <Grid item md={6} xs={12}>
-            <p>
-              {text}
-            </p>
-          </Grid>
-          {
-            window.innerWidth <= 501 &&
-            <div style={{ display: "flex", justifyContent: "center" }}>
-              <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
-            </div>
-          }
-        </StyledTab>
-      </div>
-      {
-        window.innerWidth > 501 &&
-        <div className={`${contrast}BackColor`}>
-          <Container style={{ padding: "20px" }}>
-            <Grid
-              container
-              direction="row"
-              justify="space-between"
-              alignItems="center"
-              style={{
-                paddingBottom: "5px",
-                borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
-                color: contrast === "" ? "#ff7f00" : "white",
-              }}
-            >
-              <Grid item>
-                <p
-                  style={{ margin: 0, padding: 0 }}
-                >
-                  {
-                    `Recursos ${currOrder}`
-                  }
+    const classes = useStyles()
+    const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
+    const [currOrder, setCurrOrder] = useState("Mais Relevante");
+    const [currValue, setCurrValue] = useState("score");
+    const [ordenar] = useState([
+        { label: "Mais Estrelas", value: "review_average" },
+        { label: "Mais Relevante", value: "score" },
+        { label: "Mais Baixados", value: "downloads" },
+        { label: "Mais Favoritados", value: "likes" },
+        { label: "Mais Recentes", value: "publicationdesc" },
+        { label: "Ordem Alfabética", value: "title" },
+    ]);
+
+    return (
+        <React.Fragment>
+        <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
+            <StyledTab container contrast={contrast}>
+            <Grid item md={3} xs={12}>
+                <img
+                src={recursos}
+                alt="aba recursos"
+                style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+                />
+            </Grid>
+            {
+                window.innerWidth <= 501 &&
+                <h4>
+                Recursos Educacionais Digitais
+                            </h4>
+            }
+            <Grid item md={6} xs={12}>
+                <p>
+                {text}
                 </p>
-              </Grid>
-
-              <Grid item>
-                <Grid container direction="row" alignItems="center" spacing={1}>
-                  <Grid item>
-                    <p style={{ margin: 0, padding: 0 }}>
-                      Ordenar por:
-                  </p>
-                  </Grid>
-                  <Grid item>
-                    <TextField
-                      select
-                      fullWidth
-                      value={currValue}
-                      variant="outlined"
-                      className={contrast === "Contrast" && classes.contrastTextField}
+            </Grid>
+            {
+                window.innerWidth <= 501 &&
+                <div style={{ display: "flex", justifyContent: "center" }}>
+                <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+                </div>
+            }
+            </StyledTab>
+        </div>
+        {
+            window.innerWidth > 501 &&
+            <div className={`${contrast}BackColor`}>
+            <Container style={{ padding: "20px" }}>
+                <Grid
+                container
+                direction="row"
+                justify="space-between"
+                alignItems="center"
+                style={{
+                    paddingBottom: "5px",
+                    borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
+                    color: contrast === "" ? "#ff7f00" : "white",
+                }}
+                >
+                <Grid item>
+                    <p
+                    style={{ margin: 0, padding: 0 }}
                     >
-                      {ordenar.map((option) => (
-                        <MenuItem
-                          key={option.value}
-                          value={option.value}
-                          name={option.value}
-                          onClick={() => {
-                            setCurrOrder(option.label)
-                            setCurrValue(option.value)
-                          }}
-                          className={`${contrast}BackColor`}
+                    {
+                        `Recursos ${currOrder}`
+                    }
+                    </p>
+                </Grid>
+
+                <Grid item>
+                    <Grid container direction="row" alignItems="center" spacing={1}>
+                    <Grid item>
+                        <p style={{ margin: 0, padding: 0 }}>
+                        Ordenar por:
+                    </p>
+                    </Grid>
+                    <Grid item>
+                        <TextField
+                        select
+                        fullWidth
+                        value={currValue}
+                        variant="outlined"
+                        className={contrast === "Contrast" && classes.contrastTextField}
                         >
-                          <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
-                            {option.label}
-                          </span>
-                        </MenuItem>
-                      ))}
-                    </TextField>
-                  </Grid>
+                        {ordenar.map((option) => (
+                            <MenuItem
+                            key={option.value}
+                            value={option.value}
+                            name={option.value}
+                            onClick={() => {
+                                setCurrOrder(option.label)
+                                setCurrValue(option.value)
+                            }}
+                            >
+                            <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+                                {option.label}
+                            </span>
+                            </MenuItem>
+                        ))}
+                        </TextField>
+                    </Grid>
+                    </Grid>
                 </Grid>
-              </Grid>
-            </Grid>
-            <Hidden sm xs>
-              <ReqResources order={currValue} contrast={contrast} />
-            </Hidden>
-            <Visible sm xs>
-              <ReqResources order={currValue} contrast={contrast} />
-            </Visible>
-          </Container>
-        </div>
-      }
-    </React.Fragment>
-  )
+                </Grid>
+                <Hidden sm xs>
+                <ReqResources order={currValue} contrast={contrast} />
+                </Hidden>
+                <Visible sm xs>
+                <ReqResources order={currValue} contrast={contrast} />
+                </Visible>
+            </Container>
+            </div>
+        }
+        </React.Fragment>
+    )
 }
 
 function TabColecoes({ contrast }) {
-  const classes = useStyles()
-  const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
-  const [currOrder, setCurrOrder] = useState("Mais Relevante");
-  const [currValue, setCurrValue] = useState("score");
-  const [ordenar] = useState([
-    { label: "Mais Estrelas", value: "review_average" },
-    { label: "Mais Relevante", value: "score" },
-    { label: "Mais Baixados", value: "downloads" },
-    { label: "Mais Favoritados", value: "likes" },
-    { label: "Mais Recentes", value: "publicationdesc" },
-    { label: "Ordem Alfabética", value: "title" },
-  ]);
-
-  return (
-    <React.Fragment>
-      <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
-        <StyledTab container contrast={contrast}>
-          <Grid item md={3} xs={12}>
-            <img
-              src={colecoes}
-              alt="aba recursos"
-              style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
-            />
-          </Grid>
-          {
-            window.innerWidth <= 501 &&
-            <h4>
-              Coleções dos Usuários
-                        </h4>
-          }
-          <Grid item md={6} xs={12}>
-            <p>
-              {text}
-            </p>
-          </Grid>
-          {
-            window.innerWidth <= 501 &&
-            <div style={{ display: "flex", justifyContent: "center" }}>
-              <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
-            </div>
-          }
-        </StyledTab>
-      </div>
-      {
-        window.innerWidth > 501 &&
-        <div className={`${contrast}BackColor`}>
-          <Container style={{ padding: "20px" }}>
-            <Grid
-              container
-              direction="row"
-              justify="space-between"
-              alignItems="center"
-              style={{
-                paddingBottom: "5px",
-                borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
-                color: contrast === "" ? "#673ab7" : "white",
-              }}
-            >
-              <Grid item>
-                <p
-                  style={{ margin: 0, padding: 0 }}
-                >
-                  {
-                    `Coleções ${currOrder}`
-                  }
+    const classes = useStyles()
+    const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
+    const [currOrder, setCurrOrder] = useState("Mais Relevante");
+    const [currValue, setCurrValue] = useState("score");
+    const [ordenar] = useState([
+        { label: "Mais Estrelas", value: "review_average" },
+        { label: "Mais Relevante", value: "score" },
+        { label: "Mais Baixados", value: "downloads" },
+        { label: "Mais Favoritados", value: "likes" },
+        { label: "Mais Recentes", value: "publicationdesc" },
+        { label: "Ordem Alfabética", value: "title" },
+    ]);
+
+    return (
+        <React.Fragment>
+        <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+            <StyledTab container contrast={contrast}>
+            <Grid item md={3} xs={12}>
+                <img
+                src={colecoes}
+                alt="aba recursos"
+                style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+                />
+            </Grid>
+            {
+                window.innerWidth <= 501 &&
+                <h4>
+                Coleções dos Usuários
+                            </h4>
+            }
+            <Grid item md={6} xs={12}>
+                <p>
+                {text}
                 </p>
-              </Grid>
-
-              <Grid item>
-                <Grid container direction="row" alignItems="center" spacing={1}>
-                  <Grid item>
-                    <p style={{ margin: 0, padding: 0 }}>
-                      Ordenar por:
-                                    </p>
-                  </Grid>
-                  <Grid item>
-                    <TextField
-                      select
-                      fullWidth
-                      value={currValue}
-                      variant="outlined"
-                      className={contrast === "Contrast" && classes.contrastTextField}
+            </Grid>
+            {
+                window.innerWidth <= 501 &&
+                <div style={{ display: "flex", justifyContent: "center" }}>
+                <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+                </div>
+            }
+            </StyledTab>
+        </div>
+        {
+            window.innerWidth > 501 &&
+            <div className={`${contrast}BackColor`}>
+            <Container style={{ padding: "20px" }}>
+                <Grid
+                container
+                direction="row"
+                justify="space-between"
+                alignItems="center"
+                style={{
+                    paddingBottom: "5px",
+                    borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
+                    color: contrast === "" ? "#673ab7" : "white",
+                }}
+                >
+                <Grid item>
+                    <p
+                    style={{ margin: 0, padding: 0 }}
                     >
-                      {ordenar.map((option) => (
-                        <MenuItem
-                          key={option.value}
-                          value={option.value}
-                          name={option.value}
-                          style={contrast === "" ? {} : { backgroundColor: "black" }}
-                          onClick={() => {
-                            setCurrOrder(option.label)
-                            setCurrValue(option.value)
-                          }}
+                    {
+                        `Coleções ${currOrder}`
+                    }
+                    </p>
+                </Grid>
+
+                <Grid item>
+                    <Grid container direction="row" alignItems="center" spacing={1}>
+                    <Grid item>
+                        <p style={{ margin: 0, padding: 0 }}>
+                        Ordenar por:
+                                        </p>
+                    </Grid>
+                    <Grid item>
+                        <TextField
+                        select
+                        fullWidth
+                        value={currValue}
+                        variant="outlined"
+                        className={contrast === "Contrast" && classes.contrastTextField}
                         >
-                          <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
-                            {option.label}
-                          </span>
-                        </MenuItem>
-                      ))}
-                    </TextField>
-                  </Grid>
+                        {ordenar.map((option) => (
+                            <MenuItem
+                            key={option.value}
+                            value={option.value}
+                            name={option.value}
+                            style={contrast === "" ? {} : { backgroundColor: "black" }}
+                            onClick={() => {
+                                setCurrOrder(option.label)
+                                setCurrValue(option.value)
+                            }}
+                            >
+                            <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+                                {option.label}
+                            </span>
+                            </MenuItem>
+                        ))}
+                        </TextField>
+                    </Grid>
+                    </Grid>
                 </Grid>
-              </Grid>
-            </Grid>
-            <ReqCollections order={currValue} contrast={contrast} />
-          </Container>
-        </div>
-      }
-    </React.Fragment>
-  )
+                </Grid>
+                <ReqCollections order={currValue} contrast={contrast} />
+            </Container>
+            </div>
+        }
+        </React.Fragment>
+    )
 }
 
 function TabMateriais({ contrast }) {
-  const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
-
-  const materials = colecoes_obj()
+    const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
 
-  const [currMaterial, setCurrMaterial] = useState({
-    open: false,
-    material: {}
-  })
+    const materials = colecoes_obj()
 
-  const handleExpandMaterial = (id) => {
-    if (id !== currMaterial.material.id)
-      setCurrMaterial({
-        open: true,
-        material: { ...materials[id] }
-      })
-    else {
-      setCurrMaterial({
+    const [currMaterial, setCurrMaterial] = useState({
         open: false,
         material: {}
-      })
+    })
+
+    const handleExpandMaterial = (id) => {
+        if (id !== currMaterial.material.id)
+        setCurrMaterial({
+            open: true,
+            material: { ...materials[id] }
+        })
+        else {
+        setCurrMaterial({
+            open: false,
+            material: {}
+        })
+        }
     }
-  }
-
-  return (
-    <React.Fragment>
-      <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
-        <StyledTab container contrast={contrast}>
-          <Grid item md={3} xs={12}>
-            <img
-              src={materiais}
-              alt="aba recursos"
-              style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
-            />
-          </Grid>
-          {
-            window.innerWidth <= 501 &&
-            <h4>
-              Materiais de formação
-                        </h4>
-          }
-          <Grid item md={6} xs={12}>
-            <p>
-              {text}
-            </p>
-          </Grid>
-          {
-            window.innerWidth <= 501 &&
-            <div style={{ display: "flex", justifyContent: "center" }}>
-              <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
-            </div>
-          }
-        </StyledTab>
-      </div>
-      {
-        window.innerWidth > 501 &&
-        <div className={`${contrast}BackColor`}>
-          <Container style={{ padding: "20px" }}>
-            <p
-              style={{
-                paddingBottom: "5px",
-                borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
-                color: contrast === "" ? "#e81f4f" : "white",
-              }}
-            >
-              Materiais mais recentes{" "}
-            </p>
-            <Carousel
-              style={{ padding: "20px" }}
-              showThumbs={false}
-              infiniteLoop={true}
-              showStatus={false}
-            >
-              <Row>
-                {
-                  materials.map((material, index) => {
-                    return (
-                      <Col md={3} key={index}>
-                        <MaterialCard
-                          name={material.name}
-                          thumb={material.img}
-                          score={material.score}
-                          modules={material.topics}
-                          handleExpand={handleExpandMaterial}
-                          id={index}
-                        />
-                      </Col>
-                    )
-                  })
-                }
-              </Row>
-            </Carousel>
+
+    return (
+        <React.Fragment>
+        <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+            <StyledTab container contrast={contrast}>
+            <Grid item md={3} xs={12}>
+                <img
+                src={materiais}
+                alt="aba recursos"
+                style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+                />
+            </Grid>
             {
-              currMaterial.open ?
-                <ExpandedMaterial material={currMaterial.material} />
-                :
-                null
+                window.innerWidth <= 501 &&
+                <h4>
+                Materiais de formação
+                            </h4>
+            }
+            <Grid item md={6} xs={12}>
+                <p>
+                {text}
+                </p>
+            </Grid>
+            {
+                window.innerWidth <= 501 &&
+                <div style={{ display: "flex", justifyContent: "center" }}>
+                <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+                </div>
             }
-          </Container>
+            </StyledTab>
         </div>
-      }
-    </React.Fragment >
-  )
+        {
+            window.innerWidth > 501 &&
+            <div className={`${contrast}BackColor`}>
+            <Container style={{ padding: "20px" }}>
+                <p
+                style={{
+                    paddingBottom: "5px",
+                    borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
+                    color: contrast === "" ? "#e81f4f" : "white",
+                }}
+                >
+                Materiais mais recentes{" "}
+                </p>
+                <Carousel
+                style={{ padding: "20px" }}
+                showThumbs={false}
+                infiniteLoop={true}
+                showStatus={false}
+                >
+                <Row>
+                    {
+                    materials.map((material, index) => {
+                        return (
+                        <Col md={3} key={index}>
+                            <MaterialCard
+                            contrast={contrast}
+                            name={material.name}
+                            thumb={material.img}
+                            score={material.score}
+                            modules={material.topics}
+                            handleExpand={handleExpandMaterial}
+                            id={index}
+                            />
+                        </Col>
+                        )
+                    })
+                    }
+                </Row>
+                </Carousel>
+                {
+                currMaterial.open ?
+                    <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
+                    :
+                    null
+                }
+            </Container>
+            </div>
+        }
+        </React.Fragment >
+    )
 }
 
 export default function AreasSubPages(props) {
 
-  const { state } = useContext(Store)
-
-  const areaRender = () => {
-    switch (props.banner) {
-      case "Recursos":
-        return <TabRecurso contrast={state.contrast} />
-      case "Materiais":
-        return <TabMateriais contrast={state.contrast} />
-      case "Colecoes":
-        return <TabColecoes contrast={state.contrast} />
-      default:
-        return null
+    const { state } = useContext(Store)
+
+    const areaRender = () => {
+        switch (props.banner) {
+        case "Recursos":
+            return <TabRecurso contrast={state.contrast} />
+        case "Materiais":
+            return <TabMateriais contrast={state.contrast} />
+        case "Colecoes":
+            return <TabColecoes contrast={state.contrast} />
+        default:
+            return null
+        }
     }
-  }
-
-  return (
-    <React.Fragment>
-      {
-        window.innerWidth <= 501 ? (
-          <React.Fragment>
-            <TabRecurso contrast={state.contrast} />
-            <TabMateriais contrast={state.contrast} />
-            <TabColecoes contrast={state.contrast} />
-          </React.Fragment>
-        ) : (
-            areaRender()
-          )
-      }
-    </React.Fragment>
-  )
+
+    return (
+        <React.Fragment>
+        {
+            window.innerWidth <= 501 ? (
+            <React.Fragment>
+                <TabRecurso contrast={state.contrast} />
+                <TabMateriais contrast={state.contrast} />
+                <TabColecoes contrast={state.contrast} />
+            </React.Fragment>
+            ) : (
+                areaRender()
+            )
+        }
+        </React.Fragment>
+    )
 }
 
 const StyledTab = styled(Grid)`
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 564c07183b23510edf5ba1170651a63fff879122..68a6d2742ad5256c6fe717a85225593f50ff5df5 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -56,10 +56,12 @@ export default function ButtonGuardarColecao(props) {
             >
                 <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
             </Snackbar>
-            <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+            <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
                 thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
             /> 
-            <StyledButton onClick={handleGuardar}>
+            <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}
+                style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}}
+            >
                 <CreateNewFolderIcon /> &nbsp; GUARDAR
             </StyledButton>
         </>
@@ -67,17 +69,15 @@ export default function ButtonGuardarColecao(props) {
 }
 
 const StyledButton = styled(Button)`
-    color : #666 !important;
     background-color : transparent !important;
     font-size : 14px important;
     font-weight : 500 !important;
 
     .MuiSvgIcon-root {
         font-size : 24px;
-        color : inherit;
     }
 
     &:hover {
-        color: rgb(107, 35, 142) !important;
+        color: rgb(107, 35, 142);
     }
 `
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index a075780622f76c453592afb7d07b84de6ccd3df3..3199c61edb4b9487cc18f6f041771971adbdfdeb 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -57,7 +57,7 @@ export default function ColCardOwnerOptions (props) {
         />
 
         <div style={{fontSize: "12px"}}>
-          <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+          <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
             OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
           </Button>
           <Menu
@@ -67,18 +67,18 @@ export default function ColCardOwnerOptions (props) {
             open={Boolean(anchorEl)}
             onClose={handleClose}
           >
-            <StyledMenuItem>
+            <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast}>
                 <Link to={"/colecao-do-usuario/" + props.id}>
-                    <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                    <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
                 </Link>
             </StyledMenuItem>
 
-            <StyledMenuItem onClick={() => {toggleModalEditar(true)}}>
-                <ListItemIcon><CreateIcon /></ListItemIcon>Editar
+            <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
+                <ListItemIcon className={`${props.contrast}LinkColor`}><CreateIcon /></ListItemIcon>Editar
             </StyledMenuItem>
 
-            <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} >
-                <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir
+            <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
+                <ListItemIcon className={`${props.contrast}LinkColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
             </StyledMenuItem>
 
 
@@ -89,13 +89,12 @@ export default function ColCardOwnerOptions (props) {
 }
 
 export const StyledMenuItem = styled(MenuItem)`
-    color : #666 !important;
+    background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
 
     .MuiSvgIcon-root {
         vertical-align : middle !important;
     }
     a {
-        text-decoration : none !important;
-        color : #666 !important;
+        color : inherit !important;
     }
 `
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 2b58c70f58000d4014fb53330c8901a65cbfc1b3..4e014419bfb43a8b7e256edf43781564cfd9fbe8 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -32,7 +32,7 @@ import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import AddIcon from '@material-ui/icons/Add';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 
-export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
+export default function ColCardPublicOptions({ contrast, id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
     const [anchorEl, setAnchorEl] = React.useState(null);
 
     function handleClick(event) {
@@ -49,6 +49,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
     return (
         <>
             <ReportModal
+                contrast={contrast}
                 open={reportModalOpen}
                 handleClose={() => handleReportModal(false)}
                 form="colecao"
@@ -62,7 +63,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
                     onClick={handleClick}
                     style={{ color: "#666" }}
                 >
-                    <MoreVertIcon style={{ color: "inherit" }} />
+                    <MoreVertIcon className={`${contrast}LinkColor`} style={{ color: "inherit" }} />
                 </Button>
                 <Menu
                     id="simple-menu"
@@ -71,9 +72,9 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
                     open={Boolean(anchorEl)}
                     onClose={handleClose}
                 >
-                    <StyledMenuItem>
+                    <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast}>
                         <Link to={"/colecao-do-usuario/" + id}>
-                            <ListItemIcon>
+                            <ListItemIcon className={`${contrast}LinkColor`}>
                                 <OpenIcon />
                             </ListItemIcon>
                             Abrir
@@ -81,21 +82,23 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
                     </StyledMenuItem>
 
                     <StyledMenuItem
+                        className={`${contrast}LinkColor`}
+                        contrast={contrast}
                         onClick={() =>
                             window.open("/colecao-do-usuario/" + id, "_blank")
                         }
                     >
-                        <ListItemIcon>
+                        <ListItemIcon className={`${contrast}LinkColor`}>
                             <OpenInBrowserIcon />
                         </ListItemIcon>
                         Abrir em nova guia
                     </StyledMenuItem>
 
-                    <StyledMenuItem onClick={handleLike}>
-                        <ListItemIcon>
+                    <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleLike}>
+                        <ListItemIcon className={`${contrast}LinkColor`}>
                             {
                                 liked ?
-                                    <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} />
+                                    <FavoriteIcon /> : <FavoriteIcon />
                             }
                         </ListItemIcon>
                         {
@@ -104,8 +107,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
                         }
                     </StyledMenuItem>
 
-                    <StyledMenuItem onClick={handleFollow}>
-                        <ListItemIcon>
+                    <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleFollow}>
+                        <ListItemIcon className={`${contrast}LinkColor`}>
                             {
                                 userFollowingCol ?
                                     <ExitToAppIcon /> : <AddIcon />
@@ -118,6 +121,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
                     </StyledMenuItem>
 
                     <StyledMenuItem
+                        className={`${contrast}LinkColor`}
+                        contrast={contrast}
                         onClick={() => {
                             if (currentUserId)
                                 handleReportModal(true);
@@ -125,7 +130,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
                                 handleLogin()
                         }}
                     >
-                        <ListItemIcon>
+                        <ListItemIcon className={`${contrast}LinkColor`}>
                             <ReportProblemIcon />
                         </ListItemIcon>
                         Reportar
@@ -137,13 +142,11 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
 }
 
 export const StyledMenuItem = styled(MenuItem)`
-  color: #666 !important;
-
-  .MuiSvgIcon-root {
-    vertical-align: middle !important;
-  }
-  a {
-    text-decoration: none !important;
-    color: #666 !important;
-  }
+    background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+    .MuiSvgIcon-root {
+        vertical-align: middle !important;
+    }
+    a {
+        color: inherit !important;
+    }
 `;
diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index c6c299cf08bba817e4a14e684609084840c44f4b..3d5c42318f5db49f869d0b462d24879b64c4607d 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -30,19 +30,20 @@ export default function CollectionAuthor(props) {
 			justify="center"
 			alignItems="center">
 			{props.imgsrc ?
-				<UserLink
+				<Link
 					to={`/usuario-publico/${props.author_id}`}
+                    contrast={props.contrast}
 				>
 					<UserAvatar src={props.imgsrc} />
-				</UserLink>
+				</Link>
 				:
 				<CircularProgress color="secondary" />
 			}
-			<InfoText>Coleção organizada por:</InfoText>
+			<InfoText contrast={props.contrast}>Coleção organizada por:</InfoText>
 			{props.name ?
-				<UserLink to={`/usuario-publico/${props.author_id}`} >
-					<UserName>{props.name}</UserName>
-				</UserLink>
+				<Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}>
+					<UserName contrast={props.contrast}>{props.name}</UserName>
+				</Link>
 				:
 				<CircularProgress />
 			}
@@ -58,15 +59,10 @@ const UserAvatar = styled.img`
 const InfoText = styled.p`
 	margin-bottom: 0;
 	padding-bottom: 0;
-	color: #666;
+    color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
 `
 const UserName = styled.h2`
 	margin-top: 10px;
-	color: #673ab7;
-`
-const UserLink = styled(Link)`
-	text-decoration: none;
-	&:focus, &:hover, &:visited, &:link, &:active {
-			text-decoration: none;
-	}
+    color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
 `
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index dd4e3d079b837960dd76e8621f494404c71ecb47..e983107dc8e5f1fb5bac97fd9ce9716d175038c3 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -41,283 +41,291 @@ import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
 
 export default function CollectionCardFunction(props) {
-  const { state } = useContext(Store)
-
-  // eslint-disable-next-line
-  const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
-  const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
-  const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
-
-  const [name, setName] = useState(props.name)
-  const changeColName = (newName) => { setName(newName) }
-
-  const [privacy, setPrivacy] = useState(props.privacy)
-  const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
-
-  const [likesCount, setLikesCount] = useState(props.likeCount)
-  const [liked, toggleLiked] = useState(props.liked)
-
-  const [signUpOpen, setSignUp] = useState(false)
-  const [loginOpen, setLogin] = useState(false)
-  const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
-
-
-  function handleSuccessLike(data) {
-    toggleLiked(!liked)
-    setLikesCount(data.count)
-  }
-  const handleLike = () => {
-    if (state.currentUser.id)
-      putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
-    else
-      handleLogin()
-  }
-
-  const [followingHover, handleFollowingHover] = useState(false)
-  const toggleFollowingHover = (value) => { handleFollowingHover(value) }
-
-  const [slideIn, setSlide] = useState(false)
-  const controlSlide = () => { setSlide(!slideIn) }
-
-  function handleSuccessFollow(data) {
-    handleToggleUserFollowingCol()
-  }
-  const handleFollow = () => {
-    if (state.currentUser.id)
-      putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
-    else
-      handleLogin()
-  }
-
-  const RenderFollowButton = () => {
-    return (
-      <FollowButton onClick={handleFollow}>
-        <AddIcon /><span>SEGUIR</span>
-      </FollowButton>
-    )
-  }
+    const { state } = useContext(Store)
+
+    // eslint-disable-next-line
+    const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
+    const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
+    const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
+
+    const [name, setName] = useState(props.name)
+    const changeColName = (newName) => { setName(newName) }
+
+    const [privacy, setPrivacy] = useState(props.privacy)
+    const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
+
+    const [likesCount, setLikesCount] = useState(props.likeCount)
+    const [liked, toggleLiked] = useState(props.liked)
 
-  useEffect(() => {
-    if (!state.currentUser.id) {
-      toggleLiked(false);
-      toggleUserFollowingCol(false);
+    const [signUpOpen, setSignUp] = useState(false)
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+
+    function handleSuccessLike(data) {
+        toggleLiked(!liked)
+        setLikesCount(data.count)
+    }
+    const handleLike = () => {
+        if (state.currentUser.id)
+        putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
+        else
+        handleLogin()
     }
-  }, [state.currentUser.id])
 
-  const RenderFollowingButton = () => {
-    return (
-      <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
-        onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
-        {
-          followingHover ?
-            (
-              [
-                <span>DEIXAR DE SEGUIR</span>
-              ]
-            )
-            :
-            (
-              [
-                <React.Fragment>
-                  <CheckIcon /><span>SEGUINDO</span>
-                </React.Fragment>
-              ]
-            )
-        }
-      </FollowingButton>
-    )
-  }
+    const [followingHover, handleFollowingHover] = useState(false)
+    const toggleFollowingHover = (value) => { handleFollowingHover(value) }
 
-  const SlideAnimationContent = () => {
-    return (
-      <SlideContentDiv>
-        <HeaderContainer container="row" justify="flex-start" alignItems="center">
-          <AvatarDiv item xs={2}>
-            <img className="img" src={userAvatar} alt="user avatar" />
-          </AvatarDiv>
-          <EnviadoPor item xs={10}>
-            Enviado por:
-                        <br />
-            <p>{props.author}</p>
-          </EnviadoPor>
-        </HeaderContainer>
-        {
-          props.tags ?
-            <TagContainer container direction="row">
-              {
-                props.tags.map((tag) =>
-                  <Grid item key={tag.id}>
-                    <span >{tag.name}</span>
-                  </Grid>
-                )
-              }
-            </TagContainer> :
-            null
+    const [slideIn, setSlide] = useState(false)
+    const controlSlide = () => { setSlide(!slideIn) }
+
+    function handleSuccessFollow(data) {
+        handleToggleUserFollowingCol()
+    }
+    const handleFollow = () => {
+        if (state.currentUser.id)
+        putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
+        else
+        handleLogin()
+    }
+
+    const RenderFollowButton = () => {
+        return (
+        <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}>
+            <AddIcon /><span>SEGUIR</span>
+        </FollowButton>
+        )
+    }
+
+    useEffect(() => {
+        if (!state.currentUser.id) {
+        toggleLiked(false);
+        toggleUserFollowingCol(false);
         }
-      </SlideContentDiv>
-    )
-  }
+    }, [state.currentUser.id])
+
+    const RenderFollowingButton = () => {
+        return (
+        <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)}
+            onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
+            {
+            followingHover ?
+                (
+                [
+                    <span>DEIXAR DE SEGUIR</span>
+                ]
+                )
+                :
+                (
+                [
+                    <React.Fragment>
+                    <CheckIcon /><span>SEGUINDO</span>
+                    </React.Fragment>
+                ]
+                )
+            }
+        </FollowingButton>
+        )
+    }
 
-  const handleSignUp = () => {
-    setSignUp(!signUpOpen)
-  }
+    const SlideAnimationContent = (contrast) => {
+        return (
+        <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
+            <HeaderContainer container="row" justify="flex-start" alignItems="center">
+            <AvatarDiv item xs={2}>
+                <img className="img" src={userAvatar} alt="user avatar" />
+            </AvatarDiv>
+            <EnviadoPor item xs={10}>
+                Enviado por:
+                            <br />
+                <p>{props.author}</p>
+            </EnviadoPor>
+            </HeaderContainer>
+            {
+            props.tags ?
+                <TagContainer container direction="row">
+                {
+                    props.tags.map((tag) =>
+                    <Grid item key={tag.id}>
+                        <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
+                    </Grid>
+                    )
+                }
+                </TagContainer> :
+                null
+            }
+        </SlideContentDiv>
+        )
+    }
 
-  const handleLogin = () => {
-    setLogin(!loginOpen)
-  }
+    const handleSignUp = () => {
+        setSignUp(!signUpOpen)
+    }
 
-  function Alert(props) {
-    return <MuiAlert elevation={6} variant="filled" {...props} />;
-  }
+    const handleLogin = () => {
+        setLogin(!loginOpen)
+    }
 
-  function toggleLoginSnackbar(reason) {
-    if (reason === 'clickaway') {
-      return;
+    function Alert(props) {
+        return <MuiAlert elevation={6} variant="filled" {...props} />;
     }
-    handleSuccessfulLogin(false);
-  }
-
-  return (
-    <>
-      <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
-      />
-      <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
-        openSnackbar={() => { handleSuccessfulLogin(true) }}
-      />
-      <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      >
-        <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
-      </Snackbar>
-      <StyledCard>
-        <CardDiv>
-          <CardReaDiv>
-            <Link to={"/colecao-do-usuario/" + props.id}>
-              <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
-                <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
-                  <UserInfo style={{ width: '272.5px'}}>
-                    {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
-                    <img src={userAvatar} alt="user avatar" style={{
-                      height: "70px", width: "70px", borderRadius: "50%",
-                      zIndex: 1, border: "2px solid white",
-                      boxShadow: "0 1px 3px rgba(0,0,0,.45)"
-                    }} />
-                    <UserAndTitle>
-                      <span>{props.author}</span>
-                      <span className={"col-name"}>{name}</span>
-                    </UserAndTitle>
-                  </UserInfo>
-                  <StyledGrid container direction="row" style={{ width: '272.5px' }}>
-                    {
-                      props.thumbnails.map((thumb) =>
-                        <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
-                          <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
-                        </Grid>
-                      )
-                    }
-                  </StyledGrid>
-                </div>
+
+    function toggleLoginSnackbar(reason) {
+        if (reason === 'clickaway') {
+        return;
+        }
+        handleSuccessfulLogin(false);
+    }
+
+    return (
+        <>
+            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+            />
+            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+                openSnackbar={() => { handleSuccessfulLogin(true) }}
+            />
+            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+            </Snackbar>
+            <StyledCard>
+            <CardDiv className={`${props.contrast}Border`}>
+                <CardReaDiv className={`${props.contrast}BackColor`}>
+                    <Link to={"/colecao-do-usuario/" + props.id}>
+                    <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+                        <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+                            <UserInfo style={{ width: '272.5px'}}>
+                                {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+                                <img src={userAvatar} alt="user avatar" style={{
+                                height: "70px", width: "70px", borderRadius: "50%",
+                                zIndex: 1, border: "2px solid white",
+                                boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+                            }} />
+                                <UserAndTitle>
+                                <span>{props.author}</span>
+                                <span className={"col-name"}>{name}</span>
+                                </UserAndTitle>
+                            </UserInfo>
+                        <StyledGrid container direction="row" style={{ width: '272.5px' }}>
+                            {
+                                props.thumbnails.map((thumb) =>
+                                    <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
+                                        <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+                                    </Grid>
+                                )
+                            }
+                        </StyledGrid>
+                        </div>
+                        {
+                            <div className={`slideContentLinkAfterActive${slideIn}`}>
+                                <div className="Text" style={{ width: "100%" }}>
+                                    {SlideAnimationContent(props.contrast)}
+                                </div>
+                            </div>
+                        }
+                    </Header>
+                    </Link>
+
+                    <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
+                        {
+                            props.authorID !== state.currentUser.id &&
+                            <Rating
+                                style={props.contrast === "" ? {} : {color: "white"}}
+                                name="customized-empty"
+                                value={props.rating}
+                                readOnly
+                                emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
+                            />
+                        }
+
+                        <Footer className={`${props.contrast}Text`}>
+                            <Type>
+                                <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} />
+                                <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
+                                <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
+                            </Type>
+                            <LikeCounter>
+                                <span>{likesCount}</span>
+                                <ButtonNoWidth onClick={handleLike}>
+                                    <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
+                                </ButtonNoWidth>
+                            </LikeCounter>
+                        </Footer>
+                    </Description>
+
+                </CardReaDiv>
+
                 {
-                  <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
-                    <div className="text" >
-                      {SlideAnimationContent()}
-                    </div>
-                  </div>
+                    props.authorID === state.currentUser.id ?
+                    (
+                        <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
+                            <Grid container>
+                                <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
+                                {
+                                    privacy === 'private' &&
+                                    <LockIcon style={{ color: "#666" }} />
+                                }
+                                </Grid>
+                                <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
+                                <ColCardOwnerOptions
+                                    contrast={props.contrast}
+                                    id={props.id}
+                                    changeColName={changeColName}
+                                    changeColPrivacy={changeColPrivacy}
+                                    removeColl={props.removeColl}
+                                />
+                                </Grid>
+                            </Grid>
+                        </CardReaFooter>
+                    )
+                    :
+                    (
+                        <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
+                            <Grid container>
+                                <Grid item xs={2}></Grid>
+                                <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+                                    {
+                                        userFollowingCol ?
+                                        (
+                                            [
+                                            RenderFollowingButton()
+                                            ]
+                                        )
+                                        :
+                                        (
+                                            [
+                                            RenderFollowButton()
+                                            ]
+                                        )
+                                    }
+                                </Grid>
+                                <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
+                                    <ColCardPublicOptions
+                                        contrast={props.contrast}
+                                        id={props.id}
+                                        userFollowingCol={userFollowingCol}
+                                        handleLike={handleLike}
+                                        handleFollow={handleFollow}
+                                        liked={liked}
+                                        handleLogin={handleLogin}
+                                        currentUserId={state.currentUser.id}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </CardReaFooter>
+                    )
                 }
-              </Header>
-            </Link>
-
-            <Description> {/*renders rating, number of learning objects and likes count*/}
-              {
-                props.authorID !== state.currentUser.id &&
-                <Rating
-                  name="customized-empty"
-                  value={props.rating}
-                  readOnly
-                  style={{ color: "#666" }}
-                  emptyIcon={<StarBorderIcon fontSize="inherit" />}
-                />
-              }
-
-              <Footer>
-                <Type>
-                  <FolderIcon />
-                  <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
-                  <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
-                </Type>
-                <LikeCounter>
-                  <span>{likesCount}</span>
-                  <ButtonNoWidth onClick={handleLike}>
-                    <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
-                  </ButtonNoWidth>
-                </LikeCounter>
-              </Footer>
-            </Description>
-
-          </CardReaDiv>
-
-          {
-            props.authorID === state.currentUser.id ?
-              (
-                <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
-                  <Grid container>
-                    <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
-                      {
-                        privacy === 'private' &&
-                        <LockIcon style={{ color: "#666" }} />
-                      }
-                    </Grid>
-                    <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
-                      <ColCardOwnerOptions
-                        id={props.id}
-                        changeColName={changeColName}
-                        changeColPrivacy={changeColPrivacy}
-                        removeColl={props.removeColl}
-                      />
-                    </Grid>
-                  </Grid>
-                </CardReaFooter>
-              )
-              :
-              (
-                <CardReaFooter> {/*renders following/unfollow and follow button*/}
-                  {
-                    userFollowingCol ?
-                      (
-                        [
-                          RenderFollowingButton()
-                        ]
-                      )
-                      :
-                      (
-                        [
-                          RenderFollowButton()
-                        ]
-                      )
-                  }
-                  <ColCardPublicOptions
-                    id={props.id}
-                    userFollowingCol={userFollowingCol}
-                    handleLike={handleLike}
-                    handleFollow={handleFollow}
-                    liked={liked}
-                    handleLogin={handleLogin}
-                    currentUserId={state.currentUser.id}
-                  />
-                </CardReaFooter>
-              )
-          }
-
-        </CardDiv>
-      </StyledCard>
-    </>
-  )
+
+                </CardDiv>
+            </StyledCard>
+        </>
+    )
 }
 
 
 
 const SlideContentDiv = styled.div`
-    background-color : #7e57c2;
     padding : 10px;
     width : 272.5px;
     height : 230px;
@@ -367,7 +375,6 @@ const CardReaFooter = styled.div`
     display : flex;
     justify-content : center;
     align-items : center;
-    border-top : 1px solid #e5e5e5;
 
     .MuiSvgIcon-root {
         font-family: 'Material Icons';
@@ -402,8 +409,6 @@ const StyledGrid = styled(Grid)`
         height : 136px;
         width 130px;
         background : #f9f9f9;
-        border : 1px solid #f4f4f4;
-        border-color : #f4f4f4;
     }
 `
 
@@ -423,12 +428,6 @@ const Description = styled.div`
     padding : 15px;
 `
 const FollowButton = styled(Button)`
-    border : 2px solid #503096 !important;
-    border-radius : 5px !important;
-    margin : 10px !important;
-    color :#503096 !important;
-    min-width : 150px !important;
-    min-height : 36px !important;
     text-align : center !important;
     vertical-align : middle !important;
     background : transparent !important;
@@ -441,22 +440,11 @@ const FollowButton = styled(Button)`
     white-space : nowrap !important;
     font-weight: 500;
 
-    &:hover {
-        background-color : rgba(158,158,158,0.2) !important;
-
-    }
-
 `
 const FollowingButton = styled(Button)`
-    border : 2px solid #503096 !important;
-    border-radius : 5px !important;
-    margin : 10px !important;
-    color :#fff !important;
-    min-width : 150px !important;
-    min-height : 36px !important;
     text-align : center !important;
     vertical-align : middle !important;
-    background-color : #503096 !important;
+    
     text-transform : uppercase !important;
     font-family : inherit !important;
     overflow : hidden !important;
@@ -466,10 +454,4 @@ const FollowingButton = styled(Button)`
     white-space : nowrap !important;
     font-weight: 500;
 
-    &:hover {
-        background-color : rgba(158,158,158,0.2) !important;
-        color : #503096 !important;
-        box-shadow : none !important;
-    }
-
 `
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index 60de747f5bb7c17d9dff5d1a9acb2f69d8c95808..a8eedcbce66be688362e3976320c1dd9118b67b7 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -43,7 +43,9 @@ export default function CollectionDescription(props) {
 	}, [props.collection_id]);
 
 	return (
-		<Grid container direction="column" justify="center" alignItems="center" spacing={5}>
+		<Grid container direction="column" justify="center" alignItems="center" spacing={5}
+            style={props.contrast === "" ? {color: "#666"} : {color: "white"}}
+        >
 			<Grid
 				item
 				justify="center"
@@ -59,6 +61,7 @@ export default function CollectionDescription(props) {
 			>
 				<Grid item>
 					<CollectionReview
+                        contrast={props.contrast}
 						stars={props.stars}
 						liked={props.liked}
 						likes={props.likes}
@@ -92,6 +95,5 @@ export default function CollectionDescription(props) {
 
 const Title = styled.h1`
 	font-size: 2.5em;
-	color: rgb(102, 102, 102);
 	text-align: center
 `
\ No newline at end of file
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index bda45946d26e9fb373ba79d5e006d4cacb5bb495..427b3464a833c94e60b0a76d55de7dc74b936767 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -96,6 +96,7 @@ const DowloadButton = (props) => {
 				</Alert>
 			</Snackbar>
 			<DownloadButton
+                contrast={props.contrast}
 				variant="outlined"
 				color="primary"
 				startIcon={<GetAppIcon fontSize="large" />}
@@ -113,6 +114,10 @@ const ButtonText = styled.span`
 	font-size: 1.2em;
 `
 const DownloadButton = styled(Button)`
+    color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
+    background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
+    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+    border: ${props => props.contrast === "" ? "1px solid #3f51b5 !important" : "1px solid white !important"};
 	padding-left: 10;
 	padding-right: 10;
 	width: 250px;
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index 0d94757b2dbd235e2b3b9ef2b8077707b8a9a357..c037071df59ed871b086fb9b905a90c3e5ecba6f 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -107,7 +107,7 @@ export default function CollectionReview(props) {
 	}, [props])
 
 	return (
-		<Grid container direction="column">
+		<Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}>
 			<SnackBarComponent
 				snackbarOpen={snackInfo.open}
 				handleClose={handleCloseSnack}
@@ -115,29 +115,31 @@ export default function CollectionReview(props) {
 				text={snackInfo.text}
 				color={snackInfo.color}
 			/>
-			<Grid sm={12} container direction="row" alignItems="center">
+			<Grid sm={12} container direction="row" alignItems="center"
+                style={{justifyContent: "center"}}
+            >
 				<Grid item>
 					<Rating
+                        style={props.contrast === "" ? {} : {color: "white"}}
 						name="customized-empty"
 						value={Number(stars)}
 						readOnly
 						onClick={props.scrollToComment}
-						style={{ color: "#666" }}
 						emptyIcon={<StarBorderIcon fontSize="inherit" />}
 					/>
 				</Grid>
 				<Grid item justify="center" alignItems="center">
-					<IconButton aria-label="like" onClick={handleLikeClick}>
-						{likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} />
+					<IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}>
+						{likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} />
 					</IconButton>
 				</Grid>
 			</Grid>
 			<Grid item sm={12}>
 				<IconButton
 					aria-label="report"
-					style={{ fontSize: 'small' }}
+					style={{ fontSize: 'medium' }}
 					onClick={handleClickReport}>
-					<InfoIcon />Reportar erro ou abuso
+					<InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span>
 				</IconButton>
 				<ReportModal
 					open={reportOpen}
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 0a318eda1d552232c9564e02b63fe7d6f08a18ed..9be8c975f8f4f2f3f28a60540db0288c7c9e0616 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -80,34 +80,27 @@ export default function FollowButton(props) {
             {/*----------------------------------------------------------------------------*/}
             {
                 state.currentUser.id !== '' ? (
-                    <StyledButton contrast={props.contrast} onClick={() => handleFollow(props.followerID)}>
-                        <PersonAddIcon style={props.contrast === "" ? {
-                            fontSize: "24px",
-                            display: "inline-block",
-                            verticalAlign: "middle",
-                            color: "#00bcd4"
-                        } : {
+                    <StyledButton className={`${props.contrast}LinkColor`}
+                        style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+                        onClick={() => handleFollow(props.followerID)}>
+                        <PersonAddIcon style={{
                                 fontSize: "24px",
                                 display: "inline-block",
                                 verticalAlign: "middle",
-                                color: "white"
                             }} />
                         SEGUIR
                     </StyledButton>
                 )
                     :
                     (
-                        <StyledButton contrast={props.contrast} onClick={() => handleLogin(true)}>
-                            <PersonAddIcon style={props.contrast === "" ? {
-                                fontSize: "24px",
-                                display: "inline-block",
-                                verticalAlign: "middle",
-                                color: "#00bcd4"
-                            } : {
+                        <StyledButton className={`${props.contrast}LinkColor `}
+                            style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+                            onClick={() => handleLogin(true)}>
+                            <PersonAddIcon style={{
                                     fontSize: "24px",
                                     display: "inline-block",
                                     verticalAlign: "middle",
-                                    color: "white"
+
                                 }} />
                         SEGUIR
                         </StyledButton>
@@ -191,38 +184,15 @@ const NoIconButton = styled(Button)`
 `
 
 const StyledButton = styled(Button)`
+    font-size : 14px important;
+    font-weight : 500 !important;
+
+    .MuiSvgIcon-root {
+        font-size : 24px;
+    }
+
     &:hover {
-        background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
+        color: rgb(107, 35, 142);
     }
-    background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
-    color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "yellow !important")};
-    border: ${(props) => (props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important")};
-    text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
-    font-size : 14px !important;
-    display : inline-block !important;
-    position : relative !important;
-    cursor : pointer !important;
-    height : 36px !important;
-    min-width : 88px !important;
-    line-height : 36px !important;
-    vertical-align : middle !important;
-    -webkit-box-align : center !important;
-    -webkit-align-items : center !important;
-    -ms-grid-row-align : center !important;
-    align-items : center !important;
-    text-align : center !important;
-    border-radius : 3px !important;
-    -webkit-user-select : none !important;
-    -moz-user-select : none !important;
-    -ms-user-select : none !important;
-    user-select : none !important;
-    padding : 0 6px !important;
     margin : 6px 8px !important;
-    white-space : nowrap !important;
-    text-transform : uppercase !important;
-    font-weight : 500 !important;
-    font-style : inherit !important;
-    font-variant : inherit !important;
-    font-family : inherit !important;
-    overflow : hidden !important;
 `
diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js
index bda34bbf553bb250f17475e5d1ea357865be5521..f40a03370a42794245592f7f76487f5c0f2f68bc 100644
--- a/src/Components/ContactButtons/FollowersCountButton.js
+++ b/src/Components/ContactButtons/FollowersCountButton.js
@@ -11,7 +11,7 @@ export default function FollowersCountButton (props) {
     }
 
     return (
-        <FollowersButton contrast={props.contrast}>
+        <FollowersButton className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}LinkColor`}>
             {FollowerButtonSpan()}
         </FollowersButton>
     )
@@ -21,7 +21,6 @@ export default function FollowersCountButton (props) {
 const FollowersButton = styled(Button)`
     right : 0 !important;
     text-transform : none !important;
-    color: ${(props) => (props.contrast === "" ? "#666 !important" : "yellow !important")};
     font-size : 13px !important;
     font-weight : 400 !important;
     box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -31,7 +30,5 @@ const FollowersButton = styled(Button)`
     min-height : 36px !important;
     vertical-align : middle !important;
     text-align : center !important;
-    border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
     border-radius : 3px !important;
-    background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
 `
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 7d60218a7e9754211a1431a0ecb271b76339e25f..229f5e44f4eb8dec105371f6e4e8787c60be9c76 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
-import FollowingIcon from '../../img/how_to_reg-24px.png'
+import GroupIcon from '@material-ui/icons/Group';
 import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
 import { putRequest } from '../HelperFunctions/getAxiosConfig'
 
@@ -55,6 +55,7 @@ export default function FollowingButton(props) {
             />
             <StyledButton
                 contrast={props.contrast}
+                className={`${props.contrast}LinkColor`}
                 onMouseOver={() => toggleFollowingHover(true)}
                 onMouseLeave={() => toggleFollowingHover(false)}
                 onClick={() => handleUnfollowPartOne(props.followedID)}
@@ -63,14 +64,24 @@ export default function FollowingButton(props) {
                     followingHover ?
                         (
                             [
-                                <span>DEIXAR DE SEGUIR</span>
+                                <StyledButton className={`${props.contrast}LinkColor`}
+                                    style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}    
+                                >
+                                    DEIXAR DE SEGUIR
+                                </StyledButton>
                             ]
                         )
                         : (
                             [
-                                <>
-                                    <img src={FollowingIcon} alt='ícone seguindo' /><span>Seguindo</span>
-                                </>
+                                <StyledButton className={`${props.contrast}LinkColor`}
+                                    style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+                                >
+                                    <GroupIcon style={{
+                                        fontSize: "24px",
+                                        display: "inline-block",
+                                        verticalAlign: "middle",
+                                    }} />SEGUINDO
+                                </StyledButton>
                             ]
                         )
                 }
@@ -133,47 +144,15 @@ export function NoIconFollowing(props) {
 
 
 export const StyledButton = styled(Button)`
-    background-color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "black !important")};
-    color: ${(props) => (props.contrast === "" ? "#fff !important" : "yellow !important")};
-    display : inline-block !important;
-    position : relative !important;
-    cursor : pointer !important;
-    min-height : 36px !important;
-    min-width : 88px !important;
-    line-height : 36px !important;
-    vertical-align : middle !important;
-    -webkit-box-align : center !important;
-    -webkit-align-items : center !important;
-    -ms-grid-row-align : center !important;
-    align-items : center !important;
-    text-align : center !important;
-    border-radius : 3px !important;
-    -webkit-user-select : none !important;
-    -moz-user-select : none !important;
-    -ms-user-select : none !important;
-    user-select : none !important;
-    border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
-    padding : 0 6px !important;
-    margin : 6px 8px !important;
-    white-space : nowrap !important;
-    text-transform : uppercase !important;
+    font-size : 14px important;
     font-weight : 500 !important;
-    font-size : 14px !important;
-    font-style : inherit !important;
-    font-variant : inherit !important;
-    font-family : inherit !important;
-    text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
-    overflow : hidden !important;
-    &:hover {
-        background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
-        color: ${(props) => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
-        border: ${(props) => props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important"};
+
+    .MuiSvgIcon-root {
+        font-size : 24px;
     }
-    img {
-        height : 24px;
-        display : inline-block;
-        vertical-align : middle;
-        color : #fff !important;
+
+    &:hover {
+        color: rgb(107, 35, 142);
     }
 `
 
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index bacf2c87feb01ee0f5a236eda286391518314d6c..31f78db1bddf29dd59eba57a6143e14a2e6c461b 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useState } from 'react';
 import Card from '@material-ui/core/Card';
+import Grid from '@material-ui/core/Grid';
 import CardContent from '@material-ui/core/CardContent';
 import noAvatar from "../img/default_profile.png";
 import CardMedia from '@material-ui/core/CardMedia';
@@ -28,20 +29,20 @@ import FollowingButton from './ContactButtons/FollowingButton.js'
 import FollowersCountButton from './ContactButtons/FollowersCountButton.js'
 import { Link } from 'react-router-dom';
 
-export default function ImgMediaCard(props) {
+export default function ContactCard(props) {
 
     const [followedBoolean, setFollowedBoolean] = useState(props.followed)
     const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
     return (
         <StyledCard>
-            <CardDiv>
+            <CardDiv className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
                 <CardAreaDiv>
                     {/*Top part of contat card (background image, number of followers and avatar)*/}
                     <Header>
                         <StyledCardMedia image={props.cover}>
                             <div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
                                 <Link to={props.href} style={{textDecoration : "none"}}>
-                                    <FollowersCountButton followCount={props.follow_count} />
+                                    <FollowersCountButton contrast={props.contrast} followCount={props.follow_count} />
                                 </Link>
                                 <Link to={props.href}>
                                     <AvatarDiv>
@@ -54,52 +55,63 @@ export default function ImgMediaCard(props) {
                     </Header>
 
                     {/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/}
-                    <CardContent>
+                    <CardContent style={{height: "148px", padding: "0", bottom: "0"}}>
                         <UserInfo>
-                            <Link to={props.href}>
+                            <Link to={props.href} className={`${props.contrast}LinkColor`}>
                                 <p className="p1">
                                     {props.name}
                                 </p>
                             </Link>
 
-                            <Link to={props.href}>
+                            <Link to={props.href} className={`${props.contrast}LinkColor`}>
                                 <span style={{ fontSize: "14px", fontWeight: "normal" }}>
                                     <b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
                                 </span>
                             </Link>
-
-                            <div style={{ display: "flex", justifyContent: "center" }}>
-                                {
-                                    followedBoolean ?
-                                        (
-                                            <React.Fragment>
+                        </UserInfo>
+                    </CardContent>
+                    <CardContent style={{padding: "0"}}>
+                        <Grid container>
+                            <Grid item xs={2}></Grid>
+                            {
+                                followedBoolean ?
+                                    (
+                                        <>
+                                            <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
                                                 <FollowingButton
+                                                    contrast={props.contrast}
                                                     followedID={props.followerID ? props.followerID : props.followedID}
                                                     toggleFollowed={toggleFollowed} />
-
+                                            </Grid>
+                                            <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
                                                 <Options
+                                                    contrast={props.contrast}
                                                     followableID={props.followerID ? props.followerID : props.followedID}
                                                     followed={followedBoolean}
                                                     toggleFollowed={toggleFollowed} />
-                                            </React.Fragment>
-                                        )
-                                        :
-                                        (
-                                            <React.Fragment>
+                                            </Grid>
+                                        </>
+                                    )
+                                    :
+                                    (
+                                        <>
+                                            <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
                                                 <FollowButton
+                                                    contrast={props.contrast}
                                                     followerID={props.followedID ? props.followedID : props.followerID}
                                                     toggleFollowed={toggleFollowed} />
-
+                                            </Grid>
+                                            <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
                                                 <Options
+                                                    contrast={props.contrast}
                                                     followableID={props.followedID ? props.followedID : props.followerID}
                                                     followed={followedBoolean}
                                                     toggleFollowed={toggleFollowed} />
-                                            </React.Fragment>
-                                        )
-                                }
-
-                            </div>
-                        </UserInfo>
+                                            </Grid>
+                                        </>
+                                    )
+                            }
+                        </Grid>
                     </CardContent>
                 </CardAreaDiv>
             </CardDiv>
@@ -123,10 +135,8 @@ export const CardAreaDiv = styled.div`
     margin : 0 auto;
 `
 export const CardDiv = styled.div`
-    background-color : #fff;
     text-align : start;
     font-family : 'Roboto', sans serif;
-    color : #666;
 `
 /*----------------------------------------------------------------------------*/
 
@@ -135,7 +145,7 @@ export const CardDiv = styled.div`
 /*Override Material UI styling -----------------------------------------------*/
 const StyledCardMedia = styled(CardMedia)`
     height : 100%;
-    width : 100%;
+    width : 270.5px;
     background-size : cover;
     background-position : center;
 
@@ -155,10 +165,7 @@ const StyledCard = styled(Card)`
 const UserInfo = styled.div`
     text-align : center;
     margin-top : 50px;
-    color : #666;
-
     a {
-        text-decoration : none !important;
         color : #666;
     }
 
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 2cf3555c6ac3cae3da3cb7590ae2d149653391e4..76c5d05ee47bc35067d89940dbd156691398599a 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -107,8 +107,8 @@ export default function SimpleMenu(props) {
                     {...props}/>
         }
         <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
-            <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
-                <MoreVertIcon style={{color : "#666"}}/>
+            <ButtonNoWidth className={`${props.contrast}BackColor ${props.contrast}LinkColor ${props.contrast}Text`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+                <MoreVertIcon/>
             </ButtonNoWidth>
             <Menu
                 id="simple-menu"
@@ -117,30 +117,30 @@ export default function SimpleMenu(props) {
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
             >
-                <StyledMenuItem onClick={handleClose}>
+                <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}>
                     <Link to={"/usuario-publico/" + props.followableID}>
-                        <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                        <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
                     </Link>
                 </StyledMenuItem>
 
                 {
                     props.followed ?
                     (
-                        <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
-                            <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir
                         </StyledMenuItem>
                     )
                     :
                     (
                         state.currentUser.id !== '' ? (
-                            <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
-                                <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+                            <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+                                <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir
                             </StyledMenuItem>
                         )
                         :
                         (
-                            <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}>
-                                <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+                            <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}>
+                                <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir
                             </StyledMenuItem>
                         )
                     )
@@ -148,14 +148,14 @@ export default function SimpleMenu(props) {
 
                 {
                     state.currentUser.id !== '' ? (
-                        <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
-                            <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
                         </StyledMenuItem>
                     )
                     :
                     (
-                        <StyledMenuItem onClick={() => {handleLogin(true)}}>
-                            <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
                         </StyledMenuItem>
                     )
                 }
@@ -191,12 +191,11 @@ const ButtonNoWidth = styled(Button)`
     `
 
 const StyledMenuItem = styled(MenuItem)`
-    color : #666 !important;
+    background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
     .MuiSvgIcon-root {
         vertical-align : middle !important;
     }
     a {
-        text-decoration : none !important;
-        color : #666 !important;
+        color : inherit !important;
     }
 `
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index 603ec4ed4f8053d3c72d8ed36527fec9cb221bc9..fa2dec028df55b29c81435ca9064b6537ca4b4ae 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -24,7 +24,7 @@ const ExpandedMaterial = (props) => {
     const classes = useStyles();
 
     return (
-        <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
+        <Paper className={`${props.contrast}Border`} elevation={3} style={ props.contrast === "" ? {backgroundColor: "#444444", padding: "20px" } : {backgroundColor: "black", padding: "20px" }}>
             <Grid container direction="row" spacing={2}>
                 <Grid item direction="column" xs={12} md={4}>
                     <Grid item>
@@ -40,7 +40,7 @@ const ExpandedMaterial = (props) => {
                             {
                                 material.tags.map((tag, index) => {
                                     return (
-                                        <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
+                                        <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={{ padding: "0.5px" }} />
                                     )
                                 })
                             }
@@ -55,7 +55,7 @@ const ExpandedMaterial = (props) => {
                         </DevelopedByDiv>
                         <SizedHeightBox3 />
                         <StyledLink to={`/colecao?colecao=${material.id}`}>
-                            <Button variant="contained" color="secondary">
+                            <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? {background: "#e8224f"} : {background: "black"}}>
                                 Ver todos
                             </Button>
                         </StyledLink>
@@ -73,18 +73,21 @@ const ExpandedMaterial = (props) => {
                     <Grid container direction="row" justify="center" alignItems="center" spacing={3}>
                         <Grid item md={4}>
                             <TopicCard
+                                contrast={props.contrast}
                                 topic={material.topics[0]}
                                 colecao_id={material.id}
                             />
                         </Grid>
                         <Grid item md={4}>
                             <TopicCard
+                                contrast={props.contrast}
                                 topic={material.topics[1]}
                                 colecao_id={material.id}
                             />
                         </Grid>
                         <Grid item md={4}>
                             <TopicCard
+                                contrast={props.contrast}
                                 topic={material.topics[2]}
                                 colecao_id={material.id}
                             />
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index e89f8901c0e586124c99df453dc70ac627027f63..666c49d96c16f4973a5ca4d2232222ac0884e0c6 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) {
 					color={snackInfo.color}
 				/>
 				<FollowButton
+                    contrast={props.contrast}
 					variant={variant}
-					color="primary"
 					startIcon={icon}
 					size="small"
 					onMouseEnter={handleMouseEnter}
@@ -219,6 +219,10 @@ const ButtonText = styled.span`
 	font-size: 1.2em;
 `
 const FollowButton = styled(Button)`
+    color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+    background-color: ${props => props.contrast === "" ? "#3f51b5 !important" : "black !important"};
+    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+    border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
 	padding-left: 10;
 	padding-right: 10;
 	width: 250px;
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 2526d20c997cfd6b9433d4b414a282e6968ab384..618f3c0c2142afb195dcf20078cc37f1abbc1b20 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -40,7 +40,7 @@ function CloseModalButton(props) {
     )
 }
 
-export default function ReportModal(props) {
+export default function GuardarModal(props) {
     const { state } = useContext(Store)
     const [collsArr, setcolls] = useState([])
     const [loading, toggleLoading] = useState(true)
@@ -132,7 +132,7 @@ export default function ReportModal(props) {
                 onRendered={() => { getCols() }}
             >
                 <Fade in={props.open}>
-                    <Container>
+                    <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
                         <Header>
                             <span style={{ width: "32px" }} />
                             <h2>Guardar recurso</h2>
@@ -141,7 +141,7 @@ export default function ReportModal(props) {
                         <Content style={{ paddingTop: "0" }}>
                             <ResourceInfo>
                                 <img src={apiDomain + props.thumb} alt="thumbnail recurso" />
-                                <div className="text">
+                                <div>
                                     <h3>{props.title}</h3>
                                 </div>
                             </ResourceInfo>
@@ -188,20 +188,20 @@ export default function ReportModal(props) {
                                                                                             }
                                                                                             <h5>{collection.name}</h5>
                                                                                         </div>
-                                                                                        <GuardarBotao onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
+                                                                                        <GuardarBotao className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
                                                                                     </div>
                                                                                 )
                                                                             }
                                                                         </div>
                                                                     </ChooseCol>
-                                                                    <div style={{ display: "flex", justifyContent: "center" }}>
-                                                                        <CriarColButton onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
-                                                                    </div>
                                                                 </>
                                                             )
 
                                                     )
                                             }
+                                            <div style={{ display: "flex", justifyContent: "center" }}>
+                                                <CriarColButton className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+                                            </div>
                                         </ChooseColContainer>
                                     )
                             }
@@ -214,12 +214,7 @@ export default function ReportModal(props) {
 }
 
 const GuardarBotao = styled(Button)`
-    &:hover {
-        background-color : #503096 !important;
-    }
     max-height : 36px !important;
-    background-color : #673ab7 !important;
-    color : #fff !important;
     box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
     padding-left : 32px !important;
     padding-right : 32px !important;
@@ -278,10 +273,8 @@ const ChooseCol = styled.div`
 const CriarColButton = styled(Button)`
     width : 200px !important;
     margin-top : 16px !important;
-    background-color : #673ab7 !important;
     margin-left : auto !important;
     margin-right : auto !important;
-    color : #fff !important;
     font-weight : 600 !important;
     box-shadow : !important;
     padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important;
@@ -291,7 +284,6 @@ const CriarColButton = styled(Button)`
 const ChooseColContainer = styled.div`
     display : flex;
     flex-direction : column;
-    color : #666;
 
     .no-cols {
         align-self : center;
@@ -304,7 +296,6 @@ const ChooseColContainer = styled.div`
 
 const ResourceInfo = styled.div`
     margin-top : 0;
-    background-color : #f4f4f4;
     overflow : hidden;
     border-radius : 5px;
     display : flex;
@@ -364,7 +355,6 @@ const Header = styled.div`
     h2 {
         font-size : 26px;
         font-weight : lighter;
-        color : #666
     }
 `
 
@@ -394,7 +384,6 @@ const StyledModal = styled(Modal)`
 const Container = styled.div`
     box-sizing : border-box;
     box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
-    background-color : white;
     align : center;
     display : flex;
     flex-direction : column;
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 8f18cd3c03c35954a3a5d7b9f491a4c81dcd97b0..790a5de654131eadf352d4cfd36999292dc11585 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -41,40 +41,42 @@ export default function MaterialCard(props) {
     const width = window.innerWidth;
 
     return (
-        <Card>
+        <Card className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
             <img src={thumb} alt="thumbnail do recurso" />
-            <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
-                <Title>
-                    {props.name}
-                </Title>
-            </CardContent>
-            <CardActions>
-                <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
-                    <Grid item>
-                        <Rating
-                            name="customized-empty"
-                            value={props.score}
-                            precision={0.5}
-                            style={{ color: "#666" }}
-                            emptyIcon={<StarBorderIcon fontSize="inherit" />}
-                            readOnly
-                        />
+            <div>
+                <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
+                    <Title>
+                        {props.name}
+                    </Title>
+                </CardContent>
+                <CardActions>
+                    <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
+                        <Grid item>
+                            <Rating
+                                style={ props.contrast === "" ? { color: "#666" } : { color: "white" }}
+                                name="customized-empty"
+                                value={props.score}
+                                precision={0.5}
+                                emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                                readOnly
+                            />
+                        </Grid>
+                        <Grid container direction="row" alignItems="center">
+                            <Library style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} />
+                            <SizedBox />
+                            <Typography variant="body2" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
+                                {props.modules.length} módulos
+                            </Typography>
+                        </Grid>
                     </Grid>
-                    <Grid container direction="row" alignItems="center">
-                        <Library style={{ color: "#e81f4f" }} />
-                        <SizedBox />
-                        <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
-                            {props.modules.length} módulos
-                        </Typography>
-                    </Grid>
-                </Grid>
-            </CardActions>
-            <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+                </CardActions>
+            </div>
+            <CardActions className={`${props.contrast}LinkColor`} style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
                 {
                     width <= 767 ?
-                        <Link style={{textDecoration : "none"}} to={`/colecao?colecao=${props.id}`}>
+                        <Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
                             <Button
-                                color="secondary"
+                                style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
                                 endIcon={<ExpandMoreRoundedIcon />}
                             >
 
@@ -83,7 +85,8 @@ export default function MaterialCard(props) {
                         </Link>
                         :
                         <Button
-                            color="secondary"
+                            className={`${props.contrast}LinkColor`}
+                            style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
                             endIcon={<ExpandMoreRoundedIcon />}
                             onClick={HandleButtonPressed}
                         >
@@ -101,7 +104,6 @@ const SizedBox = styled.div`
 `
 const Title = styled(Typography)`
     font-weight: 500;
-	color: rgb(102, 102, 102);
 	font-size: 0.9em;
 	margin-left: 10px;
 	margin-right: 10px;
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 7a2ceb13f9cb81704afbb5d3d9ff98b3a468195d..7cb8c6d998af016f49feed4db55e13fafc9a253b 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -44,7 +44,7 @@ export const ButtonStyled = styled(Button)`
     text-transform: capitalize !important;
     margin : 0 8px !important;
     font-weight : normal !important;
-    color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+    color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
     text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
 `
 
@@ -52,7 +52,8 @@ const ButtonPublicarRecurso = styled(Button)`
     font-family : 'Roboto', sans serif;
     box-shadow : none !important;
     border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid  !important"};
-    background-color : #ff7f00 !important;
+    background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+    color: white !important;
     align-content : center;
     font-weight : 500 !important;
     text-transform: capitalize !important;
@@ -68,7 +69,7 @@ const ButtonPublicarRecurso = styled(Button)`
 `
 
 const IconSearchStyled = styled(IconSearch)`
-  color: #16b8dd;
+  color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"};
 `
 const ImageStyled = styled.img`
     height: 50px;
@@ -93,8 +94,6 @@ const Left = styled.span`
 
 export const ButtonPubRecursoStyled = styled(Button)`
     font-weight : 500 !important;
-    border : 1.5px #666 solid !important;
-    color: #666;
     box-shadow: none;
     margin : 0 8px !important;
     font-weight : normal !important;
@@ -173,12 +172,12 @@ export default function MenuBar(props) {
         <Dropdown name="Sobre" items={menuSobre} />
         <Dropdown name="Ajuda" items={menuAjuda} />
         <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
-          <ButtonStyled className={`${state.contrast}LinkColor`} >Educação Conectada</ButtonStyled>
+          <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled>
         </a>
         {/*<Link to="/loja">
             <ButtonStyled>Lojinha</ButtonStyled>
         </Link>*/}
-        <ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openSearchBar} ><IconSearchStyled className={`${state.contrast}IconColor`} />Buscar</ButtonStyled>
+        <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled>
 
       </Left>
       <Right>
@@ -188,9 +187,9 @@ export default function MenuBar(props) {
               <>
                 <div style={{ boxSizing: "border-box" }}>
                   <Link to="/termos-publicar-recurso">
-                    <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}BackColor`}>
-                      <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ color: "white", marginLeft: "0" }} />
-                      <span className={`${state.contrast}LinkColor`} style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+                    <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
+                      <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
+                      <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
                         PUBLICAR RECURSO
                       </span>
                     </ButtonPublicarRecurso>
@@ -207,9 +206,9 @@ export default function MenuBar(props) {
             )
             : (
               <React.Fragment>
-                <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
-                <ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
-                <ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
+                <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+                <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
+                <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
               </React.Fragment>
             )
         }
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 938acffdb8da262fad4c94c734ac320bd9fc631f..064b5c3fa2ba80bb394cc20000bedf1df25ba045 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -152,7 +152,7 @@ export default function MobileDrawerMenu(props) {
                                                 src={getUserAvatar()}
                                             />
                                         </div>
-                                        <span className="text">Minha área</span>
+                                        <span className="Text">Minha área</span>
                                     </MyArea>
                                     {
                                         minhaArea.map((item, index) =>
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index df3c1aeff5078ce3219d64f1db82e3ee9eda7174..736c6d4ca22ab2aadd606b1ff808b28993aa057e 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -208,6 +208,7 @@ export default function Notification(props) {
                     {
                         notifications.map((notification) =>
                             (notification.viewed === false) &&
+                            (notification.recipient_type !== "NilClass") &&
                             <ActivityListItem
                                 contrast={state.contrast}
                                 onMenuBar={true}
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index 37c4a77336c79e8f58496143cbe8840725d7c4da..747a0c27bed2fd8105193f764b9314d059651080 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -84,7 +84,7 @@ export default function ReportColecaoForm (props) {
             <RadioGroup value={value} onChange={handleChange}>
                 {
                     options.map(option =>
-                        <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+                        <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
                     )
                 }
             </RadioGroup>
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 079ca75fd3dd6454d6e26263767ac33d3ad3b556..78f0cb8bda9abb1971e783f8ed636f049d921b67 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -66,15 +66,15 @@ export default function ReportModal (props) {
         switch (formType) {
             case 'colecao':
                 return (
-                    <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                    <ReportColecaoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
                 )
             case 'recurso':
-                    return (
-                    <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                return (
+                    <ReportRecursoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
                     )
             default:
                 return (
-                <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                    <ReportUserForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
                 )
             }
     }
@@ -97,7 +97,7 @@ export default function ReportModal (props) {
                 }}
             >
                 <Fade in={props.open}>
-                    <ReportContainer>
+                    <ReportContainer className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
                         <Header>
                             <span style={{width:"32px"}}/>
                             <h2>O que está acontecendo?</h2>
@@ -134,7 +134,6 @@ const Header = styled.div`
     h2 {
         font-size : 26px;
         font-weight : lighter;
-        color : #666
     }
 `
 
@@ -163,7 +162,6 @@ const StyledModal = styled(Modal)`
 
 const ReportContainer = styled.div`
     box-sizing : border-box;
-    background-color : white;
     max-width : none;
     align : center;
     display : flex;
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index a1c7312713319d9b4320cf4bc844d3c160c5ed79..e811500d1ceadc32accc29287863f31c71781893 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -81,7 +81,7 @@ export default function ReportRecursoForm (props) {
             <RadioGroup value={value} onChange={handleChange}>
                 {
                     options.map(option =>
-                        <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+                        <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
                     )
                 }
             </RadioGroup>
@@ -101,8 +101,8 @@ export default function ReportRecursoForm (props) {
         />
 
         <ButtonsDiv>
-            <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
-            <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+            <ButtonCancelar className={`${props.contrast}LinkColor`} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+            <ButtonEnviar className={`${props.contrast}LinkColor`} type="submit">ENVIAR</ButtonEnviar>
         </ButtonsDiv>
     </form>
     )
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index edc957a0f3c60886db5ec9a553b09e400eff8163..fe74faaf51718b3332a1c9bfb69e32fdd4ba64de 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.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, { useState, useEffect } from 'react';
+import "./carousel.css";
 import Card from '@material-ui/core/Card';
 import { apiDomain } from '../env';
 import ResourceCardOptions from './ResourceCardOptions'
@@ -100,9 +101,9 @@ export default function ResourceCardFunction(props) {
         handleSuccessfulLogin(false);
     }
 
-    const SlideAnimationContent = () => {
+    const SlideAnimationContent = (contrast) => {
         return (
-            <SlideContentDiv>
+            <SlideContentDiv style={contrast === '' ? {backgroundColor: "#ff9226"} : {backgroundColor: "inherit"}}>
                 <div style={{ padding: 7 }}>
                     <HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
                         <AvatarDiv item xs={2}>
@@ -113,13 +114,13 @@ export default function ResourceCardFunction(props) {
                             <p>{props.author}</p>
                         </EnviadoPor>
                     </HeaderContainer>
-                    {
+                    { //className={`${props.contrast}BackColor`} ---
                         props.tags ?
                             <TagContainer container direction="row">
                                 {
                                     props.tags.map((tag) =>
                                         <Grid item key={tag.id}>
-                                            <span >{tag.name}</span>
+                                            <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
                                         </Grid>
                                     )
                                 }
@@ -144,7 +145,7 @@ export default function ResourceCardFunction(props) {
                 <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
             </Snackbar>
             <StyledCard>
-                <CardDiv>
+                <CardDiv className={`${props.contrast}Text ${props.contrast}Border`}>
                     <CardReaDiv>
                         <Link to={props.href}>
                             <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
@@ -153,25 +154,25 @@ export default function ResourceCardFunction(props) {
                                 </div>
                                 {
                                     <div className={`slideContentLinkAfterActive${slideIn}`}>
-                                        <div className="text" >
-                                            {SlideAnimationContent()}
+                                        <div className={`${props.contrast}Text ${props.contrast}BackColor`} style={{ width: "100%" }}>
+                                            {SlideAnimationContent(props.contrast)}
                                         </div>
                                     </div>
                                 }
                             </Header>
                         </Link>
-                        <Description>
-                            <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
-                                <Title>
+                        <Description className={`${props.contrast}BackColor`}>
+                            <Link to={props.href} className={`${props.contrast}Text`} style={{ height: '45px', width: "100%" }}> {/*add link to learningObject*/}
+                                <Title className={`${props.contrast}LinkColor`}>
                                     {props.title}
                                 </Title>
                             </Link>
                             <Rating
+                                style={props.contrast === "" ? {} : {color: "white"}}
                                 name="customized-empty"
                                 value={props.rating}
                                 readOnly
-                                style={{ color: "#666" }}
-                                emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                                emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit"/>}
                             />
                             <Footer>
                                 <Type>
@@ -181,24 +182,29 @@ export default function ResourceCardFunction(props) {
                                 <LikeCounter>
                                     <span>{likesCount}</span>
                                     <ButtonNoWidth onClick={handleLike}>
-                                        <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+                                        <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
                                     </ButtonNoWidth>
                                 </LikeCounter>
                             </Footer>
                         </Description>
                     </CardReaDiv>
-                    <CardReaFooter>
-                        <div style={{ display: "flex", height: "100%" }}>
-                            <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
-                            />
-                        </div>
-                        <ResourceCardOptions
-                            learningObjectId={props.id}
-                            downloadableLink={props.downloadableLink}
-                            thumb={props.thumbnail}
-                            title={props.title}
-                            handleLogin={handleLogin}
-                        />
+                    <CardReaFooter className={`${props.contrast}BackColor`}>
+                        <Grid container>
+                            <Grid item xs={2}></Grid>
+                            <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+                                <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id}/>
+                            </Grid>
+                            <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
+                                <ResourceCardOptions
+                                    contrast={props.contrast}
+                                    learningObjectId={props.id}
+                                    downloadableLink={props.downloadableLink}
+                                    thumb={props.thumbnail}
+                                    title={props.title}
+                                    handleLogin={handleLogin}
+                                />
+                            </Grid>
+                        </Grid>
                     </CardReaFooter>
                 </CardDiv>
             </StyledCard>
@@ -217,7 +223,6 @@ export const TagContainer = styled(Grid)`
     ${'' /* border : 2px solid red; */}
     span {
         word-wrap: break-word;
-        background-color : #fff;
         display : flex;
         justify-content : center;
         align-items : center;
@@ -228,7 +233,6 @@ export const TagContainer = styled(Grid)`
         overflow : hidden;
         padding : 1px 8px;
         border-radius : 10px;
-        color : #666;
         font-size : 11px;
     }
 `
@@ -263,7 +267,6 @@ export const AvatarDiv = styled(Grid)`
 `
 
 const SlideContentDiv = styled.div`
-    background-color : #ff9226;
     ${'' /* padding : 10px; */}
     width : 272.5px;
     height : 189px;
@@ -274,8 +277,6 @@ const CardReaFooter = styled.div`
     height : 60px;
     display : flex;
     justify-content : space-between;
-    border-top : 1px solid #e5e5e5;
-    border-bottom : 1px solid #e5e5e5;
     align-items : center;
     padding : 0 15px 0 15px;
 `
@@ -308,7 +309,6 @@ export const LikeCounter = styled.div`
 
     .btn-like {
         padding : 0 !important;
-        background-color : #fff !important;
         border : 0 !important;
         min-width : min-content;
     }
@@ -346,7 +346,6 @@ export const Footer = styled.div`
 const Description = styled.div`
     display : flex;
     flex : 1;
-    background-color : #fff;
     flex-direction : column;
     justify-content: space-between;
     padding : 15px;
@@ -395,7 +394,6 @@ export const CardReaDiv = styled.div`
 `
 
 export const CardDiv = styled.div`
-    background-color : #fff;
     text-align : start;
     font-family : 'Roboto', sans serif;
     color : #666;
@@ -403,7 +401,7 @@ export const CardDiv = styled.div`
 
 export const StyledCard = styled(Card)`
     width : 272.5px;
-    max-height : 380px;
+    min-height : 380px;
     margin-top : 10px;
     margin-bottom : 10px;
     ${'' /* max-width : 345px; */}
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 2e89a35a708663188a9e843c3fbb08c8de6deaff..6d0e093d7adc4d962d5178217a56813e50bb3602 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -35,7 +35,6 @@ import GuardarModal from './GuardarModal'
 import ShareModal from './ShareModal'
 import SnackbarComponent from './SnackbarComponent'
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-import Tooltip from '@material-ui/core/Tooltip';
 import { getRequest } from './HelperFunctions/getAxiosConfig'
 
 export default function ResourceCardOptions(props) {
@@ -116,61 +115,58 @@ export default function ResourceCardOptions(props) {
         <>
 
             <React.Fragment>
-                <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+                <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModalReportar(false)}
                     form="recurso" complainableId={props.learningObjectId}
                     complainableType={"LearningObject"}
                     {...props}
                 />
-                <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+                <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
                     thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
                 />
-                <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+                <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
                     thumb={props.thumb} title={props.title} link={getShareablePageLink()}
                 />
                 <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
                 />
                 <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
-                    <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
-                        <MoreVertIcon style={{ color: "#666" }} />
+                    <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+                        <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} />
                     </ButtonNoWidth>
                     <Menu
+                        className={`${props.contrast}Text`}
                         id="simple-menu"
                         anchorEl={anchorEl}
                         keepMounted
                         open={Boolean(anchorEl)}
                         onClose={handleClose}
-                    >
-                        <Tooltip title="Não preserva filtro" arrow>
-                            <StyledMenuItem onClick={handleClose}>
-                                <Link to={"/recurso/" + props.learningObjectId}>
-                                    <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
-                                </Link>
-                            </StyledMenuItem>
-                        </Tooltip>
+                    >  
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}>
+                            <Link to={"/recurso/" + props.learningObjectId}>
+                                <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
+                            </Link>
+                        </StyledMenuItem>
 
-                        <Tooltip title="Preserva filtro" arrow>
-                            <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
-                                <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
-                            </StyledMenuItem>
-                        </Tooltip>
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+                        </StyledMenuItem>
 
                         {
                             props.downloadableLink &&
-                            <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
-                                <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+                            <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}>
+                                <ListItemIcon className={`${props.contrast}LinkColor`}><DownloadIcon /></ListItemIcon>Baixar
                             </StyledMenuItem>
                         }
 
-                        <StyledMenuItem onClick={handleShare}>
-                            <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleShare}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><ShareIcon /></ListItemIcon>Compartilhar
                         </StyledMenuItem>
 
-                        <StyledMenuItem onClick={handleGuardar}>
-                            <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleGuardar}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><AddIcon /></ListItemIcon>Guardar
                         </StyledMenuItem>
 
-                        <StyledMenuItem onClick={() => { handleReport() }}>
-                            <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+                        <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { handleReport() }}>
+                            <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
                         </StyledMenuItem>
 
                     </Menu>
@@ -185,9 +181,6 @@ const ButtonNoWidth = styled(Button)`
     min-width : 24px !important;
     max-height : 24px !important;
     padding : 0 !important;
-    background-color : #fff !important;
-    color : #a5a5a5 !important;
-    border : 0 !important;
 
     .MuiButton-root {
         width : 24px !important;
@@ -205,12 +198,11 @@ const ButtonNoWidth = styled(Button)`
     `
 
 const StyledMenuItem = styled(MenuItem)`
-    color : #666 !important;
+    background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
     .MuiSvgIcon-root {
         vertical-align : middle !important;
     }
     a {
-        text-decoration : none !important;
-        color : #666 !important;
+        color: inherit !important;
     }
 `
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e32176c7166f62820cf88517c7f8f5dc8faf503c..e8dc0989eee3da3281e46e874d327e79c39215ef 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -124,7 +124,7 @@ export default function ResourceList(props) {
 		<ResourceListContainer>
 			<Grid container direction="row" justify="space-around" alignItems="center">
 				<Grid item>
-					<Title>
+					<Title contrast={props.contrast}>
 						{props.resources.length ?
 							props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
 							: "Carregando coleção"}
@@ -132,19 +132,19 @@ export default function ResourceList(props) {
 				</Grid>
 				<Grid item>
 					<Button color="primary" onClick={() => setSelectable(!selectable)}>
-						<PanelButtonText>
+						<PanelButtonText contrast={props.contrast}>
 							{selectable ? "Desativar" : "Ativar"} seleção
 						</PanelButtonText>
 					</Button>
 				</Grid>
 				<Grid item>
 					<Button
-						color="primary"
+						style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}}
 						variant="outlined"
 						startIcon={<GetAppIcon fontSize="large" />}
 						onClick={handleDownloadSelection}
 					>
-						<PanelButtonText>baixar seleção</PanelButtonText>
+						<PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText>
 					</Button>
 				</Grid>
 			</Grid>
@@ -153,6 +153,7 @@ export default function ResourceList(props) {
 					return (
 						<ResourceGrid item key={card.title}>
 							<ResourceCardFunction
+                                contrast={props.contrast}
 								avatar={card.avatar}
 								id={card.id}
 								thumbnail={card.thumbnail}
@@ -169,8 +170,8 @@ export default function ResourceList(props) {
 							/>
 							{selectable ?
 								(<SelectButton
+                                    contrast={props.contrast}
 									variant="outline"
-									color="primary"
 									startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])}
 									onClick={() => updateSelected(props.resources.indexOf(card))}
 								>
@@ -205,15 +206,19 @@ const ResourceListContainer = styled.div`
 	margin-right: 20;
 `
 const Title = styled.p`
-	color: rgb(102, 102, 102);
+    color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
 	font-size: 2em;
 	font-weigth: 300;
 `
 const SelectButton = styled(Button)`
 	width: 100%;
+    color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
 `
 const PanelButtonText = styled.span` 
 	font-weight: 900;
+    color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
+    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
 `
 const ResourceGrid = styled(Grid)`
 	padding-right: 7px;
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index 923af661bc27adef295c55f5fe63c84e50b0387c..ec0856eb2f733c7b02fb05cb9ed1a43e11f47f98 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
                   resources.map((card) => {
                     return <Grid item key={new Date().toISOString() + card.id} >
                       <CollectionCardFunction
+                        contrast={contrast}
                         name={card.name}
                         tags={card.tags}
                         rating={card.review_average}
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 063e61780deafcf8b895524b4f3db8a40932b930..ce1057f4ffef793f4d494fc91dc68ffae67ec933 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
                   resources.map((card) => {
                     return <Grid item key={new Date().toISOString() + card.id} >
                       <ResourceCardFunction
+                        contrast={contrast}
                         avatar={card.publisher ? card.publisher.avatar : ""}
                         id={card.id}
                         thumbnail={card.thumbnail}
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 49ce62831c4136108609052ad78ac933771339b3..66720a688828126c16c01ec43f04c4d6096a9b96 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
                   resources.map((card) => {
                     return <Grid item key={new Date().toISOString() + card.id} >
                       <ContactCard
+                        contrast={contrast}
                         name={card.name}
                         avatar={card.avatar ? apiDomain + card.avatar : null}
                         cover={card.cover ? apiDomain + card.cover : null}
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 93eb4828efc78e5cf0b8216caa8297d3c5c4331c..5ed5c3d6aaef90a43aabc4dd021fa5c4f2cae739 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -29,7 +29,7 @@ import Twitter from '../img/twitter.svg'
 import LinkIcon from '../img/link_icon.svg'
 import CloseModalButton from './CloseModalButton.js'
 
-export default function ReportModal (props) {
+export default function ShareModal (props) {
     const textAreaRef = useRef(props.link);
 
     const copyToClipboard = (e) => {
@@ -54,7 +54,7 @@ export default function ReportModal (props) {
             }}
         >
             <Fade in={props.open}>
-                <Container>
+                <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
                     <Header>
                         <span style={{width:"32px"}}/>
                         <h2>Compartilhar este recurso</h2>
@@ -63,11 +63,13 @@ export default function ReportModal (props) {
                     <Content style={{paddingTop : "0"}}>
                         <ResourceInfo>
                             <img src={apiDomain + props.thumb} alt="thumbnail recurso"/>
-                            <div className="text">
+                            <div>
                                 <strong>{props.title}</strong>
-                                <span>{props.link}</span>
                             </div>
                         </ResourceInfo>
+                        <div style={{marginTop: "10px"}}>
+                            <span>{props.link}</span>
+                        </div>
                         <ShareInfo>
                         <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
 
@@ -77,7 +79,7 @@ export default function ReportModal (props) {
                                     href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
                                     rel="noreferrer"
                                     target="_blank">
-                                    <ShareButton>
+                                    <ShareButton className={`${props.contrast}LinkColor`}>
                                         <img src={Facebook} alt="facebook-logo"/>
                                         <p>FACEBOOK</p>
                                     </ShareButton>
@@ -90,7 +92,7 @@ export default function ReportModal (props) {
                                     href={"https://www.twitter.com/intent/tweet?url=" + props.link}
                                     rel="noreferrer"
                                     target="_blank">
-                                    <ShareButton>
+                                    <ShareButton className={`${props.contrast}LinkColor`}>
                                         <img src={Twitter} alt="twitter-logo"/>
                                         <p>TWITTER</p>
                                     </ShareButton>
@@ -101,7 +103,7 @@ export default function ReportModal (props) {
                             <Grid item xs={4}>
                                 {
                                     document.queryCommandSupported('copy') &&
-                                <ShareButton onClick={copyToClipboard}>
+                                <ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}>
                                     <img src={LinkIcon} alt="link-icon"/>
                                     <p>COPIAR LINK</p>
                                     <textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/>
@@ -143,12 +145,10 @@ const ShareButton = styled(Button)`
 
 const ShareInfo = styled.div`
     padding-top : 20px;
-    color : #000;
 `
 
 const ResourceInfo = styled.div`
     margin-top : 0;
-    background-color : #f4f4f4;
     overflow : hidden;
     border-radius : 5px;
     display : flex;
@@ -203,7 +203,6 @@ const Header = styled.div`
     h2 {
         font-size : 26px;
         font-weight : lighter;
-        color : #666
     }
 `
 
@@ -223,7 +222,6 @@ const StyledModal = styled(Modal)`
 const Container = styled.div`
     box-sizing : border-box;
     box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
-    background-color : white;
     align : center;
     display : flex;
     flex-direction : column;
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index 2ccdd707cc5fc60df74e099997b2b60fab906835..26eb87507d6b4b1ebe37e2e2baadec8b8fc6e4c3 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -31,6 +31,7 @@ export default function PanelTemplateColecao(props) {
         if (followerBoolean) {
             return (
                 <CollectionCardFunction
+                    contrast={props.contrast}
                     name={card.name}
                     collections={card.followable.collection_items}
                     rating={card.followable.review_average}
@@ -52,6 +53,7 @@ export default function PanelTemplateColecao(props) {
         else {
             return (
                 <CollectionCardFunction
+                    contrast={props.contrast}
                     name={card.name}
                     tags={card.tags}
                     rating={card.review_average}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 98e2d50e254d3b97dabd16bbf3f1485cbde3b525..c6585ef1a5275d26dd2fbdbec3e907bd810b48de 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -58,6 +58,7 @@ export default function Template(props) {
                                             props.sliceArr.map((card) =>
                                                 <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
                                                     <ResourceCardFunction
+                                                        contrast={props.contrast}
                                                         avatar={card.submitter.avatar}
                                                         id={card.learning_object.id}
                                                         thumbnail={card.learning_object.thumbnail}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index dc8f2b75a9fe977e6fa77ac3adb640ee8f366b44..c7e4cd6ed1afb7ce5c5b9c6e97462d7122c244ae 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -60,6 +60,7 @@ export default function Template(props) {
                                         props.slice.map((card) =>
                                             <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
                                                 <ResourceCardFunction
+                                                    contrast={props.contrast}
                                                     key={card.id}
                                                     avatar={card.publisher.avatar}
                                                     id={card.id}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index 872675b8691ab8c83f0d9cc056eafe50be5d1d46..076d525e0f417265a86af4e2a6999bd730d62921 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -13,6 +13,7 @@ export default function PanelTemplateRede(props) {
         if (followerBoolean) {
             return (
                 <ContactCard
+                    contrast={props.contrast}
                     name={card.follower.name}
                     avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null}
                     cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null}
@@ -28,6 +29,7 @@ export default function PanelTemplateRede(props) {
         else {
             return (
                 <ContactCard
+                    contrast={props.contrast}
                     name={card.followable.name ? card.followable.name : null}
                     avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null}
                     cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
index 2a489ac6808bad38d577ef87125d56e60bcd4f7e..d9adc97e4e36f878a07caa0a0b15e669999f6663 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
@@ -55,6 +55,7 @@ export default function LastLearnObjs(props) {
                                     props.learningObjs.slice(0, 4).map((card) =>
                                         <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
                                             <ResourceCardFunction
+                                                contrast={contrast}
                                                 avatar={card.publisher.avatar}
                                                 id={card.id}
                                                 thumbnail={card.thumbnail}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 4decca656c7fe5d4f0ea87a57dbf39b3f391692d..215a186deb812fa2af264fc24a96d68a27c58f54 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -187,6 +187,7 @@ export default function TabPanelAtividades(props) {
                               <List height={400} width={300}>
                                 {
                                   notifications.map((notification, id) =>
+                                  (notification.recipient_type !== "NilClass") &&
                                     <ActivityListItem
                                       contrast={props.contrast}
                                       key={id}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 79b37059edba874bdfe5dad0b4dbb6c74ca3e671..7db46ecc2b83679f54fa5c8cbfee22bfb1414c11 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -270,6 +270,7 @@ function Tentativa(props) {
                       props.sliceArr.map((card) =>
                         <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
                           <CollectionCardFunction
+                            contrast={props.contrast}
                             name={card.name}
                             tags={card.tags}
                             rating={card.review_average}
diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js
index 1f3bb10faef2737441cea49be8b331a26edf8a21..530b5bcc3cf7565b68690a556f8f9124ae34bdd1 100644
--- a/src/Components/TopicCard.js
+++ b/src/Components/TopicCard.js
@@ -28,22 +28,20 @@ import { Link } from 'react-router-dom';
 export default function MaterialCard(props) {
     console.log(props);
     const thumb = require(`../../public/${props.topic.img}`)
-
+//className={`${props.contrast}BackColor`}
     return (
-        <Card style={{ maxHeight: "100%", maxWidth: "300px" }}>
+        <Card className={`${props.contrast}BackColor ${props.contrast}Border`} style={{ maxHeight: "100%", maxWidth: "300px" }}>
             <img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" />
-            <CardContent style={{ height: "50px" }}>
+            <CardContent className={`${props.contrast}Text`} style={{ height: "50px" }}>
                 <Title>
-                    <BoldTitle>
-                        {props.topic.pre_title}
-                    </BoldTitle>
+                    {props.topic.pre_title}
                     {props.topic.title}
                 </Title>
             </CardContent>
-            <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
-                <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
+            <CardActions style={{ justifyContent: "center" }}>
+                <StyledLink className={`${props.contrast}LinkColor`} to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
                     <Button
-                        color="secondary"
+                        style={props.contrast === "" ? {color: "#e8224f"} : {color: "inherit"}}
                     >
                         Ver módulo
                     </Button>
@@ -55,7 +53,6 @@ export default function MaterialCard(props) {
 
 const Title = styled(Typography)`
     font-weight: 500;
-	color: rgb(102, 102, 102);
 	font-size: 0.9em;
 	margin-left: 10px;
 	margin-right: 10px;
@@ -65,10 +62,6 @@ const Title = styled(Typography)`
     -webkit-box-orient: vertical;
     overflow: hidden;
 `
-const BoldTitle = styled.span`
-	font-weight: bold;
-`
 const StyledLink = styled(Link)`
-	text-decoration: none !important;
 	color: inherit !important;
 `
\ No newline at end of file
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 9c7ea98633ce9e85948d544465255bcf47760ba9..4d9cbe4cba581322b58ad62c86f9dd23470f16bf 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -16,33 +16,35 @@ 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/>.*/
 
-.carousel .control-dots{
-  position: inherit !important;
-}
-.carousel .control-arrow {
-  background: orange !important;
-  /* position: relative !important; */
-
-  -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
-  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
 
 
+.carousel .slide {
+    background-color: inherit !important;
+}
 
+.carousel .control-dots{
+    position: inherit !important;
+}
+.carousel .control-arrow {
+    background: orange !important;
+    /* position: relative !important; */
 
+    -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
+    box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
 }
 
 .MuiPaper-elevation1-209{
-  box-shadow: none !important;
+    box-shadow: none !important;
 }
 
 
 .carousel.carousel-slider .control-arrow {
-  top: 35%!important;
-  bottom: 50%!important;
-  border-radius: 100%!important;
-  opacity: 1!important;
-  text-align: center;
-  vertical-align: middle;
-  height: 50px;
-  width: 50px;
+    top: 35%!important;
+    bottom: 50%!important;
+    border-radius: 100%!important;
+    opacity: 1!important;
+    text-align: center;
+    vertical-align: middle;
+    height: 50px;
+    width: 50px;
 }
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 0c60a9603ce4290798e5598267e0cd8f9bb16372..a894486a65a74b25f6a1560fc89c368f3ef04c83 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React, { useRef, useState, useEffect, useContext } from 'react';
 import { Grid } from '@material-ui/core';
 import CollectionAuthor from '../Components/CollectionAuthor.js';
-import VerticalRuler from '../Components/VerticalRuler.js';
 import CollectionDescription from '../Components/CollectionDescription.js';
 import ResourceList from '../Components/ResourceList.js';
 import CollectionCommentSection from '../Components/CollectionCommentSection.js';
@@ -56,7 +55,7 @@ export default function CollectionPage(props) {
 	}
 
 	if (error)
-		return <CollectionNotFound>
+		return <CollectionNotFound contrast={state.contrast}>
 			<Grid container direction='column' justify='center' alignItems='center' spacing={1}>
 				<Grid item>
 					<p className="not-found">
@@ -73,16 +72,16 @@ export default function CollectionPage(props) {
 						Voltar para a busca de coleções.
 						</Button>
 					</Link>
-			</Grid>
+			    </Grid>
 			</Grid>
 		</CollectionNotFound >
 	if (loading)
 		return <LoadingSpinner text="Carregando coleção..." />
 	else
 		return (
-			<>
+			<div style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
 				<BreadCrumbsDiv>
-					<StyledBreadCrumbs>
+					<StyledBreadCrumbs contrast={state.contrast}>
 						<Link to="/">Página Inicial</Link>
 						<span>Coleções</span>
 					</StyledBreadCrumbs>
@@ -90,6 +89,7 @@ export default function CollectionPage(props) {
 				<Grid container direction="row" justify="center" alignItems="center">
 					<Grid item md={3}>
 						<CollectionAuthor
+                            contrast={state.contrast}
 							author_id={collection.owner.id ? collection.owner.id : 0}
 							name={collection.owner.name ? collection.owner.name : ""}
 							imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
@@ -98,6 +98,7 @@ export default function CollectionPage(props) {
 
 					<Grid item md={5}>
 						<CollectionDescription
+                            contrast={state.contrast}
 							stars={collection.review_average}
 							likes={collection.likes_count}
 							liked={collection.liked}
@@ -108,22 +109,24 @@ export default function CollectionPage(props) {
 
 					<Grid item md={3}>
 						<DowloadButton
+                            contrast={state.contrast}
 							id={collection_id}
 						/>
 						<div style={{ height: 12 }}></div>
 						<FollowCollectionButton
+                            contrast={state.contrast}
 							followed={collection.followed}
 							user_id={state.currentUser.id}
 							collection_id={collection_id} />
 					</Grid>
 				</Grid>
 
-				<VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
-
-				<Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
+				<Grid container justify="center" style={state.contrast === "" ? {backgroundColor: "#f4f4f4"} : {backgroundColor: "black"}}>
 					{/* <Grid item xs={1}/> */}
 					<Grid item xs={10}>
-						<ResourceList resources={
+						<ResourceList 
+                            contrast={state.contrast} 
+                            resources={
 							collection.collection_items ?
 								collection.collection_items.map(i => {
 									return {
@@ -154,7 +157,7 @@ export default function CollectionPage(props) {
 						/>
 					</Grid>
 				</Grid>
-			</>
+			</div>
 		);
 }
 
@@ -162,15 +165,17 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
   display: flex;
   justify-content: flex-start;
   span {
-    color: #a5a5a5;
+    color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
   }
   a {
-    color: #00bcd4;
-    text-decoration: none;
+    color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
   }
 `;
 
 const CollectionNotFound = styled.div`
+  background-color: ${props => props.contrast === "" ? "" : "black !important"};
+  color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
   margin: 1em; 
   
   .not-found{
@@ -182,8 +187,10 @@ const CollectionNotFound = styled.div`
   }
 
   .back-button{
-    background-color: #673ab7;
-    color:  whitesmoke; 
+    background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+    border: ${props => props.contrast === "" ? "none" : "1px solid white !important"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+    color:  ${props => props.contrast === "" ? "whitesmoke" : "yellow !important"}; 
   }
 
   .link{