diff --git a/.travis.yml b/.travis.yml
index 890fcfd3ac3ca6f4d4ac9507586110c817dc3edf..57b5ad30beddf0a3e3c7f856fb89cb7fc3b11f99 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
-node_js: node
+node_js: "9"
 cache: yarn
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.5.1
diff --git a/PRIVACY.md b/PRIVACY.md
index e24a7694c4f59404174dfa940e4be583ff0daa44..4b0acc3e1d7f94088bd39eed00089221475e5c67 100644
--- a/PRIVACY.md
+++ b/PRIVACY.md
@@ -16,7 +16,7 @@ In this Privacy Notice, we explain what data may be accessible to Mozilla or oth
 - **Avatar data**: We receive and send to others in the Room the name of your Avatar, its position in the Room, and your interactions with objects in the Room.  Mozilla does not record or store this data. You can optionally store information about your Avatar in your browser’s local storage.  
 - **Room data**: Rooms are publicly accessible to anyone with the URL. Mozilla receives data about the virtual objects and Avatars in a Room and shares that data with others in the Room.   
 - **Voice data**: If your microphone is on, Mozilla receives and sends audio to other users in the Room. Mozilla does not record or store the audio.  *Be aware that once you agree to let Hubs use your microphone, it will stay on as long as you remain in a Hubs room, unless you turn it off.*
-- You can learn more by looking at the code itself. [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs)
+- You can learn more by looking at the code itself. [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs), [Hubs-Ops](https://github.com/mozilla/hubs-ops)
 </details>
 
 <p/>
@@ -29,5 +29,5 @@ In this Privacy Notice, we explain what data may be accessible to Mozilla or oth
 - **Technical data**: We receive and store data about Room URLs and names; the type of device you use to interact with Hubs, as well as its operating system, language, the name and version of browser; and other data to load and operate the Room. 
 - **Interaction data**: We receive data about your interactions with the Hubs service itself such as the number of Rooms created, the maximum number of users in a particular room at one same time, the start and end time of a user’s interaction with Hubs, the amount of time a user interacts with Hubs through Virtual Reality, the first time in a particular month or day that a user begins to use Hubs. Mozilla uses third party services to store and analyze these operational messages. 
 - **Error Data**: In order to diagnose problems, Hubs sends Mozilla logs of error messages (which include the Room URL, response time for requests, the page you were on when you encountered the error, your operating system, browser information, and may include your IP address). 
-- You can learn more by looking at the code itself.  [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs)
+- You can learn more by looking at the code itself.  [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs), [Hubs-Ops](https://github.com/mozilla/hubs-ops)
 </details>
diff --git a/README.md b/README.md
index 1984ffdafd45296fd66ddc389afa74b5b3a0bc82..5f0bf883f79df7b447d8c9fbd3b4102072a8efbc 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Mozilla Social Mixed Reality Client [![Build Status](https://travis-ci.org/mozilla/hubs.svg?branch=master)](https://travis-ci.org/mozilla/hubs)
+[![Build Status](https://travis-ci.org/mozilla/hubs.svg?branch=master)](https://travis-ci.org/mozilla/hubs)
 
 A prototype client demonstrating a multi-user experience in WebVR. Built with
 [A-Frame](https://github.com/aframevr/aframe/)
@@ -33,4 +33,12 @@ yarn build
 - `no_stats` - Disable performance stats
 - `vr_entry_type` - Either "gearvr" or "daydream". Used internally to force a VR entry type
 
+## Additional Resources
+
+* [Reticulum](https://github.com/mozilla/reticulum) - Phoenix-based backend for managing state and presence.
+* [NAF Janus Adapter](https://github.com/mozilla/naf-janus-adapter) - A [Networked A-Frame](https://github.com/networked-aframe) adapter for the Janus SFU service.
+* [Janus Gateway](https://github.com/meetecho/janus-gateway) - A WebRTC proxy used for centralizing network traffic in this client.
+* [Janus SFU Plugin](https://github.com/mozilla/janus-plugin-sfu) - Plugins for Janus which enables it to act as a SFU.
+* [Hubs-Ops](https://github.com/mozilla/hubs-ops) - Infrastructure as code + management tools for running necessary backend services on AWS.
+
 [![Waffle.io - Columns and their card count](https://badge.waffle.io/mozilla/socialmr.svg?columns=all)](http://waffle.io/mozilla/socialmr)
diff --git a/scripts/build_local_reticulum.sh b/scripts/build_local_reticulum.sh
index 118a801e24fba4fdbed51c5b23f793db46cc498f..f883958f8f18e028a32916f50c6af38002938893 100755
--- a/scripts/build_local_reticulum.sh
+++ b/scripts/build_local_reticulum.sh
@@ -4,4 +4,4 @@ if [ ! -e ../reticulum ]; then
   echo "This script assumes reticulum is checked out in a sibling to this folder."
 fi
 
-rm -rf ../reticulum/priv/static ; BASE_ASSETS_PATH=http://localhost:4000/ yarn build -- --output-path ../reticulum/priv/static 
+rm -rf ../reticulum/priv/static ; GENERATE_SMOKE_TESTS=true BASE_ASSETS_PATH=http://localhost:4000/ yarn build -- --output-path ../reticulum/priv/static 
diff --git a/scripts/default.env b/scripts/default.env
index c7ec289d2e2f37a1310e10e8607ff31069f66f11..3d6556c0fa826b118d94dc8bc88a9f2555c5a520 100644
--- a/scripts/default.env
+++ b/scripts/default.env
@@ -1,6 +1,6 @@
 # This origin trial token is used to enable WebVR and Gamepad Extensions on Chrome 62+
 # You can find more information about getting your own origin trial token here: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md
-ORIGIN_TRIAL_TOKEN="ArEZ0vY0uMo3pj+oY8Up4u4Hy8QolJwKxG4/2WRhSPnTZRrviiGhzP6/y72nBdsIhdEyoundxqg//KLbs2vGnQoAAABkeyJvcmlnaW4iOiJodHRwczovL3JldGljdWx1bS5pbzo0NDMiLCJmZWF0dXJlIjoiV2ViVlIxLjFNNjIiLCJleHBpcnkiOjE1MjYzNDg2MjEsImlzU3ViZG9tYWluIjp0cnVlfQ=="
+ORIGIN_TRIAL_TOKEN="AgN/JtqSF6qpD3OZk8KgM5/UYqUUrwc166cOQSRCqvU+TIpHWdiwBUWH5V1K/jJkdtBrO4Q5I0XSGm16uB/Y4QQAAABVeyJvcmlnaW4iOiJodHRwczovL2h1YnMubW96aWxsYS5jb206NDQzIiwiZmVhdHVyZSI6IldlYlZSMS4xTTYyIiwiZXhwaXJ5IjoxNTI4MjQ1ODI1fQ=="
 ORIGIN_TRIAL_EXPIRES="2018-05-15"
 JANUS_SERVER="wss://prod-janus.reticulum.io"
 DEV_RETICULUM_SERVER="dev.reticulum.io"
diff --git a/src/assets/images/hub-preview.png b/src/assets/images/hub-preview.png
new file mode 100755
index 0000000000000000000000000000000000000000..5a976607e2539031d67dc17e727ecff02740c3ad
Binary files /dev/null and b/src/assets/images/hub-preview.png differ
diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss
index f0a48bc6d15b8c1efab6c902f7e7024985f12f5f..5f782fd03c56c8be7f7115b1a99519c22ad26804 100644
--- a/src/assets/stylesheets/footer.scss
+++ b/src/assets/stylesheets/footer.scss
@@ -10,7 +10,7 @@
   // Position above virtual gamepad controls on mobile
   z-index: 1;
 
-  @media (min-width: 769px) and (min-height: 401px) {
+  @media (min-width: 769px) and (min-height: 421px) {
     pointer-events: auto;
   }
 }
@@ -35,25 +35,25 @@
   background-color: transparent;
   border-bottom: 1px solid rgba(32, 32, 32, 0.65);
 
-  @media (min-width: 769px) , (max-height: 401px) {
+  @media (min-width: 769px) , (max-height: 421px) {
     display: none;
   }
 }
 :local(.header) {
   background-color: rgba(0, 0, 0, 0.65);
 
-  @media (max-width: 768px) , (max-height: 400px) {
+  @media (max-width: 768px) , (max-height: 420px) {
     background-color: transparent;
   }
 
   :local(.hub-info) {
-    @media (max-width: 768px) , (max-height: 400px) {
+    @media (max-width: 768px) , (max-height: 420px) {
       display: none;
     }
   }
 
   :local(.hub-stats) {
-    @media (max-width: 768px) , (max-height: 400px) {
+    @media (max-width: 768px) , (max-height: 420px) {
       display: none;
     }
   }
@@ -64,7 +64,7 @@
   margin: 16px 24px;
   display: flex;
   align-items: center;
-  @media (max-width: 768px) , (max-height: 400px) {
+  @media (max-width: 768px) , (max-height: 420px) {
     margin: 16px 8px;
     margin-left: 24px;
     font-size: 0.9em;
@@ -76,10 +76,10 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  @media (min-width: 769px) and (min-height: 401px) {
+  @media (min-width: 769px) and (min-height: 421px) {
     flex: 1;
   }
-  @media (max-width: 768px) , (max-height: 400px) {
+  @media (max-width: 768px) , (max-height: 420px) {
     margin: 16px 8px;
   }
   :local(.hub-participant-count) {
@@ -109,13 +109,13 @@
   }
 
   :local(.menu-button__narrow-close-icon) {
-    @media (max-width: 768px) , (max-height: 400px) {
+    @media (max-width: 768px) , (max-height: 420px) {
       display: none;
     }
   }
 
   :local(.menu-button__wide-close-icon) {
-    @media (min-width: 769px) and (min-height: 401px) {
+    @media (min-width: 769px) and (min-height: 421px) {
       display: none;
     }
   }
diff --git a/src/components/character-controller.js b/src/components/character-controller.js
index e811dd507bc8f5a0d886b1c912cc7679ebdf55a8..26dc12a8cd1e36eefe4d4ab65faee4c559576f09 100644
--- a/src/components/character-controller.js
+++ b/src/components/character-controller.js
@@ -89,7 +89,8 @@ AFRAME.registerComponent("character-controller", {
     const rotationInvMatrix = new THREE.Matrix4();
     const pivotRotationMatrix = new THREE.Matrix4();
     const pivotRotationInvMatrix = new THREE.Matrix4();
-    const start = new THREE.Vector3();
+    const startPos = new THREE.Vector3();
+    const startScale = new THREE.Vector3();
 
     return function(t, dt) {
       const deltaSeconds = dt / 1000;
@@ -98,7 +99,8 @@ AFRAME.registerComponent("character-controller", {
       const distance = this.data.groundAcc * deltaSeconds;
       const rotationDelta = this.data.rotationSpeed * this.angularVelocity * deltaSeconds;
 
-      start.copy(root.position);
+      startScale.copy(root.scale);
+      startPos.copy(root.position);
 
       // Other aframe components like teleport-controls set position/rotation/scale, not the matrix, so we need to make sure to compose them back into the matrix
       root.updateMatrix();
@@ -134,19 +136,13 @@ AFRAME.registerComponent("character-controller", {
       // Reapply playspace (player rig) translation
       root.applyMatrix(trans);
 
-      // @TODO this is really ugly, can't just set the position/rotation directly or they wont network
-      this.el.setAttribute("rotation", {
-        x: root.rotation.x * THREE.Math.RAD2DEG,
-        y: root.rotation.y * THREE.Math.RAD2DEG,
-        z: root.rotation.z * THREE.Math.RAD2DEG
-      });
+      // TODO: the above matrix trnsfomraitons introduce some floating point erros in scale, this reverts them to avoid spamming network with fake scale updates
+      root.scale.copy(startScale);
 
       this.pendingSnapRotationMatrix.identity(); // Revert to identity
 
       if (this.velocity.lengthSq() > EPS) {
-        this.setPositionOnNavMesh(start, root);
-      } else {
-        this.el.setAttribute("position", root.position);
+        this.setPositionOnNavMesh(startPos, root);
       }
     };
   })(),
diff --git a/src/components/icon-button.js b/src/components/icon-button.js
index eab80803f4d85ad425a6d5a0c71fc8f6f9ddc333..88f5e7303822ff103d7e67479ab99b3d7bddba4f 100644
--- a/src/components/icon-button.js
+++ b/src/components/icon-button.js
@@ -5,7 +5,10 @@ AFRAME.registerComponent("icon-button", {
     activeImage: { type: "string" },
     activeHoverImage: { type: "string" },
     active: { type: "boolean" },
-    haptic: { type: "selector" }
+    haptic: { type: "selector" },
+    tooltip: { type: "selector" },
+    tooltipText: { type: "string" },
+    activeTooltipText: { type: "string" }
   },
 
   init() {
@@ -53,5 +56,12 @@ AFRAME.registerComponent("icon-button", {
     const image = active ? (hovering ? "activeHoverImage" : "activeImage") : hovering ? "hoverImage" : "image";
 
     this.el.setAttribute("src", this.data[image]);
+
+    if (this.data.tooltip) {
+      this.data.tooltip.setAttribute("visible", this.hovering);
+      this.data.tooltip
+        .querySelector("[text]")
+        .setAttribute("text", "value", this.data.active ? this.data.activeTooltipText : this.data.tooltipText);
+    }
   }
 });
diff --git a/src/components/wasd-to-analog2d.js b/src/components/wasd-to-analog2d.js
index 35b68026bd121a35bb7f7c139d15423262475b86..a86641623b348f67c743e1845f51dd1c6e9ccb7f 100644
--- a/src/components/wasd-to-analog2d.js
+++ b/src/components/wasd-to-analog2d.js
@@ -11,9 +11,11 @@ AFRAME.registerComponent("wasd-to-analog2d", {
       s: [0, -1],
       d: [1, 0]
     };
-    this.onWasd = this.onWasd.bind(this);
     this.keys = {};
+
+    this.onWasd = this.onWasd.bind(this);
     this.move = this.move.bind(this);
+    this.onBlur = this.onBlur.bind(this);
   },
 
   play: function() {
@@ -25,18 +27,24 @@ AFRAME.registerComponent("wasd-to-analog2d", {
     // directly because ideally this would live as an input mapping, but the events
     // generated by this component won't actually get mapped.
     this.el.sceneEl.addEventListener(this.data.analog2dOutputAction, this.move);
-  },
-
-  move: function(event) {
-    this.el.emit("move", { axis: event.detail.axis });
+    window.addEventListener("blur", this.onBlur);
   },
 
   pause: function() {
     this.el.sceneEl.removeEventListener("wasd", this.onWasd);
     this.el.sceneEl.removeEventListener(this.data.analog2dOutputAction, this.move);
+    window.removeEventListener("blur", this.onBlur);
     this.keys = {};
   },
 
+  onBlur: function() {
+    this.keys = {};
+  },
+
+  move: function(event) {
+    this.el.emit("move", { axis: event.detail.axis });
+  },
+
   onWasd: function(event) {
     const keyEvent = event.type;
     const down = keyEvent.indexOf("down") !== -1;
diff --git a/src/hub.html b/src/hub.html
index 2da86cb78a61aeb1dc1994de526a5762c696e03a..44e7904c5e6eb1812b6440084f21ad05c01b2e17 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -2,6 +2,8 @@
 <html>
 
 <head>
+    <!-- DO NOT REMOVE/EDIT THIS COMMENT - HUB_META_TAGS -->
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
@@ -219,16 +221,18 @@
         >
             <a-entity
                 id="player-hud"
-                class="ui"
                 hud-controller="head: #player-camera;"
                 vr-mode-toggle-visibility
                 vr-mode-toggle-playing__hud-controller
             >
                 <a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
                     <a-rounded height="0.13" width="0.48" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
-                    <a-image icon-button="image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="hud mic" material="alphaTest:0.1;"></a-image>
-                    <a-image icon-button="image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.001" class="hud freeze"></a-image>
-                    <a-image icon-button="image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="hud bubble" material="alphaTest:0.1;"></a-image>
+                    <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
+                    <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
+                    <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Enable Bubble; activeTooltipText: Disable Bubble; image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud bubble" material="alphaTest:0.1;"></a-image>
+                    <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
+                        <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
+                    </a-rounded>
                 </a-entity>
             </a-entity>
 
diff --git a/src/hub.js b/src/hub.js
index 0e29e104a1f65e13bdbc3c240b1a8ebd274f2082..5046c32c3fc714d7ad45c174bae4c460c7935746 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -310,8 +310,24 @@ const onReady = async () => {
     }
   };
 
+  const getPlatformUnsupportedReason = () => {
+    if (typeof RTCDataChannelEvent === "undefined") {
+      return "no_data_channels";
+    }
+
+    return null;
+  };
+
   remountUI({ enterScene, exitScene });
 
+  const platformUnsupportedReason = getPlatformUnsupportedReason();
+
+  if (platformUnsupportedReason) {
+    remountUI({ platformUnsupportedReason: platformUnsupportedReason });
+    exitScene();
+    return;
+  }
+
   getAvailableVREntryTypes().then(availableVREntryTypes => {
     remountUI({ availableVREntryTypes });
   });
diff --git a/src/index.js b/src/index.js
index 198ee8d47378bd740fc9a2891cc6945447442b2a..2383019035144bc82277e15baa01b034f6244754 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,16 @@
 import "./assets/stylesheets/index.scss";
 import React from "react";
 import ReactDOM from "react-dom";
-import HomeRoot from "./react-components/home-root";
 import registerTelemetry from "./telemetry";
+import HomeRoot from "./react-components/home-root";
+import InfoDialog from "./react-components/info-dialog.js";
+import queryString from "query-string";
+
+const qs = queryString.parse(location.search);
 
 registerTelemetry();
-ReactDOM.render(<HomeRoot />, document.getElementById("home-root"));
+
+ReactDOM.render(
+  <HomeRoot dialogType={qs.list_signup ? InfoDialog.dialogTypes.updates : null} />,
+  document.getElementById("home-root")
+);
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index eff928870432936ca41843202bbdfc073adaf032..141606a83d121f0a280ac5ac6b6d997856f7fc1e 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -7,15 +7,21 @@ import styles from "../assets/stylesheets/2d-hud.scss";
 const TwoDHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onToggleSpaceBubble }) => (
   <div className={styles.container}>
     <div className={cx("ui-interactive", styles.panel, styles.left)}>
-      <div className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })} onClick={onToggleMute} />
+      <div
+        className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
+        title={muted ? "Unmute Mic" : "Mute Mic"}
+        onClick={onToggleMute}
+      />
     </div>
     <div
       className={cx("ui-interactive", styles.iconButton, styles.large, styles.freeze, { [styles.active]: frozen })}
+      title={frozen ? "Resume" : "Pause"}
       onClick={onToggleFreeze}
     />
     <div className={cx("ui-interactive", styles.panel, styles.right)}>
       <div
         className={cx(styles.iconButton, styles.bubble, { [styles.active]: spacebubble })}
+        title={spacebubble ? "Disable Bubble" : "Enable Bubble"}
         onClick={onToggleSpaceBubble}
       />
     </div>
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 0a5693196e0cf2b68c77d5c9d8ad0a6fcc1b1847..fb0b483e94ea876c093a1918295ce6e6536c557b 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -27,7 +27,8 @@ const ENVIRONMENT_URLS = [
 
 class HomeRoot extends Component {
   static propTypes = {
-    intl: PropTypes.object
+    intl: PropTypes.object,
+    dialogType: PropTypes.symbol
   };
 
   state = {
@@ -39,6 +40,7 @@ class HomeRoot extends Component {
 
   componentDidMount() {
     this.loadEnvironments();
+    this.setState({ dialogType: this.props.dialogType });
     document.querySelector("#background-video").playbackRate = 0.75;
   }
 
diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index 8091484d0f34925270c7455e9eb86f65a0c1bea3..ab7bdda1c22098e1991afd98ff23ffdeb63df83e 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -56,7 +56,7 @@ class InfoDialog extends Component {
 
     const payload = {
       email: this.state.mailingListEmail,
-      newsletters: "mixed-reality",
+      newsletters: "hubs",
       privacy: true,
       fmt: "H",
       source_url: document.location.href
@@ -133,7 +133,7 @@ class InfoDialog extends Component {
         dialogTitle = "";
         dialogBody = (
           <span>
-            Sign up to get updates about new features in hubs.
+            Sign up to get updates about new features in Hubs.
             <p />
             <form onSubmit={this.signUpForMailingList}>
               <div className="mailing-list-form">
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 43d39ba0a1e442f55dc095b29e63b64096be68ae..ab1d0229b0b529a6e3d9131df82e683f6097e11a 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -69,6 +69,7 @@ class UIRoot extends Component {
     initialEnvironmentLoaded: PropTypes.bool,
     janusRoomId: PropTypes.number,
     roomUnavailableReason: PropTypes.string,
+    platformUnsupportedReason: PropTypes.string,
     hubName: PropTypes.string,
     occupantCount: PropTypes.number
   };
@@ -512,18 +513,9 @@ class UIRoot extends Component {
   };
 
   render() {
-    if (this.state.exited || this.props.roomUnavailableReason) {
+    if (this.state.exited || this.props.roomUnavailableReason || this.props.platformUnsupportedReason) {
       let subtitle = null;
-      if (this.props.roomUnavailableReason !== "closed") {
-        const exitSubtitleId = `exit.subtitle.${this.state.exited ? "exited" : this.props.roomUnavailableReason}`;
-        subtitle = (
-          <div>
-            <FormattedMessage id={exitSubtitleId} />
-            <p />
-            You can also <a href="/">create a new room</a>.
-          </div>
-        );
-      } else {
+      if (this.props.roomUnavailableReason === "closed") {
         // TODO i18n, due to links and markup
         subtitle = (
           <div>
@@ -537,7 +529,34 @@ class UIRoot extends Component {
             If you have questions, contact us at <a href="mailto:hubs@mozilla.com">hubs@mozilla.com</a>.
             <p />
             If you&apos;d like to run your own server, hubs&apos;s source code is available on{" "}
-            <a href="https://github.com/mozilla/hubs">Github</a>.
+            <a href="https://github.com/mozilla/hubs">GitHub</a>.
+          </div>
+        );
+      } else if (this.props.platformUnsupportedReason === "no_data_channels") {
+        // TODO i18n, due to links and markup
+        subtitle = (
+          <div>
+            Your browser does not support{" "}
+            <a
+              href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel#Browser_compatibility"
+              rel="noreferrer noopener"
+            >
+              WebRTC Data Channels
+            </a>, which is required to use Hubs.
+          </div>
+        );
+      } else {
+        const reason = this.props.roomUnavailableReason || this.props.platformUnsupportedReason;
+        const exitSubtitleId = `exit.subtitle.${this.state.exited ? "exited" : reason}`;
+        subtitle = (
+          <div>
+            <FormattedMessage id={exitSubtitleId} />
+            <p />
+            {this.props.roomUnavailableReason && (
+              <div>
+                You can also <a href="/">create a new room</a>.
+              </div>
+            )}
           </div>
         );
       }
diff --git a/webpack.config.js b/webpack.config.js
index 5ee8cfc75f44f5ba9f1cad8bb2493b11e6ce20fb..4fc219ef830791bd6dbc6d201143ba82af6b961c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -206,6 +206,12 @@ const config = {
         to: "favicon.ico"
       }
     ]),
+    new CopyWebpackPlugin([
+      {
+        from: "src/assets/images/hub-preview.png",
+        to: "hub-preview.png"
+      }
+    ]),
     // Extract required css and add a content hash.
     new ExtractTextPlugin({
       filename: "assets/stylesheets/[name]-[contenthash].css",