diff --git a/src/common/ButtonBuscarVuelos.jsx b/src/common/ButtonBuscarVuelos.jsx
new file mode 100644
index 0000000..b54101c
--- /dev/null
+++ b/src/common/ButtonBuscarVuelos.jsx
@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonBuscarVuelos = () => {
+  return (
+    <div className="center-button-wb">
+      <Link to="/search" className="btnwb-link">
+        <button className="btnwb">
+          <span class="text-wb">Buscar Vuelos</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default ButtonBuscarVuelos;
\ No newline at end of file
diff --git a/src/common/ButtonMisVuelos.jsx b/src/common/ButtonMisVuelos.jsx
new file mode 100644
index 0000000..8c4c6fc
--- /dev/null
+++ b/src/common/ButtonMisVuelos.jsx
@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonMisVuelos = () => {
+  return (
+    <div className="center-button-wb">
+      <Link to="/my_flights" className="btnwb-link">
+        <button className="btnwb">
+          <span class="text-wb">Mis Vuelos</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default ButtonMisVuelos;
\ No newline at end of file
diff --git a/src/common/ButtonRecomendaciones.jsx b/src/common/ButtonRecomendaciones.jsx
new file mode 100644
index 0000000..caf2fb9
--- /dev/null
+++ b/src/common/ButtonRecomendaciones.jsx
@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonRecomendaciones = () => {
+  return (
+    <div className="center-button-wb">
+      <Link to="/recomendations" className="btnwb-link">
+        <button className="btnwb">
+          <span class="text-wb">¿No sabes a donde ir?</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default ButtonRecomendaciones;
\ No newline at end of file
diff --git a/src/common/FlightsBookingButton.jsx b/src/common/FlightsBookingButton.jsx
new file mode 100644
index 0000000..4f1ebac
--- /dev/null
+++ b/src/common/FlightsBookingButton.jsx
@@ -0,0 +1,16 @@
+import "./flightsbookingbutton.css";
+import { Link } from "react-router-dom";
+
+const FlightsBookingButton = () => {
+  return (
+    <div className="center-button-fb">
+      <Link to="/" className="btnfb-link">
+        <button className="btnfb">
+          <span class="text-fb">FLIGHTS BOOKING</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
+
+export default FlightsBookingButton;
diff --git a/src/common/LoginButton.jsx b/src/common/LoginButton.jsx
index 21d99be..e45b7ff 100644
--- a/src/common/LoginButton.jsx
+++ b/src/common/LoginButton.jsx
@@ -6,8 +6,14 @@ const LoginButton = () => {
   if (!isAuthenticated) {
     return (
       <div className="center-button">
-        <button className="login-button" onClick={() => loginWithRedirect()}>
-          Iniciar Sesión
+        <button className="btn" onClick={() => loginWithRedirect()}>
+          <span class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" fill="currentColor" class="bi bi-airplane-fill" viewBox="0 0 16 16">
+        <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path>
+        </svg>
+          </span>
+          <span class="text">Iniciar Sesión</span>
+
         </button>
       </div>
     );
diff --git a/src/common/LogoutButton.jsx b/src/common/LogoutButton.jsx
index fdc19be..8695532 100644
--- a/src/common/LogoutButton.jsx
+++ b/src/common/LogoutButton.jsx
@@ -1,4 +1,4 @@
-import "../common/button.css";
+import "./whitenavbarbutton.css";
 import { useAuth0 } from "@auth0/auth0-react";
 import { Link } from "react-router-dom";
 
@@ -11,16 +11,20 @@ const LogoutButton = () => {
 
   if (isAuthenticated) {
     return (
-      <>
-        <Link to="/">
-          <button className="login-button" onClick={handleLogout}>
-            Cerrar Sesión
+      <div className="center-button-wb">
+        <Link to="/" className="btnwb-link">
+          <button className="btnwb" onClick={handleLogout}>
+            <span class="text-wb">Cerrar Sesión</span>
           </button>
         </Link>
         <br />
-      </>
+      </div>
     );
   }
 };
 
 export default LogoutButton;
+
+
+
+
diff --git a/src/common/flightsbookingbutton.css b/src/common/flightsbookingbutton.css
new file mode 100644
index 0000000..257bfe2
--- /dev/null
+++ b/src/common/flightsbookingbutton.css
@@ -0,0 +1,47 @@
+.btnfb {
+    width: 180px;
+    height: 43px;
+    border: none;
+    transition: all 0.5s ease-in-out;
+    font-size: 18px;
+    font-family: "League Spartan";
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    background: #040f16;
+    color: #f5f5f5;
+  }
+  
+  .btnfb:hover {
+    box-shadow: 0 0 20px 0px #2e2e2e3a;
+  }
+  
+  .btnfb .text-fb {
+    transform: translateX(10px);
+    margin-top: 5px;
+    transition: all 0.5s ease-in-out;
+  }
+  
+  .btnfb:hover .text-fb {
+    transition: all 0.5s;
+    transform: translateX(10px) scale(1.05);
+  }
+  
+  .btnfb:focus {
+    outline: none;
+  }
+  
+
+  .btnfb-link {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  .btnfb-link:link,
+  .btnfb-link:visited,
+  .btnfb-link:hover,
+  .btnfb-link:active {
+    text-decoration: none;
+    color: inherit;
+  }
+  
\ No newline at end of file
diff --git a/src/common/loginbutton.css b/src/common/loginbutton.css
index 338f9f9..a9ff503 100644
--- a/src/common/loginbutton.css
+++ b/src/common/loginbutton.css
@@ -17,4 +17,57 @@
 
 .login-button:hover {
     background-color: #84b6f4;
+}
+
+
+
+
+.btn {
+  width: 180px;
+  height: 43px;
+  border: none;
+  transition: all 0.5s ease-in-out;
+  font-size: 19px;
+  font-family: "League Spartan";
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  background: #040f16;
+  color: #f5f5f5;
+}
+
+.btn:hover {
+  box-shadow: 0 0 20px 0px #2e2e2e3a;
+}
+
+.btn .icon {
+  position: absolute;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.5s;
+}
+
+.btn .text {
+  transform: translateX(45px);
+  margin-top: 4px
+}
+
+.btn:hover .icon {
+  width: 175px;
+}
+
+.btn:hover .text {
+  transition: all 0.5s;
+  opacity: 0;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.btn:active .icon {
+  transform: scale(0.85);
 }
\ No newline at end of file
diff --git a/src/common/navbar.css b/src/common/navbar.css
index 0891958..d96eaea 100644
--- a/src/common/navbar.css
+++ b/src/common/navbar.css
@@ -9,6 +9,7 @@ body,
 }
 
 .navbar {
+    height: 42px;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -17,7 +18,7 @@ body,
     position: fixed;
     top: 0;
     width: 100%;
-    border-bottom: 2px solid #000035;
+    border-bottom: 1px solid #000035;
     z-index: 1000;
 }
 
diff --git a/src/common/navbar.jsx b/src/common/navbar.jsx
index 56f05d3..503f0b1 100644
--- a/src/common/navbar.jsx
+++ b/src/common/navbar.jsx
@@ -3,6 +3,10 @@ import { Link } from "react-router-dom";
 import LoginButton from "./LoginButton";
 import LogoutButton from "./LogoutButton";
 import { useAuth0 } from "@auth0/auth0-react";
+import FlightsBookingButton from "./FlightsBookingButton";
+import ButtonBuscarVuelos from "./ButtonBuscarVuelos";
+import ButtonRecomendaciones from "./ButtonRecomendaciones";
+import ButtonMisVuelos from "./ButtonMisVuelos";
 
 function Navbar() {
   const { isAuthenticated, user } = useAuth0();
@@ -13,28 +17,20 @@ function Navbar() {
   return (
     <ul className="navbar">
       <li className="navbar-li">
-        <Link to="/" className="navbar-a">
-          FlightsBooking
-        </Link>
+        <FlightsBookingButton className="navbar-a flightsbooking-button"></FlightsBookingButton>
       </li>
       <li className="navbar-li">
-        <Link to="/search" className="navbar-a">
-          Buscar Vuelos
-        </Link>
+        <ButtonBuscarVuelos className="navbar-a flightsbooking-button"></ButtonBuscarVuelos>
       </li>
       <div className="right-container">
         <li className="navbar-li">
           {isAuthenticated ? (
             <>
               <li className="navbar-li">
-                <Link to="/recomendations" className="navbar-a">
-                  ¿No sabes a donde ir?
-                </Link>
+                <ButtonRecomendaciones className="navbar-a flightsbooking-button"></ButtonRecomendaciones>
               </li>
               <li className="navbar-li">
-                <Link to="/my_flights" className="navbar-a">
-                  Mis Vuelos
-                </Link>
+                <ButtonMisVuelos className="navbar-a flightsbooking-button"></ButtonMisVuelos>
               </li>
               {isAdmin && (
               <li className="navbar-li">
diff --git a/src/common/whitenavbarbutton.css b/src/common/whitenavbarbutton.css
new file mode 100644
index 0000000..2a458b7
--- /dev/null
+++ b/src/common/whitenavbarbutton.css
@@ -0,0 +1,49 @@
+.btnwb {
+    height: 42px;
+    border: none;
+    transition: all 0.5s ease-in-out;
+    font-size: 16px;
+    font-family: "League Spartan";
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    background: #f9fcff;
+    color: #000035;
+    padding: 20px;
+  }
+  
+  .btnwb:hover {
+    box-shadow: 0 0 20px 0px #2e2e2e3a;
+    background-color: #040f16;
+    transition: none;
+  }
+  
+  .btnwb .text-wb {
+    margin-top: 5px;
+    transition: all 0.5s ease-in-out;
+  }
+  
+  .btnwb:hover .text-wb {
+    color: #f5f5f5;
+    transform: scale(1.05);
+    transition: transform 0.5s;
+  }
+  
+  .btnwb:focus {
+    outline: none;
+  }
+  
+
+  .btnwb-link {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  .btnwb-link:link,
+  .btnwb-link:visited,
+  .btnwb-link:hover,
+  .btnwb-link:active {
+    text-decoration: none;
+    color: inherit;
+  }
+  
\ No newline at end of file
diff --git a/src/flights/checkout.css b/src/flights/checkout.css
index 1affd4c..547993c 100644
--- a/src/flights/checkout.css
+++ b/src/flights/checkout.css
@@ -18,6 +18,7 @@
     text-align: center;
     max-width: 500px;
     width: 100%;
+    animation: fadeIn 2s ease forwards;
   }
   
   .checkout-content h1 {
@@ -52,4 +53,13 @@
     font-size: 15px;
     margin-left: 50px;
   }
-  
\ No newline at end of file
+  
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
\ No newline at end of file
diff --git a/src/flights/index.css b/src/flights/index.css
index 064c1fa..8ce6509 100644
--- a/src/flights/index.css
+++ b/src/flights/index.css
@@ -22,6 +22,7 @@ body {
     display: flex;
     flex-direction: row;
     color: #000035;
+    background-color: #f2f2f2;
 }
 
 .flight-card h3,
@@ -114,7 +115,8 @@ body {
     font-family: "League Spartan", sans-serif;
     font-size: 16px;
     border: 1px solid #ccc;
-    border-radius: 4px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
 }
 
 .date-field {
@@ -167,4 +169,102 @@ body {
 .flight-info .section-2 img {
     width: 50px;
     height: auto;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+
+
+
+.section-1 {
+    background-color: #f2f2f2;
+}
+
+.section-2 {
+    display: flex;
+    align-items: center; 
+  }
+
+
+.button-comprar {
+    --width: 100px;
+    --height: 35px;
+    --tooltip-height: 35px;
+    --tooltip-width: 90px;
+    --gap-between-tooltip-to-button: 18px;
+    --button-color: #040f16;
+    --tooltip-color: #fff;
+    width: var(--width);
+    height: var(--height);
+    background: var(--button-color);
+    position: relative;
+    text-align: center;
+    border-top-right-radius: 0.45em;
+    border-bottom-right-radius: 0.45em;
+    font-family: "League Spartan";
+    transition: background 0.3s;
+    font-size: 14px;
+    margin-right: 20px;
+    margin-top: 0.3333333px;
+    scale: 1.01;
+  }
+
+  
+  .text-comprar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .button-wrapper,.text-comprar,.icon-comprar {
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    color: #fff;
+  }
+  
+  .text-comprar {
+    top: 0
+  }
+  
+  .text-comprar,.icon-comprar {
+    transition: top 0.5s;
+  }
+  
+  .icon-comprar {
+    color: #fff;
+    top: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .icon-comprar svg {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .button-comprar:hover {
+    background: #222;
+  }
+  
+  .button-comprar:hover .text-comprar {
+    top: -100%;
+  }
+  
+  .button-comprar:hover .icon-comprar {
+    top: 0;
+  }
+  
+
+  
+
+  
+  
+  
+  
\ No newline at end of file
diff --git a/src/flights/recomendations.css b/src/flights/recomendations.css
index dd9f708..8bc1cef 100644
--- a/src/flights/recomendations.css
+++ b/src/flights/recomendations.css
@@ -13,23 +13,26 @@
 }
 
 .texto-titulo-recomendaciones {
-  font-size: 60px;
+  font-size: 50px;
   margin-bottom: 20px;
   margin-top: 60px;
   font-family: "League Spartan", sans-serif;
   color: #000053;
   background-color: white;
   border-radius: 10px;
+  padding: 20px;
+  animation: fadeIn 2s ease forwards;
 }
 
 .recommendation-subtitle {
   font-size: 30px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   font-family: "League Spartan", sans-serif;
   color: #000053;
   background-color: white;
   border-radius: 10px;
   padding: 10px;
+  animation: fadeIn 2s ease forwards;
 }
 
 .recommendation-text {
@@ -37,6 +40,7 @@
   font-family: "League Spartan", sans-serif;
   color: #000053;
   font-size: 20px;
+  
 }
 
 .flight-cell {
@@ -49,6 +53,7 @@
   margin-bottom: 10px;
   background-color: white;
   cursor: pointer;
+  animation: fadeIn 2s ease forwards;
 }
 
 .recommendation-buy-button {
@@ -137,8 +142,21 @@
   background-color: white;
   border-radius: 10px;
   padding-right: 20px;
+  animation: fadeIn 2s ease forwards;
 }
 
 .recommendation-update-button {
   margin-right: 20px;
 }
+
+
+
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/flights/search.css b/src/flights/search.css
index 950df75..9198a03 100644
--- a/src/flights/search.css
+++ b/src/flights/search.css
@@ -4,4 +4,21 @@
     align-items: center;
     gap: 10px;
 }
-  
\ No newline at end of file
+
+
+.flight-container{
+    border-radius: 5px;
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+}
+
+
+
+@keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
\ No newline at end of file
diff --git a/src/flights/show.jsx b/src/flights/show.jsx
index e337ff8..1eb2a70 100644
--- a/src/flights/show.jsx
+++ b/src/flights/show.jsx
@@ -210,17 +210,31 @@ const Flight = () => {
               onChange={handleTicketCountChange}
               disabled={!canBuyTickets}
             />
-            <button onClick={handleBuyFlight}>Comprar vuelo</button>
+            <div className="button-comprar">
+              <div className="button-wrapper" onClick={handleBuyFlight}>
+                <div className="text-comprar">Comprar vuelo</div>
+                <span className="icon-comprar">
+                  <svg viewBox="0 0 16 16" className="bi bi-cart2" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"></path>
+                  </svg>
+                </span>
+              </div>
+            </div>
             {!canBuyTickets && <p>No quedan vuelos disponibles</p>}
+
+
+
           </div>
-        </div>
+    
 
+        </div>
         <button onClick={() => setShowLocationInfo(true)}>
-          Obtener Ubicacion (Tendrá un uso posteriormente)
+              Ubicación
         </button>
         {showLocationInfo && <LocationInfo />}
       </div>
     </div>
+    
   );
 };
 
diff --git a/src/flights/userBuys.jsx b/src/flights/userBuys.jsx
index 42381c3..5738cd9 100644
--- a/src/flights/userBuys.jsx
+++ b/src/flights/userBuys.jsx
@@ -2,6 +2,9 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { useAuth0 } from "@auth0/auth0-react";
 import { Link } from "react-router-dom";
+import "./userbuys.css";
+
+
 const VistaCompras = () => {
   const [data, setData] = useState(null);
   const [flights, setFlights] = useState(null);
@@ -49,14 +52,18 @@ const VistaCompras = () => {
           console.log("Flight:", flight);
           return (
             <div key={index} className="flight-card">
-              <div className="section-1">
+              <div className="section-1-v">
                 <div>
-                  <h2 style={{ marginRight: "20px", marginLeft: "40px" }}>
-                    {innerFlight.departure_airport.id} ➔{" "}
-                    {innerFlight.arrival_airport.id}
-                  </h2>
-                  <p>Fecha de salida: {fecha.toLocaleDateString()}</p>
                   <h1>Datos de la compra:</h1>
+                  <div className="nombrevuelo">
+                    <h2 style={{ marginRight: "20px", marginLeft: "40px" }}>
+                      {innerFlight.departure_airport.id} ➔{" "}
+                      {innerFlight.arrival_airport.id}
+                    </h2>
+                    <p>Fecha de salida: {fecha.toLocaleDateString()}</p>
+                  </div>
+                </div>
+                <div className="detallescompra">
                   <p>Total Tickets: {item.total_tickets}</p>
                   <p>Flight ID: {flight._id}</p>
                   <p>
@@ -66,7 +73,7 @@ const VistaCompras = () => {
                   <Link to={`/flights/${flight._id}`}>
                     Ver detalles del vuelo
                   </Link>
-                </div>
+                </div>  
               </div>
             </div>
           );
diff --git a/src/flights/userbuys.css b/src/flights/userbuys.css
new file mode 100644
index 0000000..2b672de
--- /dev/null
+++ b/src/flights/userbuys.css
@@ -0,0 +1,26 @@
+.section-1-v {
+    margin-left: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    animation: fadeIn 2s ease forwards;
+}
+
+.detallescompra {
+    margin-left: 80px;
+}
+
+.nombrevuelo {
+    margin-left: 30px;
+}
+
+
+@keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
\ No newline at end of file
diff --git a/src/landingpage.css b/src/landingpage.css
index e55ebf4..b43a654 100644
--- a/src/landingpage.css
+++ b/src/landingpage.css
@@ -1,19 +1,19 @@
-.landing-container {
+  .landing-container {
     padding-top: 49.2px;
-}
-
-.landing-content {
+  }
+  
+  .landing-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-}
-
-.landing-left-container,
-.landing-right-container {
+  }
+  
+  .landing-left-container,
+  .landing-right-container {
     width: 50%;
-}
-
-.landing-left-container {
+  }
+  
+  .landing-left-container {
     width: 50%;
     height: 100vh;
     background-size: cover;
@@ -21,19 +21,37 @@
     background-repeat: no-repeat;
     background-attachment: fixed;
     position: relative;
-}
-
-
-.landing-title {
+  }
+  
+  .landing-title,
+  .landing-text {
     font-family: "League Spartan", sans-serif;
-    font-size: 5em;
     text-align: center;
     color: #000035;
-}
-
-.landing-text {
-    font-family: "League Spartan", sans-serif;
+    opacity: 0;
+    animation: fadeIn 2s ease forwards;
+    margin-right: 70px;
+  }
+  
+  .landing-title {
+    font-size: 5em;
+    animation-delay: 0.5s;
+  }
+  
+  .landing-text {
     font-size: 2.53em;
-    text-align: center;
-    color: #000035;
-}
\ No newline at end of file
+    animation-delay: 2s;
+  }
+  
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+
+
+