diff --git a/public/right-side.gif b/public/right-side.gif
deleted file mode 100644
index 9d508f6..0000000
Binary files a/public/right-side.gif and /dev/null differ
diff --git a/public/videos/output.mp4 b/public/videos/output.mp4
new file mode 100644
index 0000000..fdb16a4
Binary files /dev/null and b/public/videos/output.mp4 differ
diff --git a/public/videos/output.ogv b/public/videos/output.ogv
new file mode 100644
index 0000000..ab0744a
Binary files /dev/null and b/public/videos/output.ogv differ
diff --git a/public/videos/output.webm b/public/videos/output.webm
new file mode 100644
index 0000000..fdfdf71
Binary files /dev/null and b/public/videos/output.webm differ
diff --git a/public/videos/poster.jpeg b/public/videos/poster.jpeg
new file mode 100644
index 0000000..c62e61b
Binary files /dev/null and b/public/videos/poster.jpeg differ
diff --git a/src/containers/Home/HeroAssetContainer.tsx b/src/containers/Home/HeroAssetContainer.tsx
index 7e923c3..e0f2ecc 100644
--- a/src/containers/Home/HeroAssetContainer.tsx
+++ b/src/containers/Home/HeroAssetContainer.tsx
@@ -5,7 +5,11 @@ import React from 'react'
 export const HeroAssetContainer: React.FC = () => {
   return (
     <Container>
-      <Image src="right-side.gif" alt="right-side" />
+      <Video autoPlay loop muted playsInline poster={'/videos/poster.jpeg'}>
+        <source src={'/videos/output.webm'} type={'video/webm'} />
+        <source src={'/videos/output.mp4'} type={'video/mp4'} />
+        <source src={'/videos/output.ogv'} type={'video/ogv'} />
+      </Video>
     </Container>
   )
 }
@@ -20,7 +24,7 @@ const Container = styled.div`
   }
 `
 
-const Image = styled.img`
+const Video = styled.video`
   position: fixed;
   top: ${uiConfigs.navbarHeight}px;
   right: 0px;