diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index fd25b16..7d8b2d3 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -1,6 +1,5 @@
 import React from "react"
 import MarkdownView from "react-showdown"
-//import ReactMarkdown from "react-markdown"
 import Lottie from "react-lottie"
 import { useTheme } from "../../context/themeContext"
 import "./Banner.scss"
@@ -33,7 +32,6 @@ const Banner = ({ data }) => {
       <div className="container banner__wrapper">
         <div className="title container-md">
           <div>
-            {/* {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>} */}
             {showTitle()}
             {
               <MarkdownView
@@ -41,12 +39,14 @@ const Banner = ({ data }) => {
                 dangerouslySetInnerHTML={{ __html: summary }}
               />
             }
-            <CustomLink
-              content={button?.content}
-              url={button?.url}
-              landing={button?.english_landing_page}
-              className={"button"}
-            />
+            {button && (
+              <CustomLink
+                content={button?.content}
+                url={button?.url}
+                landing={button?.english_landing_page}
+                className={"button"}
+              />
+            )}
           </div>
         </div>
 
diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js
deleted file mode 100644
index 284757c..0000000
--- a/src/components/BannerHead/BannerHead.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react"
-import "./BannerHead.scss"
-import MarkdownView from "react-showdown"
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
-import { useTheme } from "../../context/themeContext"
-import PropTypes from 'prop-types'
-
-const BannerHead = ({ data }) => {
-  const { theme } = useTheme()
-
-  const title = data?.title
-
-  const checkImage = () => {
-    if (data?.image?.url) {
-      return (
-        <img
-          src={
-            theme === "dark" && data?.imageDark
-              ? data?.imageDark?.url
-              : data?.image?.url
-          }
-          alt={data?.image?.name}
-        />
-      )
-    } else {
-      const image = getImage(data?.image?.localFile)
-      const imageDark = data?.imageDark && getImage(data?.imageDark?.localFile)
-      return (
-        <GatsbyImage
-          image={theme === "dark" && imageDark ? imageDark : image}
-          alt={`img-${title}`}
-        ></GatsbyImage>
-      )
-    }
-  }
-
-  return (
-    <div className="banner d-flex justify-content-center">
-      <div className="banner__image">{checkImage()}</div>
-      {title && <MarkdownView markdown={title}  dangerouslySetInnerHTML={{ __html: title }}/>}
-    </div>
-  )
-}
-
-BannerHead.propTypes = {
-  data: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    image: PropTypes.shape({
-      url: PropTypes.string,
-      name: PropTypes.string,
-      localFile: PropTypes.object,
-    }),
-    imageDark: PropTypes.shape({
-      url: PropTypes.string,
-      localFile: PropTypes.object,
-    })
-  })
-
-}
-
-export default BannerHead
diff --git a/src/components/BannerHead/BannerHead.scss b/src/components/BannerHead/BannerHead.scss
deleted file mode 100644
index 9009e4c..0000000
--- a/src/components/BannerHead/BannerHead.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../../styles/global.scss";
-//Pase todos los estilos de PageJobs, cuando este definido el estilo de la pag join-us lo cambiamos
-
-.banner {
-  width: 100%;
-  min-height: 300px;
-  align-items: center;
-  color: $primary;
-  h3 {
-    color: $primary;
-    text-align: center;
-
-    span {
-      background-color: $primary;
-      display: inline-block;
-      -webkit-transform: skew(-15deg);
-      transform: skew(-15deg);
-
-      h3 {
-        padding: 5px 20px;
-        -webkit-transform: skew(15deg);
-        transform: skew(15deg);
-        color: $white !important;
-        margin: 0;
-      }
-    }
-  }
-  h6 {
-    color: $primary;
-    //border-bottom: 4px solid $blue;
-    //padding: 7px;
-    text-align: center;
-    //padding: 0px 15px;
-  }
-}
-
-.cats-mobile {
-  &-column-name {
-    font-size: $small;
-  }
-}
-
-@media (min-width: $breakpoint-md) {
-  .banner {
-    h6 {
-      border-bottom: 4px solid $primary !important;
-      padding: 7px;
-    }
-  }
-}
diff --git a/src/components/BannerList/BannerList.js b/src/components/BannerList/BannerList.js
index f432642..d5421ac 100644
--- a/src/components/BannerList/BannerList.js
+++ b/src/components/BannerList/BannerList.js
@@ -15,7 +15,7 @@ export default function BannerList({ data }) {
           <div className="card_item">
             <CustomImage
               image={item?.icon}
-              alt={item?.icon?.alternativeText || item?.icon?.name}
+              alt={item?.icon?.alternativeText || item.title}
               className={"d-block"}
               width={70}
               height={70}
diff --git a/src/components/CustomImage/CustomImage.js b/src/components/CustomImage/CustomImage.js
index 48e371b..5a643b6 100644
--- a/src/components/CustomImage/CustomImage.js
+++ b/src/components/CustomImage/CustomImage.js
@@ -5,12 +5,10 @@ import PropTypes from "prop-types"
 const CustomImage = ({ image, className, alt, width, height }) => {
   if (!image) return null
 
-
   const { url, localFile } = image
+  const localImage = getImage(localFile?.childImageSharp?.gatsbyImageData)
 
-  if (localFile) {
-    const localImage = getImage(localFile?.childImageSharp?.gatsbyImageData)
-
+  if (localImage) {
     return (
       <GatsbyImage
         loading="lazy"
diff --git a/src/components/DualSection/OneSection.js b/src/components/DualSection/OneSection.js
index 1dc3701..299c5d2 100644
--- a/src/components/DualSection/OneSection.js
+++ b/src/components/DualSection/OneSection.js
@@ -60,7 +60,7 @@ const OneSection = ({ data: { dualSectionPart } }) => {
   )
 }
 
-OneSection.protoTypes = {
+OneSection.propTypes = {
   data: PropTypes.shape({
     dualSectionPart: PropTypes.arrayOf(
       PropTypes.shape({
diff --git a/src/components/LogosSection/logosSection.js b/src/components/LogosSection/logosSection.js
index bb436bc..a9d9b6d 100644
--- a/src/components/LogosSection/logosSection.js
+++ b/src/components/LogosSection/logosSection.js
@@ -1,43 +1,24 @@
 import "./logosSection.scss"
 import React from "react"
 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"
 
-const handleKeyDown = (event, onClick) => {
-  if (event.key === "Enter" || event.key === " ") {
-    onClick()
-  }
-}
-
 const CustomLeftArrow = ({ onClick }) => {
   return (
-    <FontAwesomeIcon
-      role="button"
+    <button
       aria-label="Left arrow to see the previous logo"
-      tabIndex={0}
-      aria-hidden={false}
-      focusable
-      onKeyDown={event => handleKeyDown(event, onClick)}
       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
-      role="button"
+    <button
       aria-label="Right arrow to see the previous logo"
-      tabIndex={0}
-      aria-hidden={false}
-      focusable
-      onKeyDown={event => handleKeyDown(event, onClick)}
       className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right custom-arrow right"
-      icon="fa-solid fa-chevron-right"
       onClick={() => onClick()}
     />
   )
diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js b/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js
index 0e3f868..1fc67c4 100644
--- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js
+++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js
@@ -1,138 +1,94 @@
-import { Link } from "gatsby"
-import React from "react"
-import "./dropdown.scss"
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { useLandingUrl } from "../../../../hooks"
+import React, { memo } from "react"
+import CustomImage from "../../../CustomImage/CustomImage"
+import CustomLink from "../../../CustomLink/CustomLink"
 import PropTypes from "prop-types"
+import "./dropdown.scss"
 
-const Dropdown = ({ sections, topLevel }) => {
-
-  const getUrl = useLandingUrl()
-
-  const url = (item) => {
-    const landing = getUrl(item?.english_landing_page?.slug);
-
-    if (landing) return landing;
+const RenderSection = ({ section, className }) => {
+  return (
+    <>
+      <div className={className}>
+        <CustomImage
+          image={section?.icon}
+          alt={section?.icon?.alternativeText || "NavLink icon"}
+          className="navbarItemIcon"
+          width={28}
+          height={28}
+        />
+        <CustomLink
+          content={section.label}
+          url={section?.url}
+          landing={section?.english_landing_page}
+          className="dropdown_elem-link-inner"
+        />
+      </div>
+      {section?.text && <p className="navItemP">{section.text}</p>}
+    </>
+  )
+}
 
-    return item?.url ? item.url : '';
-  }
+RenderSection.propTypes = {
+  className: PropTypes.string,
+  section: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    text: PropTypes.string,
+    url: PropTypes.string,
+    english_landing_page: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+    }),
+    icon: PropTypes.shape({
+      url: PropTypes.string,
+      alternativeText: PropTypes.string,
+      localFile: PropTypes.shape({
+        childImageSharp: PropTypes.shape({
+          gatsbyImageData: PropTypes.object.isRequired,
+        }),
+      }),
+    }),
+  }),
+}
 
+const Dropdown = memo(({ sections, topLevel }) => {
   return (
     <div className="dropdown_elem" style={!sections ? { maxHeight: "0" } : {}}>
       <div className="dropdown_elem-section" data-first-dropdown-section>
         {topLevel && (
-          <div className="dropdown_elem_topLevel"
-            style={{ borderBottom: "2px solid #808080", marginBottom: "15px", paddingBottom: "8px" }}>
-            <div className="dropdown_elem-link-topLevelLink">
-              {topLevel.icon && (
-                <GatsbyImage
-                  image={getImage(topLevel.icon?.localFile?.childrenImageSharp[0].gatsbyImageData)}
-                  alt={topLevel?.icon?.alternativeText
-                    ? topLevel.icon.alternativeText
-                    : 'NavLink Icon'
-                  }
-                  className="navbarItemIcon"
-                  width={28}
-                  height={28}
-                />
-              )}
-              {url(topLevel).startsWith("http") ? (
-                <a href={url(topLevel)}
-                  className="dropdown_elem-link-inner"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {topLevel.label}
-                </a>
-              ) : (
-                <Link
-                  to={url(topLevel)}
-                  state={{ component: topLevel.id }}
-                  className="dropdown_elem-link-inner"
-                >
-                  {topLevel.label}
-                </Link>
-              )}
-            </div>
-            {topLevel?.text && <p className="navItemP">{topLevel.text}</p>}
+          <div
+            className="dropdown_elem_topLevel"
+            style={{
+              borderBottom: "2px solid #808080",
+              marginBottom: "15px",
+              paddingBottom: "8px",
+            }}
+          >
+            <RenderSection
+              section={topLevel}
+              className={"dropdown_elem-link-topLevelLink"}
+            />
           </div>
         )}
         <div className="dropdown_section">
-          {sections?.map(section =>
+          {sections?.map(section => (
             <div key={section.id}>
-              <div className="dropdown_elem-link">
-                {section.icon && (
-                  <GatsbyImage
-                    image={getImage(section.icon.localFile?.childrenImageSharp[0].gatsbyImageData)}
-                    alt={section.icon.alternativeText
-                      ? section.icon.alternativeText
-                      : 'NavLink Icon'
-                    }
-                    className="navbarItemIcon"
-                    width={28}
-                    height={28}
-                  />
-                )}
-                {url(section).startsWith("http") ? (
-                  <a href={url(section)}
-                    className="dropdown_elem-link-inner"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {section.label}
-                  </a>
-                ) : (
-                  <Link
-                    to={url(section)}
-                    state={{ component: section.id }}
-                    className="dropdown_elem-link-inner"
-                  >
-                    {section.label}
-                  </Link>
-                )}
-              </div>
-              {section?.text && <p className="navItemP">{section.text}</p>}
+              <RenderSection
+                section={section}
+                className={"dropdown_elem-link"}
+              />
             </div>
-          )}
+          ))}
         </div>
-      </div >
+      </div>
     </div>
   )
-}
+})
 
 Dropdown.propTypes = {
-  topLevel: PropTypes.shape({
-    text: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    icon: PropTypes.shape({
-      alternativeText: PropTypes.string,
-      localFile: PropTypes.shape({
-        childrenImageSharp: PropTypes.arrayOf(
-          PropTypes.shape({
-            gatsbyImageData: PropTypes.object.isRequired
-          })
-        )
-      })
-    })
-  }),
+  topLevel: PropTypes.object,
   sections: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.number,
-      text: PropTypes.string,
-      label: PropTypes.string,
-      icon: PropTypes.shape({
-        alternativeText: PropTypes.string,
-        localFile: PropTypes.shape({
-          childrenImageSharp: PropTypes.arrayOf(
-            PropTypes.shape({
-              gatsbyImageData: PropTypes.object.isRequired
-            })
-          )
-        })
-      })
+      id: PropTypes.number.isRequired,
     })
-  )
+  ),
 }
 
 export default Dropdown
diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss
index 70ae4e8..6188e15 100644
--- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss
+++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss
@@ -58,8 +58,10 @@
 }
 
 .navbarItemIcon {
-  width: 28px !important;
-  height: 28px !important;
+  width: 100%;
+  height: 100%;
+  max-width: 28px;
+  max-height: 28px;
   align-self: center;
   margin-right: 5px;
 
diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/index.js b/src/components/NavBar/AnimatedNavBar/DropdownContainer/index.js
index 93d4e92..78d1ae3 100644
--- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/index.js
+++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/index.js
@@ -4,10 +4,7 @@ import { Flipped } from "react-flip-toolkit"
 import FadeContents from "./FadeContents"
 
 const getFirstDropdownSectionHeight = el => {
-  if (
-    !el?.querySelector("*[data-first-dropdown-section]")
-  )
-    return 0
+  if (!el?.querySelector("*[data-first-dropdown-section]")) return 0
   return el.querySelector("*[data-first-dropdown-section]").offsetHeight
 }
 
@@ -84,7 +81,6 @@ class DropdownContainer extends Component {
                 <div
                   className="dropdown_root-background-alt"
                   ref={el => (this.altBackgroundEl = el)}
-                  duration={duration}
                 />
                 <FadeContents
                   direction={direction}
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
index 3d1d7cb..1cf5775 100644
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@@ -1,12 +1,12 @@
 import React, { memo } from "react"
-import "./NavBar.scss"
-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 { Link } from "gatsby"
+import "./NavBar.scss"
 
-import { useNavbar, useLandingUrl } 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"
@@ -15,7 +15,6 @@ import sun from "../../images/sun.svg"
 const NavBar = memo(() => {
   const { theme, toggleTheme } = useTheme()
   const navbarData = useNavbar()
-  const getUrl = useLandingUrl()
 
   const menuData = navbarData.allStrapiLayout?.nodes[0].Menu
 
@@ -29,7 +28,7 @@ const NavBar = memo(() => {
   const navbarButton = navbarData.allStrapiLayout?.nodes[0].navbar?.navButton
 
   return (
-    <Navbar variant="dark" expand="xl" className="NavBar">
+    <Navbar variant="dark" expand="xxl" className="NavBar">
       <Link to="/" className="NavBar__Logo">
         {logoLight && (
           <GatsbyImage
@@ -47,29 +46,19 @@ const NavBar = memo(() => {
         aria-controls="basic-navbar-nav"
       />
       <Navbar.Collapse id="basic-navbar-nav" className="NavBar__Collapse">
-        {/* Menu Links */}
         {menuData && (
           <div className="NavBar_links">
-            <AnimatedNavbar
-              // homeComponents={navbarData.allStrapiHome?.nodes[0].body}
-              navbarItems={menuData}
-              duration={300}
-            />
+            <AnimatedNavbar navbarItems={menuData} duration={300} />
           </div>
         )}
         <div className="NavBar_Side">
           {navbarButton && (
-            <button className="NavBar_Side-contact">
-              <Link
-                to={
-                  navbarButton.landing_page
-                    ? getUrl(navbarButton.landing_page.slug)
-                    : `${navbarButton.url ? navbarButton.url : ""}`
-                }
-              >
-                {navbarButton.content}
-              </Link>
-            </button>
+            <CustomLink
+              content={navbarButton.content}
+              landing={navbarButton?.landing_page}
+              url={navbarButton?.url}
+              className={"NavBar_Side-contact"}
+            />
           )}
           <button className="theme-toggle" onClick={toggleTheme}>
             {theme === "dark" ? (
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index 2754a2f..0fb6d88 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -3,6 +3,7 @@ import { Link } from "gatsby"
 import { useLandingUrl, useNavbar } from "../../hooks/index"
 import "./Navigation.scss"
 import { FaAngleDown } from "react-icons/fa"
+import PropTypes from "prop-types"
 
 const Navigation = ({ data, landing }) => {
   const getUrl = useLandingUrl()
@@ -142,4 +143,36 @@ const Navigation = ({ data, landing }) => {
   )
 }
 
+Navigation.propTypes = {
+  landing: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    slug: PropTypes.string.isRequired,
+    parent_page: PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+    }),
+    ref: PropTypes.shape({
+      current: PropTypes.shape({
+        getBoundingClientRect: PropTypes.func,
+      }),
+    }).isRequired,
+  }),
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    showSiblingPages: PropTypes.bool,
+    relatedPages: PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      pages: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.number,
+          content: PropTypes.string.isRequired,
+          url: PropTypes.string,
+          english_landing_page: PropTypes.shape({
+            slug: PropTypes.string.isRequired,
+          }),
+        })
+      ),
+    }),
+  }),
+}
+
 export default Navigation
diff --git a/src/components/Professionals/Professionals.js b/src/components/Professionals/Professionals.js
index 4667cbc..bb0012c 100644
--- a/src/components/Professionals/Professionals.js
+++ b/src/components/Professionals/Professionals.js
@@ -1,51 +1,32 @@
-import React from 'react'
-import { getImage, GatsbyImage } from "gatsby-plugin-image"
-import { useProfessionals } from '../../hooks'
+import React from "react"
+import { useProfessionals } from "../../hooks"
 import "./Professionals.scss"
 import { FaLinkedinIn } from "react-icons/fa"
 import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
 const Professionals = ({ data }) => {
   const { title, summary, eng_professionals } = data
   const professionalsData = useProfessionals().allStrapiProfessional?.nodes
-  const professionalsList = eng_professionals.map(pro =>
-    professionalsData?.find(professional => professional.strapiId === pro.id)
-  ).slice(0, 6)
-
-  const professionalsCards = professionalsList.map((pro) => {
-
-    const photo = pro?.photo ? getImage(pro?.photo?.localFile) : undefined
+  const professionalsList = eng_professionals
+    .map(pro =>
+      professionalsData?.find(professional => professional.strapiId === pro.id)
+    )
+    .slice(0, 6)
 
-    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-${pro.id}`}
-        id={data.strapi_component + "-" + data.id}
-      >
+      <div className="pro col-12 col-md-4 row" key={`pro-${pro.id}`}>
         <div className="col-6 col-md-12">
-          {photo ? (
-            <GatsbyImage image={photo}
-              className="pro__img"
-              alt={pro?.photo?.alternativeText
-                ? pro.photo.alternativeText
-                : name
-              }
-              loading='lazy'
+          {photo && (
+            <CustomImage
+              image={photo}
+              alt={photo?.alternativeText || name}
               width={160}
               height={250}
-            />
-          ) : (
-            <img src={pro?.photo?.url}
               className="pro__img"
-              alt={pro?.photo?.alternativeText
-                ? pro.photo.alternativeText
-                : name
-              }
-              loading='lazy'
-              width={160}
-              height={250}
             />
           )}
         </div>
@@ -53,10 +34,15 @@ const Professionals = ({ data }) => {
           <div className="pro__descr">
             <h6 className="pro__descr_title">{name}</h6>
             {linkedin && (
-              <a href={linkedin} target="_blank" rel='noreferrer noopener' aria-label='External Link - LinkedIn Profile'>
+              <a
+                href={linkedin}
+                target="_blank"
+                rel="noreferrer noopener"
+                aria-label="External Link - LinkedIn Profile"
+              >
                 <FaLinkedinIn size={23} />
-              </a>)
-            }
+              </a>
+            )}
             {position && <h6 className="pro__descr_position">{position}</h6>}
             <p className="pro__descr_text">{quote}</p>
           </div>
@@ -69,26 +55,30 @@ const Professionals = ({ data }) => {
     <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) &&
+      {professionalsCards !== undefined && professionalsCards.length > 0 && (
         <div className="cases row">{professionalsCards}</div>
-      }
+      )}
     </div>
   )
 }
 
 Professionals.propTypes = {
-  title: PropTypes.string,
-  summary: PropTypes.string,
-  id: PropTypes.string,
-  strapi_component: PropTypes.string,
-  eng_professionals: PropTypes.shape({
-    id: PropTypes.string,
-    photo: PropTypes.shape({
-      localFile: PropTypes.object,
-      url: PropTypes.string,
-      alternativeText: PropTypes.string
-    })
-  })
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    summary: PropTypes.string,
+    eng_professionals: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        position: PropTypes.string,
+        quote: PropTypes.string,
+        linkedin: PropTypes.string,
+        photo: PropTypes.shape({
+          alternativeText: PropTypes.string,
+        }),
+      })
+    ),
+  }),
 }
 
-export default Professionals
\ No newline at end of file
+export default Professionals
diff --git a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
index b9f89f1..e349fb1 100644
--- a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
+++ b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
@@ -1,10 +1,10 @@
 import React from "react"
 import "./animatedTransitionContinous.scss"
 import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
-const AnimatedTransitionContinous = ({
-  data: { text = "", image, imagePosition, color },
-}) => {
+const AnimatedTransitionContinous = ({ data }) => {
+  const { text = "", image, imagePosition, color } = data
   let longerText = ""
 
   const amount = text ? 200 : 50
@@ -16,27 +16,28 @@ const AnimatedTransitionContinous = ({
     <div className="m-scroll">
       <div className="m-scroll__title">
         <div className={text ? "" : "m-scroll__title-image"}>
-          {longerText.split("-").map((innerText, index) => (
-            <div className="m-scroll__title-inner" key={index}>
+          {longerText.split("-").map((innerText, idx) => (
+            <div
+              className="m-scroll__title-inner"
+              key={`AnimatedScroll-${(innerText || "") + idx}`}
+            >
               {imagePosition === "first" && image && (
-                <img src={image?.url}
-                  alt={image?.alternativeText
-                    ? image.alternativeText
-                    : 'Transition-Image'}
-                  width={60}
-                  height={60}
-                  loading="lazy"
+                <CustomImage
+                  image={image}
+                  alt={image?.alternativeText || "Image animated"}
+                  width={40}
+                  height={40}
+                  className={""}
                 />
               )}
               <h1 style={{ color: color }}>{innerText || ""}</h1>
               {(imagePosition === "last" || !imagePosition) && image && (
-                <img src={image?.url}
-                  alt={image?.alternativeText
-                    ? image.alternativeText
-                    : 'Transition-Image'}
-                  width={60}
-                  height={60}
-                  loading="lazy"
+                <CustomImage
+                  image={image}
+                  alt={image?.alternativeText || "Image animated"}
+                  width={40}
+                  height={40}
+                  className={""}
                 />
               )}
             </div>
@@ -54,8 +55,8 @@ AnimatedTransitionContinous.propTypes = {
     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 0351ccd..60b9311 100644
--- a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
+++ b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
@@ -22,7 +22,7 @@
     transform: scale(1.5);
     transition: all 50ms ease;
 
-    &>div {
+    & > div {
       display: flex;
       animation: scrollText 120s infinite linear;
 
@@ -42,6 +42,7 @@
     }
 
     &-image {
+      gap: 50px;
       animation: scrollText 200s infinite linear !important;
 
       &:hover {
@@ -52,15 +53,31 @@
     &-inner {
       display: flex;
       flex-direction: row;
-      margin-right: 40px;
+      width: 100%;
+      height: fit-content;
+      align-items: center;
+
+      picture {
+        width: 0;
+        height: 0;
+      }
 
       img {
-        margin: 0 50px;
+        display: block;
         height: 40px;
+        width: 60px;
+        object-fit: contain !important;
       }
 
-      h1 {
+      .gatsby-image-wrapper.gatsby-image-wrapper-constrained {
+        width: max-content;
+        height: max-content;
+        margin-inline: 64px;
+      }
+
+      h2 {
         margin: 0;
+        padding-inline: 50px;
         color: rgba(255, 255, 255, 1) transparent;
         transition: all 1s ease;
         cursor: default;
@@ -77,14 +94,21 @@
 @media screen and (min-width: $breakpoint-lg) {
   .m-scroll {
     &__title {
-      &-inner {
-        margin-right: 80px;
+      &-image {
+        gap: 180px;
+      }
 
+      &-inner {
         img {
-          margin: 0 100px;
-          height: 70px;
+          height: 70px !important;
+          width: 70px !important;
+          object-fit: cover !important;
+        }
+
+        h2 {
+          padding-inline: 100px;
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 44ee236..992ba25 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -9,30 +9,35 @@ import PropTypes from "prop-types"
 
 const ExpandGrid = ({ data }) => {
   const { theme } = useTheme()
-
-  const backgroundImage = data.backgroundImage?.url
-  const backgroundImageDark = data.backgroundImageDark?.url
+  const {
+    title,
+    subtitle,
+    items,
+    callToAction,
+    backgroundImage,
+    backgroundImageDark,
+  } = data
 
   return (
     <div
       className="expandGrid-background"
       style={{
-        backgroundImage: `url(${theme === "dark" && backgroundImageDark
-          ? backgroundImageDark
-          : backgroundImage
-          })`,
+        backgroundImage: `url(${
+          theme === "dark" && backgroundImageDark
+            ? backgroundImageDark?.url
+            : backgroundImage?.url
+        })`,
       }}
     >
-      <div
-        className="mx-auto sm:mx-3 pb-5 container"
-        id={data.strapi_component + "-" + data.id}
-      >
+      <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>
-            <AnimatedList items={data.items.slice(0, 4)}
-              callToAction={data.callToAction} />
+            {title && <h2>{title}</h2>}
+            {subtitle && <h6 className="px-md-3">{subtitle}</h6>}
+            <AnimatedList
+              items={items.slice(0, 4)}
+              callToAction={callToAction}
+            />
           </div>
         </section>
       </div>
@@ -45,30 +50,14 @@ ExpandGrid.propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     callToAction: PropTypes.string,
-    id: PropTypes.number,
+    items: PropTypes.array,
     backgroundImage: PropTypes.shape({
       url: PropTypes.string,
     }),
     backgroundImageDark: PropTypes.shape({
       url: PropTypes.string,
     }),
-    items: PropTypes.arrayOf(PropTypes.shape({
-      title: PropTypes.string,
-      text: PropTypes.string,
-      landing_page: PropTypes.shape({
-        slug: PropTypes.string.isRequired
-      }),
-      image: PropTypes.shape({
-        alternativeText: PropTypes.string,
-        url: PropTypes.string.isRequired,
-        localFile: PropTypes.shape({
-          childImageSharp: PropTypes.shape({
-            gatsbyImageData: PropTypes.object.isRequired
-          })
-        })
-      })
-    }))
-  })
+  }),
 }
 
 const createCardFlipId = index => `listItem-${index}`
@@ -85,7 +74,11 @@ const ListItem = ({ index, onClick, data }) => {
       stagger="card"
       shouldInvert={shouldFlip(index)}
     >
-      <button className="listItem" onClick={() => onClick(index)} aria-label="Flip Cad" >
+      <button
+        className="listItem"
+        onClick={() => onClick(index)}
+        aria-label="Flip Cad"
+      >
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
             <div className="listItem-more">
@@ -97,10 +90,11 @@ const ListItem = ({ index, onClick, data }) => {
               shouldFlip={shouldFlip(index)}
               delayUntil={createCardFlipId(index)}
             >
-              <img src={data.image?.url}
+              <img
+                src={data.image?.url}
                 className="avatar"
                 loading="lazy"
-                alt={data?.image?.alternativeText ? data.image.alternativeText : 'Card Image'}
+                alt={data?.image?.alternativeText || "Card Image"}
               />
             </Flipped>
           </div>
@@ -111,14 +105,15 @@ const ListItem = ({ index, onClick, data }) => {
 }
 
 ListItem.propTypes = {
- index: PropTypes.number,
- onClick: PropTypes.func,
- data: PropTypes.shape({
-  title: PropTypes.string.isRequired,
-  image: PropTypes.shape({
-    alternativeText: PropTypes.string,
-  }).isRequired
- }).isRequired
+  index: PropTypes.number,
+  onClick: PropTypes.func,
+  data: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    image: PropTypes.shape({
+      url: PropTypes.string,
+      alternativeText: PropTypes.string,
+    }).isRequired,
+  }).isRequired,
 }
 
 const ExpandedListItem = ({ index, data, isFirst, callToAction }) => {
@@ -146,21 +141,26 @@ const ExpandedListItem = ({ index, data, isFirst, callToAction }) => {
               stagger="card-image"
               delayUntil={createCardFlipId(index)}
             >
-              <img src={data.image?.url}
+              <img
+                src={data.image?.url}
                 className="avatar-expanded"
                 loading="lazy"
-                alt={data?.image?.alternativeText ? data.image.alternativeText : 'Card Image Expanded'}
+                alt={data?.image?.alternativeText || "Card Image Expanded"}
               />
             </Flipped>
             <div className={"additional-content "}>
               <div style={isFirst ? { opacity: "1" } : {}}>
                 <h4>{data.title}</h4>
                 <div className="additional-content-markdown">
-                  <MarkdownView markdown={data.text}
-                    dangerouslySetInnerHTML={{ __html: data.text }} />
+                  <MarkdownView
+                    markdown={data.text}
+                    dangerouslySetInnerHTML={{ __html: data.text }}
+                  />
                 </div>
                 {data.english_landing_page && (
-                  <Link to={getUrl(data?.english_landing_page.slug)}>{callToAction}</Link>
+                  <Link to={getUrl(data?.english_landing_page.slug)}>
+                    {callToAction}
+                  </Link>
                 )}
               </div>
             </div>
@@ -178,14 +178,14 @@ ExpandedListItem.propTypes = {
   data: PropTypes.shape({
     title: PropTypes.string.isRequired,
     text: PropTypes.string,
-    landing_page: PropTypes.shape({
+    english_landing_page: PropTypes.shape({
       slug: PropTypes.string.isRequired,
     }),
     image: PropTypes.shape({
       url: PropTypes.string.isRequired,
       alternativeText: PropTypes.string,
-    })
-  })
+    }),
+  }),
 }
 
 const AnimatedList = ({ items, callToAction }) => {
@@ -257,10 +257,8 @@ AnimatedList.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number.isRequired,
-      length: PropTypes.number
     })
-  )
+  ),
 }
 
-
 export default ExpandGrid
diff --git a/src/components/index.js b/src/components/index.js
index 9936292..be8dfc5 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -10,7 +10,6 @@ import OneSection from "./DualSection/OneSection"
 import DualSection from "./DualSection/DualSection"
 import AnimatedTransitionContinous from "./animatedTransitionContinous/AnimatedTransitionContinous"
 import BannerTop from "./Banners/BannerTop"
-import BannerHead from "./BannerHead/BannerHead"
 import Professionals from "./Professionals/Professionals"
 import FeaturedBlogs from "./FeaturedBlogs/FeaturedBlogs"
 import Layaout from "./layout"
@@ -31,7 +30,6 @@ export {
   DualSection,
   AnimatedTransitionContinous,
   BannerTop,
-  BannerHead,
   Professionals,
   FeaturedBlogs,
   Layaout,
diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js
index 59e146c..0992693 100644
--- a/src/components/quote/Quote.js
+++ b/src/components/quote/Quote.js
@@ -97,17 +97,6 @@ const Quote = ({ data }) => {
   )
 }
 
-Quote.defaultProps = {
-  description: "",
-  title: "",
-  variant: "",
-  profileDescription: "",
-  videoUrl: "",
-  button: {},
-  profile: {},
-  image: {},
-}
-
 Quote.propTypes = {
   data: PropTypes.shape({
     title: PropTypes.string,
diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js
index 7919d83..aeee606 100644
--- a/src/components/videoBackground/VideoBackground.js
+++ b/src/components/videoBackground/VideoBackground.js
@@ -147,10 +147,8 @@ const VideoBackground = ({ data }) => {
 
 VideoBackground.propTypes = {
   data: PropTypes.shape({
-    id: PropTypes.string,
     videoUrl: PropTypes.string,
     description: PropTypes.string,
-    strapi_component: PropTypes.string,
     backgroundImage: PropTypes.shape({
       url: PropTypes.string.isRequired,
     }),
@@ -161,7 +159,7 @@ VideoBackground.propTypes = {
     button: PropTypes.shape({
       content: PropTypes.string.isRequired,
       url: PropTypes.string,
-      landing_page: PropTypes.shape({
+      english_landing_page: PropTypes.shape({
         slug: PropTypes.string.isRequired,
       }),
     }),
diff --git a/src/hooks/useNavbar.js b/src/hooks/useNavbar.js
index fe3fd82..3046a07 100644
--- a/src/hooks/useNavbar.js
+++ b/src/hooks/useNavbar.js
@@ -48,7 +48,7 @@ const useNavbar = () => {
                 alternativeText
                 url
                 localFile {
-                  childrenImageSharp {
+                  childImageSharp {
                     gatsbyImageData(placeholder: BLURRED)
                   }
                 }
@@ -64,7 +64,7 @@ const useNavbar = () => {
               url
               icon {
                 localFile {
-                  childrenImageSharp {
+                  childImageSharp {
                     gatsbyImageData(placeholder: BLURRED)
                   }
                 }
diff --git a/src/templates/BlogItemDetail.js b/src/templates/BlogItemDetail.js
index 386d7c8..34701c8 100644
--- a/src/templates/BlogItemDetail.js
+++ b/src/templates/BlogItemDetail.js
@@ -1,7 +1,5 @@
 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, BannerTop } from "../components/index.js"
@@ -10,19 +8,11 @@ import PropTypes from "prop-types"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 
 const BlogDetail = ({ data }) => {
-  const {
-    title,
-    description,
-    image,
-    imagePage,
-    author,
-    seo,
-  } = data?.allStrapiArticle?.nodes[0] || {}
+  const { title, description, image, imagePage, author, seo } =
+    data?.allStrapiArticle?.nodes[0] || {}
 
   const bannerTop = imagePage ? { title, imagePage } : { title, image }
 
-  // let { summary } = author
-
   return (
     <Layout>
       <Seo
@@ -38,19 +28,14 @@ const BlogDetail = ({ data }) => {
               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" key={author.id}>
                   {author.image && (
                     <div className="detail__box-author-image">
                       <GatsbyImage
                         image={getImage(author?.image?.localFile)}
-                        alt={
-                          author.image.alternativeText
-                            ? author.image.alternativeText
-                            : author?.name
-                        }
+                        alt={author.image.alternativeText || author?.name}
                       />
                     </div>
                   )}
@@ -70,7 +55,7 @@ const BlogDetail = ({ data }) => {
 }
 
 BlogDetail.propTypes = {
-   data: PropTypes.shape({
+  data: PropTypes.shape({
     allStrapiArticle: PropTypes.shape({
       nodes: PropTypes.arrayOf(
         PropTypes.shape({
@@ -82,39 +67,40 @@ BlogDetail.propTypes = {
             alternativeText: PropTypes.string,
             localFile: PropTypes.shape({
               childImageSharp: PropTypes.shape({
-                gatsbyImageData: PropTypes.object.isRequired
-              })
-            })
+                gatsbyImageData: PropTypes.object.isRequired,
+              }),
+            }),
           }),
           imagePage: PropTypes.shape({
             url: PropTypes.string,
             alternativeText: PropTypes.string,
             localFile: PropTypes.shape({
               childImageSharp: PropTypes.shape({
-                gatsbyImageData: PropTypes.object.isRequired
-              })
-            })
+                gatsbyImageData: PropTypes.object.isRequired,
+              }),
+            }),
           }),
           author: PropTypes.arrayOf(
             PropTypes.shape({
+              id: PropTypes.number.isRequired,
               name: PropTypes.string.isRequired,
               subTitle: PropTypes.string,
               summary: PropTypes.string,
               image: PropTypes.shape({
-                url: PropTypes.string.isRequired,
+                url: PropTypes.string,
                 alternativeText: PropTypes.string,
                 localFile: PropTypes.shape({
                   childImageSharp: PropTypes.shape({
-                    gatsbyImageData: PropTypes.object.isRequired
-                  })
-                })
-              })
+                    gatsbyImageData: PropTypes.object.isRequired,
+                  }),
+                }),
+              }),
             })
-          )
+          ),
         })
-      )
-    })
-   })
+      ),
+    }),
+  }),
 }
 
 export const query = graphql`