diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 6cd531c882..42a5ff434a 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -9,7 +9,7 @@ body {
     min-width: 320px;
     min-height: 100%;
     position: relative;
-    background-color: $black-4;
+    background-color: #0a0a0c;
 }
 .nuxt-loading-indicator {
     background: linear-gradient(90deg, #E151F7 65.38%, #5C47F5 82.43%)!important;
@@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
 
 @include media-breakpoint-down(lg) {
     h1 {
-        font-size: 1.625rem !important;
+        font-size: 1.625rem;
     }
     h2 {
         font-size: $h4-font-size !important;
diff --git a/components/home/Header.vue b/components/home/Header.vue
index 6ac6526f35..756b55e13e 100644
--- a/components/home/Header.vue
+++ b/components/home/Header.vue
@@ -7,8 +7,7 @@
                     <br>
                     Smarter Not Harder
                 </h1>
-                <p>Unified Orchestration Platform to Simplify Business-Critical Workflows
-                    <br>and Govern them as Code and from the UI.</p>
+                <p>Unified Orchestration Platform to Simplify Business-Critical Workflows and Govern them as Code and from the UI.</p>
                 <div class="buttons">
                     <NuxtLink
                         href="/docs/getting-started/quickstart#start-kestra"
@@ -46,16 +45,15 @@
             </div>
             <div class="img-block">
                 <NuxtImg
-                    class="img-fluid headerimg"
-                    src="/landing/home/header.png"
+                    width="2991px"
+                    height="1257px"
+                    loading="lazy"
                     format="webp"
-                    quality="100"
-                    width="1034"
-                    height="785"
-                    densities="x1 x2"
-                    sizes="320px xs:640px lg:1034px"
-                    alt="Unified Orchestration Platform in an All-Inclusive Dashboard"
+                    src="/landing/home/homepage.jpg"
+                    alt="homepage"
+                    class="homepage-image"
                 />
+                <canvas ref="canvas" height="785" width="1034"/>
             </div>
             <div class="companies-background">
                 <LayoutCompanies class="d-xl-none" />
@@ -96,29 +94,57 @@
     </div>
 </template>
 
-<script>
-    import Console from "vue-material-design-icons/Console.vue";
-    import PlayOutline from "vue-material-design-icons/PlayOutline.vue";
-
+<script setup lang="ts">
+    import { ref, onMounted } from "vue";
+    import { useMediaQuery } from "@vueuse/core";
     import TextScroller from "~/components/layout/TextScroller.vue";
 
-    export default {
-        components: {
-            Console,
-            PlayOutline,
-            TextScroller,
-        },
-        data() {
-            return {
-                videoVisible: false,
-                scrollingTexts: [
-                    { text: "Orchestrate", color: "#E500EA" },
-                    { text: "Automate", color: "#4281FF" },
-                    { text: "Schedule", color: "#9D40FB" },
-                ],
-            };
-        },
-    };
+    const isMobile = useMediaQuery('(max-width: 768px)')
+
+    import { Rive } from "@rive-app/canvas";
+
+    const videoVisible = ref(false)
+    const canvas = ref<HTMLCanvasElement>()
+    const scrollingTexts = [
+        { text: "Orchestrate", color: "#E500EA" },
+        { text: "Automate", color: "#4281FF" },
+        { text: "Schedule", color: "#9D40FB" },
+    ]
+
+    const riveAnimation = ref()
+
+    function setupRiveAnimation(){
+        if(!canvas.value) return
+        const anim = new Rive({
+            src: "/landing/home/homepage.riv",
+            canvas: canvas.value,
+            autoplay: true,
+            stateMachines: "kestra",
+            isTouchScrollEnabled: true,
+            onLoad: () => {
+                anim.resizeDrawingSurfaceToCanvas();
+            },
+        });
+        riveAnimation.value = anim
+    }
+
+    onMounted(() => {
+        if(!isMobile.value){
+            setupRiveAnimation()
+        }
+    })
+
+    watch(isMobile, (newVal) => {
+        if(newVal){
+            riveAnimation.value?.cleanup();
+        }else{
+            setupRiveAnimation();
+        }
+    })
+
+    onUnmounted(() => {
+        riveAnimation.value?.cleanup();
+    })
 </script>
 
 <style lang="scss" scoped>
@@ -132,11 +158,12 @@
             z-index: 0;
             width: 100vw;
             height: 91.6%;
-            background: linear-gradient(197.51deg, #390380 13.37%, #14151B 45.45%);
             right: 0;
             top: 0;
         }
         .text-block {
+            position: relative;
+            z-index: 10;
             margin: 4rem 0 1rem;
             display: flex;
             flex-direction: column;
@@ -158,13 +185,15 @@
             color: var(--bs-white);
             text-align: center;
             max-width: 100%;
-            font-size: 32px!important;
-            font-weight: 600;
-            margin: 0;
+            font-size: 24pt;
+            font-weight: 400;
             padding: 0;
-
+            margin-top: 2rem;
+            margin-bottom: 0;
             @include media-breakpoint-up(lg) {
-                font-size: 53px!important;
+                margin: 0;
+                font-size: 39pt;
+                line-height: 1em;
             }
 
 
@@ -182,6 +211,15 @@
             font-weight: 500;
             font-size: $h6-font-size;
             color: $white;
+            text-wrap: balance;
+            margin:0;
+            @include media-breakpoint-down(md) {
+                font-size: 11pt;
+            }
+            @include media-breakpoint-up(lg) {
+                text-wrap: wrap;
+                width: 600px;
+            }
         }
 
         .buttons {
@@ -200,7 +238,7 @@
                 content: "";
                 position: absolute;
                 left: 50%;
-                bottom: calc(-1 * var(--spacer));
+                bottom: -1rem;
                 transform: translateX(-50%);
                 display: inline-block;
                 height: 2px;
@@ -316,32 +354,28 @@
         .img-block
         {
             display: flex;
-            width: 100%;
             justify-content: center;
-            position: relative;
-
-            &:after {
-                content: "";
-                background-image: url(/landing/header-menu/bg-dots.png);
-                background-repeat: no-repeat;
-                background-size: 100% 100%;
-                position: absolute;
-                top: 0;
-                width: 148%;
-                @include media-breakpoint-down(md) {
-                    width: 138%;
-                }
-                height: 85%;
+            .homepage-image{
+                display: none;
             }
-
-            img {
-                width: 80%;
+            @include media-breakpoint-down(md) {
                 position: relative;
-                z-index: 5;
-                @include media-breakpoint-down(md) {
-                    width: 100%;
+                justify-content: flex-start;
+                left: -50px;
+                canvas {
+                    display: none;
+                }
+                .homepage-image{
+                    display: block;
+                    height: 500px;
+                    margin-bottom: 100px;
                 }
             }
+            
+            canvas {
+                width: 2000px;
+                margin-top: -650px;
+            }
         }
 
         :deep(.companies-container) {
diff --git a/components/layout/TextScroller.vue b/components/layout/TextScroller.vue
index 44cae16df2..b6b554bd9d 100644
--- a/components/layout/TextScroller.vue
+++ b/components/layout/TextScroller.vue
@@ -68,18 +68,18 @@ export default {
     animation-duration: 500ms;
     animation-fill-mode: both;
     animation-name: fadeInBottom;
-    font-weight: 600;
-    font-size: 42px!important;
 
     @include media-breakpoint-down(sm) {
-        font-weight: 600;
         min-width: 100%;
         text-align: center;
     }
 
     @include media-breakpoint-up(lg) {
         min-width: 280px;
-        font-size: 55px!important;
+    }
+
+    @include media-breakpoint-down(lg) {
+        font-size: 32pt;
     }
 
     @keyframes fadeInBottom {
diff --git a/package-lock.json b/package-lock.json
index e3996f6ef8..4c602a06bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,11 @@
       "dependencies": {
         "@kestra-io/ui-libs": "^0.0.83",
         "@popperjs/core": "^2.11.8",
+        "@rive-app/canvas": "^2.25.4",
         "@vue-flow/background": "^1.3.2",
         "@vue-flow/controls": "^1.1.2",
         "@vue-flow/core": "^1.41.6",
+        "@vueuse/core": "^12.4.0",
         "axios": "^1.7.9",
         "bootstrap": "^5.3.3",
         "dagre": "^0.8.5",
@@ -3914,6 +3916,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/@rive-app/canvas": {
+      "version": "2.25.4",
+      "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.25.4.tgz",
+      "integrity": "sha512-g0z2ldp77gQr8J2ePmDROq1//8ZWeLZX1myCBDrDs3TJ/tFVuBoLCo3Oa2YrLlT99jrJJU2RhPwvV3otHdn3Cw==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz",
@@ -5190,6 +5198,94 @@
         "vue": "^3.3.0"
       }
     },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue-macros/common": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.15.1.tgz",
@@ -5437,44 +5533,20 @@
       "license": "MIT"
     },
     "node_modules/@vueuse/core": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.4.0.tgz",
+      "integrity": "sha512-XnjQYcJwCsyXyIafyA6SvyN/OBtfPnjvJmbxNxQjCcyWD198urwm5TYvIUUyAxEAN0K7HJggOgT15cOlWFyLeA==",
+      "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.11.1",
-        "@vueuse/shared": "10.11.1",
-        "vue-demi": ">=0.14.8"
+        "@vueuse/metadata": "12.4.0",
+        "@vueuse/shared": "12.4.0",
+        "vue": "^3.5.13"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/head": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
@@ -5491,9 +5563,10 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.4.0.tgz",
+      "integrity": "sha512-AhPuHs/qtYrKHUlEoNO6zCXufu8OgbR8S/n2oMw1OQuBQJ3+HOLQ+EpvXs+feOlZMa0p8QVvDWNlmcJJY8rW2g==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
@@ -5580,41 +5653,17 @@
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
-      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.4.0.tgz",
+      "integrity": "sha512-9yLgbHVIF12OSCojnjTIoZL1+UA10+O4E1aD6Hpfo/DKVm5o3SZIwz6CupqGy3+IcKI8d6Jnl26EQj/YucnW0Q==",
+      "license": "MIT",
       "dependencies": {
-        "vue-demi": ">=0.14.8"
+        "vue": "^3.5.13"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@zadigetvoltaire/nuxt-gtm": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/@zadigetvoltaire/nuxt-gtm/-/nuxt-gtm-0.0.13.tgz",
diff --git a/package.json b/package.json
index d15ef60160..04c9b367e6 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,11 @@
   "dependencies": {
     "@kestra-io/ui-libs": "^0.0.83",
     "@popperjs/core": "^2.11.8",
+    "@rive-app/canvas": "^2.25.4",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.41.6",
+    "@vueuse/core": "^12.4.0",
     "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
     "dagre": "^0.8.5",
diff --git a/pages/index.vue b/pages/index.vue
index f816bb10bd..7fc03d329c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,6 @@
             <Meta name="description"
                   content="Use declarative language to build simpler, faster, scalable and flexible pipelines"/>
         </Head>
-
         <HomeHeader/>
         <HomeFeatures/>
         <NuxtLazyHydrate when-visible>
diff --git a/public/landing/home/homepage.jpg b/public/landing/home/homepage.jpg
new file mode 100644
index 0000000000..ab22a8ae5c
Binary files /dev/null and b/public/landing/home/homepage.jpg differ
diff --git a/public/landing/home/homepage.riv b/public/landing/home/homepage.riv
new file mode 100644
index 0000000000..5338e5c198
Binary files /dev/null and b/public/landing/home/homepage.riv differ