diff --git a/src/Components/StatsBarFunction.js b/src/Components/StatsBarFunction.js
index 8b58fc3ed7f448ec8a43edf0f12bb469916eebb0..857c7393632a50ffdd3a8922044bbc4c14cb5efa 100644
--- a/src/Components/StatsBarFunction.js
+++ b/src/Components/StatsBarFunction.js
@@ -16,70 +16,86 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components'
 import { apiUrl } from "../env";
-import  axios from "axios";
+import axios from "axios";
 import mapaBrasil from '../img/mapa-brasil-line-icon.svg';
 import Grid from '@material-ui/core/Grid';
 
 export default function (props) {
-    const [available_resources, setAvailableResources] = useState(0)
-    const [month_publications, setMonthPublications] = useState(0)
-    const [month_downloads, setMonthDownloads] = useState(0)
-
-    useEffect(() => {
-        axios.get(`${apiUrl}/statistics`)
-        .then(
-            (res) => {
-                setAvailableResources(res.data.count)
-                setMonthPublications(res.data.month_publications)
-                setMonthDownloads(res.data.month_downloads)
+  const [available_resources, setAvailableResources] = useState(0)
+  const [month_publications, setMonthPublications] = useState(0)
+  const [month_downloads, setMonthDownloads] = useState(0)
+
+  const WINDOW_WIDTH = window.innerWidth
+
+  useEffect(() => {
+    axios.get(`${apiUrl}/statistics`)
+      .then(
+        (res) => {
+          setAvailableResources(res.data.count)
+          setMonthPublications(res.data.month_publications)
+          setMonthDownloads(res.data.month_downloads)
         })
-    }, [])
-
-    return (
-        <StatsTab>
-            <StyledGrid container>
-                <Grid item md={6} xs={12} className="first">
-                    <img src={mapaBrasil} height="83px" alt="mapa do brasil"/>
-                    <span className="total">
-                        <span className="numeros">
-                            {available_resources}
-                        </span>
-                        <span className="legenda">
-                            Recursos disponíveis
-                        </span>
-                    </span>
-                </Grid>
-
-                <Grid item md={6} xs={12} className="second">
-                    <span className="title">
-                        ESSE MÊS:
-                    </span> &nbsp;
-                    <span className="enviados">
-                        <span className="numeros">
-                            {month_downloads}
-                        </span>
-
-                        <span className="legenda">
-                            Baixados
-                        </span>
-                    </span>
-                    <span className="enviados">
-                        <span className="numeros">
-                            {month_publications}
-                        </span>
-
-                        <span className="legenda">
-                            Publicados
-                        </span>
-                    </span>
-
-                </Grid>
-            </StyledGrid>
-        </StatsTab>
-    )
+  }, [])
+
+  return (
+    <StatsTab>
+      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
+      <Grid container direction={WINDOW_WIDTH <= 670 ? "column" : "row"} justify="center" alignItems="center" spacing={3}>
+        <Grid item>
+          <Grid container direction="row" alignItems="center" spacing={2}>
+            <Grid item>
+              <img src={mapaBrasil} height="83px" alt="mapa do brasil" />
+            </Grid>
+            <Grid item>
+              <Grid container direction="column">
+                <StyledGridNumbers item style={{ textAlign: "center" }}>
+                  {available_resources}
+                </StyledGridNumbers>
+                <StyledGridLabels item>
+                  Recursos disponíveis
+                </StyledGridLabels>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item style={WINDOW_WIDTH <= 670 ? {width: "100%"} : null}>
+          <StyledDivider />
+        </Grid>
+        <Grid item>
+          <Grid container direction="row" alignItems="center" spacing={2}>
+            <StyledGridLabels item>
+              ESSE MÊS:
+            </StyledGridLabels>
+
+            <Grid item>
+              <Grid container direction="column">
+                <StyledGridNumbers item>
+                  {month_downloads}
+                </StyledGridNumbers>
+                <StyledGridLabels item>
+                  Baixados
+                </StyledGridLabels>
+              </Grid>
+            </Grid>
+
+            <Grid item>
+              <Grid container direction="column">
+                <StyledGridNumbers item>
+                  {month_publications}
+                </StyledGridNumbers>
+                <StyledGridLabels item>
+                  Publicados
+                </StyledGridLabels>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </StatsTab>
+  )
 
 }
 
@@ -87,74 +103,35 @@ const StatsTab = styled.div`
     padding : 20px 0;
     color : #fff;
     background-color : #00bcd4;
+    font-family: 'Roboto', sans-serif;
 `
-
-const StyledGrid = styled(Grid)`
-    vertical-align : middle !important;
-
-    .first {
-        display : flex !important;
-        @media screen and (max-width : 502px) {
-            justify-content : center !important;
-            border-bottom : 1px dotted #fff !important;
-            padding-bottom : 10px !important;
-        }
-        @media screen and (min-width : 502px) {
-            justify-content : right !important;
-            text-align : right !important;
-            border-right : 1px dotted #fff !important;
-        }
-
-        img {
-            height : 70px;
-        }
-
-    }
-
-    .total {
-        text-align : center;
-        display : inline-block;
-        line-height : 1;
-        padding : 0 20px;
-    }
-
-    .numeros {
-        display : block;
-        font-weight : 700;
-        font-size : 2.1em;
-    }
-
-    .legenda {
-        @media screen and (min-width : 502px) {
-            font-size : 1.285em;
-        }
-        font-weight : 300;
-    }
-
-    .title {
-        @media screen and (min-width : 502px) {
-            font-size : 1.42em;
-        }
-        line-height : 1;
-    }
-
-    .enviados {
-        text-align : center;
-        display : inline-block;
-        line-height : 1;
-        padding : 0 20px;
-    }
-
-    .second {
-        @media screen and (min-width : 502px) {
-            padding-left : 20px;
-        }
-        @media screen and (max-width : 502px) {
-            justify-content : center !important;
-            text-align : center !important;
-            padding-top : 10px !important;
-            font-size : 16px;
-        }
-    }
-
+const StyledDivider = styled.div`
+  border-bottom: 1px dotted white; 
+  width: 80%;
+  margin: 0 auto;  
+  height: 1px;
+  @media screen and (min-width : 670px) {
+    border-right: 1px dotted white; 
+    width: 1px; 
+    height: 70.3px; 
+  }
 `
+const StyledGridNumbers = styled(Grid)`
+  text-align: center; 
+  font-weight: 700;
+  font-size: 26px;
+  > p{
+    font-family: 'Roboto', sans-serif;
+  }
+  @media screen and (min-width : 406px) {
+    font-size: 3.571em;
+  }
+`
+
+const StyledGridLabels = styled(Grid)`
+  font-size: 16px; 
+  font-weight: 300;
+  @media screen and (min-width : 406px) {
+    font-size: 1.285em;
+  }
+`
\ No newline at end of file