diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 076569fe9c5ebe7d20f97a07f05eef028a89bf1d..0f89f397c39105fc897c61a0ecaf2b38f22d2f42 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -34,6 +34,7 @@ import ModalCancelar from './ModalCancelar.js'
 import { getDefaultThumbnail } from '../HelperFunctions/getDefaultThumbnail'
 import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
 import ReCaptcha from 'react-recaptcha'
+import Chip from '@material-ui/core/Chip'
 
 export default function PartThree(props) {
     var moment = require('moment')
@@ -50,7 +51,7 @@ export default function PartThree(props) {
         console.log(data.tags)
         console.log(data.language)
         console.log(data.subjects)
-        // console.log(data.tags)
+        console.log(data)
 
         setDraft(data)
         /*extract subjects*/
@@ -71,7 +72,6 @@ export default function PartThree(props) {
         }
     }, [state.currentUser.id])
 
-    let windowWidth = window.innerWidth
     const [modalCancelar, toggleModalCancelar] = useState(false)
 
     const checkAccessLevel = (levelToCheck) => {
@@ -105,403 +105,281 @@ export default function PartThree(props) {
                             <Grid container style={props.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
                                 <Grid item xs={12}>
                                     <StyledSessao1 contrast={props.contrast} className="page-content-preview">
-                                        <div className="cabecalho">
-                                            <div className="feedback-upload">
-                                                <Stepper contrast={props.contrast} activeStep={props.activeStep} />
-                                                <h2>Quase lá, agora só falta publicar!</h2>
-                                                <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
-                                            </div>
+                                        <div className='header'>
+                                            <Stepper activeStep={props.activeStep} contrast={props.contrast} />
+                                            <h2>Quase lá, agora só falta publicar!</h2>
+                                            <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
                                         </div>
                                     </StyledSessao1>
 
-                                    <CaixaContainer contrast={props.contrast}>
-                                        <div>
-                                            <div className="cabecalho-objeto">
-                                                <img alt="" className="img-objeto"
+                                    <MainContent contrast={props.contrast} >
+                                        <CaixaContainer contrast={props.contrast} container spacing={2} className='draft-info'>
+                                            <Grid item xs={12} md={4}>
+                                                <img alt="" style={{ width: "100%", height: '100%' }}
                                                     src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail} />
-                                                <div className="texto-objeto">
-                                                    <h3>{draft.name}</h3>
-                                                    <div className="relacionado">
-                                                        Relacionado com: {subjects}
-                                                    </div>
-
-                                                    {
-                                                        draft.tags &&
-                                                        <div className="tags-objeto">
-                                                            Palavras chave: <br/>
-                                                            {draft.tags.map((tag) => {
-                                                                return (
-                                                                    <div className="tag" key={tag.name}>{tag.name}</div>
-                                                                )
-                                                            })}
-                                                        </div>
-                                                    }
-
-                                                </div>
-                                            </div>
-
-                                            <div className="sobre-objeto">
+                                            </Grid>
+                                            <Grid item xs={12} md={8}>
+                                                <Grid container justify='space-between'>
+                                                    <Grid item xs={12}>
+                                                        <h3>{draft.name}</h3>
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        <Grid container spacing={1}>
+                                                            <Grid item xs={12}>
+                                                                <Rating
+                                                                    readOnly
+                                                                    name="customized-empty"
+                                                                    value={draft.score}
+                                                                    precision={0.5}
+                                                                    style={props.contrast === "" ? { color: "#666" } : { color: "white" }}
+                                                                    emptyIcon={<StarBorderIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} fontSize="inherit" />}
+                                                                />
+                                                            </Grid>
+                                                            <Grid item xs={12}>
+                                                                Relacionado com: {subjects}
+                                                            </Grid>
+                                                            <Grid item xs={12}>
+                                                                {
+                                                                    draft.tags &&
+                                                                    draft.tags.map((tag) => {
+                                                                        return (
+                                                                            <Chip className='tag' key={tag.name} label={tag.name} />
+                                                                        )
+                                                                    })
+                                                                }
+                                                            </Grid>
+                                                        </Grid>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </CaixaContainer>
+                                    </MainContent>
+                                    <MainContent contrast={props.contrast}>
+                                        <CaixaContainer contrast={props.contrast} container spacing={2}>
+                                            <Grid item xs={12}>
+                                                <h1 className='title'>
+                                                    Sobre o recurso
+                                                </h1>
+                                            </Grid>
+                                            <Grid item xs={12}>
+                                                <hr />
+                                            </Grid>
+                                            <Grid item xs={12} sm={6}>
                                                 <Grid container>
-                                                    <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
-                                                        <div className="titulo">
-                                                            Sobre o Recurso
-                                                        </div>
-                                                        <div className="sobre-conteudo">
-                                                            <p className="descricao">{description}</p>
-                                                            {
-                                                                author !== '' &&
-                                                                <p className="autor">
-                                                                    <b>Autoria:</b>
-                                                                    <br />
-                                                                    {author}
-                                                                </p>
-                                                            }
-                                                        </div>
+                                                    <Grid item xs={12}>
+                                                        {
+                                                            description !== '' &&
+                                                            <p>
+                                                                <b>Descrição:</b>
+                                                                <br />
+                                                                {description}
+                                                            </p>
+                                                        }
+                                                    </Grid>
+                                                    <Grid item xs={12}>
+                                                        {
+                                                            author !== '' &&
+                                                            <p>
+                                                                <b>Autoria:</b>
+                                                                <br />
+                                                                {author}
+                                                            </p>
+                                                        }
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                            <Grid item xs={12} sm={6}>
+                                                <Grid container spacing={1}>
+                                                    <Grid item xs={12}>
+                                                        <Grid container direction='row' spacing={1} alignItems='center'>
+                                                            <Grid item>
+                                                                <MoreIcon />
+                                                            </Grid>
+                                                            <Grid item>
+                                                                <b>Tipo de mídia: </b>{draft.object_type}
+                                                            </Grid>
+                                                        </Grid>
                                                     </Grid>
 
-                                                    <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
-                                                        <span className="meta-objeto">
-                                                            <MoreIcon /> <b>Tipo de mídia: </b>{draft.object_type}
-                                                        </span>
-
-                                                        <span className="meta-objeto">
-                                                            <SdCardIcon /> <b>Tamanho: </b>
-                                                        </span>
+                                                    <Grid item xs={12}>
+                                                        <Grid container direction='row' spacing={1} alignItems='center'>
+                                                            <Grid item>
+                                                                <SdCardIcon />
+                                                            </Grid>
+                                                            <Grid item>
+                                                                <b>Tamanho: </b>{draft.attachments ? (draft.attachments[0].size / 1000000).toFixed(2) + ' Mb' : "Informação não disponível"}
+                                                            </Grid>
+                                                        </Grid>
+                                                    </Grid>
 
-                                                        <span className="meta-objeto">
-                                                            <DateRangeIcon /> <b>Enviado: </b>
-                                                            {moment(draft.created_at).format("DD/MM/YYYY")}
-                                                        </span>
+                                                    <Grid item xs={12}>
+                                                        <Grid container direction='row' spacing={1} alignItems='center'>
+                                                            <Grid item>
+                                                                <DateRangeIcon />
+                                                            </Grid>
+                                                            <Grid item>
+                                                                <b>Enviado: </b>
+                                                                {moment(draft.created_at).format("DD/MM/YYYY")}
+                                                            </Grid>
+                                                        </Grid>
+                                                    </Grid>
 
-                                                        <span className="meta-objeto">
-                                                            <UpdateIcon /><b>Atualização: </b>
-                                                            {moment(draft.updated_at).format("DD/MM/YYYY")}
-                                                        </span>
+                                                    <Grid item xs={12}>
+                                                        <Grid container direction='row' spacing={1} alignItems='center'>
+                                                            <Grid item>
+                                                                <UpdateIcon />
+                                                            </Grid>
+                                                            <Grid item>
+                                                                <b>Atualização: </b>
+                                                                {moment(draft.updated_at).format("DD/MM/YYYY")}
+                                                            </Grid>
+                                                        </Grid>
+                                                    </Grid>
 
+                                                    <Grid item xs={12}>
                                                         {draft.language &&
                                                             draft.language.map((language =>
-                                                                <span className="meta-objeto" key={language.id}>
-                                                                    <TranslateIcon /><b>Idioma: </b>{language.name}
-                                                                </span>
+                                                                <Grid key={language.id} container direction='row' spacing={1} alignItems='center'>
+                                                                    <Grid item>
+                                                                        <TranslateIcon />
+                                                                    </Grid>
+                                                                    <Grid item>
+                                                                        <b>Idioma: </b>{language.name}
+                                                                    </Grid>
+                                                                </Grid>
                                                             ))
                                                         }
+                                                    </Grid>
+
+                                                    <Grid item xs={12}>
+                                                        <Grid container direction='row' spacing={1} alignItems='center'>
+                                                            <Grid item>
+                                                                <AssignmentIcon />
+                                                            </Grid>
+                                                            <Grid item>
+                                                                <b>Licença: </b>{draft.license ? draft.license.name : "Informação não disponível"}
 
-                                                        <span className="meta-objeto">
-                                                            <AssignmentIcon /><b>Licença: </b>{draft.license ? draft.license.name : ""}
-                                                        </span>
+                                                            </Grid>
+                                                        </Grid>
                                                     </Grid>
                                                 </Grid>
-                                            </div>
-                                        </div>
-                                    </CaixaContainer>
-                                    <Sessao3 contrast={props.contrast}>
-                                        <form>
-                                            <Grid container>
-                                                <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px", textAlign: windowWidth > 990 ? 'right' : 'center' }}>
-                                                    <span style={{ fontSize: "14px" }}>
-                                                        Para segurança da plataforma <br /> marque que você não é um robô
-                                                    </span>
+                                            </Grid>
+                                        </CaixaContainer>
+                                    </MainContent>
+                                    <MainContent contrast={props.contrast}>
+                                        <CaixaContainer contrast={props.contrast} container spacing={2} justify='center' alignItems='center'>
+                                            <Grid item xs={12} className='center'>
+                                                <Grid container direction='row' alignItems='center' justify='space-between' >
+                                                    <Grid item>
+                                                        <h4>
+                                                            Para segurança da plataforma marque que você não é um robô
+                                                        </h4>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} />
+                                                    </Grid>
                                                 </Grid>
 
-                                                <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px" }}>
-                                                    <div style={{ margin: "0 auto", width: "304px" }}>
+                                            </Grid>
+                                            <Grid item xs={12} className='center'>
+                                                <Grid container direction='row' spacing={1} alignItems='center' justify='center'>
+                                                    <Grid item>
+                                                        <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
+                                                    </Grid>
+                                                    <Grid item>
                                                         {
-                                                            //<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
-                                                            <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
-                                                        }
-                                                    </div>
-                                                </Grid>
-                                                <Grid item xs={12} style={{ paddingRight: "15px", paddingLeft: "15px", marginTop: "30px", textAlign: 'center' }}>
-                                                    <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
-                                                    <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
-                                                    {
-                                                        checkAccessLevel("partner") ?
-                                                            (
-                                                                unavailableButton ? (
-                                                                    <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
-                                                                )
-                                                                :
+                                                            checkAccessLevel("partner") ?
                                                                 (
-                                                                    <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
-                                                                )
-                                                            )
-                                                            :
-                                                            (
-                                                                unavailableButton ? (
-                                                                    <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+                                                                    unavailableButton ? (
+                                                                        <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
+                                                                    )
+                                                                        :
+                                                                        (
+                                                                            <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+                                                                        )
                                                                 )
                                                                 :
                                                                 (
-                                                                    <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
-                                                                )                                                                
-                                                            )
+                                                                    unavailableButton ? (
+                                                                        <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+                                                                    )
+                                                                        :
+                                                                        (
+                                                                            <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+                                                                        )
+                                                                )
 
-                                                    }
+                                                        }
+                                                    </Grid>
                                                 </Grid>
                                             </Grid>
-                                        </form>
-                                    </Sessao3>
+                                        </CaixaContainer>
+                                    </MainContent>
                                 </Grid>
                             </Grid>
                         </React.Fragment>
                     )
                     :
                     (
-                        <LoadingSpinner contrast={props.contrast} text="CARREGANDO" />
+                        <LoadingSpinner text="CARREGANDO" contrast={props.contrast} />
                     )
             }
-        </React.Fragment>
+        </React.Fragment >
     )
 }
 
-const Sessao3 = styled.div`
-    position : relative;
-    top : -120px;
-    padding-right :15px;
-    padding-left :15px;
-    margin-right : auto;
-    margin-left : auto;
-    @media screen and (min-width: 768px) {
-        width : 750px;
-    }
-    @media screen and (min-width: 992px) {
-        width : 970px;
-    }
-    @media screen and (min-width: 1200px) {
-        width : 970px;
-    }
 
+const MainContent = styled.div`
     color: ${props => props.contrast === "" ? "#666" : "white"};
-    background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
-
+    border-radius : 5px;
+    padding : 20px 10px;
+    width: 80%;
+    margin: 1.5em auto;
+    border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 `
 
-const CaixaContainer = styled.div`
-    background: ${props => props.contrast === "" ? "rgba(238,238,238,.5)" : "black"};
-    color: ${props => props.contrast === "" ? "#666" : "white"};
-    border-radius : 5px;
-    position : relative;
-    top : -145px;
-    padding : 10px;
+const CaixaContainer = styled(Grid)`
+    width: 100%;
     
-
-    margin-right : auto;
-    margin-left : auto;
-    @media screen and (min-width: 768px) {
-        width : 750px;
+    .draft-info{
+        padding : 10px 5px;
     }
-    @media screen and (min-width: 992px) {
-        width : 970px;
-    }
-    @media screen and (min-width: 1200px) {
-        width : 970px;
-    }
-
-
-    .cabecalho-objeto {
-        background: ${props => props.contrast === "" ? "#fff" : "black"};
-        border: ${props => props.contrast === "" ? "0" : "1px solid white"};
-        box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-        padding: 0;
-        margin-top: 30px;
-        margin-bottom: 30px;
-        position: relative;
-        min-height: 100px;
-        margin-top: 0;
-        margin-bottom: 10px;
-        color: ${props => props.contrast === "" ? "#666" : "white"};
-        overflow: auto;
-
-        .img-objeto {
-            background: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
-            height: 270px;
-            width: 400px;
-            float: left;
-            padding: 0;
-        }
 
-        .texto-objeto {
-            padding: 20px 20px 0 20px;
-            height: content;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
-            -ms-flex-wrap: nowrap;
-            flex-wrap: nowrap;
-            -webkit-box-pack: start;
-            -ms-flex-pack: start;
-            justify-content: flex-start;
-            -ms-flex-line-pack: center;
-            align-content: center;
-            -webkit-box-align: start;
-            -ms-flex-align: start;
-            align-items: flex-start;
-
-            h3 {
-                font-size: 26px;
-                font-weight: 400;
-                margin: 0;
-                padding-bottom: 15px;
-            }
-
-            .rating-objeto {
-                margin : 0;
-                display : inline-flex;
-                padding-bottom : 10px;
-            }
-
-            .relacionado {
-                font-weight : 500;
-                font-size : 13px;
-            }
-
-            .tags-objeto {
-                max-height: 54px;
-                font-size: .8em;
-                overflow: hidden;
-                clear: both;
-                display: -webkit-inline-box;
-                display: -ms-inline-flexbox;
-                display: inline-flex;
-                -ms-flex-wrap: wrap;
-                flex-wrap: wrap;
-
-                .tag {
-                    display: -webkit-inline-box;
-                    display: -ms-inline-flexbox;
-                    display: inline-flex;
-                    margin-right: 3px;
-                    background: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
-                    border: ${props => props.contrast === "" ? "0" : "1px solid white"};
-                    padding: 3px 7px;
-                    border-radius: 15px;
-                    line-height: 18px;
-                    margin-bottom: 3px;
-                }
-            }
-        }
+    .tag{
+        color: ${props => props.contrast === "" ? "black" : "white"};
+        background: ${props => props.contrast === "" ? "#d4d4d4" : "black"};
+        border: ${props => props.contrast === "" ? "none" : "1px solid white"}; 
+        margin: 0.2em;
     }
 
-    .sobre-objeto {
-        margin-top : 0;
-        margin-bottom : 0;
-        min-height : 275px;
-        display : flex;
-        background: ${props => props.contrast === "" ? "#fff" : "black"};
-        border: ${props => props.contrast === "" ? "0" : "1px solid white"};
-        box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-        padding: 0;
-        position: relative;
-        min-height: 500px;
-
-        .left {
-            @media screen and (min-width : 990px) {
-                margin-left : 4% !important;
-                margin-top : 4% !important;
-            }
-
-            @media screen and (max-width : 989px) {
-                margin : 0;
-                padding : 20px;
-                padding-bottom : 0;
-            }
-
-            .titulo {
-                margin-top: 2% !important;
-                margin-bottom: 10px;
-                font-family: 'Roboto Light','Roboto Regular',Roboto;
-                font-weight: 300;
-                font-style: normal;
-                font-size: 1.857em;
-            }
-
-            .sobre-conteudo {
-                flex : 1;
-                font-size : 14px !important;
-
-                .descricao {
-                    text-align: justify;
-                    margin-bottom: 20px;
-                    margin-top: 20px;
-                }
-
-                .autor {
-                    margin : 0 0 10px !important;
-                }
-            }
-        }
-
-        .right {
-            margin-top : 4% !important;
-            border-left: 1px solid #e5e5e5;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
-            -webkit-box-pack: start;
-            -ms-flex-pack: start;
-            justify-content: flex-start;
-            padding: 20px;
-            position : relative;
-            margin-bottom : 20px;
-
-            .meta-objeto {
-                position: relative;
-                width: 100%;
-                font-size: 14px;
-                margin-bottom: 20px;
-                display : inline-block;
-            }
+    .title{
+        text-align: center;
+        font-weight: lighter;
+    }
 
-            .MuiSvgIcon-root {
-                vertical-align : middle !important;
-                margin-right : 15px !important;
-            }
-        }
+    .center{
+        text-align: center;
     }
-}
 `
 
 const StyledSessao1 = styled.div`
     color : #fff;
     background: ${props => props.contrast === "" ? "#00bcd4" : "black"};
-    float : none;
     height : 300px;
-    text-align : center;
     padding-top : 48px;
     padding-bottom : 48px;
-    margin-bottom : 30px;
-
-    .cabecalho {
-        display : flex;
-        flex-direction : column;
-        align-items : center;
-        margin-bottom : 30px;
-
-        .feedback-upload {
-            display : flex;
-            flex-direction : column;
-            justify-content : center;
-            text-align : center;
-            margin-top : 20px;
-            width : 55%;
-        }
-
-        h2 {
-            margin-top : 0;
-            font-size : 26px;
-            font-weight : lighter;
-            margin-bottom : 10px;
-        }
-
-        .subtitle {
-            font-size : 16px;
-
-        }
+    flex-direction : column;
+    justify-content: center; 
+    align-items: center;
+    display: flex;
+
+    .header{
+        width: 50%;
+        margin: 0 auto;
+        text-align: center;
     }
 `
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index 4175e17f10d43636e90f912f49f8866e6ee1501b..95c1ff20bf76ee1a7aa5965175c3ab07dee9529f 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -22,26 +22,44 @@ import Check from '@material-ui/icons/Check';
 import Grid from '@material-ui/core/Grid';
 
 export default function CustomizedSteppers(props) {
-    console.log(props);
 
-    return (
-        <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
-        {
-            [0, 1, 2].map((index) => {
+  function isInFinalSTep(step) {
+    return step === 2;
+  }
+
+  return (
+    <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+      {
+        !isInFinalSTep(props.activeStep) ?
+
+          [0, 1, 2].map((index) => {
+            return (
+              <Grid item key={new Date().toISOString() + index}>
+                <div className={props.activeStep === index ? "currStep" : "step"}>
+                  {
+                    index < props.activeStep ?
+                      <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+                  }
+                </div>
+              </Grid>
+            )
+          })
+          :
+          [0, 1, 2].map((index) => {
             return (
-                <Grid item key={new Date().toISOString() + index}>
-                    <div className={props.activeStep === index ? "currStep" : "step"}>
-                        {
-                            index < props.activeStep ?
-                            <Check style={props.contrast === "" ? { color: "#666" } : { color: "white" }} /> : `${index + 1}`
-                        }
-                    </div>
-                </Grid>
+              <Grid item key={new Date().toISOString() + index}>
+                <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+                  {
+                    index < props.activeStep ?
+                      <Check style={{ color: 'white' }} /> : index
+                  }
+                </div>
+              </Grid>
             )
-            })
-        }
-        </MainGrid >
-    );
+          })
+      }
+    </MainGrid >
+  );
 }
 
 const MainGrid = styled(Grid)`
@@ -62,14 +80,24 @@ const MainGrid = styled(Grid)`
         border-radius: 50%;
     }
 
-    .step{
-        height: 30px;
-        width: 30px;
-        display: flex;
-        justify-content: center; 
-        align-items: center;
-        border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
-        border-radius: 50%;
-    }
+  .step{
+    height: 30px;
+    width: 30px;
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+    border-radius: 50%;
+  }
+
+  .finalStep{
+    height: 30px;
+    width: 30px;
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    border: 2px solid white;
+    border-radius: 50%;
+  }
 `