diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json
index 9ce9bbf8..19e417a7 100644
--- a/public/page-data/index/page-data.json
+++ b/public/page-data/index/page-data.json
@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1693928026","176670904","2898073905","3206133181","3298386516","4006044966"]}
\ No newline at end of file
+    "staticQueryHashes": ["1128713364","176670904","1886264361","2898073905","3206133181","4006044966","943162249"]}
\ No newline at end of file
diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js
index 910766b9..e23f84f9 100644
--- a/src/components/BannerHead/BannerHead.js
+++ b/src/components/BannerHead/BannerHead.js
@@ -2,31 +2,44 @@ import React from "react"
 import "./BannerHead.scss"
 import MarkdownView from "react-showdown"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useTheme } from "../../context/themeContext"
 
 const BannerHead = ({ data }) => {
-    const title = data?.title;
+  console.log(data)
+  const { theme } = useTheme()
 
-    const checkImage = () => {
+  const title = data?.title
 
-        if (data?.image?.url) {
-            return <img src={data?.image?.url} alt={data?.image?.name} />
-        } else {
-            const image = getImage(data?.image?.localFile)
-            return <GatsbyImage image={image} alt={`img-${title}`}></GatsbyImage>
-        }
+  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 class="banner d-flex justify-content-center">
-            <div class="banner__image">
-                {checkImage()}
-            </div>
-
-            {title && (
-                <MarkdownView markdown={title} />
-            )}
-        </div>
-    )
+  return (
+    <div class="banner d-flex justify-content-center">
+      <div class="banner__image">{checkImage()}</div>
+      {title && <MarkdownView markdown={title} />}
+    </div>
+  )
 }
 
 export default BannerHead
diff --git a/src/components/BannerHead/BannerHead.scss b/src/components/BannerHead/BannerHead.scss
index 91fce2c8..9009e4c9 100644
--- a/src/components/BannerHead/BannerHead.scss
+++ b/src/components/BannerHead/BannerHead.scss
@@ -5,7 +5,7 @@
   width: 100%;
   min-height: 300px;
   align-items: center;
-
+  color: $primary;
   h3 {
     color: $primary;
     text-align: center;
diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss
index c6cdc0d1..27ed8d1d 100644
--- a/src/components/BannerList/Banner.scss
+++ b/src/components/BannerList/Banner.scss
@@ -1,6 +1,7 @@
 @import "../../styles/global.scss";
 
 .bannerList {
+  color: $primary;
   .card_item {
     p {
       text-align: justify;
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index ec0310c2..3fee539e 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -16,7 +16,6 @@ const Blog = () => {
   const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
-  console.log(bannerHead)
   const {
     pageTitle,
     pageDescription,
diff --git a/src/components/CasesSection/CasesSection.scss b/src/components/CasesSection/CasesSection.scss
index 60b76c3c..fa14caf1 100644
--- a/src/components/CasesSection/CasesSection.scss
+++ b/src/components/CasesSection/CasesSection.scss
@@ -1,12 +1,14 @@
 @import "../../styles/global.scss";
 
 .casesSection {
+    color: $primary;
     h2 {
         text-align: center;
         font-weight: 700;
     }
 }
 .case {
+    color: $primary;
     --bs-gutter-x: 0 !important;
     padding: 10px;
     &__img {
diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss
index 6c526901..375536f2 100644
--- a/src/components/DualSection/DualSection.scss
+++ b/src/components/DualSection/DualSection.scss
@@ -27,8 +27,13 @@
   }
 }
 
-
 .one_sec {
+  color: $primary;
+  &-background{
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding: 1em 0 0 0;
+  }
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -36,13 +41,8 @@
   gap: 3em;
   padding: 3em 0;
   button {
-    background: $light-grey;
-    color: white;
-    font-weight: 500;
-    border-radius: 3px;
-    border: none;
-    padding: 0.3em;
-    a{
+    @include primaryBtn;
+    a {
       color: inherit;
     }
   }
@@ -51,30 +51,35 @@
     display: block;
   }
 
-  &-title{
+  &-title {
     flex-basis: 45%;
-    h3{
-      font-weight: 400;
+    h3 {
+      font-weight: 700;
+      font-size: 36px;
+      line-height: 40px;
+    }
+    &-body{
+      font-weight: 400 !important;
     }
   }
 
-  &-img{
+  &-img {
     flex-basis: 55%;
-    img{
+    img {
       width: 100%;
-      padding: 0 0 0 3em;
+      padding: 0;
     }
   }
 
   @media screen and (max-width: $breakpoint-xl) {
     flex-direction: column-reverse;
-    &-img{
+    &-img {
       flex-basis: 100%;
     }
-    &-title{
+    &-title {
       padding: 0 10vw;
       flex-basis: 100%;
     }
   }
-
 }
+
diff --git a/src/components/DualSection/OneSection.js b/src/components/DualSection/OneSection.js
index d0b5141e..91ebfbbb 100644
--- a/src/components/DualSection/OneSection.js
+++ b/src/components/DualSection/OneSection.js
@@ -1,25 +1,43 @@
 import React from "react"
+import { useTheme } from "../../context/themeContext"
 
 const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
-  const { title, button, description, image } = dualSectionPart
-    ? dualSectionPart[0]
-    : {}
+  const { theme } = useTheme()
+  const {
+    title,
+    button,
+    description,
+    image,
+    backgroundImage,
+    backgroundImageDark,
+  } = dualSectionPart ? dualSectionPart[0] : {}
 
   return (
-    <div className="one_sec container" id={strapi_component + "-" + id}>
-      <div className="one_sec-title">
-        <h1>{title}</h1>
-        <p>{description}</p>
-        {button && (
-          <button>
-            <a href={button.url} target="_blank" rel="noreferrer">
-              {button.content}
-            </a>
-          </button>
-        )}
-      </div>
-      <div className="one_sec-img">
-        <img src={image?.url} alt="one_sec" />
+    <div
+      className="one_sec-background"
+      style={{
+        backgroundImage: `url(${
+          theme === "dark" && backgroundImageDark?.url
+            ? backgroundImageDark?.url
+            : backgroundImage?.url
+        })`,
+      }}
+    >
+      <div className="one_sec container" id={strapi_component + "-" + id}>
+        <div className="one_sec-title">
+          <h3>{title}</h3>
+          <h3 className="one_sec-title-body">{description}</h3>
+          {button && (
+            <button>
+              <a href={button.url} target="_blank" rel="noreferrer">
+                {button.content}
+              </a>
+            </button>
+          )}
+        </div>
+        <div className="one_sec-img">
+          <img src={image?.url} alt="one_sec" />
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss
index b7560648..2e1cdee6 100644
--- a/src/components/Hero/Hero.scss
+++ b/src/components/Hero/Hero.scss
@@ -1,5 +1,6 @@
 @import "../../styles/global.scss";
 .hero {
+  color: $primary;
   overflow: hidden;
   display: flex;
   flex-direction: row;
diff --git a/src/components/HomePage/HomeContainer/HomeContainer.js b/src/components/HomePage/HomeContainer/HomeContainer.js
index 4cf658aa..1dc38ed5 100644
--- a/src/components/HomePage/HomeContainer/HomeContainer.js
+++ b/src/components/HomePage/HomeContainer/HomeContainer.js
@@ -12,14 +12,16 @@ import VideoBackground from "../../videoBackground/VideoBackground"
 import Hero from "../../Hero/Hero"
 import DualSection from "../../DualSection/DualSection"
 import OneSection from "../../DualSection/OneSection"
+import Text from "../../Text/Text"
 
 const bodyComponents = {
   "home.hero": data => <Hero data={data} />,
   "home.transition": data => <AnimatedTransitionContinous data={data} />,
   "home.quote": data => <Quote data={data} />,
   "home.video-background": data => <VideoBackground data={data} />,
+  "components.text": data => <Text data={data} />,
   "home.dual-section": data =>
-  data.dualSectionPart.length === 1 ? (
+    data.dualSectionPart.length === 1 ? (
       <OneSection data={data} />
     ) : (
       <DualSection data={data} />
@@ -43,7 +45,7 @@ const Home = ({ location }) => {
 
       {/* Dynamic zone */}
       {data.allStrapiHome.nodes[0].body.map(component =>
-        bodyComponents[component.strapi_component](component)
+        bodyComponents[component.strapi_component] ? bodyComponents[component.strapi_component](component) : null
       )}
     </Layout>
   )
diff --git a/src/components/LogosSection/logosSection.js b/src/components/LogosSection/logosSection.js
new file mode 100644
index 00000000..78814e9b
--- /dev/null
+++ b/src/components/LogosSection/logosSection.js
@@ -0,0 +1,33 @@
+import "./logosSection.scss"
+import React from "react"
+import { useTheme } from "../../context/themeContext"
+
+const LogosSection = ({ data }) => {
+  const { title, summary, media } = data
+
+  const { theme } = useTheme()
+
+  const logoList = media.map(logo => {
+    return (
+      <div className="logos__image">
+        <img
+          src={
+            theme === "dark" && logo.imageDark
+              ? logo.imageDark.url
+              : logo.img.url
+          }
+          alt={logo.name}
+        />
+      </div>
+    )
+  })
+  return (
+    <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>}
+      <div className="logos__logos">{logoList}</div>
+    </div>
+  )
+}
+
+export default LogosSection
diff --git a/src/components/LogosSection/logosSection.scss b/src/components/LogosSection/logosSection.scss
new file mode 100644
index 00000000..3d6eab5b
--- /dev/null
+++ b/src/components/LogosSection/logosSection.scss
@@ -0,0 +1,42 @@
+@import "../../styles/global.scss";
+
+.logos {
+    &__title {
+        font-weight: 700;
+        padding-bottom: 20px;
+        text-align: center;
+        width: fit-content;
+        margin: 0 auto;
+    }
+    &__summary {
+        font-weight: 400;
+        text-align: center;
+        line-height: 30px;
+    }
+    &__logos {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &__image {
+        margin-top: 15px;
+        max-width: 220px;
+    }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+    .logos {
+        &__logos {
+            margin: 30px 0;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        &__image {
+            margin: 10px 10px 0 10px;
+        }
+    }
+}
+
diff --git a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js
index 8fc6cdd6..b7a1f865 100644
--- a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js
+++ b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js
@@ -27,7 +27,13 @@ const getComponentTitle = component => {
 const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
   const navbarConfig = [
     ...navbarItems.map(navItem => {
-      if (navItem.landing) {
+      if (navItem.singleType) {
+        return {
+          title: navItem.label,
+          slug: navItem.singleType,
+          dropdown: () => <Dropdown sections={null} />,
+        }
+      } else if (navItem.landing) {
         return {
           title: navItem.label,
           slug: navItem.landing.slug,
@@ -42,7 +48,9 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
                     slug: navItem.landing.slug,
                   }))}
               />
-            ) : null,
+            ) : (
+              <Dropdown sections={null} />
+            ),
         }
       } else if (navItem.url) {
         return {
@@ -52,11 +60,6 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
         }
       }
     }),
-    {
-      title: "Blog",
-      slug: "blog",
-      dropdown: () => <Dropdown sections={null} />,
-    },
   ]
 
   const [activeIndex, setActiveIndex] = useState([])
@@ -112,9 +115,9 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
         {navbarConfig.map((n, index) => {
           return (
             <NavbarItem
-              to={"/" + n.slug}
-              key={n.title}
-              title={n.title}
+              to={"/" + n?.slug}
+              key={n?.title}
+              title={n?.title}
               index={index}
               onMouseEnter={onMouseEnter}
             >
diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss
index d65f2558..01e3864b 100644
--- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss
+++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss
@@ -1,3 +1,4 @@
+@import "../../../../styles/global.scss";
 .dropdown {
   &_elem {
     width: 18.5rem;
@@ -10,7 +11,7 @@
       margin-top: 0;
       margin-bottom: 1rem;
       &-inner{
-        color: black;
+        color: $primary;
       }
     }
   }
@@ -53,8 +54,9 @@
   position: relative;
   top: -20px;
   &-background {
+    filter: brightness(120%);
     transform-origin: 0 0;
-    background-color: white;
+    background-color: $primary-container;
     border-radius: 4px;
     overflow: hidden;
     position: relative;
diff --git a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss
index 01b0f34c..28eb3f8e 100644
--- a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss
+++ b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss
@@ -1,3 +1,5 @@
+@import "../../../../styles/global.scss";
+
 .navbar {
   &-el {
     margin: auto;
@@ -7,6 +9,13 @@
     justify-content: center;
     list-style: none;
     margin: 0;
+    @media screen and (max-width: $breakpoint-xl) {
+      flex-direction: column;
+      justify-content: baseline;
+      a {
+        padding: 0.5em;
+      }
+    }
   }
   &_item {
     position: relative;
@@ -15,18 +24,23 @@
       border: 0;
       font-size: 18px;
       padding: 2rem 1.5rem 1.2rem 1.5rem;
-      color: #1F1D37;
+      color: $primary;
       display: flex;
-      justify-content: center;
+      justify-content: baseline;
+      @media screen and (max-width: $breakpoint-xl) {
+        justify-content: baseline;
+        margin-left: 40px;
+        font-size: 1.4em;
+      }
       transition: opacity 250ms;
       cursor: pointer;
       /* position above the dropdown, otherwise the dropdown will cover up the bottom sliver of the buttons */
       position: relative;
       z-index: 2;
-      &:hover,
-      &:focus {
+      &:hover{
         opacity: 0.7;
         outline: none;
+        color: $secondary;
       }
     }
     &-dropdown_container {
diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss
index 746f257f..cc6a6e08 100644
--- a/src/components/NavBar/NavBar.scss
+++ b/src/components/NavBar/NavBar.scss
@@ -1,8 +1,11 @@
 @import "../../styles/global.scss";
 
 .NavBar {
-  background-color: white;
+  background-color: $primary-container;
   z-index: 10;
+  & > a {
+    margin: 1.5em 0 1em 50px;
+  }
 }
 .NavBar__Logo {
   margin: 16px 28px;
@@ -26,7 +29,7 @@
 .NavBar__Link {
   text-decoration: none;
   text-transform: uppercase;
-  color: #1F1D37;
+  color: #1f1d37;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
@@ -36,44 +39,46 @@
 }
 .NavBar__Link:hover {
   text-decoration: none;
-  color: #3f6BE8;
+  color: #3f6be8;
 }
 
-.NavBar__Link--active {
+.navbar_item-title-active {
   text-decoration: none;
-  color: #3f6BE8;
+  color: $secondary !important;
 }
 
-.NavBar_Side{
+.NavBar_Side {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-around;
   &-contact {
+    @include primaryBtn;
     white-space: nowrap;
-    box-shadow: 0px 2px 10px #3f6be880;
-    padding: .6em;
-    background-color: #3F6BE8;
-    color: white;
-    border: 1px solid #3F6BE8;
-    border-radius: 4px;
-    &:hover{
-      background-color: white;
-      color: #3F6BE8;
-    }
   }
   p {
-    color: #1F1D37;
-    margin: 0 3em;
+    color: #1f1d37;
+    margin: 0 2em 0 2.5em;
+  }
+  @media screen and (max-width: $breakpoint-xl) {
+    margin-left: 40px;
+    font-size: 1.4em;
+    &-contact {
+      font-size: 0.9em;
+    }
+    p {
+      font-size: 1em;
+      margin: 0 2em;
+    }
   }
 }
 
-@media screen and (min-width: 992px) {
-  .NavBar{
+@media screen and (min-width: $breakpoint-xl) {
+  .NavBar {
     display: flex;
     flex-direction: row;
     & > a {
-      flex-basis: 20%;
+      flex-grow: 0;
+      margin: 0 0 0 2em;
     }
   }
   .NavBar__Logo {
@@ -82,26 +87,25 @@
   }
   .NavBar__Collapse {
     /* DESKTOP */
-    justify-content: space-around;
     align-items: center;
+    .NavBar_links {
+      flex-grow: 1;
+    }
   }
   .NavBar__List {
     margin-top: 0rem;
   }
   .NavBar__Item {
     margin-right: 2.5rem;
-    margin-top: .5em;
+    margin-top: 0.5em;
     white-space: nowrap;
   }
-  .NavBar_Side{
-    justify-content: unset;
+  .NavBar_Side {
+    margin-right: 1em;
   }
-  
 }
 
-
-
-.theme-toggle{
+.theme-toggle {
   background: none;
   border: none;
   height: 54px;
@@ -111,4 +115,4 @@
     color: white;
     margin: 0 0 3px 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
index 8cbe8a48..6df1a6dd 100644
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@@ -3,12 +3,10 @@ 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 { useNavbar } from "../../hooks/index"
 
-// default logo
-import logoLight from "../../images/tipologo-azul.png"
-
 import { useTheme } from "../../context/themeContext"
 // theme images
 import moon from "../../images/moon-solid.svg"
@@ -16,14 +14,20 @@ import sun from "../../images/sun.svg"
 const NavBar = () => {
   const { theme, toggleTheme } = useTheme()
   const navbarData = useNavbar()
+
+  const logoLight = getImage(
+    navbarData.allStrapiLayout?.nodes[0].navbar?.logo?.localFile
+  )
+  const logoDark = getImage(
+    navbarData.allStrapiLayout?.nodes[0].navbar?.logoDark?.localFile
+  )
   return (
     <>
       <Navbar variant="dark" expand="xl" className="NavBar">
         <Link to="/">
-          <img
-            src={logoLight}
-            alt="Logo Bitlogic"
-            className="d-inline-block align-top NavBar__Logo"
+          <GatsbyImage
+            image={theme === "dark" && logoDark ? logoDark : logoLight}
+            alt={"bitlogic"}
           />
         </Link>
         <Navbar.Toggle
@@ -33,18 +37,19 @@ const NavBar = () => {
         <Navbar.Collapse id="basic-navbar-nav" className="NavBar__Collapse">
           {/* Menu Links */}
           {navbarData && (
-            <AnimatedNavbar
-              homeComponents={navbarData.allStrapiHome?.nodes[0].body}
-              landingComponents={navbarData.allStrapiLandingPage?.nodes}
-              navbarItems={
-                navbarData.allStrapiLayout?.nodes[0].navbar?.navbarItem
-              }
-              duration={300}
-            />
+            <div className="NavBar_links">
+              <AnimatedNavbar
+                homeComponents={navbarData.allStrapiHome?.nodes[0].body}
+                landingComponents={navbarData.allStrapiLandingPage?.nodes}
+                navbarItems={
+                  navbarData.allStrapiLayout?.nodes[0].navbar?.navbarItem
+                }
+                duration={300}
+              />
+            </div>
           )}
           <div className="NavBar_Side">
-            <button className="NavBar_Side-contact">Let´s Talk</button>
-            <p>ES</p>
+            <button className="NavBar_Side-contact">Hablemos</button>
             <button className="theme-toggle" onClick={toggleTheme}>
               {theme === "dark" ? (
                 <img
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
new file mode 100644
index 00000000..b43f57f7
--- /dev/null
+++ b/src/components/Text/Text.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import MarkdownView from "react-showdown";
+import './Text.scss';
+
+export default function Text({ data }) {
+    console.log(data)
+    const title = data?.title;
+    const description = data?.text;
+
+    return (
+        <div className="text container py-3 d-flex flex-column flex-lg-row">
+
+            {title && (
+                <h2 className="title me-3 mt-5 p-lg-2">{title}</h2>
+            )}
+            {description && (
+                <MarkdownView markdown={description} className="description px-lg-5" />
+            )}
+        </div>
+    )
+}
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
new file mode 100644
index 00000000..e593ffbd
--- /dev/null
+++ b/src/components/Text/Text.scss
@@ -0,0 +1,8 @@
+@import "../../styles/global.scss";
+
+.text {
+  color: $primary;
+  .title {
+    text-transform: uppercase;
+  }
+}
diff --git a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
index 521f6343..abdf4ef5 100644
--- a/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
+++ b/src/components/animatedTransitionContinous/AnimatedTransitionContinous.js
@@ -2,11 +2,11 @@ import React from "react"
 import "./animatedTransitionContinous.scss"
 
 const AnimatedTransitionContinous = ({
-  data: { text = "", image, imagePosition },
+  data: { text = "", image, imagePosition, color },
 }) => {
   let longerText = ""
 
-  const amount = text ? 200 : 100
+  const amount = text ? 200 : 50
   while (longerText.length < amount) {
     longerText = (text || "") + "-" + longerText
   }
@@ -14,13 +14,13 @@ const AnimatedTransitionContinous = ({
   return (
     <div className="m-scroll">
       <div className="m-scroll__title">
-        <div>
+        <div className={text ? "" : "m-scroll__title-image"}>
           {longerText.split("-").map(innerText => (
             <div className="m-scroll__title-inner">
               {imagePosition === "first" && (
                 <img src={image?.url} alt="" />
               )}
-              <h1>{innerText || ""}</h1>
+              <h1 style={{color: color}}>{innerText || ""}</h1>
               {(imagePosition === "last" || !imagePosition) && (
                 <img src={image?.url} alt="" />
               )}
diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
index 68df0b77..1e5e02ab 100644
--- a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
+++ b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
@@ -1,3 +1,5 @@
+@import "../../styles/global.scss";
+
 .m-scroll {
   display: flex;
   position: relative;
@@ -34,6 +36,12 @@
         }
       }
     }
+    &-image{
+      animation: scrollText 200s infinite linear !important;
+      &:hover {
+        animation-play-state: unset !important;
+      }
+    }
     &-inner{
       display: flex;
       flex-direction: row;
@@ -47,11 +55,10 @@
         font-size: 60px;
         color: rgba(255, 255, 255, 1) transparent;
         transition: all 1s ease;
-        -webkit-text-stroke: 1px black;
         cursor: default;
         &:hover {
           text-decoration: none;
-          color: black;
+          color: $primary;
         }
       }
     }
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index b3d709ad..1427a5a2 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -1,16 +1,19 @@
-import React, { useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Flipper, Flipped } from "react-flip-toolkit"
 import MarkdownView from "react-showdown"
 import "./expandGrid.scss"
 
 const ExpandGrid = ({ data }) => {
   return (
-    <div className="m-3 mx-5 sm:mx-3 py-5" id={data.strapi_component + "-" + data.id}>
+    <div
+      className="p-3 mx-auto sm:mx-3 py-5 container"
+      id={data.strapi_component + "-" + data.id}
+    >
       <section className="expandGrid">
         <div className="expandGrid-body">
           <h2>{data.title}</h2>
           <h6 className="px-5">{data.subtitle}</h6>
-          <AnimatedList items={data.items} />
+          <AnimatedList items={data.items.slice(0,4)} />
         </div>
       </section>
     </div>
@@ -32,6 +35,9 @@ const ListItem = ({ index, onClick, data }) => {
       <div className="listItem" onClick={() => onClick(index)}>
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
+          <div className="listItem-more">
+            <p>Ver mas</p>
+          </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
@@ -47,29 +53,25 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => {
-  const scrollRef = useRef(null)
-
+const ExpandedListItem = ({ index, data }) => {
   return (
     <Flipped
       flipId={createCardFlipId(index)}
       stagger="card"
       onStart={el => {
-        scrollToRef(scrollRef)
         setTimeout(() => {
           el.classList.add("animated-in")
         }, 400)
       }}
     >
       <div
-        ref={scrollRef}
         className="listItem-expanded"
-        onClick={el => {
-          onClick(index)
-        }}
       >
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
+            <div className="listItem-more-expanded">
+              <p  ></p>
+            </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
@@ -77,7 +79,6 @@ const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-
             <div className="additional-content">
               <div>
                 <MarkdownView markdown={data.text} />
@@ -91,45 +92,55 @@ const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => {
 }
 
 const AnimatedList = ({ items }) => {
-  const [focused, setFocused] = useState(null)
-  const scrollRef = useRef(null)
+  const [itemsArray, setItemsArray] = useState({ items, focused: null })
+
+  useEffect(() => {
+    setItemsArray(prev => ({ ...prev, focused: items[0].id }))
+  }, [])
+
   const onClick = index => {
-    setFocused(focused === index ? null : index)
-    if (focused !== null) {
-      scrollToRef(scrollRef)
+    for (let i = 0; i < items.length; i++) {
+      const item = itemsArray.items[i]
+      if (item.id === index) {
+        setItemsArray(prevItems => ({
+          items: [
+            item,
+            ...prevItems.items.slice(0, i),
+            ...prevItems.items.slice(i + 1),
+          ],
+          focused: item.id,
+        }))
+        break
+      }
     }
   }
 
-  const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop - 40)
 
   return (
     <Flipper
-      flipKey={focused}
+      flipKey={itemsArray.focused}
       className="staggered-list-content"
       spring="noWobble"
       staggerConfig={{
         card: {
-          reverse: focused !== null,
+          reverse: itemsArray.focused !== null,
         },
       }}
-      decisionData={focused}
-
+      decisionData={itemsArray.focused}
     >
-      <ul ref={scrollRef} className="list">
-        {items.map((item, index) => {
+      <ul className="list">
+        {itemsArray.items.map(item => {
           return (
             <>
-              {index === focused ? (
+              {item.id === itemsArray.focused ? (
                 <ExpandedListItem
-                  index={focused}
-                  onClick={onClick}
+                  index={itemsArray.focused}
                   data={item}
-                  scrollToRef={scrollToRef}
                 />
               ) : (
                 <ListItem
-                  index={index}
-                  key={index}
+                  index={item.id}
+                  key={item.id}
                   onClick={onClick}
                   data={item}
                 />
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index a8dc45e7..a07a445a 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -1,11 +1,11 @@
-@import "../../styles/global.scss";
+@import ".././../styles/global.scss";
 
 .expandGrid {
+  color: $primary;
   display: flex;
   flex-direction: column;
   justify-content: center;
   h2 {
-    color: #333333;
     flex-grow: 1;
     text-align: center;
     font-weight: 700;
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0;
+  padding: 0 5em;
   width: 100%;
 }
 
@@ -37,7 +37,10 @@
   border-radius: 8px;
   margin: 5px;
   flex: 0 1 calc(calc(100% / 3) - 10px);
-  background-color: #ececec;
+  &-focus {
+    flex: 0 1 calc(calc(100% / 3) - 10px);
+  }
+  background-color: rgba(180, 180, 180, 0.24);
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
@@ -62,6 +65,7 @@
   display: flex;
   flex-direction: row;
   height: 100%;
+  position: relative;
   @media screen and (max-width: 890px) {
     flex-direction: column;
     align-items: unset;
@@ -104,13 +108,32 @@
 
 .additional-content {
   width: 100%;
-  margin-top: 2rem;
-
+  overflow: hidden;
   @media screen and (max-width: 890px) {
     margin: 0;
   }
 }
 
+.listItem-more{
+  position: absolute;
+  inset: 0 0 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 200ms ease;
+  opacity: 1;
+  p{
+    padding: 0;
+    margin: 0;
+    @include primaryBtn;
+  }
+  &-expanded{
+    @extend .listItem-more;
+    opacity: 0;
+    padding: 0 !important;
+  }
+}
+
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
diff --git a/src/components/index.js b/src/components/index.js
index f77a2465..203eeac6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,6 +8,7 @@ import BannerTop from "./Banners/BannerTop"
 import BannerHead from "./BannerHead/BannerHead"
 import CasesSection from "./CasesSection/CasesSection"
 import CasesList from "./CasesSection/CasesList"
+import LogosSection from "./LogosSection/logosSection"
 
 
 export {
@@ -20,5 +21,6 @@ export {
   BannerISO,
   BannerClientes,
   BannerTop,
-  BannerHead
+  BannerHead,
+  LogosSection,
 }
diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss
index d5257fcd..7e8b2318 100644
--- a/src/components/quote/quote.scss
+++ b/src/components/quote/quote.scss
@@ -3,7 +3,7 @@
 .quote {
   display: grid;
   gap: 3em;
-
+  color: $primary;
   &-body {
     grid-area: quote-body;
     img {
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index 98749c8f..55fee4e7 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -6,11 +6,13 @@ const themes = {
     "--nav-footer-container": "#2a2c2e",
     "--blog-card-container": "#f5f5f5",
     "--primary": "#000000",
+    "--primary-invert": "#ffffff",
     "--primary-hover": "#000000",
     "--primary-container": "#ffffff",
     "--title-jobs": "#5682c6",
     "--jobs-hover": "#f0f0f0",
 
+    "--secondary": "#3f6be8",
     "--secondary-container": "#25cad3",
     "--border-bottom": "#cdcdcd",
   },
@@ -19,12 +21,14 @@ const themes = {
     "--blog-card-container": "#383838",
 
     "--primary": "#ffffff",
+    "--primary-invert": "#000000",
     "--primary-hover": "#000000",
     "--primary-container": "#292929",
     "--border-bottom": "#565656",
     "--title-jobs": "#1ecad3",
     "--jobs-hover": "#8383833b",
 
+    "--secondary": "#67f293",
     "--secondary-container": "#191919",
   },
 }
diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js
index 69c029d3..854a409e 100644
--- a/src/hooks/useBlog.js
+++ b/src/hooks/useBlog.js
@@ -20,6 +20,7 @@ const useBlog = () => {
               }
             }
           }
+          
           blog_category {
             name
           }
@@ -41,6 +42,13 @@ const useBlog = () => {
                 }
               }
             }
+            imageDark {
+              localFile {
+                childImageSharp {
+                  gatsbyImageData
+                }
+              }
+            }
           }          
         }
       }
diff --git a/src/hooks/useNavbar.js b/src/hooks/useNavbar.js
index 3b3b5bf2..b40a6568 100644
--- a/src/hooks/useNavbar.js
+++ b/src/hooks/useNavbar.js
@@ -9,6 +9,7 @@ const useNavbar = () => {
             navbarItem {
               url
               label
+              singleType
               landing {
                 slug
                 name
@@ -23,6 +24,13 @@ const useNavbar = () => {
                 }
               }
             }
+            logoDark {
+              localFile {
+                childImageSharp {
+                  gatsbyImageData
+                }
+              }
+            }
           }
         }
       }
diff --git a/src/images/moon-solid.svg b/src/images/moon-solid.svg
index f12006da..e687fb82 100644
--- a/src/images/moon-solid.svg
+++ b/src/images/moon-solid.svg
@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#1F1D37" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
\ No newline at end of file
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
\ No newline at end of file
diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js
index 08209392..e76a6e3e 100644
--- a/src/schema/blogSchema.js
+++ b/src/schema/blogSchema.js
@@ -449,7 +449,88 @@ type StrapiBlogCategory implements Node {
     id: Int
     title: String
     image: LocalFile
+    imageDark: LocalFile
   }
+
+type StrapiBlogPageBannerHeadImageDark {
+  id: Int
+  name: String
+  alternativeText: String
+  caption: String
+  width: Int
+  height: Int
+  formats: StrapiBlogPageBannerHeadImageDarkFormats
+  hash: String
+  ext: String
+  mime: String
+  size: Float
+  url: String
+  provider: String
+  created_at(
+    formatString: String
+    fromNow: Boolean
+    difference: String
+    locale: String
+  ): Date
+  updated_at(
+    formatString: String
+    fromNow: Boolean
+    difference: String
+    locale: String
+  ): Date
+  localFile: File
+}
+
+type StrapiBlogPageBannerHeadImageDarkFormats {
+  thumbnail: StrapiBlogPageBannerHeadImageDarkFormatsThumbnail
+  large: StrapiBlogPageBannerHeadImageDarkFormatsLarge
+  medium: StrapiBlogPageBannerHeadImageDarkFormatsMedium
+  small: StrapiBlogPageBannerHeadImageDarkFormatsSmall
+}
+
+type StrapiBlogPageBannerHeadImageDarkFormatsThumbnail {
+  name: String
+  hash: String
+  ext: String
+  mime: String
+  width: Int
+  height: Int
+  size: Float
+  url: String
+}
+
+type StrapiBlogPageBannerHeadImageDarkFormatsLarge {
+  name: String
+  hash: String
+  ext: String
+  mime: String
+  width: Int
+  height: Int
+  size: Float
+  url: String
+}
+
+type StrapiBlogPageBannerHeadImageDarkFormatsMedium {
+  name: String
+  hash: String
+  ext: String
+  mime: String
+  width: Int
+  height: Int
+  size: Float
+  url: String
+}
+
+type StrapiBlogPageBannerHeadImageDarkFormatsSmall {
+  name: String
+  hash: String
+  ext: String
+  mime: String
+  width: Int
+  height: Int
+  size: Float
+  url: String
+}
   
   type StrapiBlogPageBannerHeadImage {
     id: Int
diff --git a/src/schema/layoutSchema.js b/src/schema/layoutSchema.js
index 6d9965e0..88e32287 100644
--- a/src/schema/layoutSchema.js
+++ b/src/schema/layoutSchema.js
@@ -14,7 +14,8 @@ type StrapiLayoutFooter {
   type StrapiLayoutNavbar {
     id: Int
     navbarItem: [StrapiLayoutNavbarNavbarItem]
-    logo: StrapiLayoutNavbarLogo
+    logo: LocalFile
+    logoDark: LocalFile
   }
   
   type StrapiLayoutNavbarNavbarItem {
@@ -24,6 +25,7 @@ type StrapiLayoutFooter {
     url: String
     visible: Boolean
     dropdown: Boolean
+    singleType: String
   }
   
   type StrapiLayoutNavbarNavbarItemLanding {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d8ce36fc..498a3fc4 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -9,6 +9,7 @@ $nav-footer-container: var(--nav-footer-container);
 $blog-card-container: var(--blog-card-container);
 
 $primary: var(--primary);
+$primary-invert: var(--primary-invert);
 $primary-hover: var(--primary-hover);
 $primary-container: var(--primary-container);
 
@@ -18,6 +19,8 @@ $border-bottom: var(--border-bottom);
 $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
 
+
+
 main {
   background-color: $primary-container !important;
 }
@@ -51,7 +54,6 @@ $grey-light: #f5f5f5;
 //new colors
 $grey: #545468;
 $light-grey: #c4c4c4;
-$primary: #3f6be8;
 $alt: #67f293;
 $blackBit: #242424;
 
@@ -67,18 +69,14 @@ $extra-large: 45px;
   padding: 5px 15px;
   font-weight: 500;
   border: none;
-  background-color: $primary;
-  color: white;
+  background-color: $secondary;
+  color: $primary-invert;
   border-radius: 5px;
+  transition: filter 200ms ease-in;
   &:hover {
-    background-color: #b2c4f6;
-    color: #3c6ed0;
+    filter: brightness(135%);
     box-shadow: 0px 3px 10px rgba(138, 254, 113, 0.5);
   }
-  &:active {
-    background-color: #2a50bc;
-    color: white;
-  }
   @media screen and (min-width: $breakpoint-lg) {
     padding: 8px 30px;
   }
diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
index 239dedad..bd4482f1 100644
--- a/src/templates/LandingPage.js
+++ b/src/templates/LandingPage.js
@@ -1,7 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import { Seo, CasesSection, CasesList } from "../components/index.js"
+import { Seo, CasesSection, CasesList, LogosSection } from "../components/index.js"
 
 // componentes del body
 import Hero from "../components/Hero/Hero"
@@ -9,11 +9,12 @@ import BannerList from "../components/BannerList/BannerLis"
 import ExpandGrid from "../components/expandGrid/ExpandGrid"
 import Catsone from "../components/Catsone/catsone"
 import BannerHead from '../components/BannerHead/BannerHead';
+import Text from '../components/Text/Text';
 
 const LandingPage = ({ data, location }) => {
   const pageData = data?.allStrapiLandingPage?.nodes[0]
   const content = pageData.body.map((component, idx) => {
-    console.log(component)
+
     const hero = component.strapi_component === "home.hero" ?
       <Hero data={component} /> :
       null
@@ -42,6 +43,13 @@ const LandingPage = ({ data, location }) => {
       <BannerHead data={component} /> :
       null
 
+    const text = component.strapi_component === "components.text" ?
+      <Text data={component} /> :
+      null
+    const logosSection = component.strapi_component === "components.logos-section" ?
+      <LogosSection data={component} /> :
+      null
+
     return (
       <div key={idx}>
         <>
@@ -52,6 +60,8 @@ const LandingPage = ({ data, location }) => {
           {casesList}
           {catsone}
           {bannerHead}
+          {text}
+          {logosSection}
         </>
       </div>
     )