diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx
index 64368d2..4eb8832 100644
--- a/app/(private)/layout.tsx
+++ b/app/(private)/layout.tsx
@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-import { PrivateRoute } from "../Routes/PrivateRoute";
 import BarNavigation from "../Components/BarNavigation/BarNavigation";
 import Logout from "../Components/Logout/Logout";
 
@@ -8,7 +7,7 @@ export default function PrivateLayout({ children }: { children: ReactNode }) {
     <div className="mainContainer">
       <BarNavigation />
       <div className="container">
-        <Logout/>
+        <Logout />
         <div className="img"></div>
         {children}
       </div>
diff --git a/app/Components/AlertBox/AlertBox.css b/app/Components/AlertBox/AlertBox.css
index f33818d..894252f 100644
--- a/app/Components/AlertBox/AlertBox.css
+++ b/app/Components/AlertBox/AlertBox.css
@@ -1,3 +1,26 @@
+/* Animaciones */
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    opacity: 0.9;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
 .messageBox {
   display: flex;
   position: absolute;
@@ -6,20 +29,20 @@
   font-weight: bold;
   font-size: 2rem;
   text-align: center;
-  opacity: 1;
   z-index: 100;
   top: 0;
   left: 0;
-  width: 100%;
+  max-width: 500px;
   max-height: min-content;
-  opacity: 0.9;
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  opacity: 0;
+}
+
+.messageBox:not(.hidden) {
+  animation: slideInLeft 0.5s ease forwards;
 }
 
 .messageBox.hidden {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 1s ease-out,transform 0.5 ease;
+  animation: slideOutRight 0.5s ease forwards;
 }
 
 .success {
@@ -32,4 +55,4 @@
   background-color: #ffcdd2;
   color: #000000;
   border: 1px solid #ef9a9a;
-}
\ No newline at end of file
+}
diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css
index b7d7cea..0f3debf 100644
--- a/app/Components/BarNavigation/BarNavigation.css
+++ b/app/Components/BarNavigation/BarNavigation.css
@@ -62,13 +62,19 @@
 }
 
 .subMenu ul {
-  display: none;
+  opacity: 0;
+  max-height: 0;
   position: absolute;
   flex-direction: column;
   top: 100%;
   width: 100%;
   background-color: #003e79;
-  transition: color 0.3s ease, opacity 0.3s ease;
+  transition: color 0.3s ease;
+  transition: opacity 0.4s ease, max-height 0.4s ease;
+}
+
+.subMenu ul a {
+  display: none;
 }
 
 .subMenu.open ul {
@@ -81,6 +87,11 @@
 }
 
 .subMenu:hover ul {
+  opacity: 1;
+  max-height: 500px;
+}
+
+.subMenu:hover ul a {
   display: flex;
 }
 
diff --git a/app/Components/ChangePassword/changePassword.tsx b/app/Components/ChangePassword/changePassword.tsx
index 620a57b..95b95a6 100644
--- a/app/Components/ChangePassword/changePassword.tsx
+++ b/app/Components/ChangePassword/changePassword.tsx
@@ -42,7 +42,7 @@ export default function ChangePassword() {
         <div className="containerInput relative">
           <label className="label">Confirmar la contraña</label>
           <input
-            placeholder="Coloca tu contraseña..."
+            placeholder="Coloca tu nueva contraseña..."
             value={confirmNewPass}
             onChange={(e) => {
               setconfirmNewPass(e.target.value);
diff --git a/app/Components/Header/Header.module.css b/app/Components/Header/Header.module.css
index 464ed6f..f1773e4 100644
--- a/app/Components/Header/Header.module.css
+++ b/app/Components/Header/Header.module.css
@@ -26,10 +26,16 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 50%;
+  width: 65%;
   height: 100%;
   min-width: 300px;
-  background: #bd8c01;
+  background: linear-gradient(to right, #bd8c01, #f9f9f9);
   transform: skew(-45deg);
   z-index: 0;
 }
+
+@media (max-width: 800px) {
+  .yellowPart {
+    background: #bd8c01;
+  }
+}
diff --git a/app/Components/Impressions/impressions.tsx b/app/Components/Impressions/impressions.tsx
index b0ad63d..4c55d7f 100644
--- a/app/Components/Impressions/impressions.tsx
+++ b/app/Components/Impressions/impressions.tsx
@@ -84,7 +84,7 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
         <div className="groupInput">
           <label className="label">Costo:</label>
           <select value={cost} onChange={(e) => setCost(e.target.value)}>
-            <option value="">-- Selecciona un tiempo --</option>
+            <option value="">Selecciona el costo</option>
             {costs.map((c) => (
               <option key={c.value} value={c.value}>
                 ${c.value}
diff --git a/app/Components/Login/Login.tsx b/app/Components/Login/Login.tsx
index 41e39ec..a1cb223 100644
--- a/app/Components/Login/Login.tsx
+++ b/app/Components/Login/Login.tsx
@@ -24,10 +24,10 @@ function Login() {
     } else {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
-      const id_usuario = payload.id;
+      const usuario = payload.usuario;
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
-      document.cookie = `id_usuario=${id_usuario}; path=/; SameSite=Strict`;
+      document.cookie = `usuario=${usuario}; path=/; SameSite=Strict`;
 
       setAlert("Inicio de sesión exitoso");
       router.push("/Impresiones");
diff --git a/app/Components/Logout/Logout.css b/app/Components/Logout/Logout.css
index 98fc11a..a346fa3 100644
--- a/app/Components/Logout/Logout.css
+++ b/app/Components/Logout/Logout.css
@@ -23,8 +23,8 @@
     content: "";
     border: 3px solid white;
     border-radius: 2px;
-    height: 15px;
-    width: 15px;
+    height: 2rem;
+    width: 2rem;
     position: absolute;
     left: 50%;
     top: 50%;
@@ -36,7 +36,7 @@
     border: 2px solid white;
     border-radius: 1px;
     height: 0px;
-    width: 10px;
+    width: 1.5rem;
     position: absolute;
     left: 50%;
     top: 50%;
diff --git a/app/Components/Receipt/Receipt.tsx b/app/Components/Receipt/Receipt.tsx
index 36ec8a9..46b5931 100644
--- a/app/Components/Receipt/Receipt.tsx
+++ b/app/Components/Receipt/Receipt.tsx
@@ -93,7 +93,7 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
                 setFolio(value);
               }
             }}
-            placeholder="Numero de folio..."
+            placeholder="Numero de tiket..."
             inputMode="numeric"
             pattern="[0-9]*"
           />
diff --git a/app/globals.css b/app/globals.css
index b4bd72c..cbd6271 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -90,6 +90,17 @@ footer p {
   width: 100%;
 }
 
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -108,6 +119,7 @@ footer p {
   overflow: hidden;
   background-color: #f9f9f9;
   z-index: 0;
+  animation: fadeInUp 1s ease forwards;
 }
 
 .containerSection {
@@ -129,7 +141,7 @@ footer p {
   right: 0;
   width: 725px;
   height: 615px;
-  background-image: url("https://www.acatlan.unam.mx/images/fes_05.jpg");
+  background-image: url("/rock2.jpg");
   background-size: cover;
   background-position: center;
   overflow: hidden;
@@ -523,7 +535,7 @@ table tr {
 
 @media (max-width: 450px) {
   .title {
-    max-width: 300px;
+    max-width: 250px;
     overflow-wrap: break-word;
   }
 }
diff --git a/public/rock2.jpg b/public/rock2.jpg
new file mode 100644
index 0000000..6c4487e
Binary files /dev/null and b/public/rock2.jpg differ