diff --git a/.example b/.example
index 23a1471..515bb00 100644
--- a/.example
+++ b/.example
@@ -1,2 +1,2 @@
-REACT_APP_API_URL=
+NEXT_PUBLIC_API_URL=
 PORT=
\ No newline at end of file
diff --git a/app/Components/Login/Login.tsx b/app/Components/Login/Login.tsx
index b6064cd..f825448 100644
--- a/app/Components/Login/Login.tsx
+++ b/app/Components/Login/Login.tsx
@@ -12,7 +12,7 @@ function Login() {
         e.preventDefault();
 
         try {
-            const response = await axios.post("http://localhost:5000/user", {
+            const response = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/user`, {
                 usuario: user,
                 password: password,
             });
@@ -64,8 +64,8 @@ function Login() {
                     type='submit'
                 >Iniciar sesión
                 </button>
-            </form>
-            {message &&
+
+                            {message &&
                 <div
                     className={`messageBox ${message.includes('exitoso') ? 'success' : 'error'}`}
                     style={{ marginTop: '10px' }}
@@ -73,6 +73,7 @@ function Login() {
                     {message}
                 </div>
             }
+            </form>
         </section>
     );
 }
diff --git a/app/globals.css b/app/globals.css
index 3db7098..6e3aa7e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -358,6 +358,35 @@ table tr {
   align-items: center;
 }
 
+.messageBox {
+  position: relative;
+  padding: 0.5rem 1.25rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 1.5rem;
+  text-align: center;
+  opacity: 1;
+  z-index: 100;
+}
+
+.messageBox.hidden {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 1s ease-out;
+}
+
+.success {
+  background-color: #d1f7c4;
+  color: #000000;
+  border: 1px solid #a5d6a7;
+}
+
+.error {
+  background-color: #ffcdd2;
+  color: #000000;
+  border: 1px solid #ef9a9a;
+}
+
 @media (max-width: 800px) {
   header {
     padding: 6px 16px;