diff --git a/app/components/hero/HeroBackground.vue b/app/components/hero/HeroBackground.vue
index 6fab73c..56e6638 100644
--- a/app/components/hero/HeroBackground.vue
+++ b/app/components/hero/HeroBackground.vue
@@ -1,6 +1,28 @@
 <template>
-  <div class="absolute inset-0 overflow-hidden bg-[#0a1533]">
-    <div class="absolute inset-0 bg-[radial-gradient(70%_50%_at_50%_0%,rgba(36,99,235,0.35),rgba(10,21,51,0)_70%)]" />
-    <div class="absolute inset-0 bg-gradient-to-b from-[#0d214f] via-[#0b1b45] to-[#091634]" />
+  <div
+    class="absolute left-0 top-0 w-full overflow-hidden bg-slate-900"
+    :style="{ height: `${height}px` }"
+  >
+    <ClientOnly>
+      <DotLottieVue
+        src="/animations/supply-chain.lottie"
+        autoplay
+        loop
+        :layout="{ fit: 'cover', align: [0.5, 0.5] }"
+        class="absolute inset-0 h-full w-full"
+      />
+    </ClientOnly>
+
+    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/45 via-slate-900/35 to-slate-900/65" />
   </div>
 </template>
+
+<script setup lang="ts">
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+
+withDefaults(defineProps<{
+  height?: number
+}>(), {
+  height: 860
+})
+</script>
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 0649bc0..666ff57 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -10,7 +10,7 @@
       <!-- Fixed Header Container -->
       <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
       <!-- Static hero background for home page -->
-      <HeroBackground v-if="isHomePage" />
+      <HeroBackground v-if="isHomePage" :height="heroBaseHeight" />
       <div class="header-glass-backdrop" aria-hidden="true" />
 
       <!-- MainNavigation -->