diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json
index dbdcdb3a..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","1886264361","2898073905","3206133181","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..75ddab17 100644
--- a/src/components/BannerHead/BannerHead.js
+++ b/src/components/BannerHead/BannerHead.js
@@ -2,31 +2,43 @@ 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;
+  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/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 f4b23d30..1dc38ed5 100644
--- a/src/components/HomePage/HomeContainer/HomeContainer.js
+++ b/src/components/HomePage/HomeContainer/HomeContainer.js
@@ -45,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/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 e018185b..28eb3f8e 100644
--- a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss
+++ b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss
@@ -24,7 +24,7 @@
       border: 0;
       font-size: 18px;
       padding: 2rem 1.5rem 1.2rem 1.5rem;
-      color: #1f1d37;
+      color: $primary;
       display: flex;
       justify-content: baseline;
       @media screen and (max-width: $breakpoint-xl) {
@@ -37,10 +37,10 @@
       /* 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 23fd2331..cc6a6e08 100644
--- a/src/components/NavBar/NavBar.scss
+++ b/src/components/NavBar/NavBar.scss
@@ -1,7 +1,7 @@
 @import "../../styles/global.scss";
 
 .NavBar {
-  background-color: white;
+  background-color: $primary-container;
   z-index: 10;
   & > a {
     margin: 1.5em 0 1em 50px;
@@ -44,7 +44,7 @@
 
 .navbar_item-title-active {
   text-decoration: none;
-  color: #3f6be8 !important;
+  color: $secondary !important;
 }
 
 .NavBar_Side {
@@ -52,18 +52,8 @@
   flex-direction: row;
   align-items: center;
   &-contact {
+    @include primaryBtn;
     white-space: nowrap;
-    box-shadow: 0px 2px 10px #3f6be880;
-    padding: 0.6em;
-    margin-right: 1em;
-    background-color: #3f6be8;
-    color: white;
-    border: 1px solid #3f6be8;
-    border-radius: 4px;
-    &:hover {
-      background-color: white;
-      color: #3f6be8;
-    }
   }
   p {
     color: #1f1d37;
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
index c2cfc279..6df1a6dd 100644
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@@ -49,7 +49,7 @@ const NavBar = () => {
             </div>
           )}
           <div className="NavBar_Side">
-            <button className="NavBar_Side-contact">Let´s Talk</button>
+            <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
index fc096fdd..1f0fc039 100644
--- a/src/components/Text/Text.js
+++ b/src/components/Text/Text.js
@@ -3,12 +3,11 @@ 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 my-3 d-flex flex-column flex-lg-row">
+        <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>
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index d8935adb..e593ffbd 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -1,6 +1,7 @@
 @import "../../styles/global.scss";
 
 .text {
+  color: $primary;
   .title {
     text-transform: uppercase;
   }
diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
index 07079211..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;
@@ -56,7 +58,7 @@
         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 4a639377..c7810ad8 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -6,14 +6,14 @@ import "./expandGrid.scss"
 const ExpandGrid = ({ data }) => {
   return (
     <div
-      className="m-3 mx-auto sm:mx-3 py-5 container"
+      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.slice(0,4)} />
+          <AnimatedList items={data.items.slice(0, 4)} />
         </div>
       </section>
     </div>
@@ -35,9 +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>
+            <div className="listItem-more">
+              <p>Ver mas</p>
+            </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
@@ -53,7 +53,7 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, data }) => {
+const ExpandedListItem = ({ index, data, isFirst }) => {
   return (
     <Flipped
       flipId={createCardFlipId(index)}
@@ -64,13 +64,11 @@ const ExpandedListItem = ({ index, data }) => {
         }, 400)
       }}
     >
-      <div
-        className="listItem-expanded"
-      >
+      <div className="listItem-expanded">
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <p  ></p>
+              <p></p>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -79,7 +77,7 @@ const ExpandedListItem = ({ index, data }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div className="additional-content">
+            <div className={"additional-content " + isFirst ? "animated-in" : ""}>
               <div>
                 <MarkdownView markdown={data.text} />
               </div>
@@ -93,7 +91,7 @@ const ExpandedListItem = ({ index, data }) => {
 
 const AnimatedList = ({ items }) => {
   const [itemsArray, setItemsArray] = useState({ items, focused: null })
-
+  const [isFirst, setIsFirst] = useState(true)
   useEffect(() => {
     setItemsArray(prev => ({ ...prev, focused: items[0].id }))
   }, [])
@@ -102,6 +100,7 @@ const AnimatedList = ({ items }) => {
     for (let i = 0; i < items.length; i++) {
       const item = itemsArray.items[i]
       if (item.id === index) {
+        setIsFirst(false)
         setItemsArray(prevItems => ({
           items: [
             item,
@@ -115,7 +114,6 @@ const AnimatedList = ({ items }) => {
     }
   }
 
-
   return (
     <Flipper
       flipKey={itemsArray.focused}
@@ -134,6 +132,7 @@ const AnimatedList = ({ items }) => {
             <>
               {item.id === itemsArray.focused ? (
                 <ExpandedListItem
+                  isFirst={isFirst}
                   index={itemsArray.focused}
                   data={item}
                 />
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 6d2ffdb7..78ad245f 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -1,11 +1,11 @@
 @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;
@@ -40,7 +40,7 @@
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-  background-color: #ececec;
+  background-color: rgba(180, 180, 180, 0.24);
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
@@ -137,7 +137,6 @@
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
-  height: 5rem;
   h4 {
     text-align: left;
   }
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/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/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