diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index f97dc3d2..ea978e8b 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -5,6 +5,7 @@ import { useTheme } from "../../context/themeContext"
 import "./Banner.scss"
 import PropTypes from 'prop-types'
 import CustomLink from "../CustomLink/CustomLink"
+import CustomImage from "../CustomImage/CustomImage"
 
 const Banner = ({ data }) => {
   const { theme } = useTheme()
@@ -21,23 +22,21 @@ const Banner = ({ data }) => {
   const showTitle = () => {
     if (variant === "diagonal" || variant === "diagonalReverse") {
       return <h2>{title}</h2>
-    } else {
-      return <h1>{title}</h1>
     }
+
+    return <h1>{title}</h1>
   }
 
   return (
     <div className={`banner ${variant}`}>
       <div className="container banner__wrapper">
         {variant === "background" ?
-          <div
-            className="bgImage"
+          <div className="bgImage"
             style={{
-              backgroundImage: `url(${image?.url})`,
+              backgroundImage: image ? `url(${image?.url})` : '',
               backgroundPosition: 'center',
-              // backgroundSize: 'cover',
             }}>
-            <div className="title-background ">
+            <div className="title-background">
               <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
               {summary && (
                 <MarkdownView
@@ -77,19 +76,18 @@ const Banner = ({ data }) => {
             </div>
 
             <div className="imagen">
-              {image?.url ? (
-                <img
-                  src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
+              {image ? (
+                <CustomImage image={theme === 'dark' && imageDark ? imageDark : image}
+                  alt={image?.alternativeText || title}
+                  className={''}
                   width={290}
                   height={200}
-                  alt={image?.alternativeText || title}
-                />) : (
+                />
+              ) : (
                 <div className="cont-lottie">
-                  {animation && <Lottie options={{
-                    ...defaultOptions,
-                    animationData: animation,
-                  }}
-                  />}
+                  {animation && (
+                    <Lottie options={{ ...defaultOptions, animationData: animation }} />
+                  )}
                 </div>
               )}
             </div>
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 66d2aef6..7a1a351e 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -23,6 +23,10 @@
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
+
+    .imagen {
+      min-height: 450px;
+    }
   }
 
   .cont-lottie {
diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss
index 3bb09f04..9f42c762 100644
--- a/src/components/BannerList/Banner.scss
+++ b/src/components/BannerList/Banner.scss
@@ -2,29 +2,43 @@
 
 .bannerList {
   color: $primary;
+
   .card_item {
+    align-items: center;
+
     h4 {
       margin: 0;
     }
+
+    p {
+      margin: 0;
+    }
+
     a {
       color: inherit;
+
       &:hover {
         color: $secondary;
       }
     }
+
     img {
       margin: 0;
       width: 80px;
+      object-fit: cover;
     }
   }
+
   button {
     margin-top: 10px;
     @include primaryBtn;
     align-self: baseline;
+
     a {
       color: inherit;
     }
   }
+
   &__title {
     display: flex;
     flex-direction: column;
@@ -36,12 +50,7 @@
 
 @media screen and (min-width: $breakpoint-xl) {
   .bannerList {
-    .card_item {
-      img {
-        width: 80px;
-      }
-    }
-    &__buttonMobile{
+    &__buttonMobile {
       display: none;
     }
   }
@@ -59,13 +68,8 @@
 
 @media screen and (min-width: $breakpoint-md) {
   .bannerList {
-    .card_item {
-      img {
-        width: 80px;
-      }
-    }
-    &__buttonMobile{
+    &__buttonMobile {
       display: none;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/BannerList/BannerList.js b/src/components/BannerList/BannerList.js
index d0cfc3dc..68c1d72a 100644
--- a/src/components/BannerList/BannerList.js
+++ b/src/components/BannerList/BannerList.js
@@ -3,19 +3,21 @@ import React from "react"
 import "./Banner.scss"
 import useLandingUrl from "../../hooks/useLandingUrl"
 import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
 export default function BannerList({ data }) {
   const { title, Card, contactForm, concactFormAnchor, callToAction } = data
   const getUrl = useLandingUrl()
   const cards = Card.map(item => {
     return (
-      <div className="card_item d-flex mb-2">
+      <div className="card_item d-flex mb-2 gap-2" key={item.id}>
         {item?.icon && (
           <div className="card_item">
-            <img className="d-block"
-              alt={item?.icon?.alternativeText || 'card-icon'}
-              src={item.icon.url}
-              placeholder="blurred"
+            <CustomImage image={item?.icon}
+              className={'d-block'}
+              alt={item?.icon?.alternativeText || 'Card icon'}
+              width={60}
+              height={60}
             />
           </div>
         )}
@@ -37,17 +39,17 @@ export default function BannerList({ data }) {
   })
 
   return (
-    <div className="container pt-5">
+    <div className="container py-5">
       <div className="bannerList d-md-flex flex-row">
-        <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
+        <h2 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
           {title}
           {contactForm && concactFormAnchor && callToAction && (
             <button>
               <a href={concactFormAnchor}>{callToAction}</a>
             </button>
           )}
-        </h1>
-        <div className="bannerList__cards col-md-6 col-xl-6">
+        </h2>
+        <div className="bannerList__cards d-flex flex-column col-md-6 col-xl-6 gap-4">
           {cards}
         </div>
         {contactForm && concactFormAnchor && callToAction && (
diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.js b/src/components/BlogPage/BlogArticle/BlogArticle.js
index d6bc4ff5..69717849 100644
--- a/src/components/BlogPage/BlogArticle/BlogArticle.js
+++ b/src/components/BlogPage/BlogArticle/BlogArticle.js
@@ -10,18 +10,17 @@ const BlogArticle = ({ title, summary, image, slug, text }) => {
 
   return (
     <div className="article__container">
-      <CustomImage
-        image={image}
+      <CustomImage image={image}
         alt={image?.alternativeText || title}
         className="article__image"
+        width={140}
+        height={170}
       />
       <div className="article__description">
-        <h6>{`${title}`}</h6>
-        <div>
-          <MarkdownView markdown={`${summary}`}
-            dangerouslySetInnerHTML={{ __html: summary }}
-          />
-        </div>
+        <h4>{title}</h4>
+        <MarkdownView markdown={`${summary}`}
+          dangerouslySetInnerHTML={{ __html: summary }}
+        />
         <div className="article__link">
           <Link to={slug}>
             <small>{text || 'Ver más'}</small>
diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss
index e676ae7e..5ceaa410 100644
--- a/src/components/BlogPage/BlogArticle/BlogArticle.scss
+++ b/src/components/BlogPage/BlogArticle/BlogArticle.scss
@@ -1,28 +1,31 @@
 @import "../../../styles/global.scss";
+
 .article {
   color: $primary;
+
   &__container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
+    height: 100%;
     padding: 0.5em;
     color: $primary;
   }
+
   &__image {
     width: 100%;
     height: 170px;
     transition: opacity 3s ease-in;
     border-radius: 8px;
   }
+
   &__description {
-    // display: flex;
-    // flex-direction: column;
-    // justify-content: flex-start;
     position: relative;
     width: 100%;
     height: 170px;
     padding: 0 0 0 15px;
+
     h1,
     h2,
     h3,
@@ -30,26 +33,35 @@
     h5,
     h6 {
       padding-left: 0;
-      // font-size: 15px !important;
-      margin-bottom: 15px;
-      // line-height: 1rem;
+      margin-bottom: 8px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       overflow: hidden;
     }
+
+    h4 {
+      text-wrap: pretty;
+      line-height: 1.3rem;
+      margin-bottom: 10px;
+      font-size: $medium;
+    }
+
     p {
       margin-bottom: 15px;
-      line-height: 24px;
+      line-height: 28px;
+      font-weight: $standard;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
     }
   }
+
   &__link {
     position: absolute;
     bottom: 15px;
+
     a {
       margin-right: 0;
       font-weight: $max_bold;
@@ -60,19 +72,16 @@
     }
   }
 }
+
 @media (min-width: $breakpoint-md) {
   .article {
-    &__description {
-      h6 {
-        margin-bottom: 2px;
-        line-height: 1.3rem;
-      }
-    }
+
     &__link {
       bottom: 0;
     }
   }
 }
+
 @media (min-width: $breakpoint-lg) {
   .article {
     &__container {
@@ -90,9 +99,9 @@
       width: 100%;
       height: 190px;
       padding: 0;
+
       p {
         font-size: 18px;
-        line-height: 30px;
 
         em {
           font-size: 18px;
@@ -100,4 +109,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index bcf8c90d..f251bf1c 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -32,7 +32,7 @@ const Blog = () => {
               {category.map((item, idx) => (
                 <BlogArticle
                   key={idx}
-                  image={item.image}
+                  image={item?.image || item?.imagePage}
                   title={item.title}
                   summary={item.summary}
                   slug={"/blog/" + item.slug}
diff --git a/src/components/CasesSection/CasesList.js b/src/components/CasesSection/CasesList.js
index a1c9801a..1e5c8969 100644
--- a/src/components/CasesSection/CasesList.js
+++ b/src/components/CasesSection/CasesList.js
@@ -21,7 +21,7 @@ const CasesList = ({ data }) => {
           />
         </div>
         <div className="col-12 col-md-7">
-          <h5 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h5>
+          <h4 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h4>
           {caso.description && (
             <div className="caseExpanded__descr">
               <MarkdownView markdown={caso.description}
@@ -32,9 +32,9 @@ const CasesList = ({ data }) => {
         </div>
         <div className="col-12 col-md-5 row caseQuote">
           {caso?.quote?.title && (
-            <h5 className="caseQuote__title col-12 pt-md-3 pb-2">
+            <h4 className="caseQuote__title col-12 pt-md-3 pb-2">
               {caso.quote.title}
-            </h5>
+            </h4>
           )}
           {caso?.quote?.description && (
             <div className="caseQuote__descr col-9 col-md-12">
diff --git a/src/components/CasesSection/CasesSection.js b/src/components/CasesSection/CasesSection.js
index 90208563..ae9ab0ad 100644
--- a/src/components/CasesSection/CasesSection.js
+++ b/src/components/CasesSection/CasesSection.js
@@ -1,5 +1,4 @@
 import React from "react"
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { useCases } from "../../hooks/index"
 import "./CasesSection.scss"
 import PropTypes from "prop-types"
@@ -28,15 +27,17 @@ const CasesSection = ({ data }) => {
         <div className="col-6 col-md-12">
           <CustomImage
             image={caso?.image}
+            width={130}
+            height={200}
             className="case__img"
             alt={caso?.image?.alternativeText || caso.title}
           />
         </div>
         <div className="col-6 col-md-12">
           <div className="case__descr">
-            <h5 className="case__descr_title">
+            <h4 className="case__descr_title">
               {caso.title}
-            </h5>
+            </h4>
             {caso?.description && (
               <div className="case__descr_text">
                 <MarkdownView
@@ -47,7 +48,7 @@ const CasesSection = ({ data }) => {
             )}
           </div>
           {caso?.button && (
-            <button>
+            <button aria-label={`Ir a ${caso.button.content}`}>
               <CustomLink
                 content={caso.button.content}
                 url={caso?.button?.url}
diff --git a/src/components/CasesSection/CasesSection.scss b/src/components/CasesSection/CasesSection.scss
index bf58a086..fd89119a 100644
--- a/src/components/CasesSection/CasesSection.scss
+++ b/src/components/CasesSection/CasesSection.scss
@@ -7,24 +7,35 @@
     font-weight: 700;
     text-transform: uppercase;
   }
+
+  .cases {
+    width: 100%;
+    gap: 32px;
+    margin: 0 auto;
+  }
 }
 
 .case {
   color: $primary;
   --bs-gutter-x: 0 !important;
-  padding: 30px;
 
   &__img {
-    height: 200px;
+    height: 100%;
     width: 100%;
-    object-fit: cover;
+    aspect-ratio: auto;
     border-radius: 10px;
+
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   &__descr {
     padding-left: 10px;
 
-    h5 {
+    h4 {
       font-weight: 700;
     }
 
@@ -98,16 +109,22 @@
   }
 
   .case {
+    width: calc(50% - 16px);
+
     &__img {
-      height: 240px;
-      margin-bottom: 15px;
+      aspect-ratio: 4/3;
+
+      img {
+        object-position: top;
+      }
     }
 
     &__descr {
+      margin-top: 16px;
       min-height: 150px;
       max-height: 250px;
 
-      h5 {
+      h4 {
         margin-bottom: 10px;
       }
     }
@@ -128,8 +145,20 @@
       padding-right: 30px;
     }
 
+    &__img {
+      width: 100%;
+      max-height: 400px;
+      height: 600px;
+    }
+
     .caseQuote {
       &__profileImg {
+        &__img {
+          width: 100%;
+          max-height: 740px;
+          height: 700px;
+        }
+
         width: 100px;
         height: 100px;
         margin-left: 15px;
@@ -144,4 +173,24 @@
       min-height: 130px;
     }
   }
+
+  .caseExpanded {
+    &__img {
+      width: 100%;
+      max-height: 740px;
+      height: 700px;
+    }
+  }
+}
+
+@media screen and (min-width: $breakpoint-xxl) {
+  .casesSection {
+    .cases {
+      gap: 64px;
+    }
+  }
+
+  .case {
+    width: calc(50% - 32px);
+  }
 }
\ No newline at end of file
diff --git a/src/components/CustomImage/CustomImage.js b/src/components/CustomImage/CustomImage.js
index 57d49628..4f5f9352 100644
--- a/src/components/CustomImage/CustomImage.js
+++ b/src/components/CustomImage/CustomImage.js
@@ -2,7 +2,7 @@ import React from "react";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import PropTypes from "prop-types"
 
-const CustomImage = ({ image, className, alt }) => {
+const CustomImage = ({ image, className, alt, width, height }) => {
 
   if (!image) return null;
 
@@ -12,18 +12,23 @@ const CustomImage = ({ image, className, alt }) => {
     const localImage = getImage(localFile);
 
     return (
-      <GatsbyImage
+      <GatsbyImage loading="lazy"
         image={localImage}
         alt={alt}
         className={className}
+        width={width}
+        height={height}
       />
     )
   }
 
   return (
-    <img src={url}
+    <img loading="lazy"
+      src={url}
       alt={alt}
       className={className}
+      width={width}
+      height={height}
     />
   )
 }
@@ -31,6 +36,8 @@ const CustomImage = ({ image, className, alt }) => {
 CustomImage.propTypes = {
   className: PropTypes.string,
   alt: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
   image: PropTypes.shape({
     url: PropTypes.string,
     localFile: PropTypes.shape({
diff --git a/src/components/CustomLink/CustomLink.js b/src/components/CustomLink/CustomLink.js
index a46dd7f2..7915ba3b 100644
--- a/src/components/CustomLink/CustomLink.js
+++ b/src/components/CustomLink/CustomLink.js
@@ -12,7 +12,7 @@ const CustomLink = ({ content, url, landing, className }) => {
     return (
       <Link
         className={className}
-        aria-label={`Navigate to ${content}`}
+        aria-label={`Ir a ${content}`}
         to={getUrl(landing.slug)}
       >
         {content}
@@ -37,7 +37,7 @@ const CustomLink = ({ content, url, landing, className }) => {
     <a
       href={url}
       className={className}
-      aria-label={`Navigate to ${content}`}
+      aria-label={`Ir a ${content}`}
     >
       {content}
     </a>
diff --git a/src/components/CustomSection/CustomSection.js b/src/components/CustomSection/CustomSection.js
index 4309e980..8de2352f 100644
--- a/src/components/CustomSection/CustomSection.js
+++ b/src/components/CustomSection/CustomSection.js
@@ -74,7 +74,7 @@ const CustomSection = ({ sections }) => {
 
 CustomSection.propTypes = {
   sections: PropTypes.arrayOf(
-    PropTypes.node
+    PropTypes.object
   )
 }
 
diff --git a/src/components/DualSection/DualSection.js b/src/components/DualSection/DualSection.js
index 6c460516..b79c4b96 100644
--- a/src/components/DualSection/DualSection.js
+++ b/src/components/DualSection/DualSection.js
@@ -1,7 +1,8 @@
 import React from "react"
-import ButtonLink from "../ButtonLink/ButtonLink"
 import "./DualSection.scss"
 import MarkdownView from "react-showdown"
+import CustomImage from "../CustomImage/CustomImage"
+import CustomLink from "../CustomLink/CustomLink"
 
 export default function DualSection({ data }) {
   const dualSectionParts = data?.dualSectionPart
@@ -12,7 +13,12 @@ export default function DualSection({ data }) {
         } my-2 p-md-3 p-xl-4`}
     >
       <div className="dualSection__image">
-        <img src={section.image.url} alt="naturaleza" />
+        <CustomImage image={section?.image}
+          width={290}
+          height={250}
+          alt={section?.image?.alternativeText || section.title}
+          className=''
+        />
       </div>
 
       <div className="dualSection__textContainer">
@@ -26,17 +32,22 @@ export default function DualSection({ data }) {
           </div>
         )}
         {section.button && (
-          <button className="px-4">
-            <ButtonLink button={section.button} />
-          </button>
+          <CustomLink
+            content={section.button.content}
+            url={section.button?.url}
+            landing={section.button?.landing_page}
+            className=''
+          />
         )}
       </div>
     </div>
   ))
 
   return (
-    <div className="container py-3" id={data.strapi_component + "-" + data.id}>
-      <div className="d-flex flex-column flex-md-row">{listSectionParts}</div>
+    <div className="container py-3">
+      <div className="d-flex flex-column flex-md-row">
+        {listSectionParts}
+      </div>
     </div>
   )
 }
diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss
index dd8d01b5..622b364f 100644
--- a/src/components/DualSection/DualSection.scss
+++ b/src/components/DualSection/DualSection.scss
@@ -6,14 +6,28 @@
   h4 {
     margin-top: 1rem;
     font-weight: 700;
+    margin-bottom: 16px;
   }
 
   &__image {
     width: 100%;
+    min-height: 250px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
   }
 
-  button {
+  a {
     @include primaryBtn;
+    display: block;
+    min-width: auto;
+    padding: 10px 15px;
+
+    @media screen and (min-width: $breakpoint-lg) {
+      padding: 12px 30px;
+    }
   }
 
   &__textContainer {
@@ -27,10 +41,13 @@
   }
 }
 
-
 .one_sec {
   color: $primary;
 
+  h4 {
+    margin-bottom: 16px;
+  }
+
   &-background {
     background-size: cover;
     background-repeat: no-repeat;
@@ -45,8 +62,15 @@
   padding-top: 3em;
   padding-bottom: 3em;
 
-  button {
+  a {
     @include primaryBtn;
+    display: block;
+    width: max-content;
+    padding: 10px 15px;
+
+    @media screen and (min-width: $breakpoint-lg) {
+      padding: 12px 30px;
+    }
   }
 
   .gatsby-image-wrapper {
@@ -56,26 +80,27 @@
   &-title {
     flex-basis: 45%;
 
-    h3 {
-      font-weight: 700;
-      font-size: 36px;
-      line-height: 40px;
-    }
-
     &-body {
-      font-weight: 400 !important;
 
       p,
       a {
         font-size: $medium;
+        margin-bottom: 16px;
       }
+
+      font-weight: 400 !important;
     }
   }
 
   &-img {
+    width: 100%;
+    height: 100%;
+    min-height: 180px;
     flex-basis: 55%;
 
     img {
+      height: 100%;
+      object-fit: cover;
       border-radius: 8px;
       width: 100%;
       padding: 0;
diff --git a/src/components/DualSection/OneSection.js b/src/components/DualSection/OneSection.js
index 54b44995..dbb36c2c 100644
--- a/src/components/DualSection/OneSection.js
+++ b/src/components/DualSection/OneSection.js
@@ -1,9 +1,11 @@
 import React from "react"
 import { useTheme } from "../../context/themeContext"
-import ButtonLink from "../ButtonLink/ButtonLink"
-import MarkdowView from 'react-showdown'
+import MarkdownView from 'react-showdown'
+import CustomImage from "../CustomImage/CustomImage"
+import CustomLink from "../CustomLink/CustomLink"
+import PropTypes from "prop-types"
 
-const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
+const OneSection = ({ data: { dualSectionPart } }) => {
   const { theme } = useTheme()
   const {
     title,
@@ -17,33 +19,75 @@ const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
     <div
       className="one_sec-background"
       style={{
+        backgroundPosition: 'center',
         backgroundImage: `url(${theme === "dark" && backgroundImageDark?.url
-            ? backgroundImageDark?.url
-            : backgroundImage?.url
-          })`,
+          ? backgroundImageDark?.url
+          : backgroundImage?.url
+          })`
       }}
     >
-      <div className="container one_sec" id={strapi_component + "-" + id}>
+      <div className="container one_sec">
         <div className="one_sec-title">
           <h4>{title}</h4>
-          {description && (
-            <div className="one_sec-title-body">
-              <MarkdowView
-                markdown={description}
-                dangerouslySetInnerHTML={{ __html: description }}
-              />
-            </div>
+          <div className="one_sec-title-body">
+            <MarkdownView
+              markdown={description}
+              dangerouslySetInnerHTML={{ __html: description }}
+            />
+          </div>
+          {button && (
+            <CustomLink
+              content={button.content}
+              url={button?.url}
+              landing={button?.landing_page}
+              className=''
+            />
           )}
-          <button className="NavBar_Side-contact">
-            <ButtonLink button={button} />
-          </button>
         </div>
         <div className="one_sec-img">
-          <img src={image?.url} alt="one_sec" />
+          <CustomImage image={image}
+            width={290}
+            height={180}
+            alt={image.alternativeText || title}
+            className=''
+          />
         </div>
       </div>
     </div>
   )
 }
 
+OneSection.propTypes = {
+  data: PropTypes.shape({
+    dualSectionPart: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+        image: PropTypes.shape({
+          url: PropTypes.string.isRequired,
+          alternativeText: PropTypes.string,
+          localFile: PropTypes.shape({
+            childImageSharp: PropTypes.shape({
+              gatsbyImageData: PropTypes.object.isRequired
+            })
+          })
+        }).isRequired,
+        button: PropTypes.shape({
+          content: PropTypes.string.isRequired,
+          url: PropTypes.string,
+          landing_page: PropTypes.shape({
+            slug: PropTypes.string.isRequired
+          })
+        }),
+        backgroundImage: PropTypes.shape({
+          url: PropTypes.string
+        }),
+        backgroundImageDark: PropTypes.shape({
+          url: PropTypes.string
+        })
+      })
+    )
+  })
+}
+
 export default OneSection
diff --git a/src/components/FeaturedBlogs/FeaturedBlogs.js b/src/components/FeaturedBlogs/FeaturedBlogs.js
index a470afda..753c9b84 100644
--- a/src/components/FeaturedBlogs/FeaturedBlogs.js
+++ b/src/components/FeaturedBlogs/FeaturedBlogs.js
@@ -15,28 +15,30 @@ const compareDates = (a, b) => {
 }
 
 const FeaturedBlogs = ({ data }) => {
-  const callToAction = useBlog()?.allStrapiBlogPage?.callToAction;
+  const { title, subtitle, articles } = data;
+  const callToAction = useBlog()?.allStrapiBlogPage?.callToActionArticle;
 
   return (
     <div className="container featured pb-3">
-      <h2>{data.title}</h2>
-      <h6 className="px-md-3">{data.subtitle}</h6>
-
-      <div className="featured-blogs">
-        {data.articles
-          .sort(compareDates)
-          .slice(0, 3)
-          .map((item, idx) => (
-            <BlogArticle
-              key={idx}
-              image={item.image}
-              title={item.title}
-              summary={item.summary}
-              slug={"/blog/" + item.slug}
-              text={callToAction}
-            />
-          ))}
-      </div>
+      {title && <h2>{title}</h2>}
+      {subtitle && <h3 className="px-md-3">{subtitle}</h3>}
+      {articles?.length > 0 && (
+        <div className="featured-blogs">
+          {articles
+            .sort(compareDates)
+            .slice(0, 3)
+            .map((item, idx) => (
+              <BlogArticle
+                key={idx}
+                image={item?.image || item?.imagePage}
+                title={item.title}
+                summary={item.summary}
+                slug={"/blog/" + item.slug}
+                text={callToAction}
+              />
+            ))}
+        </div>
+      )}
     </div>
   )
 }
@@ -59,7 +61,16 @@ FeaturedBlogs.propTypes = {
               gatsbyImageData: PropTypes.object.isRequired
             })
           })
-        }).isRequired
+        }),
+        imagePage: PropTypes.shape({
+          alternativeText: PropTypes.string,
+          url: PropTypes.string.isRequired,
+          localFile: PropTypes.shape({
+            childImageSharp: PropTypes.shape({
+              gatsbyImageData: PropTypes.object.isRequired
+            })
+          })
+        }),
       })
     )
   })
diff --git a/src/components/FeaturedBlogs/featuredBlogs.scss b/src/components/FeaturedBlogs/featuredBlogs.scss
index 9174251d..4cac1b9c 100644
--- a/src/components/FeaturedBlogs/featuredBlogs.scss
+++ b/src/components/FeaturedBlogs/featuredBlogs.scss
@@ -3,18 +3,22 @@
 .featured {
   color: $primary;
   padding-bottom: 3rem;
+
   h2 {
     margin-top: 2em;
     flex-grow: 1;
     font-weight: 700;
     text-transform: uppercase;
+
     @media screen and (min-width: $breakpoint-md) {
       text-align: center;
     }
   }
-  h6 {
+
+  h3 {
     line-height: 28px;
     font-weight: 400;
+
     @media screen and (min-width: $breakpoint-md) {
       text-align: center;
     }
@@ -22,6 +26,7 @@
 
   &-blogs {
     align-items: center;
+
     img {
       object-fit: cover;
       max-width: 140px;
@@ -30,7 +35,8 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    & > * {
+
+    &>* {
       flex-basis: 33%;
     }
 
@@ -41,12 +47,8 @@
         background-color: $blog-card-container;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         border-radius: 8px;
-        h6 {
-          text-align: left;
-          font-weight: 700;
-          font-size: 18px !important;
-        }
       }
+
       &__link {
         button {
           font-size: 18px;
@@ -69,4 +71,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Footer/ContactData/contactData.js b/src/components/Footer/ContactData/contactData.js
index 9cbd984b..9deb8188 100644
--- a/src/components/Footer/ContactData/contactData.js
+++ b/src/components/Footer/ContactData/contactData.js
@@ -1,21 +1,20 @@
-import { Link } from "gatsby"
 import React from "react"
-import { useFooter, useLandingUrl } from "../../../hooks"
+import { useFooter } from "../../../hooks"
 import FaIcon from "../../FaIcon/FaIcon"
 import "./contactData.scss"
+import CustomLink from "../../CustomLink/CustomLink"
 
 export default function ContactData() {
   const data = useFooter()
-  const getUrl = useLandingUrl()
   const dataFooter = data?.allStrapiLayout?.nodes[0]?.footer
-  const dataNav = data?.allStrapiLayout?.nodes[0].navbar?.navButton
+  const navButton = data?.allStrapiLayout?.nodes[0].navbar?.navButton
 
   const contact = dataFooter?.contact?.iconText.map(item => {
     return (
-      <p className="icon-text d-flex">
+      <div className="icon-text d-flex" key={item.id}>
         <FaIcon type={item.icon.type} code={item.icon.code} />
         {item.name}
-      </p>
+      </div>
     )
   })
 
@@ -23,21 +22,15 @@ export default function ContactData() {
     <>
       <div className="ContactData__Item">
         <h6>{dataFooter?.contact?.title}</h6>
-        <p className="ContactData__Item__contact">{contact}</p>
-        {dataNav && (
+        <div className="ContactData__Item__contact">{contact}</div>
+        {navButton && dataFooter?.internalLink && (
           <div className="ContactData__Item__link">
-            {dataNav.landing_page ? (
-              <Link to={getUrl(dataNav.landing_page.slug)}>
-                {dataFooter?.internalLink?.name}
-              </Link>
-            ) : (dataNav.url && (
-              <a href={dataNav.url}
-                target={dataNav.url.startsWith('http') && '_blank'}
-                rel={dataNav.url.startsWith('http') && 'noreferrer noopener'}
-              >
-                {dataFooter?.internalLink?.name}
-              </a>
-            ))}
+            <CustomLink
+              content={dataFooter?.internalLink?.name}
+              url={navButton?.url}
+              landing={navButton?.landing_page}
+              className=''
+            />
           </div>
         )}
 
diff --git a/src/components/Footer/ContactData/contactData.scss b/src/components/Footer/ContactData/contactData.scss
index 2ade690b..63eb199d 100644
--- a/src/components/Footer/ContactData/contactData.scss
+++ b/src/components/Footer/ContactData/contactData.scss
@@ -12,8 +12,11 @@
 
     .icon-text {
       font-size: 16px;
+      margin-bottom: 16px;
     }
+
   }
+
   &__link {
     a {
       font-weight: 600;
@@ -23,12 +26,14 @@
     }
   }
 }
+
 @media screen and (min-width: $breakpoint-md) {
   .ContactData__Item {
-    
+
     &__contact {
       display: block;
     }
+
     .icon-text {
       svg {
         margin-right: 5px;
@@ -41,10 +46,12 @@
   .ContactData__Item {
     .icon-text {
       font-size: 18px;
+
       svg {
         margin-right: 10px;
       }
     }
+
     &__link {
       a {
         font-size: 20px;
@@ -57,15 +64,17 @@
   .ContactData__Item {
     .icon-text {
       font-size: 18px;
+
       svg {
         margin-right: 10px;
       }
     }
+
     &__link {
       a {
         font-size: 20px;
       }
     }
   }
-  
-}
+
+}
\ No newline at end of file
diff --git a/src/components/Footer/Location/location.js b/src/components/Footer/Location/location.js
index d7f4ee99..57404816 100644
--- a/src/components/Footer/Location/location.js
+++ b/src/components/Footer/Location/location.js
@@ -4,21 +4,23 @@ import FaIcon from "../../FaIcon/FaIcon"
 import "./location.scss";
 
 export default function Location() {
-    const data = useFooter();
-    const dataFooter = data?.allStrapiLayout?.nodes[0].footer;
+  const dataFooter = useFooter()?.allStrapiLayout?.nodes[0].footer;
 
-    const location = dataFooter.location?.iconText.map((item) => {
-        return (
-            <p className="icon-text d-flex">
-                <FaIcon type={item.icon.type} code={item.icon.code} />
-                {item.name}
-            </p>
-        )
-    });
+  const location = dataFooter?.location?.iconText?.map((item) => {
     return (
-        <div className='ContactData__Item'>
-            <h6>{dataFooter?.location?.title}</h6>
-            <p className='ContactData__Item__location'>{location}</p>
-        </div>
+      <div className="icon-text d-flex" key={item.id}>
+        <FaIcon type={item.icon.type} code={item.icon.code} />
+        {item.name}
+      </div>
     )
+  });
+
+  return (
+    <div className='ContactData__Item'>
+      <h6>{dataFooter?.location?.title}</h6>
+      <div className='ContactData__Item__location'>
+        {location}
+      </div>
+    </div>
+  )
 }
diff --git a/src/components/Footer/Location/location.scss b/src/components/Footer/Location/location.scss
index 302d080a..74f63f79 100644
--- a/src/components/Footer/Location/location.scss
+++ b/src/components/Footer/Location/location.scss
@@ -12,6 +12,7 @@
     }
 
     .icon-text {
+      margin-bottom: 16px;
       align-items: center;
 
       svg {
diff --git a/src/components/Footer/Sites/Sites.js b/src/components/Footer/Sites/Sites.js
index 3da32981..e720b132 100644
--- a/src/components/Footer/Sites/Sites.js
+++ b/src/components/Footer/Sites/Sites.js
@@ -1,31 +1,28 @@
 import React from "react";
 import { useFooter } from '../../../hooks';
-import { getImage, GatsbyImage } from "gatsby-plugin-image";
 import './Sites.scss'
+import CustomImage from "../../CustomImage/CustomImage"
 
 const Sites = () => {
   const sitesData = useFooter()?.allStrapiLayout?.nodes[0]?.Sites
+  const { title, websites } = sitesData;
 
-  const websitesItems = sitesData?.websites?.map(website => {
-    const image = website?.icon?.localFile?.childImageSharp?.gatsbyImageData
-      ? getImage(website?.icon?.localFile?.childImageSharp?.gatsbyImageData)
-      : undefined;
+  if (!websites) return null
+
+  const websitesItems = websites?.map(website => {
 
     return (
       <div key={website.id}>
         <a href={website.url}
           aria-label={`Visita nuestro sitio web: ${website.url}`}
         >
-          {image && (
-            <GatsbyImage image={image}
-              alt={website.icon?.alternativeText
-                ? website.icon.alternativeText
-                : 'Website Icon'
-              }
-              width={30}
-              height={15}
-            />
-          )}
+          <CustomImage
+            image={website?.icon}
+            alt={website?.icon?.alternativeText || 'Website Icon'}
+            width={30}
+            height={15}
+            className=''
+          />
           {website?.name ? website.name : ''}
         </a>
       </div>
@@ -34,7 +31,7 @@ const Sites = () => {
 
   return (
     <div className="Sites d-flex">
-      {sitesData?.title && <h6>{sitesData.title}</h6>}
+      {title && <h6>{title}</h6>}
       <div className="Sites__items">
         {websitesItems}
       </div>
diff --git a/src/components/Footer/SocialLinks/socialLinks.js b/src/components/Footer/SocialLinks/socialLinks.js
index c59e526b..e09966b6 100644
--- a/src/components/Footer/SocialLinks/socialLinks.js
+++ b/src/components/Footer/SocialLinks/socialLinks.js
@@ -6,16 +6,14 @@ import FaIcon from '../../FaIcon/FaIcon';
 import './socialLinks.scss';
 
 export default function SocialLinks() {
-  const data = useFooter();
-  const dataFooter = data?.allStrapiLayout?.nodes[0].footer;
+  const dataFooter = useFooter()?.allStrapiLayout?.nodes[0].footer;
   const logo = getImage(dataFooter?.logo?.localFile?.childImageSharp?.gatsbyImageData);
 
   const dataSocialMedia = dataFooter?.socialMedia;
 
-  const socialMedia = dataSocialMedia?.socialMedia?.map((item) => {
+  const socialMedia = dataSocialMedia?.socialMedia?.map(item => {
     return (
-      <a
-        key={item.id}
+      <a key={item.id}
         href={item.url}
         target="_blank"
         className={`btn-social m-2 btn-social-icon btn-${item.icon?.name}`}
@@ -24,8 +22,7 @@ export default function SocialLinks() {
       >
         <FaIcon type={item.icon?.type} code={item.icon?.code} />
       </a>
-
-    );
+    )
   });
 
   return (
@@ -37,14 +34,12 @@ export default function SocialLinks() {
       {logo && (
         <div className="SocialMedia__Logo text-center text-md-start mt-2 ps-md-3 col-12 col-md-7 col-lg-8 col-xl-9">
           <Link to="/">
-            <GatsbyImage image={logo} alt={dataFooter?.logo?.alternativeText
-              ? dataFooter.logo.alternativeText
-              : 'Logo Bitlogic'}
+            <GatsbyImage image={logo}
+              alt={dataFooter?.logo?.alternativeText || 'Logo Bitlogic'}
             />
           </Link>
         </div>
       )}
-
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/Form/PipedriveForm.js b/src/components/Form/PipedriveForm.js
index 0690ec55..e64ea564 100644
--- a/src/components/Form/PipedriveForm.js
+++ b/src/components/Form/PipedriveForm.js
@@ -4,6 +4,7 @@ import Lottie from 'react-lottie'
 import "./Form.scss"
 import { Helmet } from "react-helmet"
 import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
 const PipedriveForm = ({ data }) => {
   const { title, content, form_url, image, animation } = data;
@@ -50,10 +51,10 @@ const PipedriveForm = ({ data }) => {
             />
           )}
           <div className="form__img text-center text-md-start">
-            {image?.url ? (
-              <img
-                src={image.url}
+            {image ? (
+              <CustomImage image={image}
                 alt={image?.alternativeText || title}
+                className={''}
                 width={290}
                 height={290}
               />
diff --git a/src/components/HomePage/HomeContainer/HomeContainer.js b/src/components/HomePage/HomeContainer/HomeContainer.js
index 7c8a926d..600d0f8e 100644
--- a/src/components/HomePage/HomeContainer/HomeContainer.js
+++ b/src/components/HomePage/HomeContainer/HomeContainer.js
@@ -14,13 +14,11 @@ const Home = ({ location }) => {
 
   return (
     <Layout location={location}>
-      {data?.allStrapiHome?.nodes[0]?.pageMetadata && (
-        <Seo
-          title={pageTitle}
-          description={pageDescription}
-          keywords={pageKeywords}
-        />
-      )}
+      <Seo
+        title={pageTitle}
+        description={pageDescription}
+        keywords={pageKeywords}
+      />
 
       {/* Dynamic zone */}
       {data?.body?.length > 0 && (
diff --git a/src/components/LogosSection/logosSection.js b/src/components/LogosSection/logosSection.js
index 44020557..ea0639c8 100644
--- a/src/components/LogosSection/logosSection.js
+++ b/src/components/LogosSection/logosSection.js
@@ -4,22 +4,25 @@ import { useTheme } from "../../context/themeContext"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
+import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
 
 const LogosSection = ({ data }) => {
   const { title, summary, media } = data
   const { theme } = useTheme()
 
-  const logoList = media.map(logo => {
+  const logoList = media?.map(logo => {
+
+    if (!logo.img && !logo.imageDark) return null
+
     return (
-      <div className="logos__image">
-        <img
-          src={
-            theme === "dark" && logo.imageDark
-              ? logo.imageDark.url
-              : logo.img.url
-          }
-          alt={logo.name}
+      <div className="logos__image" key={logo.id}>
+        <CustomImage image={theme === 'dark' && logo?.imageDark ? logo?.imageDark : logo?.img}
+          alt={logo?.image?.alternativeText || logo.name}
+          className={''}
+          width={196}
+          height={186}
         />
       </div>
     )
@@ -43,39 +46,72 @@ const LogosSection = ({ data }) => {
       items: 1
     }
   };
+
   const CustomLeftArrow = ({ onClick }) => {
     return <FontAwesomeIcon
-      class="react-multiple-carousel__arrow react-multiple-carousel__arrow--left custom-arrow left"
+      className="react-multiple-carousel__arrow react-multiple-carousel__arrow--left custom-arrow left"
       icon="fa-solid fa-chevron-left"
       onClick={() => onClick()} />;
   };
+
   const CustomRightArrow = ({ onClick }) => {
     return <FontAwesomeIcon
-      class="react-multiple-carousel__arrow react-multiple-carousel__arrow--right custom-arrow right"
+      className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right custom-arrow right"
       icon="fa-solid fa-chevron-right"
       onClick={() => onClick()} />;
   };
 
   return (
-    <div className="logos container py-3 my-3" id={data.strapi_component + "-" + data.id}>
+    <div className="logos container py-3 my-3">
       {title && <h2 className="logos__title">{title}</h2>}
-      {summary && <h6 className="logos__summary px-lg-3">{summary}</h6>}
-
-      <Carousel
-        responsive={responsive}
-        autoPlay={logoList.length > 4}
-        autoPlaySpeed={3000}
-        infinite={logoList.length > 4}
-        containerClass={'containerCarrusel'}
-        customRightArrow={<CustomRightArrow />}
-        customLeftArrow={<CustomLeftArrow />}
-        removeArrowOnDeviceType={logoList.length <= 4 && ['tablet', 'desktop']}
-      >
-        {logoList}
-      </Carousel>
-
+      {summary && <p className="logos__summary px-lg-3">{summary}</p>}
+      {media?.length > 0 && (
+        <Carousel
+          responsive={responsive}
+          autoPlay={logoList.length > 4}
+          autoPlaySpeed={3000}
+          infinite={logoList.length > 4}
+          containerClass={'containerCarrusel'}
+          customRightArrow={<CustomRightArrow />}
+          customLeftArrow={<CustomLeftArrow />}
+          removeArrowOnDeviceType={logoList.length <= 4 && ['tablet', 'desktop']}
+        >
+          {logoList}
+        </Carousel>
+      )}
     </div>
   )
 }
 
+LogosSection.propTypes = {
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    summary: PropTypes.string,
+    media: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        name: PropTypes.string.isRequired,
+        img: PropTypes.shape({
+          url: PropTypes.string.isRequired,
+          alternativeText: PropTypes.string,
+          localFile: PropTypes.shape({
+            childImageSharp: PropTypes.shape({
+              gatsbyImageData: PropTypes.object.isRequired
+            })
+          })
+        }).isRequired,
+        imageDark: PropTypes.shape({
+          url: PropTypes.string.isRequired,
+          alternativeText: PropTypes.string,
+          localFile: PropTypes.shape({
+            childImageSharp: PropTypes.shape({
+              gatsbyImageData: PropTypes.object.isRequired
+            })
+          })
+        })
+      })
+    )
+  })
+}
+
 export default LogosSection
diff --git a/src/components/LogosSection/logosSection.scss b/src/components/LogosSection/logosSection.scss
index 9cdd4877..8c9bfa15 100644
--- a/src/components/LogosSection/logosSection.scss
+++ b/src/components/LogosSection/logosSection.scss
@@ -1,14 +1,27 @@
 @import "../../styles/global.scss";
 
+.containerCarrusel {
+  min-width: 290px;
+  min-height: 185px;
+
+  &-inactive {
+    min-height: 0;
+  }
+}
+
 .logos {
   color: $primary;
+
   &__title {
     font-weight: 700;
     text-transform: uppercase;
   }
+
   &__summary {
     font-weight: 400;
+    font-size: $medium;
   }
+
   &__logos {
     margin-top: 10px;
     margin-bottom: 20px;
@@ -16,9 +29,15 @@
     flex-direction: column;
     align-items: center;
   }
+
   &__image {
     margin-top: 15px;
     max-width: 220px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .react-multi-carousel-list {
@@ -28,12 +47,15 @@
       max-width: 20px;
       max-height: 20px;
     }
+
     .left {
       left: -8px;
     }
+
     .right {
       right: -8px;
     }
+
     button {
       background: none;
 
@@ -42,6 +64,7 @@
         font-weight: 900;
       }
     }
+
     .react-multi-carousel-item {
       display: flex;
       justify-content: center;
@@ -55,21 +78,24 @@
     &__title {
       text-align: center;
     }
+
     &__summary {
       text-align: center;
       margin-top: 20px;
       margin-bottom: 50px !important;
       line-height: 28px;
     }
+
     &__logos {
       margin: 30px 0;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
     }
+
     &__image {
       margin: 10px 10px 0 10px;
       padding: 0px 25px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js b/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js
index ef3e4804..d74ee349 100644
--- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js
+++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js
@@ -58,8 +58,8 @@ const Dropdown = ({ sections, topLevel }) => {
         )}
         <div className="dropdown_section">
           {sections?.map(section =>
-            <div>
-              <div className="dropdown_elem-link" key={section.id}>
+            <div key={section.id}>
+              <div className="dropdown_elem-link">
                 {section.icon && (
                   <GatsbyImage
                     image={getImage(section.icon.localFile?.childrenImageSharp[0].gatsbyImageData)}
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
index 8980d21c..485e05d0 100644
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@@ -4,9 +4,9 @@ import { Link } from "gatsby"
 import Navbar from "react-bootstrap/Navbar"
 import AnimatedNavbar from "./AnimatedNavBar/AnimatedNavbar"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import CustomLink from "../CustomLink/CustomLink"
 
-import { useLandingUrl, useNavbar } from "../../hooks/index"
-import menusvg from '../../images/menu.svg'
+import { useNavbar } from "../../hooks/index"
 import { useTheme } from "../../context/themeContext"
 // theme images
 import moon from "../../images/moon-solid.svg"
@@ -14,19 +14,12 @@ import sun from "../../images/sun.svg"
 
 const NavBar = () => {
   const { theme, toggleTheme } = useTheme()
-  const navbarData = useNavbar()
-  const getUrl = useLandingUrl();
+  const navbarData = useNavbar()?.allStrapiLayout?.nodes[0]
+  const menuData = navbarData?.menu
 
-  const menuData = navbarData.allStrapiLayout?.nodes[0].menu
-
-  const logoLight = getImage(
-    navbarData.allStrapiLayout?.nodes[0].navbar?.logo?.localFile
-  )
-  const logoDark = getImage(
-    navbarData.allStrapiLayout?.nodes[0].navbar?.logoDark?.localFile
-  )
-
-  const navbarButton = navbarData.allStrapiLayout?.nodes[0].navbar?.navButton
+  const logoLight = getImage(navbarData?.navbar?.logo?.localFile)
+  const logoDark = getImage(navbarData?.navbar?.logoDark?.localFile)
+  const navbarButton = navbarData?.navbar?.navButton
 
   return (
     <>
@@ -47,26 +40,22 @@ const NavBar = () => {
           {menuData && (
             <div className="NavBar_links">
               <AnimatedNavbar
-                // homeComponents={navbarData.allStrapiHome?.nodes[0].body}
-                navbarItems={
-                  menuData
-                }
+                navbarItems={menuData}
                 duration={300}
               />
             </div>
           )}
           <div className="NavBar_Side">
             {navbarButton && (
-              <button className="NavBar_Side-contact">
-                <Link
-                  to={
-                    navbarButton.landing_page
-                      ? "/" + navbarButton.landing_page.slug
-                      : ""
-                  }
-                >
-                  {navbarButton.content}
-                </Link>
+              <button className="NavBar_Side-contact"
+                aria-label={`Ir a ${navbarButton.content}`}
+              >
+                <CustomLink
+                  content={navbarButton.content}
+                  url={navbarButton?.url}
+                  landing={navbarButton?.landing_page}
+                  className=''
+                />
               </button>
             )}
             <button className="theme-toggle" onClick={toggleTheme}>
diff --git a/src/components/Professionals/Professionals.js b/src/components/Professionals/Professionals.js
index b7160b36..a2ecaf59 100644
--- a/src/components/Professionals/Professionals.js
+++ b/src/components/Professionals/Professionals.js
@@ -1,45 +1,36 @@
 import React from 'react'
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { useProfessionals } from '../../hooks'
 import "./Professionals.scss"
 import { FaLinkedinIn } from "react-icons/fa"
+import CustomImage from "../CustomImage/CustomImage"
+import PropTypes from "prop-types"
 
 const Professionals = ({ data }) => {
   const { title, summary, professionals } = data
-  const professionalsData = useProfessionals()
+  const professionalsData = useProfessionals()?.allStrapiProfessional?.nodes
 
-  const professionalsList = professionals.map(pro =>
-    professionalsData?.allStrapiProfessional?.nodes.find(professional => professional.strapiId === pro.id)
+  const professionalsList = professionals?.map(pro =>
+    professionalsData?.find(professional => professional.strapiId === pro.id)
   ).slice(0, 6)
 
-  const professionalsCards = professionalsList.map((pro, idx) => {
-
-    const photo = pro?.photo?.localFile ? getImage(pro.photo.localFile) : undefined
-
-    const { name, position, quote, linkedin } = pro
+  const professionalsCards = professionalsList?.map(pro => {
+    const { name, position, quote, linkedin, photo } = pro
 
     return (
-      <div
-        className="pro col-12 col-md-4 row"
-        key={`pro-${idx}`}
-        id={data.strapi_component + "-" + data.id}
-      >
+      <div key={`pro-${pro.id}`} className="pro col-12 col-md-4 row">
         <div className="col-6 col-md-12">
-          {photo ? (
-            <GatsbyImage image={photo} alt={name} className="pro__img" />
-          ) : (
-            <img
-              src={pro?.photo?.url}
-              alt={name}
-              className='pro__img'
-            />
-          )}
+          <CustomImage image={photo}
+            width={160}
+            height={250}
+            alt={photo?.alternativeText || name}
+            className='pro__img'
+          />
         </div>
         <div className="col-6 col-md-12">
           <div className="pro__descr">
-            <h6 className="pro__descr_title">{name}</h6>
-            {linkedin && <a href={linkedin} target="_blank" rel='noopener noreferrer'><FaLinkedinIn size={23} /></a>}
-            {position && <h6 className="pro__descr_position">{position}</h6>}
+            <h4 className="pro__descr_title">{name}</h4>
+            {linkedin && <a href={linkedin} target="_blank" rel='noopener noreferrer' aria-label='Link externo a LinkedIn'><FaLinkedinIn size={28} /></a>}
+            {position && <p className="pro__descr_position">{position}</p>}
             <p className="pro__descr_text">{quote}</p>
           </div>
         </div>
@@ -50,12 +41,36 @@ const Professionals = ({ data }) => {
   return (
     <div className="container pt-5 pb-1 prosSection">
       {title && <h2>{title}</h2>}
-      {summary && <h6 className="prosSection__summary px-lg-3">{summary}</h6>}
-      {(professionalsCards !== undefined && professionalsCards.length > 0) &&
+      {summary && <p className="prosSection__summary px-lg-3">{summary}</p>}
+      {professionalsCards?.length > 0 &&
         <div className="cases row">{professionalsCards}</div>
       }
     </div>
   )
 }
 
+Professionals.propTypes = {
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    summary: PropTypes.string,
+    professionals: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        position: PropTypes.string,
+        linkedin: PropTypes.string,
+        quote: PropTypes.string.isRequired,
+        photo: PropTypes.shape({
+          url: PropTypes.string.isRequired,
+          alternativeText: PropTypes.string,
+          localFile: PropTypes.shape({
+            childImageSharp: PropTypes.shape({
+              gatsbyImageData: PropTypes.object.isRequired
+            })
+          })
+        }).isRequired
+      })
+    )
+  })
+}
+
 export default Professionals
\ No newline at end of file
diff --git a/src/components/Professionals/Professionals.scss b/src/components/Professionals/Professionals.scss
index d981137b..76eaadd6 100644
--- a/src/components/Professionals/Professionals.scss
+++ b/src/components/Professionals/Professionals.scss
@@ -1,114 +1,135 @@
 @import "../../styles/global.scss";
 
 .prosSection {
-    &__summary {
-        font-weight: 400;
-        margin-bottom: 30px;
+  &__summary {
+    font-weight: 400;
+    margin-bottom: 30px;
+    font-size: $medium
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  a {
+    display: inline-block;
+    margin-bottom: 10px;
+  }
+
+  color: $primary;
+
+  h2 {
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+}
+
+.pro {
+  color: $primary;
+  --bs-gutter-x: 0 !important;
+  padding: 10px;
+
+  &__img {
+    height: 260px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+
+  &__descr {
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
+
+    &_title {
+      order: 1;
+      font-weight: 700;
+      width: 100%;
+      margin-bottom: 10px;
     }
-    p {
-        margin-bottom: 10px;
+
+    &_position {
+      font-weight: 400;
+      font-size: $medium;
+      order: 2;
+      margin-bottom: 10px;
     }
+
     a {
-        display: inline-block;
-        margin-bottom: 10px;
+      order: 3;
     }
-    color: $primary;
-    h2 {
-        // text-align: center;
-        font-weight: 700;
-        text-transform: uppercase;
+
+    &_text {
+      order: 4;
     }
+  }
 }
-.pro {
-    color: $primary;
-    --bs-gutter-x: 0 !important;
-    padding: 10px;
+
+
+
+@media screen and (min-width: $breakpoint-md) {
+  .prosSection {
+    h2 {
+      text-align: center;
+    }
+
+    &__summary {
+      text-align: center;
+      margin-top: 20px;
+      margin-bottom: 50px !important;
+      line-height: 28px;
+    }
+  }
+
+  .pro {
     &__img {
-        height: 260px;
-        width: 100%;
-        object-fit: cover;
-        border-radius: 10px;
+      height: 240px;
+      margin-bottom: 15px;
     }
+
     &__descr {
-        display: flex;
-        flex-direction: column;
-        padding-left: 10px;
-        &_title {
-            order: 1;
-            font-weight: 700;
-            width: 100%;
-            margin-bottom: 10px;
-        }
-        &_position {
-            font-weight: 400;
-            order: 2;
-            margin-bottom: 10px;
-        }
-        a {
-            order: 3;
-        }
-        &_text {
-            order: 4;
-        }
-    }
-}
+      display: block;
 
+      h6 {
+        margin-bottom: 10px;
+      }
 
+      a {
+        width: 15%;
+        vertical-align: top;
+      }
 
-@media screen and (min-width: $breakpoint-md) {
-    .prosSection {
-        h2 {
-            text-align: center;
-        }
-        &__summary {
-            text-align: center;
-            margin-top: 20px;
-            margin-bottom: 50px !important;
-            line-height: 28px;
-        }
+      min-height: 210px;
+
+      &_title {
+        display: inline-block;
+        width: 85%;
+      }
     }
-    .pro {
-        &__img {
-            height: 240px;
-            margin-bottom: 15px;
-        }
-        &__descr {
-            display: block;
-            h6 {
-                margin-bottom: 10px;
-            }
-            a {
-                width: 15%;
-                vertical-align: top;
-            }
-            min-height: 210px;
-            &_title {
-                display: inline-block;
-                width: 85%;
-            }
-        }
-        &__socials {
-            justify-content: flex-end;
-            svg {
-                margin-left: 10px;
-                margin-right: 1px;
-            }
-        }
+
+    &__socials {
+      justify-content: flex-end;
+
+      svg {
+        margin-left: 10px;
+        margin-right: 1px;
+      }
     }
-    
+  }
+
 }
 
 @media screen and (min-width: $breakpoint-lg) {
-    .prosSection {
-        &__summary {
-            margin-top: 40px;
-            margin-bottom: 80px !important;
-        }
+  .prosSection {
+    &__summary {
+      margin-top: 40px;
+      margin-bottom: 80px !important;
     }
-    .pro {
-        &__descr {
-            min-height: 260px;
-        }
+  }
+
+  .pro {
+    &__descr {
+      min-height: 260px;
     }
-}
-    
+  }
+}
\ No newline at end of file
diff --git a/src/components/Seo/Seo.js b/src/components/Seo/Seo.js
index fd89b769..aefde034 100644
--- a/src/components/Seo/Seo.js
+++ b/src/components/Seo/Seo.js
@@ -66,7 +66,7 @@ function Seo({ description, lang, meta, title, keywords }) {
           content: metaDescription,
         },
       ].concat(meta)}
-      // link={[]}
+    // link={[]}
     />
   )
 }
@@ -75,6 +75,7 @@ Seo.defaultProps = {
   lang: `es`,
   meta: [],
   description: ``,
+  keywords: ``
 }
 
 Seo.propTypes = {
@@ -82,6 +83,7 @@ Seo.propTypes = {
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
+  keywords: PropTypes.string
 }
 
 export default Seo
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
index b4bd6851..8e5ac49c 100644
--- a/src/components/Text/Text.js
+++ b/src/components/Text/Text.js
@@ -1,37 +1,51 @@
 import React from "react"
 import MarkdownView from "react-showdown"
 import "./Text.scss"
+import PropTypes from "prop-types"
 
 export default function Text({ data }) {
-  const title = data?.title
-  const description = data?.text
+  const { title, text } = data
   const bgImage = data?.backgroundImage?.url
 
   return (
     <div className="container-text mt-3 mt-xl-5" style={{
-      backgroundImage: `url(${bgImage})`,
+      backgroundImage: bgImage ? `url(${bgImage})` : '',
+      backgroundPosition: 'center'
     }}>
-      
-      {title !== "" && title !== undefined && title !== null ? (
-        <div className="container text d-flex flex-column flex-md-row gap-xl-5">
+      {title ? (
+        <div className="container text d-flex flex-column flex-md-row gap-xl-5 py-3">
           <div className="title">
-            <h2 className="titleText pt-5 ps-md-0 pt-md-3">{title}</h2>
+            <h2 className="titleText ps-md-0 pt-md-3">{title}</h2>
+          </div>
+          <div className="description">
+            <MarkdownView
+              markdown={text}
+              dangerouslySetInnerHTML={{ __html: text }}
+              style={{ margin: !bgImage && '0rem' }}
+            />
           </div>
-          <MarkdownView
-            markdown={description}
-            className="description"
-            style={{margin: !bgImage && '0rem'}}
-          />
         </div>
       ) : (
-        <div className="container container-markdown" style={{padding: !bgImage && '0rem'}}>
-          <MarkdownView
-            markdown={description}
-            className="notTitle"
-          />
+        <div className="container container-markdown" style={{ padding: !bgImage && '0rem' }}>
+          <div className="notTitle">
+            <MarkdownView
+              markdown={text}
+              dangerouslySetInnerHTML={{ __html: text }}
+            />
+          </div>
         </div>
       )}
     </div>
 
   )
 }
+
+Text.propTypes = {
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    text: PropTypes.string.isRequired,
+    backgroundImage: PropTypes.shape({
+      url: PropTypes.string
+    })
+  })
+}
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index e0a7fc16..7ecd48ef 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -3,24 +3,29 @@
 .container-text {
   .text {
     color: $primary;
+
     .title {
       .titleText {
         text-transform: uppercase;
         margin-top: 2rem;
       }
     }
+
     .description {
       background-color: $primary-container;
       border-radius: 10px;
+
       p:first-child {
         padding-top: 29px;
       }
+
       p {
         color: $primary;
         padding: 0rem 0.5rem;
       }
     }
   }
+
   .container-markdown {
     padding-top: 5rem;
     padding-bottom: 3rem;
@@ -44,6 +49,7 @@
         &:last-child {
           padding-bottom: 29px;
         }
+
         strong {
           font-size: 16px !important;
         }
@@ -56,18 +62,20 @@
   .container-text {
     .text {
       .title {
-        flex-basis: 20%;
         padding-top: 4rem;
+        flex: 1;
       }
+
       .description {
         margin-left: 2rem;
         margin-top: 6rem;
         margin-bottom: 3rem;
-        flex-basis: 80%;
+        flex: 2;
       }
     }
   }
 }
+
 @media screen and (min-width: $breakpoint-xl) {
   .container-text {
     .text {
@@ -78,4 +86,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
index abdf4ef5..7803c194 100644
--- a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
+++ b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
@@ -1,9 +1,11 @@
 import React from "react"
 import "./animatedTransitionContinous.scss"
+import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
+
+const AnimatedTransitionContinous = ({ data }) => {
+  const { text = "", image, imagePosition, color } = data;
 
-const AnimatedTransitionContinous = ({
-  data: { text = "", image, imagePosition, color },
-}) => {
   let longerText = ""
 
   const amount = text ? 200 : 50
@@ -15,14 +17,24 @@ const AnimatedTransitionContinous = ({
     <div className="m-scroll">
       <div className="m-scroll__title">
         <div className={text ? "" : "m-scroll__title-image"}>
-          {longerText.split("-").map(innerText => (
-            <div className="m-scroll__title-inner">
-              {imagePosition === "first" && (
-                <img src={image?.url} alt="" />
+          {longerText.split("-").map((innerText) => (
+            <div className="m-scroll__title-inner" key={`AnimatedScroll-${crypto?.randomUUID()}`}>
+              {imagePosition === "first" && image && (
+                <CustomImage image={image}
+                  alt={image?.alternativeText || 'Image animated'}
+                  width={40}
+                  height={40}
+                  className={''}
+                />
               )}
-              <h1 style={{color: color}}>{innerText || ""}</h1>
-              {(imagePosition === "last" || !imagePosition) && (
-                <img src={image?.url} alt="" />
+              <h2 style={{ color: color }}>{innerText || ""}</h2>
+              {(imagePosition === "last" || !imagePosition) && image && (
+                <CustomImage image={image}
+                  alt={image?.alternativeText || 'Image animated'}
+                  width={40}
+                  height={40}
+                  className={''}
+                />
               )}
             </div>
           ))}
@@ -32,4 +44,16 @@ const AnimatedTransitionContinous = ({
   )
 }
 
+AnimatedTransitionContinous.propTypes = {
+  data: PropTypes.shape({
+    text: PropTypes.string,
+    color: PropTypes.string,
+    imagePosition: PropTypes.string,
+    image: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      alternativeText: PropTypes.string
+    })
+  })
+}
+
 export default AnimatedTransitionContinous
diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
index 4772d114..8bbb1746 100644
--- a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
+++ b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
@@ -8,6 +8,7 @@
   overflow: hidden;
   z-index: 1;
   margin: 2rem auto;
+
   &__title {
     display: flex;
     position: absolute;
@@ -20,40 +21,51 @@
     white-space: nowrap;
     transform: scale(1.5);
     transition: all 50ms ease;
-    & > div {
+
+    &>div {
       display: flex;
       animation: scrollText 120s infinite linear;
+
       &:hover {
         animation-play-state: paused;
       }
+
       @keyframes scrollText {
         from {
           transform: translateX(0%);
         }
+
         to {
           transform: translateX(-50%);
         }
       }
     }
-    &-image{
+
+    &-image {
       animation: scrollText 200s infinite linear !important;
+
       &:hover {
         animation-play-state: unset !important;
       }
     }
-    &-inner{
+
+    &-inner {
       display: flex;
       flex-direction: row;
       margin-right: 40px;
-      img{
+
+      img {
         margin: 0 50px;
         height: 40px;
+        object-fit: contain;
       }
-      h1 {
+
+      h2 {
         margin: 0;
         color: rgba(255, 255, 255, 1) transparent;
         transition: all 1s ease;
         cursor: default;
+
         &:hover {
           text-decoration: none;
           color: $primary;
@@ -63,14 +75,16 @@
   }
 }
 
-@media screen and (min-width: $breakpoint-lg){
+@media screen and (min-width: $breakpoint-lg) {
   .m-scroll {
     &__title {
       &-inner {
         margin-right: 80px;
-        img{
+
+        img {
           margin: 0 100px;
           height: 70px;
+          width: 70px;
         }
       }
     }
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 5593b2fa..5e743410 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -6,9 +6,11 @@ import { useTheme } from "../../context/themeContext"
 import "./expandGrid.scss"
 import { useLandingUrl } from "../../hooks"
 import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
 const ExpandGrid = ({ data }) => {
   const { theme } = useTheme()
+  const { title, subtitle, items } = data
 
   const backgroundImage = data.backgroundImage?.url
   const backgroundImageDark = data.backgroundImageDark?.url
@@ -26,9 +28,9 @@ const ExpandGrid = ({ data }) => {
       <div className="mx-auto sm:mx-3 pb-5 container">
         <section className="expandGrid">
           <div className="expandGrid-body">
-            <h2>{data.title}</h2>
-            <h6 className="px-md-3">{data.subtitle}</h6>
-            {data.items && data.items.length > 0 && (
+            {title && <h2>{title}</h2>}
+            {subtitle && <h3 className="px-md-3">{data.subtitle}</h3>}
+            {items?.length > 0 && (
               <AnimatedList items={data?.items?.slice(0, 4)} />
             )}
           </div>
@@ -60,7 +62,7 @@ ExpandGrid.propTypes = {
         url: PropTypes.string.isRequired,
         localFile: PropTypes.shape({
           childImageSharp: PropTypes.shape({
-            gatsbyImageDate: PropTypes.object.isRequired
+            gatsbyImageData: PropTypes.object.isRequired
           })
         })
       })
@@ -87,7 +89,7 @@ const ListItem = ({ index, onClick, data }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
             <div className="listItem-more">
-              <h5>{data.title}</h5>
+              <h4>{data.title}</h4>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -95,9 +97,10 @@ const ListItem = ({ index, onClick, data }) => {
               shouldFlip={shouldFlip(index)}
               delayUntil={createCardFlipId(index)}
             >
-              <img src={data.image?.url}
+              <CustomImage
+                image={data?.image}
                 alt={data.image.alternativeText || 'Avatar image'}
-                className="avatar"
+                className='avatar'
               />
             </Flipped>
           </div>
@@ -114,7 +117,12 @@ ListItem.propTypes = {
     title: PropTypes.string.isRequired,
     image: PropTypes.shape({
       url: PropTypes.string.isRequired,
-      alternativeText: PropTypes.string
+      alternativeText: PropTypes.string,
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object.isRequired
+        })
+      })
     }).isRequired
   }).isRequired
 }
@@ -122,6 +130,7 @@ ListItem.propTypes = {
 const ExpandedListItem = ({ index, data, isFirst }) => {
   const getUrl = useLandingUrl()
   const scrollRef = useRef(null)
+
   return (
     <Flipped
       flipId={createCardFlipId(index)}
@@ -137,21 +146,22 @@ const ExpandedListItem = ({ index, data, isFirst }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <h5>{data.title}</h5>
+              <h4>{data.title}</h4>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
               delayUntil={createCardFlipId(index)}
             >
-              <img src={data.image?.url}
-                alt={data.image.alternativeText || 'Avatar image expanded'}
-                className="avatar-expanded"
+              <CustomImage
+                image={data?.image}
+                alt={data?.image?.alternativeText || 'Avatar image expanded'}
+                className='avatar-expanded'
               />
             </Flipped>
             <div className={"additional-content "}>
               <div style={isFirst ? { opacity: "1" } : {}}>
-                <h4>{data.title}</h4>
+                <h6>{data.title}</h6>
                 {data?.text && (
                   <div className="additional-content-markdown">
                     <MarkdownView markdown={data.text}
@@ -183,7 +193,12 @@ ExpandedListItem.propTypes = {
     }),
     image: PropTypes.shape({
       url: PropTypes.string.isRequired,
-      alternativeText: PropTypes.string
+      alternativeText: PropTypes.string,
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object.isRequired
+        })
+      })
     }),
   })
 }
@@ -213,6 +228,7 @@ const AnimatedList = ({ items }) => {
       }
     }
   }
+
   return (
     <Flipper
       flipKey={itemsArray.focused}
@@ -261,5 +277,4 @@ AnimatedList.propTypes = {
   )
 }
 
-
 export default ExpandGrid
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index e1501209..baf30ce5 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -1,25 +1,31 @@
 @import ".././../styles/global.scss";
+
 .expandGrid {
   color: $primary;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  &-background{
+
+  &-background {
     background-size: cover;
     background-repeat: no-repeat;
     padding: 1em 0 0 0;
   }
+
   h2 {
     flex-grow: 1;
     font-weight: 700;
     text-transform: uppercase;
+
     @media screen and (min-width: $breakpoint-md) {
       text-align: center;
     }
   }
-  h6 {
+
+  h3 {
     font-weight: 400;
     margin-bottom: 10px;
+
     @media screen and (min-width: $breakpoint-md) {
       text-align: center;
       line-height: 28px;
@@ -27,15 +33,18 @@
     }
   }
 }
+
 .staggered-list-content {
   margin-top: 2em;
   width: 100%;
   display: flex;
   justify-content: center;
+
   @media screen and (min-width: $breakpoint-md) {
     margin-top: 3em;
   }
 }
+
 .list {
   list-style-type: none;
   display: flex;
@@ -43,47 +52,59 @@
   flex-wrap: wrap;
   width: 100%;
 }
+
 .listItem {
   border-radius: 8px;
   margin: 5px;
   flex: 0 1 calc(calc(100% / 3) - 10px);
+
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
+
   background-color: $primary-container;
   cursor: pointer;
+
   @media screen and (max-width: $breakpoint-xxl) {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
+
   @media screen and (max-width: calc($breakpoint-md - 2px)) {
     flex: 0 1 100%;
   }
+
   &-expanded {
     @extend .listItem;
     flex-basis: 100%;
   }
 }
+
 .listItemContent {
   display: flex;
   flex-direction: row;
   height: 100%;
   position: relative;
+
   @media screen and (max-width: calc($breakpoint-md - 2px)) {
     flex-direction: column;
     align-items: unset;
   }
+
   &-expanded {
     @extend .listItemContent;
-    & > *:not(img) {
+
+    &>*:not(img) {
       padding: 1em;
     }
   }
 }
+
 .avatar {
   width: 100%;
   aspect-ratio: 1/1;
   margin: 0;
   border-radius: 8px;
+
   &-expanded {
     @extend .avatar;
     box-shadow: 0px 4px 4px 0px #00000040;
@@ -91,34 +112,41 @@
     margin-right: 0;
     min-width: 33%;
     max-width: 33%;
+
     @media screen and (max-width: calc($breakpoint-md - 2px)) {
       min-width: 100%;
       max-width: 100%;
       height: 400px;
       object-fit: cover;
     }
+
     @media screen and (max-width: calc($breakpoint-md - 2px)) {
       height: unset;
       object-fit: unset;
     }
   }
 }
+
 .expandedListItem .description {
   display: flex;
   flex-direction: column;
 }
+
 .expandedListItem {
   cursor: pointer;
   background-color: #D0D0D0;
 }
+
 .additional-content {
   box-shadow: 0px 4px 4px 0px #00000040;
   width: 100%;
   overflow: hidden;
+
   @media screen and (max-width: 890px) {
     margin: 0;
   }
 }
+
 .listItem-more {
   position: absolute;
   inset: 0 0 20px 20px;
@@ -129,27 +157,33 @@
   opacity: 1;
   color: black;
   width: 90%;
+
   p {
     padding: 0;
     margin: 0;
   }
+
   &-expanded {
     @extend .listItem-more;
     padding: 0 !important;
+
     @media screen and (max-width: $breakpoint-xl) {
       display: none;
     }
   }
 }
-.additional-content > div {
+
+.additional-content>div {
   opacity: 0;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
-  &-markdown{
+
+  &-markdown {
     height: 80%;
     overflow: hidden;
   }
+
   a {
     font-weight: 600;
     color: $secondary;
@@ -157,20 +191,24 @@
     margin: auto 0 10px 10px;
     z-index: 4;
   }
+
   h4 {
     text-align: left;
   }
 }
+
 /* content fade in animations */
 @keyframes fadeIn {
   0% {
     opacity: 0;
     transform: translateY(20px);
   }
+
   100% {
     opacity: 1;
   }
 }
-.animated-in .additional-content > div {
+
+.animated-in .additional-content>div {
   animation: fadeIn 0.4s forwards;
 }
\ No newline at end of file
diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index 765aec73..7b34bf63 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -1,14 +1,13 @@
 import "./quote.scss"
 import MarkdownView from "react-showdown"
 import React from "react"
-import { Link } from 'gatsby'
-import { useLandingUrl } from "../../hooks"
+import CustomLink from "../CustomLink/CustomLink"
+import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
-const Quote = ({
-  data: { description, title, variant, profileDescription, videoUrl, button, profile, image, strapi_component, id },
-}) => {
+const Quote = ({ data }) => {
+  const { description, title, variant, profileDescription, videoUrl, button, profile, image } = data
 
-  const getUrl = useLandingUrl()
   const url = videoUrl?.replace("watch?v=", "embed/")
   let code = url?.substring(url.lastIndexOf("/") + 1, url.length)
   const codeIndex = code?.indexOf("?")
@@ -18,13 +17,16 @@ const Quote = ({
   }
 
   return (
-    <div className="container mb-3 mb-lg-5" id={strapi_component + "-" + id}>
+    <div className="container mb-3 mb-lg-5">
       <section className={`quote variant-${variant} py-lg-4`}>
         {(image && !videoUrl) && (
           <div className="quote-body">
-            <img
-              src={image.url}
-              alt={image.name}
+            <CustomImage
+              image={image}
+              alt={image?.alternativeText || 'Image quote'}
+              width={290}
+              height={360}
+              className=''
             />
           </div>
         )}
@@ -48,42 +50,46 @@ const Quote = ({
                 webkitallowfullscreen="true"
                 mozallowfullscreen="true"
               ></iframe>
-
             )}
-
           </div>
         )}
 
         <div className="quote-person">
-          <h4 className="quote-person-title">{title}</h4>
-          <MarkdownView markdown={description} className="quote-person-text" />
+          {title && <h4 className="quote-person-title">{title}</h4>}
+          <div className="quote-person-text">
+            <MarkdownView
+              markdown={description}
+              dangerouslySetInnerHTML={{ __html: description }}
+            />
+          </div>
 
           {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"
+              <CustomImage
+                image={profile}
+                alt={profile?.alternativeText || 'Quote author'}
+                width={70}
+                height={70}
+                className=''
               />
               <div className="flex-grow-1 align-self-center">
-                <MarkdownView markdown={profileDescription} className="markdown" />
+                <MarkdownView
+                  markdown={profileDescription}
+                  dangerouslySetInnerHTML={{ __html: profileDescription }}
+                />
               </div>
             </div>
           )}
           {button && (
             <div className="quote-btn">
-              {button.landing_page ? (
-                <Link to={getUrl(button.landing_page.slug)}>
-                  {button.content}
-                </Link>
-              ) : (button.url && (
-                <a href={button.url}
-                  target={button.url.startsWith('http') && '_blank'}
-                  rel={button.url.startsWith('http') && 'noreferrer noopener'}
-                >
-                  <button>{button.content}</button>
-                </a>
-              )
-              )}
+              <button aria-label={`Ir a ${button.content}`}>
+                <CustomLink
+                  content={button.content}
+                  url={button?.url}
+                  landing={button?.landing_page}
+                  className=''
+                />
+              </button>
             </div>
           )}
         </div>
@@ -103,4 +109,39 @@ Quote.defaultProps = {
   image: {},
 }
 
+Quote.propTypes = {
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string.isRequired,
+    variant: PropTypes.string,
+    profileDescription: PropTypes.string,
+    videoUrl: PropTypes.string,
+    button: PropTypes.shape({
+      content: PropTypes.string.isRequired,
+      url: PropTypes.string,
+      landing_page: PropTypes.shape({
+        slug: PropTypes.string.isRequired
+      })
+    }),
+    profile: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      alternativeText: PropTypes.string,
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object.isRequired
+        })
+      })
+    }),
+    image: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      alternativeText: PropTypes.string,
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object.isRequired
+        })
+      })
+    })
+  })
+}
+
 export default Quote
diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss
index 566dcd41..9ecd522c 100644
--- a/src/components/quote/quote.scss
+++ b/src/components/quote/quote.scss
@@ -4,14 +4,22 @@
   display: grid;
   gap: 2em;
   color: $primary;
+
   &-body {
+
     grid-area: quote-body;
+
     img {
+      max-height: 450px;
+      height: 100%;
       width: 100%;
       object-fit: cover;
+      object-position: top;
       border-radius: 8px;
     }
+
     iframe {
+      height: 100%;
       width: 100%;
       margin-bottom: 0;
       min-height: 250px;
@@ -27,6 +35,7 @@
     &-title {
       margin-bottom: 1rem;
     }
+
     &-text {
       margin-bottom: 0;
       display: -webkit-box;
@@ -34,27 +43,35 @@
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
+
+    div>p {
+      margin: 0;
+    }
   }
 
   &-profile {
     grid-area: quote-profile;
     flex-grow: 0;
+    align-items: center;
     align-self: flex-start;
     border-radius: 50%;
     width: 100%;
     z-index: 4;
+
     img {
       width: 65px;
       height: 65px;
       border-radius: 50%;
     }
-    .markdown {
-      p {
-        margin: 0;
-      }
+
+    div>p {
+      margin-bottom: 6px;
     }
   }
+
   &-btn {
+    margin-top: 8px;
+
     button {
       @include primaryBtn;
       border-radius: 8px;
@@ -73,19 +90,26 @@
     }
   }
 }
+
 @media (min-width: $breakpoint-lg) {
   .quote {
     &-body {
+      img {
+        max-height: 550px;
+      }
+
       iframe {
         min-height: 350px !important;
       }
     }
+
     &-btn {
       button {
         width: 150px;
         height: 40px;
       }
     }
+
     &-profile {
       img {
         width: 100px;
@@ -98,10 +122,12 @@
 @media (min-width: $breakpoint-xl) {
   .quote {
     &-body {
+
       iframe {
         min-height: 500px !important;
       }
     }
+
     &-person {
       &-title {
         margin-bottom: 15px;
@@ -109,7 +135,7 @@
     }
   }
 }
-// variantes
+
 .variant {
   &-quote {
     grid-template-areas:
@@ -128,27 +154,19 @@
   }
 
   grid-template-rows: auto 1fr;
+
   @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;
   }
+
   @media screen and (max-width: calc($breakpoint-md - 3px)) {
     display: flex;
     flex-direction: column;
     gap: 1em;
+
     p {
       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;
-      }
-    }
-  } */
-}
+}
\ No newline at end of file
diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js
index 0975ddb2..5a20aa79 100644
--- a/src/components/videoBackground/VideoBackground.js
+++ b/src/components/videoBackground/VideoBackground.js
@@ -1,18 +1,18 @@
 import React, { useEffect, useRef, useState } from "react"
-import ButtonLink from "../ButtonLink/ButtonLink"
 import "./videoBackground.scss"
+import CustomLink from "../CustomLink/CustomLink"
+import PropTypes from "prop-types"
 
-const VideoBackground = ({
-  data: { video, description, button, strapi_component, id, backgroundImage, videoUrl },
-}) => {
+const VideoBackground = ({ data }) => {
+  const { video, description, button, backgroundImage, videoUrl } = data
   const [isVideoPause, setIsVideoPause] = useState(false)
   const videoRef = useRef(null)
 
   const pausePlay = () => {
     if (isVideoPause) {
-      videoRef.current.play()
+      videoRef?.current?.play()
     } else {
-      videoRef.current.pause()
+      videoRef?.current?.pause()
     }
     setIsVideoPause(prev => !prev)
   }
@@ -24,17 +24,18 @@ const VideoBackground = ({
         : undefined
 
     if (isVideoPauseLocal === "true") {
-      videoRef.current?.pause()
+      videoRef?.current?.pause()
       setIsVideoPause(isVideoPauseLocal)
     }
   }, [])
 
   useEffect(() => {
     localStorage.setItem("videoPaused", isVideoPause)
+
   }, [isVideoPause])
 
   const url = videoUrl?.replace("watch?v=", "embed/")
-  let code = url?.substring(url.lastIndexOf("/") + 1, url.length)
+  let code = url?.substring(url?.lastIndexOf("/") + 1, url?.length)
   const codeIndex = code?.indexOf("?")
 
   if (codeIndex !== -1 && code !== undefined) {
@@ -42,20 +43,14 @@ const VideoBackground = ({
   }
 
   return (
-    <div
-      className={`${backgroundImage && "pt-5 pb-3"}`}
-      style={{
-        backgroundImage: `url(${backgroundImage?.url})`, backgroundRepeatY: 'no-repeat',
-      }}
+    <div style={{
+      backgroundImage: backgroundImage ? `url(${backgroundImage?.url})` : '',
+      backgroundRepeatY: 'no-repeat',
+      backgroundPosition: 'center'
+    }}
     >
-      <div
-        className="container px-md-0 px-lg-3 videoBackground-container"
-        id={strapi_component + "-" + id}
-      >
-        <section
-          className="videoBackground"
-          style={{ marginTop: backgroundImage && 130 }}
-        >
+      <div className="container px-md-0 px-lg-3 videoBackground-container">
+        <section className="videoBackground">
           {(video?.url !== null && video?.url !== undefined) ?
             <video
               className="video"
@@ -95,10 +90,15 @@ const VideoBackground = ({
 
           {description &&
             <div className="videoBackground-card">
-              <h5>{description}</h5>
-              <button className="px-4">
-                <ButtonLink button={button} />
-              </button>
+              <h4>{description}</h4>
+              {button && (
+                <CustomLink
+                  content={button.content}
+                  url={button?.url}
+                  landing={button?.landing_page}
+                  className=''
+                />
+              )}
             </div>
           }
         </section>
@@ -107,4 +107,24 @@ const VideoBackground = ({
   )
 }
 
+VideoBackground.propTypes = {
+  data: PropTypes.shape({
+    video: PropTypes.shape({
+      url: PropTypes.string.isRequired
+    }),
+    videoUrl: PropTypes.string,
+    description: PropTypes.string,
+    backgroundImage: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+    }),
+    button: PropTypes.shape({
+      content: PropTypes.string.isRequired,
+      url: PropTypes.string,
+      landing_page: PropTypes.shape({
+        slug: PropTypes.string.isRequired
+      })
+    })
+  })
+}
+
 export default VideoBackground
diff --git a/src/components/videoBackground/videoBackground.scss b/src/components/videoBackground/videoBackground.scss
index e97512dc..a0d0d875 100644
--- a/src/components/videoBackground/videoBackground.scss
+++ b/src/components/videoBackground/videoBackground.scss
@@ -1,10 +1,14 @@
 @import "../../styles/global.scss";
 
 .videoBackground {
+  aspect-ratio: 1.91/1;
+  max-width: 100%;
+
   &-container {
-    margin-top: 50px;
-    margin-bottom: 50px;
+    padding-top: 50px;
+    padding-bottom: 50px;
   }
+
   video,
   iframe {
     width: 100%;
@@ -12,7 +16,9 @@
     object-fit: cover;
     display: block;
     border-radius: 5px;
+    margin-bottom: 0px;
   }
+
   &-card {
     width: 100%;
     backdrop-filter: blur(14px);
@@ -23,30 +29,29 @@
     word-wrap: break-all;
     padding: 15px;
   }
-  h5 {
+
+  h4 {
     width: 100%;
+    margin-bottom: 8px;
     color: $grey;
   }
-  button {
+
+  a {
     @include secondaryBtn;
-    a {
-      color: $grey;
-    }
+    color: $grey;
+    display: block;
+    width: max-content;
+    padding: 8px 16px;
   }
 }
 
 @media screen and (min-width: $breakpoint-md) {
   .videoBackground {
-    // width: calc(100% - 6em);
     height: 400px;
     position: relative;
     z-index: 3;
     display: flex;
-    // margin: 3em;
-    &-container {
-      margin-top: 80px;
-      margin-bottom: 80px;
-    }
+
     .video {
       top: 0;
       position: absolute;
@@ -55,8 +60,8 @@
       object-fit: cover;
       z-index: -1;
       cursor: pointer;
-      // border-radius: 20px;
     }
+
     &-card {
       z-index: 4;
       align-self: flex-end;
@@ -70,12 +75,9 @@
       margin: 2em;
       padding: 2em;
 
-      h5 {
+      h4 {
         color: $grey;
       }
-      button {
-        @include secondaryBtn;
-      }
     }
   }
 }
@@ -83,9 +85,6 @@
 @media screen and (min-width: $breakpoint-lg) {
   .videoBackground {
     height: 520px;
-    &-container {
-      margin-bottom: 80px;
-    }
   }
 }
 
@@ -93,16 +92,4 @@
   .videoBackground {
     height: 720px;
   }
-}
-
-// @media screen and (max-width: $breakpoint-md) {
-//   .videoBackground {
-//     height: 500px;
-//     video {
-//       height: 80%;
-//     }
-//     &-card {
-//       height: 20%;
-//     }
-//   }
-// }
+}
\ No newline at end of file
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index f4bfa746..3d533e14 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -50,7 +50,7 @@ const getDeviseTheme = () => {
   }
 }
 ThemeProvider.propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.node,
 }
 
 export default ThemeProvider
diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js
index 2a2821b0..10cb46b6 100644
--- a/src/hooks/useBlog.js
+++ b/src/hooks/useBlog.js
@@ -22,6 +22,15 @@ const useBlog = () => {
               }
             }
           }
+          imagePage {
+            url
+            alternativeText
+            localFile {
+              childImageSharp {
+                gatsbyImageData
+              }
+            }
+          }
           
           blog_category {
             name
diff --git a/src/hooks/useFooter.js b/src/hooks/useFooter.js
index b8097518..9018cc3b 100644
--- a/src/hooks/useFooter.js
+++ b/src/hooks/useFooter.js
@@ -44,6 +44,7 @@ const useFooter = () => {
             contact {
               title
               iconText {
+                id
                 name
                 icon {
                   code
@@ -59,6 +60,7 @@ const useFooter = () => {
             location {
               title
               iconText {
+                id
                 name
                 icon {
                   code
diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js
index 122f4891..fc860c26 100644
--- a/src/schema/blogSchema.js
+++ b/src/schema/blogSchema.js
@@ -247,6 +247,7 @@ type StrapiBlogCategory implements Node {
       locale: String
     ): Date
     image: LocalFile
+    imagePage: LocalFile
     slug: String
   }
   
diff --git a/src/templates/BlogItemDetail.js b/src/templates/BlogItemDetail.js
index 04f65e60..9b44c76c 100644
--- a/src/templates/BlogItemDetail.js
+++ b/src/templates/BlogItemDetail.js
@@ -1,21 +1,16 @@
 import React from "react"
 import { graphql } from "gatsby"
-import showdown from "showdown"
-// import ReactMarkdown from "react-markdown"
 import MarkdownView from "react-showdown"
 import Layout from "../components/layout"
-import { Seo } from "../components/index.js"
-import { BannerTop } from "../components/index.js"
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { Seo, BannerTop, CustomImage } from "../components/index.js"
+import PropTypes from "prop-types"
 import "./BlogItemDetail.scss"
 
 const BlogDetail = ({ data }) => {
   const { title, description, image, imagePage, author } = data?.allStrapiArticle?.nodes[0]
 
-  const bannerTop = imagePage ? { title, imagePage }  : { title, image }
+  const bannerTop = imagePage ? { title, imagePage } : { title, image }
 
-  let { summary } = author
-  
   return (
     <Layout>
       <Seo title={title} />
@@ -25,15 +20,16 @@ const BlogDetail = ({ data }) => {
           <div className="detail__description">
             <MarkdownView
               markdown={description}
+              dangerouslySetInnerHTML={{ __html: description }}
             />
-            {/* <ReactMarkdown source={description} /> */}
             <div className="detail__description-author">
               {author?.map(author => (
                 <div className="detail__box-author">
                   <div className="detail__box-author-image">
-                    <GatsbyImage
-                      image={getImage(author?.image?.localFile)}
-                      alt={author?.name}
+                    <CustomImage
+                      image={author?.image}
+                      alt={author?.image?.alternativeText || author.name}
+                      className=''
                     />
                   </div>
                   <div className="detail__box-autor-description">
@@ -46,27 +42,59 @@ const BlogDetail = ({ data }) => {
             </div>
           </div>
         </div>
-        {/* <div className="col-lg-4">
-          <div className="detail__sidebar">
-            <h4>Artículos relacionados</h4>
-            <div>
-              <div className="detail__sidebar__blog-card">
-                <div className="detail__sidebar__blog-card-description">
-                  <h3>{title}</h3>
-                  <p>{summary}</p>
-                  <span className="detail__sidebar__blog-card-more"> 
-                    <a href="#" target="_blank">Ver más</a>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div> */}
       </div>
     </Layout>
   )
 }
 
+BlogDetail.propTypes = {
+  data: PropTypes.shape({
+    allStrapiArticle: PropTypes.shape({
+      nodes: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string.isRequired,
+          description: PropTypes.string.isRequired,
+          slug: PropTypes.string.isRequired,
+          image: PropTypes.shape({
+            url: PropTypes.string.isRequired,
+            alternativeText: PropTypes.string,
+            localFile: PropTypes.shape({
+              childImageSharp: PropTypes.shape({
+                gatsbyImageData: PropTypes.object.isRequired
+              })
+            })
+          }),
+          imagePage: PropTypes.shape({
+            url: PropTypes.string.isRequired,
+            alternativeText: PropTypes.string,
+            localFile: PropTypes.shape({
+              childImageSharp: PropTypes.shape({
+                gatsbyImageData: PropTypes.object.isRequired
+              })
+            })
+          }),
+          author: PropTypes.arrayOf(
+            PropTypes.shape({
+              name: PropTypes.string.isRequired,
+              subTitle: PropTypes.string,
+              summary: PropTypes.string,
+              image: PropTypes.shape({
+                url: PropTypes.string.isRequired,
+                alternativeText: PropTypes.string,
+                localFile: PropTypes.shape({
+                  childImageSharp: PropTypes.shape({
+                    gatsbyImageData: PropTypes.object.isRequired
+                  })
+                })
+              })
+            })
+          )
+        })
+      )
+    })
+  })
+}
+
 export const query = graphql`
   query($slug: String!) {
     allStrapiArticle(filter: { slug: { eq: $slug } }) {
@@ -75,6 +103,8 @@ export const query = graphql`
         description
         slug
         image {
+          url
+          alternativeText
           localFile {
             childImageSharp {
               gatsbyImageData
@@ -82,6 +112,8 @@ export const query = graphql`
           }
         }
         imagePage{
+          url
+          alternativeText
           localFile {
             childImageSharp {
               gatsbyImageData
@@ -93,6 +125,8 @@ export const query = graphql`
           subTitle
           summary
           image {
+            url
+            alternativeText
             localFile {
               childImageSharp {
                 gatsbyImageData(width: 150, height: 150)
@@ -104,4 +138,5 @@ export const query = graphql`
     }
   }
 `
+
 export default BlogDetail
diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
index fe9b2b2c..41cf5ccc 100644
--- a/src/templates/LandingPage.js
+++ b/src/templates/LandingPage.js
@@ -13,7 +13,10 @@ const LandingPage = ({ data, location }) => {
 
   return (
     <Layout location={location} options={{ hasHeader: true }}>
-      <Seo title={pageData.name} />
+      <Seo title={pageData?.seo?.pageTitle || pageData.name}
+        description={pageData?.seo?.pageDescription}
+        keywords={pageData?.seo?.pageKeywords}
+      />
       {pageData?.body?.length > 0 && (
         <CustomSection sections={pageData.body} />
       )}
@@ -29,7 +32,12 @@ LandingPage.propTypes = {
           name: PropTypes.string.isRequired,
           body: PropTypes.arrayOf(
             PropTypes.object
-          )
+          ),
+          seo: PropTypes.shape({
+            pageTitle: PropTypes.string.isRequired,
+            pageDescription: PropTypes.string.isRequired,
+            pageKeywords: PropTypes.string
+          })
         })
       )
     })
@@ -43,6 +51,11 @@ export const query = graphql`
       nodes {
         body
         name
+        seo {
+          pageTitle
+          pageKeywords
+          pageDescription
+        }
       }
     }
   }