diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js
index e23f84f9..75ddab17 100644
--- a/src/components/BannerHead/BannerHead.js
+++ b/src/components/BannerHead/BannerHead.js
@@ -5,7 +5,6 @@ import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { useTheme } from "../../context/themeContext"
 
 const BannerHead = ({ data }) => {
-  console.log(data)
   const { theme } = useTheme()
 
   const title = data?.title
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
index b43f57f7..fa0ea5a3 100644
--- a/src/components/Text/Text.js
+++ b/src/components/Text/Text.js
@@ -1,20 +1,33 @@
-import React from 'react';
-import MarkdownView from "react-showdown";
-import './Text.scss';
+import React from "react"
+import MarkdownView from "react-showdown"
+import "./Text.scss"
 
 export default function Text({ data }) {
-    console.log(data)
-    const title = data?.title;
-    const description = data?.text;
+    const title = data?.title
+    const description = data?.text
+    const bgImage = data?.backgroundImage?.url
 
     return (
-        <div className="text container py-3 d-flex flex-column flex-lg-row">
-
-            {title && (
-                <h2 className="title me-3 mt-5 p-lg-2">{title}</h2>
-            )}
-            {description && (
-                <MarkdownView markdown={description} className="description px-lg-5" />
+        <div className="container-text">
+            {title !== "" && title !== undefined && title !== null ? (
+                <div className="text d-flex flex-column flex-md-row">
+                    <div
+                        className="title"
+                        style={{
+                            backgroundImage: `url(${bgImage})`,
+                        }}
+                    >
+                        <h2 className="titleText pt-5 ps-4 pe-md-3">{title}</h2>
+                    </div>
+                    <MarkdownView
+                        markdown={description}
+                        className="description ps-4 px-lg-5"
+                    />
+                </div>
+            ) : (
+                <MarkdownView markdown={description} className="px-lg-5" id="descriptionText" style={{
+                    backgroundImage: `url(${bgImage})`,
+                }} />
             )}
         </div>
     )
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index e593ffbd..f5fd77a4 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -1,8 +1,71 @@
 @import "../../styles/global.scss";
 
 .text {
-  color: $primary;
+  margin-bottom: 50px;
   .title {
     text-transform: uppercase;
+    width: 100%;
+    min-height: 150px;
+    max-height: 65vh;
+    padding-top: 55px;
+  }
+  .description {
+    min-height: 60vh;
+    padding-top: 40px;
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  .text {
+    .description {
+      padding-top: 55px;
+    }
+  }
+}
+
+@media screen and (min-width: $breakpoint-xl) {
+  .text {
+    .title {
+      max-height: 60vh;
+
+      .titleText {
+        max-width: 30vw;
+        padding-left: 5rem !important;
+      }
+    }
+    .description {
+      padding-top: 70px;
+      max-width: 60vw;
+      max-height: 55vh;
+      padding-right: 10rem !important;
+    }
+  }
+}
+
+#descriptionText {
+  height: 70vh;
+  margin-bottom: 50px;
+  display: flex;
+  align-items: center;
+
+  p {
+    background-color: #ffffff;
+    padding: 2em 1em;
+    margin: 1em 1em 0;
+    border-radius: 20px;
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  #descriptionText {
+    max-height: 60vh;
+  }
+}
+
+@media screen and (min-width: $breakpoint-xl) {
+  #descriptionText {
+    p {
+      padding: 3em 3em;
+    }
   }
 }
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 1427a5a2..719e0d0f 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react"
+import { Link } from "gatsby"
+import React, { useEffect, useState } from "react"
 import { Flipper, Flipped } from "react-flip-toolkit"
 import MarkdownView from "react-showdown"
 import "./expandGrid.scss"
@@ -13,7 +14,7 @@ const ExpandGrid = ({ data }) => {
         <div className="expandGrid-body">
           <h2>{data.title}</h2>
           <h6 className="px-5">{data.subtitle}</h6>
-          <AnimatedList items={data.items.slice(0,4)} />
+          <AnimatedList items={data.items.slice(0, 4)} />
         </div>
       </section>
     </div>
@@ -35,9 +36,9 @@ const ListItem = ({ index, onClick, data }) => {
       <div className="listItem" onClick={() => onClick(index)}>
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
-          <div className="listItem-more">
-            <p>Ver mas</p>
-          </div>
+            <div className="listItem-more">
+              <h4>{data.title}</h4>
+            </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
@@ -53,7 +54,7 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, data }) => {
+const ExpandedListItem = ({ index, data, isFirst }) => {
   return (
     <Flipped
       flipId={createCardFlipId(index)}
@@ -64,13 +65,11 @@ const ExpandedListItem = ({ index, data }) => {
         }, 400)
       }}
     >
-      <div
-        className="listItem-expanded"
-      >
+      <div className="listItem-expanded">
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <p  ></p>
+              <p></p>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -79,9 +78,16 @@ const ExpandedListItem = ({ index, data }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div className="additional-content">
-              <div>
+            <div
+            
+              className={"additional-content "}
+            >
+              <div style={isFirst ? {opacity: "1"} : {}}>
+                <h4>{data.title}</h4>
                 <MarkdownView markdown={data.text} />
+                {data.landing_page && (
+                  <Link to={"/" + data.landing_page.slug}>Ver más</Link>
+                )}
               </div>
             </div>
           </div>
@@ -93,7 +99,7 @@ const ExpandedListItem = ({ index, data }) => {
 
 const AnimatedList = ({ items }) => {
   const [itemsArray, setItemsArray] = useState({ items, focused: null })
-
+  const [isFirst, setIsFirst] = useState(true)
   useEffect(() => {
     setItemsArray(prev => ({ ...prev, focused: items[0].id }))
   }, [])
@@ -102,6 +108,7 @@ const AnimatedList = ({ items }) => {
     for (let i = 0; i < items.length; i++) {
       const item = itemsArray.items[i]
       if (item.id === index) {
+        setIsFirst(false)
         setItemsArray(prevItems => ({
           items: [
             item,
@@ -114,8 +121,6 @@ const AnimatedList = ({ items }) => {
       }
     }
   }
-
-
   return (
     <Flipper
       flipKey={itemsArray.focused}
@@ -134,6 +139,7 @@ const AnimatedList = ({ items }) => {
             <>
               {item.id === itemsArray.focused ? (
                 <ExpandedListItem
+                  isFirst={isFirst}
                   index={itemsArray.focused}
                   data={item}
                 />
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index a07a445a..5a31bae3 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 5em;
+  padding: 0 2em;
   width: 100%;
 }
 
@@ -40,7 +40,7 @@
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-  background-color: rgba(180, 180, 180, 0.24);
+  background-color: rgba(255, 255, 255, 0.158);
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
@@ -116,16 +116,16 @@
 
 .listItem-more{
   position: absolute;
-  inset: 0 0 0 0;
+  inset: 0 0 20px 20px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-end;
+  justify-content: baseline;
   transition: opacity 200ms ease;
   opacity: 1;
+  color: black;
   p{
     padding: 0;
     margin: 0;
-    @include primaryBtn;
   }
   &-expanded{
     @extend .listItem-more;
@@ -137,7 +137,20 @@
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
-  height: 5rem;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  p {
+    max-height: 10vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  a{
+    font-weight: 600;
+    color: $secondary;
+    text-decoration: underline;
+    margin: auto 0 10px 10px;
+  } 
   h4 {
     text-align: left;
   }
diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index b4c842e6..ae5f1a92 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -1,36 +1,81 @@
 import "./quote.scss"
-
+import MarkdownView from "react-showdown"
 import React from "react"
 
 const Quote = ({
-  data: { description, title, variant, profile, image, strapi_component, id },
+  data: { description, title, variant, profileDescription, videoUrl, button, profile, image, strapi_component, id },
 }) => {
+
+
+  const url = videoUrl?.replace("watch?v=", "embed/")
+  let code = url?.substring(url.lastIndexOf("/") + 1, url.length)
+  const codeIndex = code?.indexOf("?")
+
+  if (codeIndex !== -1 && code !== undefined) {
+    code = code.substring(0, code.indexOf("?"))
+  }    
+
+
   return (
-    <div className="container my-3" id={strapi_component + "-" + id}>
+    <div className="container my-3 mb-lg-5" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
-        {image && (
+        {(image && !videoUrl) && (
           <div className="quote-body">
             <img
-              placeholder="https://via.placeholder.com/900"
               src={image.url}
-              alt=""
+              alt={image.name}
             />
           </div>
         )}
 
+        {(videoUrl !== null && videoUrl !== undefined) && (
+          <div className="quote-body">
+            {(url !== undefined && code !==undefined) && (
+              <iframe
+              loading="lazy"
+              type="text/html"
+              src={url}
+              frameBorder="0"
+              allowFullScreen
+              title="benefits_video"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;
+                            width:100%;height:100%;object-fit: cover;top:0;bottom:0;max-height: 500px}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style>
+                            <a href=${url}>
+                            <img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video'>
+                            <span>▶</span></a>`}
+              webkitallowfullscreen="true"
+              mozallowfullscreen="true"
+            ></iframe>
+
+            )}
+            
+          </div>
+        )}
+
         <div className="quote-person">
           <h4 className="quote-person-title">{title}</h4>
           <p className="quote-person-text">{description}</p>
+
+          {profile && (
+            <div className="quote-profile make-it-fast my-3 my-md-2 my-xl-4 d-flex gap-3 justify-content-between">
+              <img
+                src={profile.url}
+                alt="quote author"
+              />
+              <div className="flex-grow-1">
+                <MarkdownView markdown={profileDescription} className="markdown" />
+              </div>
+            </div>
+          )}
+          {button && (
+            <div className="quote-btn">
+              <a href={button.url || button.landing_page?.slug}>
+                <button>{button.content}</button>
+              </a>
+            </div>
+          )}
         </div>
-        {profile && (
-          <div className="quote-profile make-it-fast">
-            <img
-              placeholder="https://via.placeholder.com/300"
-              src={profile.url}
-              alt=""
-            />
-          </div>
-        )}
       </section>
     </div>
   )
@@ -40,6 +85,9 @@ Quote.defaultProps = {
   description: "",
   title: "",
   variant: "",
+  profileDescription: "",
+  videoUrl: "",
+  button: {},
   profile: {},
   image: {},
 }
diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss
index 7e8b2318..413af895 100644
--- a/src/components/quote/quote.scss
+++ b/src/components/quote/quote.scss
@@ -8,46 +8,35 @@
     grid-area: quote-body;
     img {
       width: 100%;
-      height: 70vh;
       object-fit: cover;
     }
+    iframe {
+      width: 100%;
+      margin-bottom: 0;
+      min-height: 250px;
+      max-height: 400px;
+    }
   }
 
   &-person {
-    padding-top: 1em;
     grid-area: quote-person;
     display: flex;
     flex-direction: column;
 
     &-title {
-      margin-bottom: 1.5em;
       font-weight: 700;
+      margin-bottom: 5px;
+      line-height: 35px;
     }
     &-text {
-      font-weight: 700;
       max-height: 300px;
+      margin-bottom: 0;
+      text-align: justify;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
-    @keyframes move-shadow {
-      0% {
-        transform: translate3d(12px, 0px, 0px);
-      }
-      25% {
-        transform: translate3d(0px, 12px, 0px);
-      }
-      50% {
-        transform: translate3d(-12px, 0px, 0px);
-      }
-      75% {
-        transform: translate3d(0px, -12px, 0px);
-      }
-      100% {
-        transform: translate3d(12px, 0px, 0px);
-      }
-    }
   }
 
   &-profile {
@@ -55,59 +44,99 @@
     flex-grow: 0;
     align-self: flex-start;
     border-radius: 50%;
-    position: relative;
-    width: 200px;
-    height: 200px;
+    width: 100%;
     z-index: 4;
-    &::before {
-      content: "";
-      inset: 0px 0px 0px 0px;
-      position: absolute;
-      background-color: #22c0c329;
+    img {
+      width: 65px;
+      height: 65px;
       border-radius: 50%;
-      animation: move-shadow 7s infinite linear;
-      z-index: -1;
     }
-    &::after {
-      content: "";
-      inset: 0px 0px 0px 0px;
-      position: absolute;
-      background-color: #22c0c325;
-      border-radius: 50%;
-      animation: move-shadow 7s infinite linear;
-      animation-delay: 3s;
-      z-index: -1;
+    .markdown {
+      p {
+        margin: 0;
+      }
     }
-    img {
-      width: 200px;
-      height: 200px;
-      border-radius: 50%;
+  }
+  &-btn {
+    button {
+      @include primaryBtn;
+      border-radius: 8px;
+      width: 131px;
+      height: 30px;
     }
   }
 }
 
+@media (min-width: $breakpoint-md) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 300px !important;
+      }
+    }
+  }
+}
+@media (min-width: $breakpoint-lg) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 350px !important;
+      }
+    }
+    &-btn {
+      button {
+        width: 150px;
+        height: 40px;
+      }
+    }
+    &-profile {
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .quote {
+    &-body {
+      iframe {
+        min-height: 500px !important;
+      }
+    }
+    &-person {
+      &-title {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
 // variantes
 .variant {
   &-quote {
-    grid-template-areas: "quote-person quote-body" "quote-profile quote-body";
+    grid-template-areas:
+      "quote-person quote-body"
+      "quote-profile quote-body";
     grid-template-columns: 1fr 2fr;
     @extend .variant;
   }
 
-  &-image {
-    grid-template-areas: "quote-body quote-person" "quote-body quote-profile";
+  &-media {
+    grid-template-areas:
+      "quote-body quote-person"
+      "quote-body quote-profile";
     grid-template-columns: 2fr 1fr;
     @extend .variant;
   }
 
   grid-template-rows: auto 1fr;
-  @media screen and (max-width: $breakpoint-lg) {
+  @media screen and (max-width: calc($breakpoint-md - 3px)) {
     grid-template-areas: "quote-body quote-body" "quote-profile quote-person";
     grid-template-columns: auto 1fr;
-    padding: 1em;
+    padding: 0.5em;
   }
-
-  @media screen and (max-width: $breakpoint-md) {
+  @media screen and (max-width: calc($breakpoint-md - 3px)) {
     display: flex;
     flex-direction: column;
     gap: 1em;
@@ -115,4 +144,15 @@
       margin-bottom: 0;
     }
   }
+  /*  @media screen and (max-width: calc($breakpoint-xl - 3px)) {
+    .variant {
+      &-quote {
+        grid-template-columns: 1fr 2fr !important;
+      }
+
+      &-media {
+        grid-template-columns: 2fr 1fr;
+      }
+    }
+  } */
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 498a3fc4..8bdd0d18 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -143,12 +143,12 @@ body {
 
 @media screen and (min-width: $breakpoint-lg) {
   body {
-    font-size: 18px;
+    font-size: 20px;
     p {
       em {
-        font-size: 18px;
+        font-size: 20px;
       }
-      font-size: 18px;
+      font-size: 20px;
     }
     h1 {
       font-size: 69px;