diff --git a/Back-end/app.js b/Back-end/app.js
index cb5a265..a0ba01f 100644
--- a/Back-end/app.js
+++ b/Back-end/app.js
@@ -24,7 +24,7 @@ db.connect((err) => {
 
 app.use(express.json());
 
-// Rota de cadastro
+// Rota de cadastr
 app.post('/signup', async (req, res) => {
   const { username, password } = req.body;
 
diff --git a/Front-end/src/Pages/Cadastro/index.jsx b/Front-end/src/Pages/Cadastro/index.jsx
index d5d5d8e..c26cc7b 100644
--- a/Front-end/src/Pages/Cadastro/index.jsx
+++ b/Front-end/src/Pages/Cadastro/index.jsx
@@ -7,7 +7,7 @@ const Cadastro = () => {
     <div className="mainCadastro">
       <section className="CadastroInfo">
         <CadastroInfo/>
-        <img className="Baleia" src="https://raw.githubusercontent.com/Xuan002/Naut-Bank-/main/src/assets/logo/logo-removebg-preview.svg" alt="baleia do Naut'Bank" />
+        
       </section>
 
     <div class="linha-vertical"></div>
diff --git a/Front-end/src/Pages/Cadastro/style.css b/Front-end/src/Pages/Cadastro/style.css
index cac595b..073e87a 100644
--- a/Front-end/src/Pages/Cadastro/style.css
+++ b/Front-end/src/Pages/Cadastro/style.css
@@ -1,31 +1,45 @@
 .mainCadastro {
-  color: #E5E5E5;
+  position: relative;
+  color: #0a0a0a;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .CadastroInfo {
-  margin-top: 10vw;
+  position: relative;
+  z-index: 2;
+  margin-top: 29vw;
   margin-left: 8vw;
 }
 
-.Cadastro {
-  margin-top: 3vw;
-  margin-right: 8vw;
+.CardC {
+  position: relative;
+  margin-left: 5vw;
+  width: 420px;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  flex-direction: column;
+  padding: 40px 10px;
+  background:#f8f7f7 ;
+  border-radius: 30px;
+  box-shadow: 0px 10px 40px #00000056;
 }
 
-.Baleia {
-  position: absolute;
-  top: 240px;
-  left: 380px;
-  height: 34vw;
+.Cadastro {
+  position: relative;
+  margin-top: 10vw;
+  margin-right: 38vw;
 }
 
+
 .linha-vertical {
-  height: 500px;
-  border-right: 3px solid #1E40AF;
-  margin-top: 100px;
+  position: absolute;
+  margin-top: 300px;
+  width: 100%;
+  border-top:  350px solid ;
+  color: #853535;
 }
 
 
diff --git a/Front-end/src/Pages/Login/index.jsx b/Front-end/src/Pages/Login/index.jsx
index 0fd16aa..7e02c10 100644
--- a/Front-end/src/Pages/Login/index.jsx
+++ b/Front-end/src/Pages/Login/index.jsx
@@ -5,13 +5,14 @@ import "./style.css"
 
 const Login = () => {
   return ( 
+    
     <div className="mainLogin">
       <section className="LoginInfo">
        <LoginInfo />
-       <img className="Baleia" src="src\Pages\Login\baleia.svg" alt="baleia do Naut'Bank"  />
       </section>
 
       <div class="linha-vertical2"></div>
+      
     <div class="container">
       <section className="Login">
         <LoginForm />
diff --git a/Front-end/src/Pages/Login/style.css b/Front-end/src/Pages/Login/style.css
index c926876..c52cad1 100644
--- a/Front-end/src/Pages/Login/style.css
+++ b/Front-end/src/Pages/Login/style.css
@@ -1,35 +1,73 @@
 :root {
-  --cor-escura: #333;
+  --cor-escura: #333333;
   --cor-clara: #E5E5E5;
-  --cor-link: #1E40AF;
+  --cor-link: #3e1adf;
 }
 
+
 .mainLogin {
+  position: relative;
   color: var(--cor-clara);
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
   background-color: var(--cor-escura); /* Cor de fundo escura */
+  width: 100vw;
+  height: 100vh;
+  
 }
 
 .LoginInfo {
-  margin-top: 10vw;
-  margin-left: 8vw;
+  z-index: 2;
+  width: 40vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  
+}
+
+.CardL{
+  position: relative;
+  margin-left: 5vw;
+  width: 420px;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+  flex-direction: column;
+  padding: 40px 10px;
+  background:#f8f7f7 ;
+  border-radius: 30px;
+  box-shadow: 0px 10px 40px #00000056;
+  
 }
 
 .Login {
-  margin-top: 5vw;
-  margin-right: 8vw;
+  position: relative;
+  width: 50vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: start;
+  flex-direction: column;
+  
 }
 
+
 .Baleia {
   width: 35%;
 }
 
 .linha-vertical2 {
-  height: 500px;
-  border-right: 3px solid var(--cor-link);
-  margin-top: 100px;
+  position: absolute;
+  width: 100%;
+  border-top:  350px solid ;
+  color: #853535;
+  
+  
+    
 }
 
 @media (max-width: 1340px) {
@@ -50,7 +88,7 @@
 }
 
 @media (max-width: 720px) {
-  .Baleia,
+  
   .mainLogin .linha-vertical2 {
       display: none;
   }
diff --git a/Front-end/src/components/LoginForm/index.jsx b/Front-end/src/components/LoginForm/index.jsx
index beef9ce..664aa80 100644
--- a/Front-end/src/components/LoginForm/index.jsx
+++ b/Front-end/src/components/LoginForm/index.jsx
@@ -16,7 +16,9 @@ const LoginForm = () => {
         }
         
     }
+  
     return ( 
+       <div className="CardL"> 
         <div className="loginForm">
             <h2>Entrar</h2>
             <CampoTexto className="CampoEmail" type="text" placeholder="Digite o seu E-mail"/>
@@ -24,8 +26,10 @@ const LoginForm = () => {
             <a><Link to="/cadastro">Esqueceu sua senha</Link></a>
             <Botao funcao={handleSubmit} texto="Entrar"/>
            
+           
             
         </div>
+       </div> 
      );
 }
  
diff --git a/Front-end/src/components/LoginForm/loginForm.css b/Front-end/src/components/LoginForm/loginForm.css
index caf0056..b0e6019 100644
--- a/Front-end/src/components/LoginForm/loginForm.css
+++ b/Front-end/src/components/LoginForm/loginForm.css
@@ -13,10 +13,11 @@
     font-size: 30px;
     line-height: 45px;
     color: #fff; /* Cor do texto branca */
+    border-radius: 1000px;
 }
 
 .CampoEmail {
-    margin-bottom: 30px;
+    margin-bottom: 50px;
 }
 
 .loginForm a {
diff --git a/Front-end/src/components/LoginInfo/loginInfo.css b/Front-end/src/components/LoginInfo/loginInfo.css
index fc44e40..b83b888 100644
--- a/Front-end/src/components/LoginInfo/loginInfo.css
+++ b/Front-end/src/components/LoginInfo/loginInfo.css
@@ -1,6 +1,6 @@
 :root {
     --cor-texto: #E5E5E5;
-    --cor-link: #1E40AF;
+    --cor-link: #080808;
 }
 
 .loginInfo h1 {
@@ -44,6 +44,6 @@
     font-weight: 600;
     font-size: 16px;
     line-height: 24px;
-    color: var(--cor-link);
+    color: #1a1919;
     cursor: pointer;
 }
diff --git a/Front-end/src/components/cadastroForm/index.jsx b/Front-end/src/components/cadastroForm/index.jsx
index e5a5df3..d2ab80e 100644
--- a/Front-end/src/components/cadastroForm/index.jsx
+++ b/Front-end/src/components/cadastroForm/index.jsx
@@ -10,15 +10,17 @@ const CadastroForm = () => {
         navigate('/')
     }
     return ( 
-        <div className="cadastroForm">
-            <h2>Cadastra-se</h2>
-            <CampoTexto className="CampoTexto" type="text" placeholder="E-mail"/>
-            <CampoTexto className="CampoTexto" type="text" placeholder="nome e sobrenome"/>
-            <CampoTexto className="CampoTexto" type="text" placeholder="CPF"/>
-            <CampoTexto className="CampoTexto" type="text" placeholder="senha"/>
-            <CampoTexto className="CampoTexto" type="text" placeholder="Confirme a senha"/>
-            <Botao funcao={handleClick} texto="Registrar"/>
+        <div className="CardC">
+            <div className="cadastroForm">
+                <h2>Cadastra-se</h2>
+                <CampoTexto className="CampoTexto" type="text" placeholder="E-mail"/>
+                <CampoTexto className="CampoTexto" type="text" placeholder="nome e sobrenome"/>
+                <CampoTexto className="CampoTexto" type="text" placeholder="CPF"/>
+                <CampoTexto className="CampoTexto" type="text" placeholder="senha"/>
+                <CampoTexto className="CampoTexto" type="text" placeholder="Confirme a senha"/>
+                <Botao funcao={handleClick} texto="Registrar"/>
            
+            </div>
         </div>
      );
 }
diff --git a/Front-end/src/components/cadastroInfo/cadastroInfo.css b/Front-end/src/components/cadastroInfo/cadastroInfo.css
index eb10aaf..5634a2c 100644
--- a/Front-end/src/components/cadastroInfo/cadastroInfo.css
+++ b/Front-end/src/components/cadastroInfo/cadastroInfo.css
@@ -1,4 +1,5 @@
 
+
 .cadastroInfo h1{
     font-family: 'Poppins';
     font-style: normal;
diff --git a/Front-end/src/components/cadastroInfo/index.jsx b/Front-end/src/components/cadastroInfo/index.jsx
index 2b2812a..14e4a40 100644
--- a/Front-end/src/components/cadastroInfo/index.jsx
+++ b/Front-end/src/components/cadastroInfo/index.jsx
@@ -3,11 +3,8 @@ import "./cadastroInfo.css"
 const CadastroInfo = () => {
     return ( 
         <div className="cadastroInfo">
-            <h1>Bem-vindo a bordo do Naut Bank!</h1>
-            <h2>Insira suas credenciais para embarcar em sua jornada financeira.</h2>
-            <p>Se você tem uma conta</p>
             <div className="login">
-                <p>Você pode</p> 
+                <p>Se você tem uma conta você pode</p> 
                 <a><Link to="/">Entre aqui!</Link></a>
             </div>
         </div>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..de4cc03
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Naut-Bank",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}