diff --git a/client/src/app/components/Hero.scss b/client/src/app/components/Hero.scss
index b9b77959c..61c84858a 100644
--- a/client/src/app/components/Hero.scss
+++ b/client/src/app/components/Hero.scss
@@ -22,11 +22,20 @@
         pointer-events: none;
         z-index: -1;
 
-        .bg-image {
+        video {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: auto;
-            max-width: 100%;
             height: 100%;
+            max-width: 100%;
             object-fit: cover;
+            opacity: 1;
+            transition: opacity 300ms;
+        }
+
+        video.bg--hidden {
+            opacity: 0;
         }
     }
 
diff --git a/client/src/app/components/Hero.tsx b/client/src/app/components/Hero.tsx
index 84849e8da..50d2e7144 100644
--- a/client/src/app/components/Hero.tsx
+++ b/client/src/app/components/Hero.tsx
@@ -14,13 +14,22 @@ interface IHero {
 }
 
 export default function Hero({ network, subtitle, overline, networkStats, assetStats }: IHero): React.JSX.Element {
-    const theme = useGetThemeMode();
-
-    const backgroundImage = HERO_BACKGROUNDS[theme];
+    const activeTheme = useGetThemeMode();
     return (
         <div id="hero">
             <div className="bg-container">
-                <img src={backgroundImage} className="bg-image" alt="background" />
+                {Object.entries(HERO_BACKGROUNDS).map(([theme, backgroundUrl]) => (
+                    <video
+                        key={backgroundUrl}
+                        autoPlay
+                        playsInline
+                        loop
+                        muted
+                        className={activeTheme === theme ? "bg--active" : "bg--hidden"}
+                    >
+                        <source src={backgroundUrl} type="video/mp4" />
+                    </video>
+                ))}
             </div>
             <div className="wrapper">
                 <div className="inner">
diff --git a/client/src/app/lib/constants/backgrounds.constants.ts b/client/src/app/lib/constants/backgrounds.constants.ts
index 3813e7241..1a2c481c4 100644
--- a/client/src/app/lib/constants/backgrounds.constants.ts
+++ b/client/src/app/lib/constants/backgrounds.constants.ts
@@ -1,8 +1,9 @@
-import HeroTestnetLight from "~/assets/background/hero-testnet-light.png";
-import HeroTestnetDark from "~/assets/background/hero-testnet-dark.png";
 import { ThemeMode } from "../enums";
 
+const LIGHTMODE_BACKGROUND_URL = "https://files.iota.org/media/explorer_hero_nova_light.mp4";
+const DARKMODE_BACKGROUND_URL = "https://files.iota.org/media/explorer_hero_nova_dark.mp4";
+
 export const HERO_BACKGROUNDS: Record<ThemeMode, string> = {
-    [ThemeMode.Light]: HeroTestnetLight,
-    [ThemeMode.Dark]: HeroTestnetDark,
+    [ThemeMode.Light]: LIGHTMODE_BACKGROUND_URL,
+    [ThemeMode.Dark]: DARKMODE_BACKGROUND_URL,
 };
diff --git a/client/src/assets/background/hero-testnet-dark.png b/client/src/assets/background/hero-testnet-dark.png
deleted file mode 100644
index d674ad9a2..000000000
Binary files a/client/src/assets/background/hero-testnet-dark.png and /dev/null differ
diff --git a/client/src/assets/background/hero-testnet-light.png b/client/src/assets/background/hero-testnet-light.png
deleted file mode 100644
index 37cc6672c..000000000
Binary files a/client/src/assets/background/hero-testnet-light.png and /dev/null differ