diff --git a/src/assets/stylesheets/spoke.scss b/src/assets/stylesheets/spoke.scss
index 44e6591aacfa994bb79a4a0354b129ae171c4741..037f6dadd90e5e68c9f28dd4085d4022ee81ec10 100644
--- a/src/assets/stylesheets/spoke.scss
+++ b/src/assets/stylesheets/spoke.scss
@@ -1,2 +1,100 @@
 @import 'shared';
 @import 'loader';
+
+$breakpoint: 1280px;
+
+body {
+  @extend %default-font;
+  background: black;
+  color: white;
+  margin: 0;
+}
+
+:local(.bg) {
+  background: radial-gradient(#222C41 0%, black 100%); 
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -2;
+}
+
+:local(.ui) {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh);
+}
+
+:local(.content) {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+:local(.header) {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: white;
+}
+
+:local(.header-links) {
+  display: flex;
+  margin: 24px 12px;
+
+  a {
+    color: white;
+    text-decoration: none;
+    margin: 0px 18px;
+  }
+}
+
+:local(.hero-pane) {
+  display: flex;
+  height: 100%;
+
+  @media(max-width: $breakpoint) {
+    flex-direction: column;
+  }
+}
+
+:local(.hero-message) {
+  width: 600px;
+  background-color: red;
+
+  @media(max-width: $breakpoint) {
+    order: 2;
+    width: 100%;
+  }
+}
+
+:local(.hero-video) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
+  margin-left: 32px;
+  flex: 1;
+
+  @media(max-width: $breakpoint) {
+    height: auto;
+    margin: 0px
+  }
+}
+
+:local(.preview-video) {
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+
+  border-radius: 12px 0 0 12px;
+
+  // TODO match to real video
+  @media(max-width: 1280px) {
+    border-radius: 12px;
+  }
+
+  z-index: -1;
+}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index f4bb05be8bc7f96a39f34b4801d33c710a30f588..b40493dc76181f8b86bd4f748b1fc8e2422b9f41 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -4,6 +4,7 @@ import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
 
 import { lang, messages } from "../utils/i18n";
+import { playVideoWithStopOnBlur } from "../utils/video-utils.js";
 import homeVideoWebM from "../assets/video/home.webm";
 import homeVideoMp4 from "../assets/video/home.mp4";
 import hubLogo from "../assets/images/hub-preview-light-no-shadow.png";
@@ -82,19 +83,7 @@ class HomeRoot extends Component {
   loadHomeVideo = () => {
     const videoEl = document.querySelector("#background-video");
     videoEl.playbackRate = 0.9;
-    function toggleVideo() {
-      // Play the video if the window/tab is visible.
-      if (document.hasFocus()) {
-        videoEl.play();
-      } else {
-        videoEl.pause();
-      }
-    }
-    if ("hasFocus" in document) {
-      document.addEventListener("visibilitychange", toggleVideo);
-      window.addEventListener("focus", toggleVideo);
-      window.addEventListener("blur", toggleVideo);
-    }
+    playVideoWithStopOnBlur(videoEl);
   };
 
   closeDialog() {
diff --git a/src/spoke.js b/src/spoke.js
index f774f91668c88afcea090fbf64d130cd5ee5f278..684e595628cacd02bfc38f637ed20afd0f49e1e0 100644
--- a/src/spoke.js
+++ b/src/spoke.js
@@ -2,6 +2,7 @@ import ReactDOM from "react-dom";
 import React, { Component } from "react";
 //import PropTypes from "prop-types";
 //import classNames from "classnames";
+import { playVideoWithStopOnBlur } from "./utils/video-utils.js";
 import { IntlProvider, /*FormattedMessage, */ addLocaleData } from "react-intl";
 import styles from "./assets/stylesheets/spoke.scss";
 
@@ -25,10 +26,51 @@ class SpokeLanding extends Component {
     super(props);
   }
 
+  componentDidMount() {
+    this.loadVideo();
+  }
+
+  loadVideo() {
+    const videoEl = document.querySelector("#preview-video");
+    playVideoWithStopOnBlur(videoEl);
+  }
+
   render() {
     return (
       <IntlProvider locale={lang} messages={messages}>
-        <div className={styles.ui}>HI</div>
+        <div className={styles.ui}>
+          <div className={styles.header}>
+            <div className={styles.headerLinks}>
+              <a href="/about" rel="noopener noreferrer">
+                About
+              </a>
+              <a href="https://github.com/mozillareality/spoke" rel="noopener noreferrer">
+                Source
+              </a>
+              <a href="https://github.com/mozilla/hubs" rel="noopener noreferrer">
+                Hubs
+              </a>
+            </div>
+          </div>
+          <div className={styles.content}>
+            <div className={styles.heroPane}>
+              <div className={styles.heroMessage}>Message</div>
+              <div className={styles.heroVideo}>
+                <video playsInline muted loop autoPlay className={styles.previewVideo} id="preview-video">
+                  <source
+                    src="https://assets-prod.reticulum.io/assets/video/home-aee18c619a9005bd4b0d31295670af80.webm"
+                    type="video/webm"
+                  />
+                  <source
+                    src="https://assets-prod.reticulum.io/assets/video/home-5af051d2c531928dbaaf51b9badaabde.mp4"
+                    type="video/mp4"
+                  />
+                </video>
+              </div>
+            </div>
+          </div>
+          <div className={styles.bg} />
+        </div>
       </IntlProvider>
     );
   }
diff --git a/src/utils/video-utils.js b/src/utils/video-utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..74fdb626f52901b4b636f9fce7ccf9106bce20a4
--- /dev/null
+++ b/src/utils/video-utils.js
@@ -0,0 +1,15 @@
+export function playVideoWithStopOnBlur(videoEl) {
+  function toggleVideo() {
+    // Play the video if the window/tab is visible.
+    if (document.hasFocus()) {
+      videoEl.play();
+    } else {
+      videoEl.pause();
+    }
+  }
+  if ("hasFocus" in document) {
+    document.addEventListener("visibilitychange", toggleVideo);
+    window.addEventListener("focus", toggleVideo);
+    window.addEventListener("blur", toggleVideo);
+  }
+}