diff --git a/public/videos/hero-grid.mp4 b/public/videos/hero-grid.mp4
index 739acce..f167223 100644
Binary files a/public/videos/hero-grid.mp4 and b/public/videos/hero-grid.mp4 differ
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 198b606..dcd2918 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -22,12 +22,16 @@ export const Footer = () => {
     <>
       <Section className={s['pre__footer--section']}>
         <Line className={s['line']} height={276} />
-        <img
-          alt=""
+        <video
+          autoPlay
           className={clsx('hide-on-mobile', s['video'])}
-          loading="eager"
-          src="/images/hero-grid.gif"
-        />
+          controls={false}
+          loop
+          muted
+          preload="true"
+        >
+          <source src="/videos/hero-grid.mp4" type="video/mp4" />
+        </video>
         <Container className={s['pre__footer']}>
           <Isotype className={s['isotype']} />
           <Heading
diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx
index f8b59e7..f07007f 100644
--- a/src/components/sections/homepage/hero/index.tsx
+++ b/src/components/sections/homepage/hero/index.tsx
@@ -26,12 +26,16 @@ const Hero = () => {
 
   return (
     <Section className={s['section']}>
-      <img
-        alt=""
+      <video
+        autoPlay
         className={clsx('hide-on-mobile', s['video'])}
-        loading="eager"
-        src="/images/hero-grid.gif"
-      />
+        controls={false}
+        loop
+        muted
+        preload="true"
+      >
+        <source src="/videos/hero-grid.mp4" type="video/mp4" />
+      </video>
       <Heading as="h1" variant="xl" centered>
         The <br className="hide-on-desktop" />{' '}
         <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
@@ -49,7 +53,7 @@ const Hero = () => {
         Get Started
       </Button>
       <div className={s['scroll']}>
-        <div>
+        <div className="hide-on-mobile">
           <p>C:</p>
           <Flag className={s['flag']} />
         </div>
@@ -59,7 +63,7 @@ const Hero = () => {
           </Heading>
           <ArrowDotted className={s['arrow']} />
         </div>
-        <div className="hide-on-mobile">
+        <div>
           <p>Home</p>
           <ul>
             <li>