diff --git a/public/landing.png b/public/landing.png
deleted file mode 100644
index b36e94a..0000000
Binary files a/public/landing.png and /dev/null differ
diff --git a/public/landing.webm b/public/landing.webm
new file mode 100644
index 0000000..040bcd9
Binary files /dev/null and b/public/landing.webm differ
diff --git a/public/landing.webp b/public/landing.webp
new file mode 100644
index 0000000..726dadb
Binary files /dev/null and b/public/landing.webp differ
diff --git a/src/App.svelte b/src/App.svelte
index 8a96792..0a78853 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,14 +1,12 @@
+<script>
+    import LandingPage from "./LandingPage/LandingPage.svelte";
+    import "./vars.css";
+    import "./styles.css";
+</script>
 
 <div>
-  <LandingPage />
+    <LandingPage />
 </div>
 
-<script>
-import LandingPage from "./LandingPage/LandingPage.svelte";
-import "./vars.css";
-import "./styles.css";
-</script>
-
 <style>
 </style>
-
diff --git a/src/LandingPage/LandingPage.scss b/src/LandingPage/LandingPage.scss
index ac6a3eb..52b7ecc 100644
--- a/src/LandingPage/LandingPage.scss
+++ b/src/LandingPage/LandingPage.scss
@@ -1,36 +1,54 @@
-  .landing-page,
-  .landing-page * {
-    box-sizing: border-box;
-  }
+.landing-page,
+.landing-page * {
+  box-sizing: border-box;
+}
 
-  .landing-page {
-    background: var(--background);
-    width: 100vw;
-    min-width: 250px;
+.landing-page {
+  background: var(--background);
+  width: 100vw;
+  min-width: 250px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+}
+
+.landing-zone-outer {
+  position: relative;
+  min-height: 100vh;
+  height: fit-content;
+  width: 100%;
+
+  // Blend out the background image into the plain bg color
+  &::after {
+    content: '';
     position: absolute;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .landing-zone {
-    position: relative;
-    background-image: url("landing.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    bottom: 0;
+    left: 0;
     width: 100%;
+    height: 128px;
+    background: linear-gradient(to bottom,
+        #00000000 0%,
+        var(--background) 100%);
     z-index: 1;
-
-    // Blend out the background image into the plain bg color
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 120px;
-      background: linear-gradient(to bottom,
-          #00000000 0%,
-          var(--background) 100%);
-    }
   }
+}
+
+.landing-zone {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100vh;
+  height: fit-content;
+  z-index: 2;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
diff --git a/src/LandingPage/LandingPage.svelte b/src/LandingPage/LandingPage.svelte
index 2d8a231..9481202 100644
--- a/src/LandingPage/LandingPage.svelte
+++ b/src/LandingPage/LandingPage.svelte
@@ -8,12 +8,36 @@
 
     let className = "";
     export { className as class };
+
+    let useVideo = true;
+    function handleVideoError() {
+        useVideo = false;
+    }
 </script>
 
 <div class={"landing-page " + className}>
-    <div class="landing-zone">
-        <NavigationHeader />
-        <Splash />
+    <div class="landing-zone-outer">
+        {#if useVideo}
+            <video
+                class="background"
+                autoplay
+                muted
+                playsinline
+                on:error={handleVideoError}
+            >
+                <source src="landing.webm" type="video/webm" />
+            </video>
+        {:else}
+            <img
+                class="background"
+                src="landing.webp"
+                alt="Landing background of L-PBF print in progress"
+            />
+        {/if}
+        <div class="landing-zone">
+            <NavigationHeader />
+            <Splash />
+        </div>
     </div>
     <InfoScroll />
     <BottomCall />
diff --git a/src/LandingPage/NavigationHeader.scss b/src/LandingPage/NavigationHeader.scss
index 767be01..48449f9 100644
--- a/src/LandingPage/NavigationHeader.scss
+++ b/src/LandingPage/NavigationHeader.scss
@@ -1,7 +1,8 @@
 .navigation-header {
   position: relative;
-  height: 116.03px;
+  height: 128px;
   width: 100%;
+  padding-bottom: 120px;
 }
 
 .navigation-header-items {
@@ -11,7 +12,7 @@
   align-items: center;
   justify-content: flex-end;
   position: absolute;
-  right: 79.79px;
+  right: 96px;
   top: 28px;
 }
 
diff --git a/src/LandingPage/Splash.scss b/src/LandingPage/Splash.scss
index 9d9de12..ec40892 100644
--- a/src/LandingPage/Splash.scss
+++ b/src/LandingPage/Splash.scss
@@ -1,9 +1,11 @@
 .splash {
   position: relative;
   max-width: 95%;
-  top: 0px;
+  bottom: 0;
+  padding-top: 128px;
   padding-bottom: 128px;
-  padding-right: 32px
+  padding-right: 32px;
+  z-index: 3;
 }
 
 .splash-copy {
@@ -44,6 +46,9 @@
 
 .splash-button {
   background: var(--background);
+  outline-style: solid;
+  outline-width: 2px;
+  outline-color: var(--cpalettemedium);
   border-radius: 8px;
   padding: 18px 32px 18px 32px;
   position: relative;