diff --git a/client/public/videos/hero-background.mp4 b/client/public/videos/hero-background.mp4
new file mode 100644
index 000000000..3484985e7
Binary files /dev/null and b/client/public/videos/hero-background.mp4 differ
diff --git a/client/src/app/sections/LandingSection.tsx b/client/src/app/sections/LandingSection.tsx
index e3cfcb8e2..bdcd4dfef 100644
--- a/client/src/app/sections/LandingSection.tsx
+++ b/client/src/app/sections/LandingSection.tsx
@@ -11,17 +11,19 @@ const LandingSection = () => (
          flex-col items-center
          justify-center overflow-hidden"
     >
-      <div className="pointer-events-none absolute -z-10 h-full w-full brightness-[0.6]">
-        <div className="absolute inset-0 backdrop-blur-sm" />
+      <div className="pointer-events-none absolute -z-10 h-full w-full brightness-[0.5]">
+        <div className="absolute inset-0" />
         <video
-          src="/videos/hero-background.webm"
           autoPlay
-          playsInline
           muted
+          playsInline
           loop
           poster="/images/landing-video-placeholder.webp"
           className="h-full w-full object-cover"
-        />
+        >
+          <source src="/videos/hero-background.mp4" type="video/mp4" />
+          <source src="/videos/hero-background.webm" type="video/webm" />
+        </video>
       </div>
 
       <div className="flex w-full max-w-96 flex-1 flex-col justify-center gap-y-12 px-6 text-center lg:gap-16">