diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index ebf23f3e..23091149 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -11,14 +11,13 @@ 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"
 
-  console.log(data)
-
   const defaultOptions = {
     loop: true,
     autoplay: true,
@@ -60,14 +59,19 @@ const Banner = ({ data }) => {
           } `}
       >
         {/* <img src={image?.url} alt={title} /> */}
+        <div className="cont-image">
+          {image?.url && <img
+            src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
+            alt={title}
+          />}
+
+          {animation && <Lottie options={{
+            ...defaultOptions,
+            animationData: animation,
+          }}
+          />}
+        </div>
 
-        {image?.mime === "application/json" ? <Lottie options={{
-          ...defaultOptions,
-          animationData: data?.animation,
-        }} /> : <img
-          src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
-          alt={title}
-        />}
 
       </div>
     </div>
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 95712659..1eebd106 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -19,6 +19,10 @@
       padding: 1rem;
       display: flex;
       justify-content: center;
+      .cont-image {
+        width: 300px;
+        height: 300px;
+      }
       img {
         width: 100%;
         max-width: 540px;
@@ -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-image {
+          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-image {
+          width: 650px;
+          height: 650px;
+        }
       }
 
       .title {
@@ -397,7 +407,7 @@
           max-width: 700px;
         }
       }
-      .title{
+      .title {
         h2 {
           padding-right: 0rem;
         }
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..dd2da2f8 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,15 @@ 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: data?.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..83c964b8 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -15,15 +15,18 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    > div{
+    > div {
       width: 100%;
     }
   }
   &__img {
-    padding: 2rem 1rem;
     img {
       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/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/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