diff --git a/dashboard-v1/css/botao.css b/dashboard-v1/css/botao.css
new file mode 100644
index 0000000..58fc74b
--- /dev/null
+++ b/dashboard-v1/css/botao.css
@@ -0,0 +1,3 @@
+button,a{
+    user-select: none;
+}
diff --git a/dashboard-v1/css/card.css b/dashboard-v1/css/card.css
new file mode 100644
index 0000000..a6a2d6a
--- /dev/null
+++ b/dashboard-v1/css/card.css
@@ -0,0 +1,41 @@
+/* Aparencia do botão tipo card*/
+button.cartao{
+    background-color: transparent;
+    border: solid 1px rgb(0 0 0 / 12%);
+    border-radius: 10px;
+    padding-inline: 1em;
+    padding-top: 0.8em;
+    padding-bottom: 0.5em;
+    margin-bottom: 1em;
+    margin-right: 0.5em;
+    text-align: left;
+    min-width: 11em;
+    
+    transition: color .15s ease-in-out, /*Adiciona transição entre a*/
+    background-color .2s ease-in-out,   /*mudança de cores*/ 
+    border-color .15s ease-in-out,
+    box-shadow .15s ease-in-out;
+}
+/*Borda azul ao cobrir com o mouse*/
+button.cartao:hover{
+    border: solid 1px #007bff;
+}
+/* fundo alaranjado ao clicar*/
+button.cartao:active {
+    background-color: rgb(0, 123, 255, 0.04);
+}
+
+.saldoNegativo{
+    color:#d93025 !important;
+} 
+.saldoNegativo::selection {
+    color: white;
+    background: #d93025;
+}
+.saldoPositivo{
+    color:#188038 !important;
+}
+.saldoPositivo::selection {
+    color: white;
+    background: #188038;
+}
\ No newline at end of file
diff --git a/dashboard-v1/css/home.css b/dashboard-v1/css/home.css
new file mode 100644
index 0000000..0791b47
--- /dev/null
+++ b/dashboard-v1/css/home.css
@@ -0,0 +1,18 @@
+.col-sm.centralizar{
+  max-width: fit-content;
+  margin-inline: auto;
+}
+.col-sm.fit{
+  max-width: fit-content;
+}
+
+div.container.home{
+  margin-top:3em;
+  max-width: 94%;
+}
+
+.prevent-select {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
\ No newline at end of file
diff --git a/dashboard-v1/css/navbar.css b/dashboard-v1/css/navbar.css
new file mode 100644
index 0000000..340f4e3
--- /dev/null
+++ b/dashboard-v1/css/navbar.css
@@ -0,0 +1,92 @@
+/* Mudar o visual da navbar(barra superior)*/
+.navbar.bg-light.barra{
+    background-color: white !important;
+    border-bottom: solid 1px rgb(0 0 0 / 12%);
+}
+
+/* Mudar o visual do botão de deslogar na navbar no canto direito*/
+.nav-link.logout{
+    font-weight: 500;
+    font-size: 1.2em;
+    color:#5d5d5d;
+}
+
+/* Esconde o segundo logout */
+/* Botão de logout que fica antes dos botões do meio*/
+/* É necessário em resoluções baixas, ex:smartphone */
+.nav-link.logout.antes{
+    display: none;
+}
+
+/*Botão de Logout vermelho ao cobrir com o mouse*/
+.nav-link.logout:hover{
+    color:#d93025;
+}
+
+/*Botão retornar para pagina anterior*/
+.nav-link.retornar{
+    font-weight: 500;
+    font-size: 1.2em;
+}
+/*Deixar o botão retornar mais ecuro ao cobrir com mouse*/
+.nav-link.retornar:hover{
+    color:#0e53ba;
+}
+
+/*Botões de seleção de página que ficam no centro da navbar*/
+.nav-item button.icone{
+    border: none;
+    background: none;
+    color: rgb(0 0 0 / 50%);
+    position: relative;
+    bottom: -8px;
+    min-width: 5em;
+}
+/*Indicador que o você já está na página*/
+.nav-item button.icone.selecionado{
+    color: rgb(0 0 0 / 90%);
+    border-bottom: solid 3px #E87830;
+}
+/*Escurecer ao cobrir com o mouse*/
+.nav-item button.icone:hover{
+    color: rgb(0 0 0 / 90%);
+}
+/*Remover margem para caber na navbar*/
+.nav-item button.icone > p{
+    margin: 0;
+}
+
+/*Centralizar o conteúdo da navbar*/
+/*Meio da tela*/
+.nav.centralizar{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* Resolucoes de smartphone grande */
+@media only screen and (max-width: 639px){
+    /*Centraliza na div*/
+    /*não no centro da tela*/
+    .nav.centralizar{
+        position: relative;
+        left: 0%;
+        transform: none;
+        margin-inline: auto;
+    }
+    /*Diminui a largura dos botoes*/
+    .nav-item button.icone{
+        min-width: 4em;
+    }
+}
+/* Resoluções de smartphone pequeno */
+@media only screen and (max-width: 513px){
+    /*Muda a posição do logout para*/
+    /*antes dos botões*/
+    .nav-link.logout{
+        display:none;
+    }
+    .nav-link.logout.antes{
+        display:initial;
+    }
+}
\ No newline at end of file
diff --git a/dashboard-v1/img/logo-navbar-otimizado.svg b/dashboard-v1/img/logo-navbar-otimizado.svg
new file mode 100644
index 0000000..c23215d
--- /dev/null
+++ b/dashboard-v1/img/logo-navbar-otimizado.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 132 41"><path fill="#eb4310" d="M20.5 20.5H5.1V0l15.4 7.7z"/><path fill="#fd6818" d="M20.5 20.5h15.4V0L20.5 7.7z"/><path fill="#fe6718" d="M0 24.3 20.5 41V7.7z"/><path fill="#ff8d05" d="M41 24.3 20.5 41V7.7z"/><defs><path id="a" d="M41 24.3 20.5 41V7.7z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path fill="#fac802" d="M41 20.5 20.5 33.9V41L41 24.3z" clip-path="url(#b)"/><defs><path id="c" d="M0 24.3 20.5 41V7.7z"/></defs><clipPath id="d"><use xlink:href="#c" overflow="visible"/></clipPath><path fill="#fd9307" d="m0 20.5 20.5 13.4V41L0 24.3z" clip-path="url(#d)"/><path d="M54.6 14.6h-6.2v5.5h5.7v1.7h-5.7v7h-1.9V12.9h8.1v1.7zm3.5-.1c-.3 0-.6-.1-.8-.3s-.3-.5-.3-.8.1-.6.3-.8.5-.3.8-.3.6.1.8.3.3.5.3.8-.1.6-.3.8-.4.3-.8.3zm.9 11.1c0 1 .4 1.6 1.2 1.6.3 0 .6 0 .9-.1v1.6c-.1 0-.3.1-.6.1h-.7c-.4 0-.7-.1-1-.2s-.6-.3-.8-.5-.4-.5-.6-.9c-.1-.4-.2-.8-.2-1.3v-8.5H59v8.2zm13.5 3.2h-1.8v-6.5c0-2.4-.9-3.6-2.6-3.6-.9 0-1.7.3-2.3 1-.6.7-.9 1.5-.9 2.6v6.5h-1.8V17.4h1.8v1.9c.9-1.4 2.1-2.1 3.7-2.1 1.2 0 2.2.4 2.8 1.2s1 2 1 3.5v6.9h.1zm3.7 0V12.9h4.4c5.6 0 8.4 2.6 8.4 7.7 0 2.5-.8 4.4-2.3 5.9-1.6 1.5-3.6 2.2-6.2 2.2h-4.3v.1zM78 14.6v12.5h2.4c2.1 0 3.7-.6 4.9-1.7s1.7-2.7 1.7-4.7c0-4.1-2.2-6.1-6.5-6.1H78zm21.9 14.2h-1.8V27c-.8 1.4-2 2-3.5 2a4 4 0 0 1-2.7-.9c-.6-.6-1-1.4-1-2.4 0-2.1 1.2-3.4 3.7-3.7l3.4-.5c0-1.9-.8-2.9-2.3-2.9-1.4 0-2.6.5-3.7 1.4v-1.9c1.1-.7 2.4-1.1 3.9-1.1 2.7 0 4 1.4 4 4.2v7.6zM98.1 23l-2.7.4c-.8.1-1.5.3-1.9.6-.4.3-.6.8-.6 1.6 0 .6.2 1 .6 1.4s.9.5 1.6.5c.9 0 1.6-.3 2.2-.9s.9-1.4.9-2.4l-.1-1.2zm4.6 5.4v-1.9c1 .7 2.1 1.1 3.3 1.1 1.6 0 2.4-.5 2.4-1.6 0-.3-.1-.6-.2-.8-.1-.2-.3-.4-.6-.6-.2-.2-.5-.3-.8-.4s-.7-.3-1-.4c-.5-.2-.9-.4-1.3-.6s-.7-.4-1-.7c-.3-.3-.4-.5-.6-.9-.1-.3-.2-.7-.2-1.1 0-.5.1-1 .4-1.4.2-.4.6-.8 1-1s.9-.5 1.4-.6 1.1-.2 1.6-.2c1 0 1.9.2 2.6.5v1.8c-.8-.5-1.8-.8-2.9-.8-.3 0-.6 0-.9.1s-.5.2-.7.3c-.2.1-.3.3-.5.5-.1.2-.2.4-.2.6 0 .3.1.5.2.7s.3.4.5.5c.2.2.5.3.8.4s.6.3 1 .4c.5.2 1 .4 1.4.6s.7.4 1 .7.5.5.6.9.2.7.2 1.2c0 .6-.1 1-.4 1.5-.2.4-.6.8-1 1-.4.3-.9.5-1.4.6s-1.1.2-1.7.2c-1.1 0-2.2-.2-3-.6zm19.7.4h-1.8v-6.5c0-2.4-.9-3.5-2.6-3.5-.9 0-1.6.3-2.2 1s-.9 1.6-.9 2.6v6.4H113V12h1.8v7.3c.9-1.4 2.1-2.1 3.7-2.1 2.6 0 3.8 1.5 3.8 4.6l.1 7z"/></svg>
\ No newline at end of file
diff --git a/dashboard-v1/index.html b/dashboard-v1/index.html
new file mode 100644
index 0000000..dc66db3
--- /dev/null
+++ b/dashboard-v1/index.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+    <head>
+        <title>Início</title>
+
+        <meta charset="utf-8">
+        <!-- Melhoria da visualização em smartphones -->
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!--Bootstrap -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js" integrity="sha512-5BqtYqlWfJemW5+v+TZUs22uigI8tXeVah5S/1Z6qBLVO7gakAOtkOzUtgq6dsIo5c0NJdmGPs0H9I+2OHUHVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css" integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+
+        <!-- Carregar Chart JS -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+        <!-- Ícones -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+        <link rel="stylesheet" href="./css/botao.css">
+        <link rel="stylesheet" href="./css/navbar.css">
+        <link rel="stylesheet" href="./css/home.css">
+        <link rel="stylesheet" href="./css/card.css">
+        
+    </head>
+
+<body>
+
+<nav class="navbar navbar-light bg-light barra"> <!-- Barra superior -->
+  <a class="navbar-brand" > <!--logotipo-->
+      <img style="margin-left: 1em;" src="./img/logo-navbar-otimizado.svg" height="41" alt="">
+    </a>
+
+    <ul class="nav centralizar"> <!-- Botões do meio da barra de cima -->
+      <li class="nav-item">
+        <button class="icone selecionado">
+         <i class="fa-solid fa-chart-column"></i> <!-- icone -->
+         <p>Dashboard</p>
+        </button>
+      </li>
+
+      <li class="nav-item" style="display: none;">
+        <button onclick="window.location.href='../fluxo/';" class="icone">
+         <i class="fa-solid fa-cash-register"></i>
+         <p>Fluxo</p>
+        </button>
+      </li>
+
+      <li class="nav-item" style="display: none;">
+        <button onclick="window.location.href='../custo/';" class="icone">
+         <i class="fa-solid fa-money-bill-transfer"></i>
+         <p>Custo</p>
+        </button>
+      </li>
+
+      <li class="nav-item" style="display: none;">
+        <button onclick="window.location.href='../analise/';" class="icone">
+         <i class="fa-solid fa-chart-column"></i>
+         <p>Análise</p>
+        </button>
+      </li>
+
+    </ul> <!--Fim de "Botões do meio da barra de cima" -->
+
+</nav><!-- Fim da "Barra superior" -->
+
+<div class="container home">
+  <div class="row">
+    <button class="col-sm cartao" >
+      <h6 id="fluxoDeCaixaMensalDate"></h6>
+      <h6>Fluxo de Caixa Mensal:</h6>
+      <h4 id="fluxoDeCaixaMensal" class="saldo saldoPositivo" style="margin-bottom:1em;"></h4>
+    </button>
+
+    <button class="col-sm cartao" >
+      <h6 id="fluxoDeCaixaTrimestralDate"></h6>
+      <h6>Média do fluxo de caixa mensal no trimestre:</h6>
+      <h4 id="fluxoDeCaixaTrimestral" class="saldo saldoPositivo" style="margin-bottom:1em;"></h4>
+    </button>
+
+    <button class="col-sm cartao" >
+      <h6 id="fluxoDeCaixaAnualDate"></h6>
+      <h6>Média do fluxo de caixa mensal no ano:</h6>
+      <h4 id="fluxoDeCaixaAnual" class="saldo saldoPositivo" style="margin-bottom:1em;"></h4>
+    </button>
+    
+    <button class="col-sm cartao" >
+      <h6 id="saldoMensalDate"></h6>
+      <h6>Saldo mensal:</h6>
+      <h4 id="saldoMensal" class="saldo saldoPositivo"></h4>
+    </button>
+
+    <button class="col-sm cartao" >
+      <h6 id="saldoTrimestralDate"></h6>
+      <h6>Média de saldo mensal no trimestre:</h6>
+      <h4 id="saldoTrimestral" class="saldo saldoPositivo"></h4>
+    </button>
+
+    <button class="col-sm cartao" >
+      <h6 id="saldoAnualDate"></h6>
+      <h6>Média de saldo mensal no ano:</h6>
+      <h4 id="saldoAnual"class="saldo saldoPositivo"></h4>
+    </button>
+
+  </div>
+
+  <canvas id="exemploGrafico" style="max-height:18em;"></canvas>
+
+</div>
+
+</body>
+</html>
+
+<script>
+// dados do gráfico
+
+//receber string do parametro de url data
+const urlParams = new URLSearchParams(window.location.search);
+const urlDataBase64 = urlParams.get('data');
+//converter urlDataBase64 de base64 para string
+const urlDataString = atob(urlDataBase64);
+//printar
+console.log(urlDataString);
+
+try {
+  //converter string para objeto
+  JSON.parse(urlDataString);
+} catch (error) {
+  alert('Erro ao carregar dados');
+  //redirecionar para google.com
+  window.location.href = 'https://www.google.com';
+}
+
+const data = {
+  labels: cash.map(item => item.date),
+  datasets: [
+  {
+    label: 'Saldo',
+    data: cash.map(item => item.balance),
+    borderColor: 	'#E87830',
+    borderWidth: 3
+  },
+  {
+    label: 'Fluxo de caixa contabilizado',
+    data: cash.map(item => item.cash),
+    borderColor: 	'#2768df',
+    borderWidth: 4
+  },
+  {
+    label: 'Fluxo de caixa previsto',
+    data: cash.map(item => item.predictedCash),
+    borderColor: 	'#ffd600',
+    borderWidth: 3
+  },
+]};
+// configurar
+const config = {type: 'line', data};
+// Adicionar gráfico na página
+const graficoExemlo = new Chart(
+  document.getElementById('exemploGrafico'),
+  config
+);
+
+function updateInfo(months, id,idDate, type){
+  const items = cash.slice(-months);
+  const media = items.reduce((soma, item) => soma + item[type], /*soma inicia em:*/0) / items.length;
+  document.getElementById(id).innerText = `R$: ${media.toFixed(2)}`;
+  document.getElementById(idDate).innerText = `${items[0].date} - ${items[items.length-1].date}`;
+  if(media < 0){
+    document.getElementById(id).classList.replace('saldoPositivo','saldoNegativo');
+  }
+}
+
+//atualizar o saldo médio do ultimo  mes
+updateInfo(1, 'saldoMensal', 'saldoMensalDate', 'balance');
+
+//atualizar o saldo médio dos ultimos 3 meses
+updateInfo(3, 'saldoTrimestral', 'saldoTrimestralDate', 'balance');
+
+//atualizar o saldo médio dos ultimos 12 meses
+updateInfo(12, 'saldoAnual', 'saldoAnualDate', 'balance');
+
+//atualizar o fluxo de caixa médio do ultimo  mes
+updateInfo(1, 'fluxoDeCaixaMensal', 'fluxoDeCaixaMensalDate', 'cash');
+
+//atualizar o fluxo de caixa médio dos ultimos 3 meses
+updateInfo(3, 'fluxoDeCaixaTrimestral', 'fluxoDeCaixaTrimestralDate', 'cash');
+
+//atualizar o fluxo de caixa médio dos ultimos 12 meses
+updateInfo(12, 'fluxoDeCaixaAnual', 'fluxoDeCaixaAnualDate', 'cash');
+
+</script>
+