diff --git a/.env b/.env
index b695eaa..40d27cd 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-API_URL = localhost 3000
+API_URL = localhost:3000
 PORT = 3001
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 5884d3b..6525144 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,48 +1,32 @@
+/* src/App.css */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f0f2f5; /* Color de fondo para contraste */
+}
+
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  align-items: center;
+  padding: 20px;
 }
 
 form {
   max-width: 300px;
   margin: auto;
-  padding: 1em;
-  border: 1px solid #ccc;
+  padding: 2em;
   border-radius: 1em;
+  background: white;
+  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1); /* Sombra para la caja del formulario */
 }
 
 div {
@@ -62,6 +46,15 @@ input[type="password"] {
   font-size: 1em;
   width: 100%;
   box-sizing: border-box;
+  border-radius: 0.5em; /* Bordes redondeados */
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.1); /* Sombra interna y externa para inputs */
+  transition: box-shadow 0.3s ease; /* Transición para un efecto suave */
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+  box-shadow: 0 0 8px 2px rgba(0, 123, 255, 0.5); /* Sombra al enfocar */
+  outline: none; /* Eliminar borde al enfocar */
 }
 
 button {
@@ -71,12 +64,20 @@ button {
   border: none;
   border-radius: 1em;
   cursor: pointer;
+  width: 100%;
+  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1); /* Sombra para el botón */
+  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transiciones para un efecto suave */
 }
 
 button:hover {
   background-color: #0056b3;
+  box-shadow: 0 6px 12px 4px rgba(0, 0, 0, 0.2); /* Sombra al pasar el mouse */
 }
 
 input[type="checkbox"] {
   margin-right: 0.5em;
 }
+
+footer {
+  margin-top: auto;
+}
diff --git a/src/App.js b/src/App.js
index 579580e..3791e27 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,17 @@
 import React from 'react';
-import './App.css';
+import Header from './Header';
+import Footer from './Footer';
 import LoginForm from './LoginForm';
+import './App.css'; // Importa el archivo de estilos globales
 
 const App = () => {
   return (
-    <div>
-      <h1>Página de Login</h1>
-      <LoginForm />
+    <div className="App">
+      <Header />
+      <div className="main-content">
+        <LoginForm />
+      </div>
+      <Footer />
     </div>
   );
 };
diff --git a/src/Footer.css b/src/Footer.css
new file mode 100644
index 0000000..4dca5a6
--- /dev/null
+++ b/src/Footer.css
@@ -0,0 +1,16 @@
+/* src/Footer.css */
+.footer {
+    background-color: #0056b3;
+    color: white;
+    padding: 10px 0;
+    text-align: center;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+  }
+  
+  .footer .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
\ No newline at end of file
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 0000000..92e75a2
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import './Footer.css';
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="container">
+        <p>Hecho en México. Todos los derechos reservados 2024.
+
+Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente
+
+completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/Header.css b/src/Header.css
new file mode 100644
index 0000000..29a3a29
--- /dev/null
+++ b/src/Header.css
@@ -0,0 +1,18 @@
+.header {
+    background-color: #0056b3;
+    padding: 20px 0;
+    text-align: center;
+  }
+  
+  .header .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px; /* Espaciado entre las imágenes */
+  }
+  
+  .header .logo {
+    filter:invert(1);
+    max-height: 100px; /* Ajusta el tamaño según sea necesario */
+    margin: 0 340px; /* Espaciado alrededor de las imágenes */
+  }
\ No newline at end of file
diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 0000000..4e98221
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './Header.css'; // Asegúrate de crear y ajustar el archivo CSS
+
+const Header = () => {
+  return (
+    <header className="header">
+      <div className="container">
+        <img src="https://posgrado.unam.mx/filosofia/wp-content/themes/posgrado/img/UNAM.png" alt="Logo 1" className="logo" />
+        <img src="https://www.acatlan.unam.mx/identidad-acatlan/img/Logotipos/Logotipo/logo-negroBis.png" alt="Logo 2" className="logo" />
+      </div>
+    </header>
+  );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/LoginForm.js b/src/LoginForm.js
index 0568f5e..32e6e52 100644
--- a/src/LoginForm.js
+++ b/src/LoginForm.js
@@ -19,6 +19,7 @@ const LoginForm = () => {
       });
       console.log(response)
       console.log(process.env.API_URL)
+
       if (!response.ok) {
         throw new Error('Error en la solicitud');
       }