diff --git a/img/bg.jpg b/img/bg.jpg
new file mode 100644
index 0000000..f610917
Binary files /dev/null and b/img/bg.jpg differ
diff --git a/img/p1.png b/img/p1.png
new file mode 100644
index 0000000..0b1f145
Binary files /dev/null and b/img/p1.png differ
diff --git a/img/p2.png b/img/p2.png
new file mode 100644
index 0000000..700bafe
Binary files /dev/null and b/img/p2.png differ
diff --git a/img/p3.png b/img/p3.png
new file mode 100644
index 0000000..f16435c
Binary files /dev/null and b/img/p3.png differ
diff --git a/img/p4.png b/img/p4.png
new file mode 100644
index 0000000..47e8a39
Binary files /dev/null and b/img/p4.png differ
diff --git a/index.html b/index.html
index e640e61..80e6f93 100644
--- a/index.html
+++ b/index.html
@@ -5,20 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <title>Document</title>
+    <title>ProsApp</title>
 </head>
-<body>
-    <header class="fixed top-0 bg-white w-full" x-data="{ open: false }">
-        <div class="hidden lg:flex lg:items-center lg:justify-between py-3 px-10" >
+<body class="bg-[url('./img/bg.jpg')] bg-cover bg-center">
+    <header class="fixed top-0 bg-white w-full " x-data="{ open: false }">
+        <div class="hidden lg:flex lg:items-center lg:justify-between py-3 px-10  max-w-7xl mx-auto " >
             <div class="w-48">
                 <img src="./img/logo_prosapp.png" alt="logo">
             </div>
             <nav>
-                <ul class="flex items-center [&>li]:inline-block [&>li]:mx-6 [&>li]:cursor-pointer text-gray-400">
+                <ul class="flex items-center [&>li]:inline-block [&>li]:mx-6 [&>li]:cursor-pointer text-gray-600">
                     <li><a href="#inicio">Inicio</a></li>
                     <li><a href="#usuarios">Usuarios</a></li>
                     <li><a href="#profesionales">Profesionales</a></li>
-                    <li class="font-semibold px-3 py-2 bg-[#1A8BE4] rounded-lg text-white">Prosapp WEB</li>
+                    <li class="font-semibold px-3 py-2 bg-[#1A8BE4] rounded-lg text-white"><a target="_blank" href="https://app.prosapp.co">Prosapp WEB</a></li>
                 </ul>
             </nav>
         </div>
@@ -47,17 +47,17 @@
                 <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a href="#inicio">Inicio</a></li>
                 <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a href="#usuarios">Usuarios</a></li>
                 <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a href="#profesionales">Profesionales</a></li>
-                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Prosapp WEB</li>
+                <li class="cursor-pointer block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-blue-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"><a target="_blank" href="https://app.prosapp.co">Prosapp WEB</a></li>
             </ul>
         </div>
     </header>
 
-    <section id="inicio" class="h-screen grid md:content-center pt-16">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10 mx-4 md:mx-0 ">
-            <div class="md:pl-8">
-                <h1 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
+    <section id="inicio" class="h-screen grid md:content-center pt-16  mx-auto">
+        <div class="md:flex  justify-between w-full max-w-7xl mx-auto ">
+            <div class="md:pl-8 align-middle my-auto">
+                <h1 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp</h1>
                 <h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">Tu aliado de confianza en servicios de salud</h2>
-                <p class="text-gray-400 text-sm md:text-lg mb-8 transition-all">Reservas rápidas y sencillas con profesionales verificados, disponibles 24/7.</p>
+                <p class="text-gray-600 text-sm md:text-lg mb-8 transition-all">Reservas rápidas y sencillas con profesionales verificados, disponibles 24/7.</p>
 
                 <div class="flex gap-2 sm:gap-6 md:gap-8 mt-4 [&>button]:flex [&>button]:justify-center [&>button]:items-center [&>button]:gap-2 [&>button]:bg-[#1A8BE4] [&>button]:rounded-lg [&>button]:text-white [&>button]:transition-all">
                     <button class="hover:bg-[#177dcd] hover:scale-105 active:bg-[#1A8BE4] font-semibold px-3 md:px-6 py-2 text-sm md:text-lg">
@@ -70,28 +70,29 @@
                     </button>
                 </div>
             </div>
-            <div class="flex items-center justify-center md:pr-8">
-                <div class="rounded-full bg-gray-300 overflow-hidden">
-                    <img src="" alt="Imagen" class="w-full h-full object-cover"/>
+            <div class="flex items-center justify-center md:pr-8 align-middle my-auto">
+                <div class="rounded-full bg-gray-300 overflow-hidden max-w-2xl w-full">
+                    <img src="./img/p1.png" alt="Imagen" class="w-full h-full object-cover"/>
                 </div>
             </div>  
         </div>
     </section>
+    
 
     <section id="usuarios" class="h-screen grid md:content-center">
-        <div class="grid grid-cols-1 md:grid-cols-2 mx-4 md:mx-0">
-            <div class="flex items-center justify-center md:pl-8">
-                <div class="rounded-full bg-gray-300 overflow-hidden">
-                    <img src="" alt="Imagen" class="w-full h-full object-cover"/>
+        <div class="flex justify-between w-full max-w-7xl mx-auto ">
+            <div class="md:pr-8 align-middle my-auto">
+                <div class="rounded-full bg-gray-300 overflow-hidden max-w-lg">
+                    <img src="./img/p2.png" alt="Imagen" class="w-full h-full object-cover"/>
                 </div>
             </div>  
-            <div class="md:pr-8">
-                <h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para usuarios</h2>
+            <div class=" items-center justify-center md:pl-8 align-middle my-auto">
+                <h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para usuarios</h2>
                 <h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">La atención que mereces</h2>
-                <p class="text-gray-400 text-sm md:text-lg mb-16 transition-all">Tu bienestar es nuestra prioridad, encuentra los mejores profesionales 
+                <p class="text-gray-600 text-sm md:text-lg mb-16 transition-all">Tu bienestar es nuestra prioridad, encuentra los mejores profesionales 
                     certificados.</p>
 
-                <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1">
+                <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-600 [&>li]:py-1">
                     <li>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 text-[#1A8BE4]">
                             <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
@@ -121,13 +122,13 @@
         </div>
     </section>
 
-    <section id="profesionales" class="h-screen grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
-        <div class="flex flex-col justify-start md:justify-center md:col-span-2 lg:col-span-3 mx-4 md:mx-8"> 
-            <h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para profesionales de la salud</h2>
+    <section id="profesionales" class=" h-screen flex justify-center w-full max-w-7xl mx-auto  ">
+        <div class="md:flex flex-col justify-start md:justify-center md:col-span-2 lg:col-span-3 mx-4 md:mx-8 my-auto"> 
+            <h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">ProsApp para profesionales de la salud</h2>
             <h2 class="text-xl md:text-4xl xl:text-6xl mb-4 transition-all">Expande tu alcance profesional</h2>
-            <p class="text-gray-400 text-sm md:text-lg mb-16 transition-all">Amplía tu base de pacientes y llega a más personas con ProsApp.</p>
+            <p class="text-gray-600 text-sm md:text-lg mb-16 transition-all">Amplía tu base de pacientes y llega a más personas con ProsApp.</p>
 
-            <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-500 [&>li]:py-1">
+            <ul class="[&>li]:flex [&>li]:items-center [&>li]:gap-1 lg:[&>li]:text-xl [&>li]:text-gray-600 [&>li]:py-1">
                 <li>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 text-[#1A8BE4]">
                         <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
@@ -154,54 +155,62 @@
                 </li>
             </ul>
         </div>
-        <div class="hidden md:block bg-gray-300">
-        </div>
+        <div class="flex items-center justify-center md:pr-8 align-middle my-auto">
+          <div class="rounded-full bg-gray-300 overflow-hidden max-w-2xl w-full">
+              <img src="./img/p4.png" alt="Imagen" class="w-full h-full object-cover"/>
+          </div>
+      </div>  
     </section>
 
     <section class="h-screen grid md:content-center overflow-auto mb-6 md:mb-0">
-        <div class="grid grid-cols-1 md:grid-cols-2 mx-4 md:mx-0">
-            <div class="flex items-center justify-center md:pl-8">
-                <div class="rounded-full bg-gray-300 overflow-hidden">
-                    <img src="" alt="Imagen" class="w-full h-full object-cover"/>
+        <div class="md:flex justify-between w-full max-w-7xl mx-auto my-auto">
+            <div class="flex items-center justify-center md:pr-8">
+                <div class="rounded-2xl  overflow-hidden">
+                    <img src="./img/p3.png" alt="Imagen" class="w-full h-full object-cover"/>
                 </div>
             </div>  
-            <div class="md:pr-8">
-                <h2 class="text-gray-400 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
+            <div class="md:pl-8 my-auto">
+                <h2 class="text-gray-600 font-semibold lg:text-3xl mb-4 transition-all">Nuestros valores</h2>
     
                 <ul class="[&>li]:text-xl [&>li]:py-1 mx-8 md:mx-0">
-                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold">
+                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
                         <h2 class="pt-8 mb-3">
                             1. Confianza
                         </h2>
-                        <p class="text-lg text-gray-400 mb-6 font-normal">Brindamos confianza y seguridad en la atención médica proporcionada.</p>
+                        <p class="text-lg text-gray-600 mb-6 font-normal">Brindamos confianza y seguridad en la atención médica proporcionada.</p>
                     </li>
-                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold">
+                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
                         <h2 class="pt-8 mb-3">
                             2. Calidad
                         </h2>
-                        <p class="text-lg text-gray-400 mb-6 font-normal">Garantizamos altos estándares de atención médica.</p>
+                        <p class="text-lg text-gray-600 mb-6 font-normal">Garantizamos altos estándares de atención médica.</p>
                     </li>
-                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold">
+                    <li class="shadow-lg px-5 md:w-2/3 rounded-lg font-semibold bg-white my-2">
                         <h2 class="pt-8 mb-3">
                             3. Responsabilidad
                         </h2>
-                        <p class="text-lg text-gray-400 mb-6 font-normal"> Cumplimos con los más altos estándares éticos y legales en la prestación de servicios médicos.</p>
+                        <p class="text-lg text-gray-600 mb-6 font-normal"> Cumplimos con los más altos estándares éticos y legales en la prestación de servicios médicos.</p>
                     </li>
                 </ul>
             </div>
         </div>
     </section>
 
-    <section class="h-screen grid md:content-center">
+    <section class="grid md:content-center">
       <div class="grid grid-cols-1 mx-4 md:mx-0">
         <div class="md:pr-8 text-center">
-          <h3 class="text-gray-400 font-semibold text-2xl lg:text-3xl mb-4 transition-all mb-16">
-            ACERCA DE PROSAPP
+          <h3 class="text-gray-600 font-semibold text-2xl lg:text-3xl mb-4 transition-all mb-16 ">
+            Acerca de ProsApp
           </h3>
-          <p class="text-xl xl:text-3xl mb-4 transition-all shadow-md border-2 rounded-lg md:w-1/2 lg:w-3/4 mx-8 md:mx-auto mt-8 px-8 py-4">
-            ProsApp Conecta a profesionales de la salud altamente calificados
-            con usuarios que buscan servicios médicos y asesoramiento confiable
-          </p>
+          <div class="text-2xl rounded-2xl p-24 xl:text-4xl mb-4 transition-all shadow-md border-2 md:w-1/2 lg:w-3/4 mx-8 md:mx-auto mt-8 text-center text-white bg-[#1A8BE4]">
+            <p class="font-serif italic">ProsApp conecta a</p>
+            <p class="font-sans font-bold text-4xl mb-6">profesionales de la salud</p>
+            <p class="font-serif italic">altamente calificados</p>
+            <p class="font-sans font-bold text-4xl mb-6">con usuarios que buscan</p>
+            <p class="font-serif italic">servicios médicos y asesoramiento confiable.</p>
+        </div>
+        
+        
           <div class="flex justify-center gap-6 mt-16">
             <svg class="w-10 cursor-pointer hover:scale-105 transition-all" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512"
               style="enable-background: new 0 0 512 512"
@@ -344,9 +353,9 @@
               </g>
             </svg>
           </div>
-          <div class="md:absolute md:bottom-16 w-full">
+          <div class="md:bottom-16 w-full">
             <div class="text-center border-t-2 pt-4 mt-8 mx-8">
-              <h3 class="text-gray-400 font-semibold text-md lg:text-xl mb-4 transition-all" >
+              <h3 class="text-gray-400  text-md  mb-4 transition-all" >
                 Desarrollado por U-site
               </h3>
             </div>
