diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..68adbe7
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+frontend/assets/img/logo_loading_animation_v1.mp4 filter=lfs diff=lfs merge=lfs -text
+frontend/assets/img/logo_loading_animation_v1.webm filter=lfs diff=lfs merge=lfs -text
diff --git a/frontend/assets/img/logo_loading_animation_v1.gif b/frontend/assets/img/logo_loading_animation_v1.gif
deleted file mode 100644
index e2e5169..0000000
Binary files a/frontend/assets/img/logo_loading_animation_v1.gif and /dev/null differ
diff --git a/frontend/assets/img/logo_loading_animation_v1.mp4 b/frontend/assets/img/logo_loading_animation_v1.mp4
new file mode 100644
index 0000000..6262ae1
--- /dev/null
+++ b/frontend/assets/img/logo_loading_animation_v1.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:54bad3172662477469ad27013ee37efc76bc1d3bf4ed065d203f80a2d55b48a4
+size 96216
diff --git a/frontend/assets/img/logo_loading_animation_v1.webm b/frontend/assets/img/logo_loading_animation_v1.webm
new file mode 100644
index 0000000..673e1c6
--- /dev/null
+++ b/frontend/assets/img/logo_loading_animation_v1.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aed3f48d687eeb8d888edb10e163694e29e2716e49e7a0076a99efdd0085c338
+size 56325
diff --git a/frontend/components/modal/Loading.vue b/frontend/components/modal/Loading.vue
index 9a670b7..c991b39 100644
--- a/frontend/components/modal/Loading.vue
+++ b/frontend/components/modal/Loading.vue
@@ -37,11 +37,23 @@ watch(() => loading.value, refreshZIndex)
     class="loading-modal"
     @click="toggleDebug"
   >
-    <!-- TODO(#8) Swap out this reference -->
-    <img
-      src="@/assets/img/logo_loading_animation_v1.gif"
-      class="gif shadow-3"
+    <video
+      class="loading-animation shadow-3"
+      autoplay
+      loop
+      muted
+      playsinline
     >
+      <source
+        src="@/assets/img/logo_loading_animation_v1.webm"
+        type="video/webm"
+      >
+      <source
+        src="@/assets/img/logo_loading_animation_v1.mp4"
+        type="video/mp4"
+      >
+    </video>
+
     <ul
       v-if="debug"
       class="demo-mode border-1 pr-3 py-2"
@@ -71,7 +83,7 @@ watch(() => loading.value, refreshZIndex)
   align-items: center;
   background: rgb(255 255 255 / 60%);
 
-  .gif {
+  .loading-animation {
     width: 50vw;
     max-width: 10rem;
   }