diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js
index 3e0be625c424542d75bd13680417450a409f410d..b3626f391bd73b4167907e5c1058b5aab9b20b51 100644
--- a/src/Components/Checkbox.js
+++ b/src/Components/Checkbox.js
@@ -26,22 +26,23 @@ const StyledFormControlLabel = styled(FormControlLabel)`
         font-size : 12px !important;
     }
     .MuiCheckbox-colorSecondary.Mui-checked {
-        color : #00bcd4 !important;
+      color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
     }
 `
 
 export default function LabeledCheckbox(props) {
 
   return (
-      <StyledFormControlLabel
-        control={
-          <Checkbox
-            value = {props.checked}
-            onChange = {props.handleChange}
-          />
-        }
-        label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
-      />
+    <StyledFormControlLabel
+      contrast={props.contrast}
+      control={
+        <Checkbox
+          value={props.checked}
+          onChange={props.handleChange}
+        />
+      }
+      label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
+    />
 
   );
 }
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 0e79abf17cab7bbac7e4ca221e4baa119b0ea6e1..fd04a53f0e2270b6ea4c6d513cf72a9b261167db 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -15,40 +15,40 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState} from "react";
+import React, { useState } from "react";
 import GoogleLogin from 'react-google-login'
 import { Button } from '@material-ui/core';
 //import FacebookLogin from 'react-facebook-login';
 import CloseIcon from '@material-ui/icons/Close';
 import styled from 'styled-components'
-import {device} from './device.js'
+import { device } from './device.js'
 import LabeledCheckbox from './Checkbox.js'
 import FormInput from "./FormInput.js"
 import GoogleLogo from "../img/logo_google.svg"
 import ValidateUserInput from './HelperFunctions/FormValidationFunction.js'
-import {Link} from 'react-router-dom'
-import {apiUrl} from '../env.js'
+import { Link } from 'react-router-dom'
+import { apiUrl } from '../env.js'
 
-async function handleGoogleAttempt () {
-	console.log("handleGoogleAttempt")
-	let request_url = (
+async function handleGoogleAttempt() {
+    console.log("handleGoogleAttempt")
+    let request_url = (
         `${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
     )
     window.location.replace(request_url)
 }
 
-export default function LoginContainer (props) {
+export default function LoginContainer(props) {
     const [formEmail, setEmail] = useState(
         {
-                key : false,
-                value : localStorage.getItem("@portalmec/uid") || "",
+            key: false,
+            value: localStorage.getItem("@portalmec/uid") || "",
         }
     )
 
     const [formSenha, setSenha] = useState(
         {
-                key : false,
-                value : localStorage.getItem("@portalmec/senha") ||""
+            key: false,
+            value: localStorage.getItem("@portalmec/senha") || ""
         }
     )
 
@@ -64,37 +64,41 @@ export default function LoginContainer (props) {
         const userInput = e.target.value
         const flag = ValidateUserInput(type, userInput)
 
-        if(type === 'email') {
-            setEmail({...formEmail,
-                key : flag,
-                value : userInput
+        if (type === 'email') {
+            setEmail({
+                ...formEmail,
+                key: flag,
+                value: userInput
             })
             // {/*console.log(formEmail)*/}
         }
-        else if(type === 'password') {
-            setSenha({...formSenha,
-                key : flag,
-                value : userInput
+        else if (type === 'password') {
+            setSenha({
+                ...formSenha,
+                key: flag,
+                value: userInput
             })
             // {/*console.log(formSenha)*/}
         }
     }
 
     const limpaCamposForm = () => {
-        setEmail({...formEmail,
-            key : false,
-            value : ''
+        setEmail({
+            ...formEmail,
+            key: false,
+            value: ''
         });
 
-        setSenha({...formSenha,
-            key : false,
-            value : ''
+        setSenha({
+            ...formSenha,
+            key: false,
+            value: ''
         })
     }
 
     const onSubmit = (e) => {
         e.preventDefault()
-        const login = {email : formEmail.value, senha : formSenha.value, checkboxChecked : checkboxControl}
+        const login = { email: formEmail.value, senha: formSenha.value, checkboxChecked: checkboxControl }
 
         if (!(formEmail.key || formSenha.key)) {
             props.handleLoginInfo(login)
@@ -105,70 +109,76 @@ export default function LoginContainer (props) {
 
     return (
         <div>
-            <ContainerStyled >
+            <ContainerStyled contrast={props.contrast}>
                 <DialogHeaderStyled>
-                    <span style={{width:"32px"}}/>
-                    <H2Styled> Entrar
+                    <span style={{ width: "32px" }} />
+                    <H2Styled contrast={props.contrast}>
+                        Entrar
                     </H2Styled>
-                    <StyledCloseModalButton onClick={props.handleClose}>
-                    <CloseIcon/>
+                    <StyledCloseModalButton
+                        onClick={props.handleClose}
+                        contrast={props.contrast}
+                    >
+                        <CloseIcon className="icon" />
                     </StyledCloseModalButton>
                 </DialogHeaderStyled>
 
                 <DialogContentDiv>
                     <SocialConnectDiv>
-                            <GoogleLoginButton onClick={handleGoogleAttempt}>
-                                <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
-                                <span>Usando o Google</span>
-                            </GoogleLoginButton>
+                        <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}>
+                            <img src={GoogleLogo} alt="google-logo" className="google-logo" />
+                            <span>Usando o Google</span>
+                        </GoogleLoginButton>
                     </SocialConnectDiv>
 
                     <H3Div>
-                        <H3Styled>
-                            <RightSideStrikedH3/>
-                            <span style={{verticalAlign:"middle"}}>ou</span>
-                            <LeftSideStrikedH3/>
+                        <H3Styled contrast={props.contrast}>
+                            <RightSideStrikedH3 contrast={props.contrast} />
+                            <span style={{ verticalAlign: "middle" }}>ou</span>
+                            <LeftSideStrikedH3 contrast={props.contrast} />
                         </H3Styled>
                     </H3Div>
 
                     <form onSubmit={e => onSubmit(e)}>
                         <FormInput
+                            contrast={props.contrast}
                             inputType={"text"}
                             name={"email"}
                             value={formEmail.value}
                             placeholder={"E-mail"}
                             handleChange={e => handleChange(e, 'email')}
                             required={true}
-                            error = {formEmail.key}
-                            help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
+                            error={formEmail.key}
+                            help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
                         />
-                        <br/>
+                        <br />
                         <FormInput
+                            contrast={props.contrast}
                             inputType={"password"}
                             name={"senha"}
                             value={formSenha.value}
                             placeholder={"Senha"}
                             handleChange={e => handleChange(e, 'password')}
                             required={true}
-                            error = {formSenha.key}
-                            help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""}
+                            error={formSenha.key}
+                            help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""}
                         />
-                        <br/>
+                        <br />
 
-                        <RememberRecover>
-                            <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
-                            <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"/recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
+                        <RememberRecover contrast={props.contrast}>
+                            <LabeledCheckbox contrast={props.contrast} label={<StyledLabel contrast={props.contrast}><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)} />
+                            <UserForgotTheirPasswordSpan contrast={props.contrast}>Esqueceu a senha? <Link to={"/recuperar-senha"} style={props.contrast === "" ? { textAlign: "right", color: "#4cd0e1" } : { textAlign: "right", color: "yellow", textDecoration: "underline" }} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
                         </RememberRecover>
 
                         <ConfirmContainerStyled>
-                            <StyledLoginButton type="submit" variant="contained">
-                                <span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
+                            <StyledLoginButton contrast={props.contrast} type="submit" variant="contained">
+                                <span style={props.contrast === "" ? { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" } : { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" }}>ENTRAR</span>
                             </StyledLoginButton>
                         </ConfirmContainerStyled>
                     </form>
 
-                    <DialogFooterStyled>
-                        <span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
+                    <DialogFooterStyled contrast={props.contrast}>
+                        <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Ainda não tem cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
                     </DialogFooterStyled>
                 </DialogContentDiv>
             </ContainerStyled>
@@ -177,9 +187,9 @@ export default function LoginContainer (props) {
 }
 
 
-    const ContainerStyled = styled.div`
+const ContainerStyled = styled.div`
     box-sizing : border-box;
-    background-color : white;
+    background-color: ${props => props.contrast === "" ? "white" : "black"};
     max-width : none;
     display : flex;
     flex-direction : column;
@@ -199,7 +209,7 @@ export default function LoginContainer (props) {
     }
     `
 
-    export const DialogHeaderStyled = styled.div`
+export const DialogHeaderStyled = styled.div`
     text-align : center;
     display : flex;
     flex-direction : row;
@@ -207,9 +217,9 @@ export default function LoginContainer (props) {
     padding : 10px 26px 0 26px;
     height : 64px;
     `
-    const H2Styled = styled.h2`
+const H2Styled = styled.h2`
     align-self : center;
-    color : #666;
+    color: ${props => props.contrast === "" ? "#666" : "white"};
     font-size : 26px;
     font-weight : 100;
     font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
@@ -218,7 +228,7 @@ export default function LoginContainer (props) {
     letter-spacing: .005em;
     `
 
-    export const StyledCloseModalButton = styled(Button)`
+export const StyledCloseModalButton = styled(Button)`
     display : inline-block;
     position : relative;
     float : right !important;
@@ -226,18 +236,22 @@ export default function LoginContainer (props) {
     background : transparent !important;
     min-width: 0 !important;
     width : 40px;
+
+    .icon{
+        color: ${props => props.contrast === "" ? "#666" : "white"};
+    }
     `
-    export const DialogContentDiv = styled.div`
+export const DialogContentDiv = styled.div`
     padding : 20px 30px;
     overflow : visible !important;
     `
 
-    export const SocialConnectDiv = styled.div`
+export const SocialConnectDiv = styled.div`
     margin-top : 0;
     display : flex;
     flex-direction : row;
     `
-    export const StyledGoogleLoginButton = styled(GoogleLogin)`
+export const StyledGoogleLoginButton = styled(GoogleLogin)`
     background-color : #fff !important;
     color : #666 !important;
     border : 1px solid rgb(66, 133, 244);
@@ -247,12 +261,12 @@ export default function LoginContainer (props) {
     }
     `
 
-    const DialogFooterStyled = styled.div`
+const DialogFooterStyled = styled.div`
     box-sizing : border-box;
     font-family : 'Roboto', sans serif;
     margin : 20px -20px;
     padding-top : 20px;
-    border-top : 1px #e5e5e5 solid;
+    border-top: ${props => props.contrast === "" ? "1px #e5e5e5 solid" : "1px white solid"};
     justify-content : center;
     text-align : center;
     line-height : 1.42857143
@@ -261,50 +275,52 @@ export default function LoginContainer (props) {
 
 export const RightSideStrikedH3 = styled.div`
     display :  inline-block;
-    border-bottom: 1px dotted #666;
+    border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
     vertical-align :  middle;
     font-weight : 500;
     margin-right : 5px;
     width : 44%;
     `
 
-    export const LeftSideStrikedH3 = styled.div`
+export const LeftSideStrikedH3 = styled.div`
     display :  inline-block;
-    border-bottom: 1px dotted #666;
+    border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
     vertical-align :  middle;
     font-weight : 500;
     margin-left : 5px;
     width : 44%;
     `
 
-    export const H3Div = styled.div`
+export const H3Div = styled.div`
     margin-top : 0;
     margin-bottom : 10px;
     `
 
-    const H3Styled = styled.h3`
+const H3Styled = styled.h3`
     overflow : hidden;
     text-align : center;
     font-size : 14px;
-    color : #666;
+    color: ${props => props.contrast === "" ? "#666" : "white"};
     margin : 10px 0;
     `
 
-    const StyledAnchor = styled.a`
-    color : #00bcd4;
-    text-decoration : none;
+const StyledAnchor = styled.a`
+    color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
     `
-    const ConfirmContainerStyled = styled.div`
+const ConfirmContainerStyled = styled.div`
     display :  flex;
     margin-top : 10px;
     align-items : center;
     justify-content : center;
     `
-    const StyledLoginButton = styled(Button)`
-    background-color : #00bcd4 !important;
+const StyledLoginButton = styled(Button)`
+    background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
     box-shadow : none !important;
     outline: none !important;
-    border : 0 !important;
+    border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+    color: ${props => props.contrast === "" ? "" : "yellow !important"};
     overflow : hidden !important;
     width : 35% !important;
     display : inline-block !important;
@@ -315,51 +331,50 @@ export const RightSideStrikedH3 = styled.div`
     border-radius: 3px !important;
     align-self : 50% !important;
     :hover {
-    background-color : #00acc1 !important;
+        background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
     }
     `
 
 
-    const RememberRecover = styled.div`
+const RememberRecover = styled.div`
     display : flex;
     justify-content : space-between;
     font-size: 12px;
     font-weight : 400;
     `
 
-    const StyledLabel = styled.div`
+const StyledLabel = styled.div`
     box-sizing : border-box;
     position : relative;
     vertical-align : middle !important;
-    color : #666;
+    color: ${props => props.contrast === "" ? "#666" : "yellow"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
     `
 
-    const UserForgotTheirPasswordSpan = styled.span`
+const UserForgotTheirPasswordSpan = styled.span`
         margin-top : 1em;
         font-size : 12px;
         font-weight : 400;
         text-align : right;
-        color : #666;
+        color: ${props => props.contrast === "" ? "#666" : "white"};
         `
 
-        const StyledSpan = styled.span`
+const StyledSpan = styled.span`
         font-size : 12px;
         font-weight : 400;
         padding-top : 2px;
         `
 export const GoogleLoginButton = styled(Button)`
-    background-color : #fff;
-    box-shadow : 0 0 0 1px #4285f4 !important;
-    color : #666 !important;
+    background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+    box-shadow: ${props => props.contrast === "" ? "0 0 0 1px #4285f4 !important" : "0 0 0 1px white !important"};
+    color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+    text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+    
     font-weight : bolder !important;
     font-size : 12px !important;
     text-transform: none !important;
     width: 40%;
 
-    ${'' /* .MuiButton-root {
-        min-width : 88px;
-    } */}
-
     .google-logo {
         max-height : 18px ;
         padding-right : 5px;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 9ebce1910883371a5c81adb9f36c7166247adea5..eeb51a8c4f7bfc6d1968800f7872a965bfd8dc17 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -16,16 +16,16 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React, {useContext, useState} from 'react';
+import React, { useContext, useState } from 'react';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
 import Zoom from '@material-ui/core/Fade';
 import styled from 'styled-components'
 import LoginContainer from './LoginContainerFunction.js'
-import {Store} from '../Store.js'
+import { Store } from '../Store.js'
 import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
-import {authentication} from './HelperFunctions/getAxiosConfig'
+import { authentication } from './HelperFunctions/getAxiosConfig'
 
 const StyledLogin = styled(Modal)`
     margin : 0 !important;
@@ -39,11 +39,11 @@ const StyledLogin = styled(Modal)`
 
 `
 export function Alert(props) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />;
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
 
-export default function LoginModal (props){
-    const {state, dispatch} = useContext(Store)
+export default function LoginModal(props) {
+    const { state, dispatch } = useContext(Store)
 
     const [snackbarOpened, handleSnackbar] = useState(false)
 
@@ -55,24 +55,24 @@ export default function LoginModal (props){
         handleSnackbar(false);
     }
 
-    function handleSuccess (data) {
-        dispatch ({
+    function handleSuccess(data) {
+        dispatch({
             type: "USER_LOGGED_IN",
             userLoggedIn: !state.userIsLoggedIn,
             login: data.data
-            }
+        }
         )
         props.handleClose();
         props.openSnackbar();
     }
-    function handleError (error) {
+    function handleError(error) {
         handleSnackbar(true)
     }
     const handleLoginInfo = (login) => {
         const url = `/auth/sign_in`
         const payload = {
-            email : login.email,
-            password : login.senha
+            email: login.email,
+            password: login.senha
         }
 
         authentication(url, payload, handleSuccess, handleError)
@@ -81,30 +81,32 @@ export default function LoginModal (props){
 
     return (
         <>
-        <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
-        anchorOrigin = {{ vertical:'top', horizontal:'right' }}
-        >
-            <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
-        </Snackbar>
-        <StyledLogin
-            aria-labelledby="transition-modal-title"
-            aria-describedby="transition-modal-description"
-            open={props.open}
-            centered="true"
-            onClose={props.handleClose}
-            closeAfterTransition
-            BackdropComponent={Backdrop}
-            BackdropProps={{
-                timeout: 500,
-            }}
-         >
-            <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
-                <LoginContainer handleClose={props.handleClose}
-                    openSignUp={props.openSignUp}
-                    handleLoginInfo={handleLoginInfo}
-                />
-            </Zoom>
-        </StyledLogin>
+            <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+                <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
+            </Snackbar>
+            <StyledLogin
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                open={props.open}
+                centered="true"
+                onClose={props.handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Zoom in={props.open} style={{ transitionDelay: "0.2ms" }}>
+                    <LoginContainer
+                        contrast={state.contrast}
+                        handleClose={props.handleClose}
+                        openSignUp={props.openSignUp}
+                        handleLoginInfo={handleLoginInfo}
+                    />
+                </Zoom>
+            </StyledLogin>
 
         </>
     )
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 15974aee411a66d7431d73f4ce7d6ba8b87d56a0..3917b51941e88da9291a43d9b7f34011cc5da99c 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -16,55 +16,55 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { Button } from '@material-ui/core';
 //import FacebookLogin from 'react-facebook-login';
 import CloseIcon from '@material-ui/icons/Close';
 import styled from 'styled-components'
-import {device} from './device.js'
+import { device } from './device.js'
 import FormInput from "./FormInput.js"
-import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div} from './LoginContainerFunction.js'
-import {apiUrl} from '../env.js'
-import {GoogleLoginButton} from './LoginContainerFunction'
+import { StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div } from './LoginContainerFunction.js'
+import { apiUrl } from '../env.js'
+import { GoogleLoginButton } from './LoginContainerFunction'
 import ValidateUserInput from './HelperFunctions/FormValidationFunction.js'
 import GoogleLogo from "../img/logo_google.svg"
 import ReCaptcha from 'react-recaptcha'
 
-async function handleGoogleAttempt () {
-	console.log("handleGoogleAttempt")
-	let request_url = (
+async function handleGoogleAttempt() {
+    console.log("handleGoogleAttempt")
+    let request_url = (
         `${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
     )
     window.location.replace(request_url)
 }
-export default function SignUpContainer (props) {
+export default function SignUpContainer(props) {
     const [unavailableButton, setButtonAvailability] = useState(true);
 
     const [formNome, setNome] = useState(
         {
-                key : false,
-                value : "",
+            key: false,
+            value: "",
         }
     )
 
     const [formEmail, setEmail] = useState(
         {
-                key : false,
-                value : "",
+            key: false,
+            value: "",
         }
     )
 
     const [formSenha, setSenha] = useState(
         {
-                key : false,
-                value : ""
+            key: false,
+            value: ""
         }
     )
 
     const [formConfirmation, setConfirmation] = useState(
         {
-                key : false,
-                value : ""
+            key: false,
+            value: ""
         }
     )
 
@@ -73,54 +73,62 @@ export default function SignUpContainer (props) {
         const flag = ValidateUserInput(type, userInput, confirmation)
 
         if (type === 'username') {
-            setNome({...formNome,
-                key : flag,
-                value : userInput
+            setNome({
+                ...formNome,
+                key: flag,
+                value: userInput
             })
             console.log(formNome)
         }
-        else if(type === 'email') {
-            setEmail({...formEmail,
-                key : flag,
-                value : userInput
+        else if (type === 'email') {
+            setEmail({
+                ...formEmail,
+                key: flag,
+                value: userInput
             })
             console.log(formEmail)
         }
-        else if(type === 'password') {
-            setSenha({...formSenha,
-                key : flag,
-                value : userInput
+        else if (type === 'password') {
+            setSenha({
+                ...formSenha,
+                key: flag,
+                value: userInput
             })
             console.log(formSenha)
         }
-        else if(type === 'confirmation') {
-            setConfirmation({...formConfirmation,
-                key : flag,
-                value : userInput
+        else if (type === 'confirmation') {
+            setConfirmation({
+                ...formConfirmation,
+                key: flag,
+                value: userInput
             })
             console.log(formConfirmation)
         }
     }
 
     const limpaCamposForm = () => {
-        setNome({...formNome,
-            key : false,
-            value : ''
+        setNome({
+            ...formNome,
+            key: false,
+            value: ''
         })
 
-        setEmail({...formEmail,
-            key : false,
-            value : ''
+        setEmail({
+            ...formEmail,
+            key: false,
+            value: ''
         });
 
-        setSenha({...formSenha,
-            key : false,
-            value : ''
+        setSenha({
+            ...formSenha,
+            key: false,
+            value: ''
         })
 
-        setConfirmation({...formConfirmation,
-            key : false,
-            value : ''
+        setConfirmation({
+            ...formConfirmation,
+            key: false,
+            value: ''
         })
     }
 
@@ -132,7 +140,7 @@ export default function SignUpContainer (props) {
 
     const onSubmit = (e) => {
         e.preventDefault();
-        const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value, senha : formConfirmation.value}
+        const newLogin = { name: formNome.value, email: formEmail.value, password: formSenha.value, senha: formConfirmation.value }
 
         if (!(formNome.key || formEmail.key || formSenha.key || formConfirmation.key)) {
             props.handleLoginInfo(newLogin)
@@ -140,41 +148,42 @@ export default function SignUpContainer (props) {
         }
     }
 
-    function captchaVerified (response) {
+    function captchaVerified(response) {
         if (response) {
             setButtonAvailability(false)
         }
     }
 
     return (
-        <ContainerStyled >
+        <ContainerStyled contrast={props.contrast}>
             <DialogHeaderStyled>
-                <span style={{width:"32px"}}/>
-                <H2Styled> Cadastrar-se
+                <span style={{ width: "32px" }} />
+                <H2Styled contrast={props.contrast}> Cadastrar-se
                 </H2Styled>
-                <StyledCloseModalButton onClick={props.handleClose} >
-                    <CloseIcon />
+                <StyledCloseModalButton contrast={props.contrast} onClick={props.handleClose} >
+                    <CloseIcon className="icon" />
                 </StyledCloseModalButton>
             </DialogHeaderStyled>
 
             <DialogContentDiv>
                 <SocialConnectDiv>
-                        <GoogleLoginButton onClick={handleGoogleAttempt}>
-                            <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
-                            <span>Usando o Google</span>
-                        </GoogleLoginButton>
+                    <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}>
+                        <img src={GoogleLogo} alt="google-logo" className="google-logo" />
+                        <span>Usando o Google</span>
+                    </GoogleLoginButton>
                 </SocialConnectDiv>
 
                 <H3Div>
-                    <H3Styled>
-                        <RightSideStrikedH3/>
-                        <span style={{verticalAlign:"middle"}}>ou</span>
-                        <LeftSideStrikedH3/>
+                    <H3Styled contrast={props.contrast}>
+                        <RightSideStrikedH3 contrast={props.contrast} />
+                        <span style={{ verticalAlign: "middle" }}>ou</span>
+                        <LeftSideStrikedH3 contrast={props.contrast} />
                     </H3Styled>
                 </H3Div>
 
                 <form onSubmit={onSubmit}>
                     <FormInput
+                        contrast={props.contrast}
                         inputType={"text"}
                         name={"name"}
                         value={formNome.value}
@@ -183,8 +192,9 @@ export default function SignUpContainer (props) {
                         required={true}
                         error={formNome.key}
                     />
-                    <br/>
+                    <br />
                     <FormInput
+                        contrast={props.contrast}
                         inputType={"text"}
                         name={"email"}
                         value={formEmail.value}
@@ -192,10 +202,11 @@ export default function SignUpContainer (props) {
                         handleChange={e => handleChange(e, 'email')}
                         required={true}
                         error={formEmail.key}
-                        help = {formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
-                        />
-                    <br/>
+                        help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
+                    />
+                    <br />
                     <FormInput
+                        contrast={props.contrast}
                         inputType={"password"}
                         name={"password"}
                         value={formSenha.value}
@@ -203,10 +214,11 @@ export default function SignUpContainer (props) {
                         handleChange={e => handleChange(e, 'password')}
                         required={true}
                         error={formSenha.key}
-                        help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""}
-                        />
-                    <br/>
+                        help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""}
+                    />
+                    <br />
                     <FormInput
+                        contrast={props.contrast}
                         inputType={"password"}
                         name={"confirmation"}
                         value={formConfirmation.value}
@@ -214,10 +226,10 @@ export default function SignUpContainer (props) {
                         handleChange={e => handleChange(e, 'confirmation', formSenha.value)}
                         required={true}
                         error={formConfirmation.key}
-                        help = {formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mínimo 8 caracteres.")) : ""}
-                        />
-                    <br/>
-                    <div style={{margin:"0 auto", width: "304px"}}>
+                        help={formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mínimo 8 caracteres.")) : ""}
+                    />
+                    <br />
+                    <div style={{ margin: "0 auto", width: "304px" }}>
                         {
                             //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
                             <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
@@ -225,26 +237,34 @@ export default function SignUpContainer (props) {
                         }
                     </div>
                     <ConfirmContainerStyled>
-                        <StyledSignUpButton type="submit" variant="contained" disabled={unavailableButton}
-                            style={unavailableButton ? { backgroundColor: "#e9e9e9" } : { backgroundColor: "#00bcd4" }}    
-                        >
-                            <span
-                                style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box",
-                                    fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}
+                        {
+                            !unavailableButton &&
+                            <StyledSignUpButton contrast={props.contrast} type="submit" variant="contained" disabled={unavailableButton}
+                                style={unavailableButton ? { backgroundColor: "#e9e9e9" } : props.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }}
                             >
-                                CADASTRAR
+                                <span
+                                    style={props.contrast === "" ? {
+                                        paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box",
+                                        fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff"
+                                    } : {
+                                            paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box",
+                                            fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow"
+                                        }}
+                                >
+                                    CADASTRAR
                             </span>
-                        </StyledSignUpButton>
+                            </StyledSignUpButton>
+                        }
                     </ConfirmContainerStyled>
                 </form>
 
-                <TermosDeUsoStyled>
+                <TermosDeUsoStyled contrast={props.contrast}>
                     <p>Ao se cadastrar, você está aceitando os Termos de Uso e de Política
                     de Privacidade. <a href="/termos">Ler Termos</a>.</p>
                 </TermosDeUsoStyled>
 
                 <DialogFooterStyled>
-                    <span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
+                    <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Já possui cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
                 </DialogFooterStyled>
             </DialogContentDiv>
         </ContainerStyled>
@@ -253,7 +273,7 @@ export default function SignUpContainer (props) {
 
 const ContainerStyled = styled.div`
     box-sizing : border-box;
-    background-color : white;
+    background: ${props => props.contrast === "" ? "white" : "black"};
     max-width : none;
     align : center;
     display : flex;
@@ -285,17 +305,21 @@ const DialogFooterStyled = styled.div`
 
 const TermosDeUsoStyled = styled.div`
     font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color : #666;
+    color: ${props => props.contrast === "" ? "#666" : "white"};
     font-size : 13px;
     margin : 0 0 10px;
     max-width : 350px;
     margin-top : 10px;
     text-align : start;
+    a{
+        color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+        text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
+    }
 `
 
 const H2Styled = styled.h2`
     align-self : center;
-    color : #666;
+    color: ${props => props.contrast === "" ? "#666" : "white"};
     font-size : 26px;
     font-weight : lighter;
     justify-content: space-between;
@@ -308,12 +332,12 @@ const H3Styled = styled.h3`
     overflow : hidden;
     text-align : center;
     font-size : 14px;
-    color : #666;
+    color: ${props => props.contrast === "" ? "#666" : "white"};
     margin : 10px 0;
 `
 const RightSideStrikedH3 = styled.div`
     display :  inline-block;
-    border-bottom: 1px dotted #666;
+    border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
     vertical-align :  middle;
     font-weight : 500;
     margin-right : 5px;
@@ -322,7 +346,7 @@ const RightSideStrikedH3 = styled.div`
 
 const LeftSideStrikedH3 = styled.div`
     display :  inline-block;
-    border-bottom: 1px dotted #666;
+    border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
     vertical-align :  middle;
     font-weight : 500;
     margin-left : 5px;
@@ -330,8 +354,8 @@ const LeftSideStrikedH3 = styled.div`
 `
 
 const StyledAnchor = styled.a`
-    color : #00bcd4;
-    text-decoration : none;
+    color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+    text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
 `
 //const StyledCloseModalButton = styled(Button)`
 //    display : inline-block;
@@ -355,7 +379,7 @@ const ConfirmContainerStyled = styled.div`
 const StyledSignUpButton = styled(Button)`
     box-shadow : none !important;
     outline: none !important;
-    border : 0 !important;
+    border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
     overflow : hidden !important;
     width : 50% !important;
     display : inline-block !important;
@@ -366,6 +390,6 @@ const StyledSignUpButton = styled(Button)`
     border-radius: 3px !important;
     align-self : 50% !important;
     :hover {
-        background-color : #00acc1 !important;
+        background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
     }
 `
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 61c4fb2865b34df44615e742507d94df28e43ad7..3114f8e578e5e8c83bd15bfa08f9c9db81ff1e7f 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -15,14 +15,14 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext, useState} from 'react';
+import React, { useContext, useState } from 'react';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 import styled from 'styled-components'
 import SignUpContainer from './SignUpContainerFunction.js'
-import {Store} from '../Store.js'
-import {authentication} from './HelperFunctions/getAxiosConfig'
+import { Store } from '../Store.js'
+import { authentication } from './HelperFunctions/getAxiosConfig'
 import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
 //import {postRequest} from './HelperFunctions/getAxiosConfig'
@@ -31,7 +31,7 @@ export function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
 
-export default function SignUpModal (props) {
+export default function SignUpModal(props) {
     const { state, dispatch } = useContext(Store)
 
     const [snackbarOpened, handleSnackbar] = useState(false)
@@ -44,8 +44,8 @@ export default function SignUpModal (props) {
         handleSnackbar(false);
     }
 
-    function handleSuccess (data) {
-        dispatch ({
+    function handleSuccess(data) {
+        dispatch({
             type: 'USER_SIGNED_UP',
             userLoggedIn: !state.userIsLoggedIn,
             user: data.data
@@ -53,17 +53,17 @@ export default function SignUpModal (props) {
         props.handleClose()
     }
 
-    function handleError (error) {
+    function handleError(error) {
         handleSnackbar(true)
     }
 
     const handleLoginInfo = (newLogin) => {
         const url = `/auth`
         const payload = {
-            name : newLogin.name,
+            name: newLogin.name,
             email: newLogin.email,
-            password : newLogin.password,
-            password_confirmation : newLogin.senha //,
+            password: newLogin.password,
+            password_confirmation: newLogin.senha //,
             // terms_of_service : true,
             // avatar: ""
         }
@@ -74,7 +74,7 @@ export default function SignUpModal (props) {
     return (
         <>
             <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
-            anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             >
                 <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
             </Snackbar>
@@ -93,9 +93,10 @@ export default function SignUpModal (props) {
             >
                 <Fade in={props.open}>
                     <SignUpContainer
-                    handleClose={props.handleClose}
-                    openLogin={props.openLogin}
-                    handleLoginInfo = {handleLoginInfo}
+                        contrast={state.contrast}
+                        handleClose={props.handleClose}
+                        openLogin={props.openLogin}
+                        handleLoginInfo={handleLoginInfo}
                     />
                 </Fade>
             </StyledModalSignUp>
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index e6c2e7cb6e9cb8f8583fd3b1d5c34a93c17332ac..39e92d5f74b541e04d7d890001ec8f1c530422e5 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -38,8 +38,7 @@ const BannerStyle = styled.div`
   background-size: cover;
   background-position: top center;
   height: 370px;
-
-  verticalAlign: "middle"
+  vertical-align: "middle";
 `
 
 const AColorido = styled.a`
@@ -51,7 +50,7 @@ const AColorido = styled.a`
 
 const ImagemSeçao2 = styled.div`
 
-  font-family: Roboto, sans-serif;
+  font-family: "Roboto", sans-serif;
 
   @media (min-width:1450px) {
     background-image: url(${Busca});