diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 710520a1afd56f3a5f1c1437722ac31d8803cb6d..036a769acdf2762ea4ef42fb19cae64e8ff66919 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -5,54 +5,22 @@
 body {
   margin: 0;
   padding: 0;
-  background: black url(../background.jpg) no-repeat left center;
-  background-size: cover;
+  background-color: black;
 }
 
-.overlay {
-  display: flex;
-  background: rgba(0, 0, 0, 0.4);
-  width: 100vw;
-  height: 100vh;
-  align-items: center;
-  padding: 100px 50px;
-}
-
-.panel {
-  height: 100%;
-  display: flex;
-}
-
-.scroll {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.mdl-list {
+.main-content {
+  position: fixed;
+  top: 0;
+  width: 100%;
   margin: 0;
-}
-
-.room-item {
   padding: 0;
 }
 
-.room-item a {
-  width: 100%;
-  height: 100%;
-  padding: 16px;
-  color: inherit;
-  text-decoration: none;
-}
-
-.room-item a:hover {
-  background: #eaeaea;
-}
-
-@media only screen and (max-width: 320px) {
-  .overlay {
-    padding: 0;
-  }
-  .panel {
-    width: 100%;
-  }
+.background-video {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0.3;
+  min-width: 100%;
+  min-height: 100%;
 }
diff --git a/src/assets/video/home.webm b/src/assets/video/home.webm
new file mode 100644
index 0000000000000000000000000000000000000000..d7156cad9530c12a8b0b3f31332cfebda0f4cea9
Binary files /dev/null and b/src/assets/video/home.webm differ
diff --git a/src/index.js b/src/index.js
index ec700f2f2a7fe0c4223f1c4272d714fa2fa4f6d3..2518b42dd56390078e56b04220ed780ab6abe707 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import "./assets/stylesheets/index.scss";
 import React from "react";
 import ReactDOM from "react-dom";
 import HomeRoot from "./react-components/home-root";
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 80d540f2e4c1fd4e9f3967e1579dfea8402af540..dfec95d02f46de60a72df2d515dcf415e7d02168 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -4,6 +4,7 @@ import classNames from "classnames";
 import queryString from "query-string";
 import { IntlProvider, injectIntl, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
+import homeVideo from "../assets/video/home.webm";
 
 import HubCreatePanel from "./hub-create-panel.js";
 
@@ -31,6 +32,7 @@ class HomeRoot extends Component {
 
   componentDidMount() {
     this.loadEnvironments();
+    document.querySelector("#background-video").playbackRate = 0.5;
   }
 
   loadEnvironments = () => {
@@ -53,7 +55,14 @@ class HomeRoot extends Component {
   render() {
     return (
       <IntlProvider locale={lang} messages={messages}>
-        <div>{this.state.environments.length > 0 && <HubCreatePanel environments={this.state.environments} />}</div>
+        <div>
+          <video playsInline autoPlay muted loop className="background-video" id="background-video">
+            <source src={homeVideo} type="video/webm" />
+          </video>
+          <div className="main-content">
+            {this.state.environments.length > 0 && <HubCreatePanel environments={this.state.environments} />}
+          </div>
+        </div>
       </IntlProvider>
     );
   }
diff --git a/webpack.config.js b/webpack.config.js
index 8476cd91724392dea8deb37cf713c4fea6e74fa7..a2fa5d229a890fb45261b6093305c725f11ed647 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -77,7 +77,7 @@ class LodashTemplatePlugin {
 const config = {
   entry: {
     index: path.join(__dirname, "src", "index.js"),
-    hub: path.join(__dirname, "src", "hub.js"),
+    hub: path.join(__dirname, "src", "hub.js")
   },
   output: {
     path: path.join(__dirname, "public"),
@@ -96,7 +96,7 @@ const config = {
       // networked-aframe makes HEAD requests to the server for time syncing. Respond with an empty body.
       app.head("*", function(req, res, next) {
         if (req.method === "HEAD") {
-          res.append("Date", (new Date()).toGMTString());
+          res.append("Date", new Date().toGMTString());
           res.send("");
         } else {
           next();
@@ -107,7 +107,7 @@ const config = {
   performance: {
     // Ignore media and sourcemaps when warning about file size.
     assetFilter(assetFilename) {
-      return !/\.(map|png|jpg|gif|glb)$/.test(assetFilename);
+      return !/\.(map|png|jpg|gif|glb|webm)$/.test(assetFilename);
     }
   },
   module: {
@@ -169,7 +169,7 @@ const config = {
         })
       },
       {
-        test: /\.(png|jpg|gif|glb|ogg|woff2|svg)$/,
+        test: /\.(png|jpg|gif|glb|ogg|woff2|svg|webm)$/,
         use: {
           loader: "file-loader",
           options: {