diff --git a/view/src/components/SideBar/SideBar.css b/view/src/components/SideBar/SideBar.css
index e896a14..a1399c0 100644
--- a/view/src/components/SideBar/SideBar.css
+++ b/view/src/components/SideBar/SideBar.css
@@ -17,7 +17,7 @@
   }
 
 .embaixo{
-    margin-top: 310px;
+    margin-top: 10px;
     display: flex;
     flex-direction: column;
 
@@ -25,5 +25,5 @@
 
 .edraLogo{
     margin-left: 100%;
-    padding: 0px 1000px;
+    /*padding: 0px 1000px;*/
 }
\ No newline at end of file
diff --git a/view/src/components/SideBar/index.jsx b/view/src/components/SideBar/index.jsx
index b58b1b3..145b2cd 100644
--- a/view/src/components/SideBar/index.jsx
+++ b/view/src/components/SideBar/index.jsx
@@ -27,7 +27,7 @@ function SideBar(){
                 </nav>
 
                 <nav className="embaixo">
-                <Link to='/login'>
+                <Link to='/'>
                     <img src="logout.svg" alt="logout" class="sidebar-image img-logout"/>
                 </Link>
 
diff --git a/view/src/pages/Finance/Finance.css b/view/src/pages/Finance/Finance.css
index 494b3a6..e6febb8 100644
--- a/view/src/pages/Finance/Finance.css
+++ b/view/src/pages/Finance/Finance.css
@@ -1,43 +1,152 @@
-.container{
-    width:100%;
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-  
-  .container img {
-    height:500px
-  }
-  
-  .container p {
-    font-size: 18px;
-  }
-  
-  .container span{
-    color: purple;
-  }
-  
-  .btn {
-    width: 250px;
-    height: 100px;
-    font-size: 25px;
-    font-weight: bold;
-    border: 0;
-    border-radius: 18px;
-    color: #fdfdfd;
-    background-color: #414191;
-    cursor: pointer;
-  }
-  
-  .btn:hover{
-    text-decoration: underline;
-  }
-
-  #paginaFinance{
-    background-color: #414191;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+body {
+  font-family: 'Poppins', monospace;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#paginaFinance {
+  background-color: #fdfdfd;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #070606;
+  padding: 20px;
+}
+
+.financeTitulo {
+  margin-bottom: 2rem;
+  text-align: center;
+  font-size: 2.5rem;
+  color: #070606;
+}
+
+.img-text-container2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 2rem;
+}
+
+.caixa {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 1rem;
+  margin: 0 10px;
+  color: #070606; /* Altere a cor do texto dentro das caixas para preto */
+}
+
+.caixa label {
+  margin-bottom: 5px;
+}
+
+.caixa select {
+  width: 150px;
+  padding: 5px;
+  border-radius: 5px;
+  border: none;
+  font-size: 1rem;
+}
+
+.financeCorpo {
+  width: 80%;
+  background-color: #d2d3e4fa;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.336);
+  margin-bottom: 2rem;
+  color: #070606;
+}
+
+.financeCorpo h2, .financeCorpo h3 {
+  margin: 0 0 1rem 0;
+}
+
+.financeCorpo ul {
+  list-style: none;
+  padding: 0;
+}
+
+.financeCorpo li {
+  margin-bottom: 0.5rem;
+}
+
+.botao-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.botao {
+  font-size: 1.25rem;
+  width: 200px;
+  padding: 10px;
+  font-weight: bold;
+  border: none;
+  border-radius: 18px;
+  color: #fdfdfd;
+  background-color: #3a8ebb;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.botao:hover {
+  background-color: #2a6b9b;
+  text-decoration: underline;
+}
+
+.popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #d2d3e4fa;
+  padding: 20px;
+  width: 550px;
+  border-radius: 8%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.336);
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  color: black;
+}
+
+.close {
+  font-size: 1.5rem;
+  cursor: pointer;
+  align-self: flex-end;
+}
+
+.caixa input[type="text"], .caixa input[type="number"], .caixa select {
+  width: calc(100% - 10px);
+  background-color: #fdfdfd;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 1rem;
+  margin-bottom: 10px;
+  color: black;
+}
+
+.popup form {
+  display: flex;
+  flex-direction: column;
+}
+
+.popup .botao {
+  margin-top: 10px;
+  align-self: center;
+}
+
+.popup label {
+  color: black; /* Ensure labels inside popup are black */
+}
diff --git a/view/src/pages/Finance/index.jsx b/view/src/pages/Finance/index.jsx
index 5f6c4f5..17fb75e 100644
--- a/view/src/pages/Finance/index.jsx
+++ b/view/src/pages/Finance/index.jsx
@@ -1,16 +1,143 @@
-import React, {useState} from "react";
+import React, { useState, useEffect } from "react";
 import './Finance.css';
-import SideBar from "../../components/SideBar"
+import SideBar from "../../components/SideBar";
 
-function Finance(){
-    
-    return(
-        <>
+function Finance() {
+  const [showPopup, setShowPopup] = useState(false);
+  const [ano, setAno] = useState('2024');
+  const [mes, setMes] = useState('Junho');
+  const [acao, setAcao] = useState('');
+  const [valor, setValor] = useState('');
+  const [tipo, setTipo] = useState('Entrada');
+  const [acoes, setAcoes] = useState([]);
+  const [saldo, setSaldo] = useState(0);
 
-        <SideBar/>
-        
-        </>
-    )
+  useEffect(() => {
+    calcularSaldo();
+  }, [acoes]);
+
+  const handleAnoChange = (e) => {
+    setAno(e.target.value);
+  };
+
+  const handleMesChange = (e) => {
+    setMes(e.target.value);
+  };
+
+  const handleAcaoChange = (e) => {
+    setAcao(e.target.value);
+  };
+
+  const handleValorChange = (e) => {
+    setValor(e.target.value);
+  };
+
+  const handleTipoChange = (e) => {
+    setTipo(e.target.value);
+  };
+
+  const handleImageClick = () => {
+    setShowPopup(true);
+  };
+
+  const handleClosePopup = () => {
+    setShowPopup(false);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const novaAcao = {
+      ano,
+      mes,
+      acao,
+      valor: parseFloat(valor),
+      tipo
+    };
+    setAcoes([...acoes, novaAcao]);
+    setShowPopup(false);
+    setAcao('');
+    setValor('');
+  };
+
+  const calcularSaldo = () => {
+    let total = 0;
+    acoes.forEach(acao => {
+      if (acao.tipo === 'Entrada') {
+        total += acao.valor;
+      } else if (acao.tipo === 'Saída') {
+        total -= acao.valor;
+      }
+    });
+    setSaldo(total);
+  };
+
+  return (
+    <>
+      <SideBar />
+      <div id="paginaFinance">
+        <div className='financeTitulo'>
+          <h1>Financeiro</h1>
+        </div>
+        <div className='img-text-container2'>
+          <div className='caixa'>
+            <label htmlFor="ano">Ano:</label>
+            <select id="ano" value={ano} onChange={handleAnoChange}>
+              {Array.from({ length: 11 }, (_, i) => 2020 + i).map(year => (
+                <option key={year} value={year}>{year}</option>
+              ))}
+            </select>
+          </div>
+          <div className='caixa'>
+            <label htmlFor="mes">Mês:</label>
+            <select id="mes" value={mes} onChange={handleMesChange}>
+              {['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'].map(month => (
+                <option key={month} value={month}>{month}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className='financeCorpo'>
+          <h2>{mes} - Ações:</h2>
+          <ul>
+            {acoes.filter(acao => acao.mes === mes && acao.ano === ano).map((acao, index) => (
+              <li key={index}>
+                {acao.tipo}: {acao.acao} - R$ {acao.valor.toFixed(2)}
+              </li>
+            ))}
+          </ul>
+          <h3>Saldo Atual: R$ {saldo.toFixed(2)}</h3>
+          <div className="botao-container">
+            <button className='botao' onClick={handleImageClick}>Adicionar Entrada/Saída</button>
+          </div>
+        </div>
+        {showPopup && (
+          <div className="popup">
+            <div className="popup-content">
+              <span className="close" onClick={handleClosePopup}>&times;</span>
+              <form onSubmit={handleSubmit}>
+                <div className='caixa'>
+                  <label htmlFor="acao">Ação:</label>
+                  <input type="text" id="acao" value={acao} onChange={handleAcaoChange} required />
+                </div>
+                <div className='caixa'>
+                  <label htmlFor="valor">Valor:</label>
+                  <input type="number" step="0.01" id="valor" value={valor} onChange={handleValorChange} required />
+                </div>
+                <div className='caixa'>
+                  <label htmlFor="tipo">Tipo:</label>
+                  <select id="tipo" value={tipo} onChange={handleTipoChange}>
+                    <option value="Entrada">Entrada</option>
+                    <option value="Saída">Saída</option>
+                  </select>
+                </div>
+                <button type="submit" className='botao'>Salvar</button>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
 }
 
-export default Finance ; 
\ No newline at end of file
+export default Finance;