diff --git a/package.json b/package.json
index c5b84935..d1d2727a 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "react-hubspot-form": "^1.3.7",
     "react-icons": "^4.2.0",
     "react-intersection-observer": "^8.33.1",
+    "react-lottie": "^1.2.3",
     "react-markdown": "5.0.3",
     "react-script-tag": "^1.1.2",
     "react-showdown": "^2.3.1",
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index 3c14eb40..a3902d11 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -1,6 +1,7 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { Link } from "gatsby"
 import ReactMarkdown from "react-markdown"
+import Lottie from 'react-lottie'
 import { useTheme } from "../../context/themeContext"
 
 import "./Banner.scss"
@@ -10,11 +11,21 @@ const Banner = ({ data }) => {
   const title = data?.title
   const variant = data?.variant
   const summary = data?.summary
+  const animation = data?.animation
   const image = data?.image
   const imageDark = data?.imageDark
   const button = data?.button
   const diagonalReverseState =
     variant === "diagonalReverse" ? "col-md-4" : "col-lg-6"
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    rendererSettings: {
+      preserveAspectRatio: 'xMidYMid slice'
+    },
+  }
+
   return (
     <div
       className={`banner ${variant}`}
@@ -44,15 +55,24 @@ const Banner = ({ data }) => {
       </div>
 
       <div
-        className={`imagen col-12 ${
-          variant === "diagonal" ? "col-md-8" : diagonalReverseState
-        } `}
+        className={`imagen col-12 ${variant === "diagonal" ? "col-md-8" : diagonalReverseState
+          } `}
       >
         {/* <img src={image?.url} alt={title} /> */}
-        <img
-          src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
-          alt={title}
-        />
+
+        {image?.url ?
+          <img
+            src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
+            alt={title}
+          /> :
+          <div className="cont-lottie">
+            {animation && <Lottie options={{
+              ...defaultOptions,
+              animationData: animation,
+            }}
+            />}
+          </div>
+        }
       </div>
     </div>
   )
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 95712659..5ad2d3de 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -23,6 +23,10 @@
         width: 100%;
         max-width: 540px;
       }
+      .cont-lottie {
+        width: 300px;
+        height: 300px;
+      }
     }
     .title {
       h1 {
@@ -53,7 +57,6 @@
       width: 100%;
       img {
         max-width: 100%;
-        
       }
     }
     .title {
@@ -216,17 +219,21 @@
     }
   }
   @media screen and (min-width: $breakpoint-sm) {
-    &.hero{
-      .imagen{
+    &.hero {
+      .imagen {
         justify-content: flex-end;
       }
     }
   }
   @media screen and (min-width: $breakpoint-md) {
     align-items: flex-start;
-    &.hero{
-      .imagen{
+    &.hero {
+      .imagen {
         justify-content: flex-end;
+        .cont-lottie {
+          width: 600px;
+          height: 600px;
+        }
       }
     }
     &.top {
@@ -360,18 +367,21 @@
       }
     }
   }
-  
 
   @media screen and (min-width: $breakpoint-lg) {
     flex-direction: row;
 
     &.hero {
-      height: 500px;
+      height: 600px;
       position: relative;
       .imagen {
-        max-height: 500px;
+        max-height: 600px;
         overflow: hidden;
         padding: 0;
+        .cont-lottie {
+          width: 650px;
+          height: 650px;
+        }
       }
 
       .title {
@@ -397,7 +407,7 @@
           max-width: 700px;
         }
       }
-      .title{
+      .title {
         h2 {
           padding-right: 0rem;
         }
diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss
index 1ccf03a1..4f471022 100644
--- a/src/components/DualSection/DualSection.scss
+++ b/src/components/DualSection/DualSection.scss
@@ -53,6 +53,7 @@
   &-img {
     flex-basis: 55%;
     img {
+      border-radius: 8px;
       width: 100%;
       padding: 0;
     }
diff --git a/src/components/Footer/Navegation/navegation.js b/src/components/Footer/Navegation/navegation.js
index ae5d58ad..37b1fceb 100644
--- a/src/components/Footer/Navegation/navegation.js
+++ b/src/components/Footer/Navegation/navegation.js
@@ -7,7 +7,6 @@ export default function Navegation() {
   const data = useFooter()
   const dataFooter = data?.allStrapiLayout?.nodes[0].footer
   const dataNav = data?.allStrapiLayout?.nodes[0].navbar
-  console.log(dataNav)
 
   return (
     <div className="ContactData__Item ps-md-3">
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
index 04640689..978629e6 100644
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react"
 import MarkdownView from "react-showdown"
 import HubspotForm from "react-hubspot-form"
+import Lottie from 'react-lottie'
 import "./Form.scss"
 
 const Form = ({ location, data }) => {
@@ -10,6 +11,15 @@ const Form = ({ location, data }) => {
   const portalId = data?.portalId
   const formId = data?.formId
   const image = data?.image
+  const animation = data?.animation
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    rendererSettings: {
+      preserveAspectRatio: 'xMidYMid slice'
+    },
+  }
 
   useEffect(() => {
     window.addEventListener("message", handler)
@@ -23,7 +33,7 @@ const Form = ({ location, data }) => {
     if (
       event.origin === "https://forms.hsforms.com" ||
       event.origin === "https://site.dev.bitlogic.io" ||
-      event.origin === "https://www.bitlogic.io"||
+      event.origin === "https://www.bitlogic.io" ||
       event.origin === "https://preprod.d2mi1do1cquuwf.amplifyapp.com"
     ) {
       if (
@@ -38,7 +48,6 @@ const Form = ({ location, data }) => {
         }
       }
     }
-    console.log(event.origin, "origin")
   }
 
   const jqueryChange = elem => {
@@ -67,8 +76,19 @@ const Form = ({ location, data }) => {
               className="form__content text-start"
             />
           )}
-          <div className="form__img mt-md-5 text-center text-md-start">
-            <img src={image?.url} alt="hero" />
+          <div className="form__img text-center text-md-start">
+            {image?.url ?
+              <img
+                src={image?.url} alt="hero"
+              /> :
+              <>
+                {animation && <Lottie options={{
+                  ...defaultOptions,
+                  animationData: animation,
+                }}
+                />}
+              </>
+            }
           </div>
         </div>
         <div className="col-12 col-md-6">
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 3073052d..5faf72c5 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -15,15 +15,19 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    > div{
+    > div {
       width: 100%;
     }
   }
   &__img {
-    padding: 2rem 1rem;
     img {
+      padding: 3rem 1rem;
       max-width: 250px;
     }
+
+    svg {
+      max-width: 350px !important;
+    }
   }
   &__content {
     p {
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
index b9285485..27f28d67 100644
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@@ -11,7 +11,7 @@ import { useTheme } from "../../context/themeContext"
 // theme images
 import moon from "../../images/moon-solid.svg"
 import sun from "../../images/sun.svg"
-console.log(menusvg)
+
 const NavBar = () => {
   const { theme, toggleTheme } = useTheme()
   const navbarData = useNavbar()
@@ -32,7 +32,7 @@ const NavBar = () => {
           <GatsbyImage
             image={theme === "dark" && logoDark ? logoDark : logoLight}
             alt={"bitlogic"}
-            className= "logo"
+            className="logo"
           />
         </Link>
         <Navbar.Toggle
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index eb6c0492..e0a7fc16 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -13,7 +13,7 @@
       background-color: $primary-container;
       border-radius: 10px;
       p:first-child {
-        padding-top: 1rem;
+        padding-top: 29px;
       }
       p {
         color: $primary;
@@ -26,13 +26,27 @@
     padding-bottom: 3rem;
 
     .notTitle {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       color: $primary;
       border-radius: 20px;
       background-color: $primary-container;
-      padding: 1rem;
-      margin: 1.5rem 0rem;
-      p:nth-last-child(-n + 2) {
+      padding: 0rem 1rem;
+
+      p:first-child {
+        padding-top: 29px;
+      }
+
+      h6 {
         margin-bottom: 0px;
+
+        &:last-child {
+          padding-bottom: 29px;
+        }
+        strong {
+          font-size: 16px !important;
+        }
       }
     }
   }
diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss
index 35a4dbb8..566dcd41 100644
--- a/src/components/quote/quote.scss
+++ b/src/components/quote/quote.scss
@@ -9,6 +9,7 @@
     img {
       width: 100%;
       object-fit: cover;
+      border-radius: 8px;
     }
     iframe {
       width: 100%;
diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js
index d9642075..67c7de92 100644
--- a/src/hooks/useBlog.js
+++ b/src/hooks/useBlog.js
@@ -51,6 +51,7 @@ const useBlog = () => {
             image {
               url
             }
+            animation
           }
         }
       }
diff --git a/src/hooks/useNavbar.js b/src/hooks/useNavbar.js
index 852ec01c..cd158d71 100644
--- a/src/hooks/useNavbar.js
+++ b/src/hooks/useNavbar.js
@@ -28,7 +28,7 @@ const useNavbar = () => {
               localFile {
                 childImageSharp {
                   gatsbyImageData(
-                    placeholder: TRACED_SVG
+                    placeholder: BLURRED
                   )
                 }
               }
@@ -37,7 +37,7 @@ const useNavbar = () => {
               localFile {
                 childImageSharp {
                   gatsbyImageData(
-                    placeholder: TRACED_SVG
+                    placeholder: BLURRED
                   )
                 }
               }
diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js
index 47105241..7790b30c 100644
--- a/src/schema/blogSchema.js
+++ b/src/schema/blogSchema.js
@@ -452,7 +452,170 @@ type StrapiBlogCategory implements Node {
     summary: String
     button: StrapiBlogPageBannerButton
     image: StrapiBlogPageBannerImage
+    animation: JSON
+  }
+  type StrapiBlogPageBannerAnimation {
+    h: Int
+    v: String
+    w: Int
+    fr: Int
+    ip: Int
+    nm: String
+    op: Int
+    ddd: Int
+    layers: [StrapiBlogPageBannerAnimationLayers]
+  }
+  
+  type StrapiBlogPageBannerAnimationLayers {
+    ao: Int
+    bm: Int
+    ip: Int
+    ks: StrapiBlogPageBannerAnimationLayersKs
+    nm: String
+    op: Int
+    sr: Int
+    st: Int
+    ty: Int
+    ddd: Int
+    ind: Int
+    shapes: [StrapiBlogPageBannerAnimationLayersShapes]
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersKs {
+    a: StrapiBlogPageBannerAnimationLayersKsA
+    o: StrapiBlogPageBannerAnimationLayersKsO
+    p: StrapiBlogPageBannerAnimationLayersKsP
+    r: StrapiBlogPageBannerAnimationLayersKsR
+    s: StrapiBlogPageBannerAnimationLayersKsS
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersKsA {
+    a: Int
+    k: [Float]
+    l: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersKsO {
+    a: Int
+    k: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersKsP {
+    a: Int
+    k: [Int]
+    l: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersKsR {
+    a: Int
+    k: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersKsS {
+    a: Int
+    k: [Int]
+    l: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapes {
+    bm: Int
+    hd: Boolean
+    it: [StrapiBlogPageBannerAnimationLayersShapesIt]
+    ix: Int
+    mn: String
+    nm: String
+    np: Int
+    ty: String
+    cix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesIt {
+    hd: Boolean
+    ix: Int
+    ks: StrapiBlogPageBannerAnimationLayersShapesItKs
+    mn: String
+    nm: String
+    ty: String
+    ind: Int
+    c: StrapiBlogPageBannerAnimationLayersShapesItC
+    o: StrapiBlogPageBannerAnimationLayersShapesItO
+    w: StrapiBlogPageBannerAnimationLayersShapesItW
+    bm: Int
+    lc: Int
+    lj: Int
+    a: StrapiBlogPageBannerAnimationLayersShapesItA
+    p: StrapiBlogPageBannerAnimationLayersShapesItP
+    s: StrapiBlogPageBannerAnimationLayersShapesItS
+    sa: StrapiBlogPageBannerAnimationLayersShapesItSa
+    sk: StrapiBlogPageBannerAnimationLayersShapesItSk
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItKs {
+    a: Int
+    k: StrapiBlogPageBannerAnimationLayersShapesItKsK
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItKsK {
+    c: Boolean
+    i: [[Float]]
+    o: [[Float]]
+    v: [[Float]]
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItC {
+    a: Int
+    k: [Float]
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItO {
+    a: Int
+    k: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItW {
+    a: Int
+    k: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItA {
+    a: Int
+    k: [Int]
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItP {
+    a: Int
+    k: [Float]
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItS {
+    a: Int
+    k: [Int]
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItSa {
+    a: Int
+    k: Int
+    ix: Int
+  }
+  
+  type StrapiBlogPageBannerAnimationLayersShapesItSk {
+    a: Int
+    k: Int
+    ix: Int
   }
+    
   type StrapiBlogPageBannerButton {
     id: Int
     content: String
diff --git a/yarn.lock b/yarn.lock
index 926fe41c..d038b2ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7538,6 +7538,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.1.3:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.9.3.tgz#d84e0176d785fcc373095ad085e3ae4e6da032d6"
+  integrity sha512-QKA31Lu57SMfS09oUvuheEL+BkzjWHuzi7VkO9gSBaynK8tOMF2EwBgRdvcn3vXvX79/Y9RFlm75mjsS8je2+w==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -9517,6 +9522,14 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-lottie@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1"
+  integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    lottie-web "^5.1.3"
+
 react-markdown@5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-5.0.3.tgz#41040ea7a9324b564b328fb81dd6c04f2a5373ac"