diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss
index ca26c5abbe559f832b19b465aa81a95721a77bb4..897ea45c87c242584447d246e3d8f6e5f05e55cd 100644
--- a/src/assets/stylesheets/scene-ui.scss
+++ b/src/assets/stylesheets/scene-ui.scss
@@ -38,7 +38,7 @@
 
 :local(.logoTagline) {
   color: black;
-  text-shadow: 0px 0px 20px #cccccc;
+  text-shadow: 0px 0px 20px #aaa;
   font-weight: bold;
   text-align: center;
   font-size: 1.2em;
@@ -53,3 +53,24 @@
     width: 100%;
   }
 }
+
+:local(.info) {
+  position: absolute;
+  color: black;
+  text-shadow: 0px 0px 20px #aaa;
+  bottom: 12px;
+  left: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+:local(.name) {
+  font-weight: bold;
+  font-size: 1.6em;
+}
+
+:local(.attribution) {
+  font-size: 1.0em;
+  font-weight: light;
+  white-space: wrap;
+}
diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js
index d4b68bc0741b1ed206e61e13eac15dcda9936495..35c4757a4c385008cf3728f894bf92631d7462ae 100644
--- a/src/react-components/scene-ui.js
+++ b/src/react-components/scene-ui.js
@@ -5,6 +5,8 @@ import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
 import styles from "../assets/stylesheets/scene-ui.scss";
 import hubLogo from "../assets/images/hub-preview-white.png";
+import { getReticulumFetchUrl } from "../utils/phoenix-utils";
+import { generateHubName } from "../utils/name-generation";
 
 import { lang, messages } from "../utils/i18n";
 
@@ -35,6 +37,25 @@ class SceneUI extends Component {
     this.props.scene.removeEventListener("loaded", this.onSceneLoaded);
   }
 
+  createRoom = async () => {
+    const payload = { hub: { name: generateHubName(), scene_id: this.props.sceneId } };
+    const createUrl = getReticulumFetchUrl("/api/v1/hubs");
+
+    const res = await fetch(createUrl, {
+      body: JSON.stringify(payload),
+      headers: { "content-type": "application/json" },
+      method: "POST"
+    });
+
+    const hub = await res.json();
+
+    if (!process.env.RETICULUM_SERVER || document.location.host === process.env.RETICULUM_SERVER) {
+      document.location = hub.url;
+    } else {
+      document.location = `/hub.html?hub_id=${hub.hub_id}`;
+    }
+  };
+
   render() {
     if (!this.props.sceneLoaded || !this.props.sceneId) {
       return (
@@ -63,12 +84,12 @@ class SceneUI extends Component {
               <div className={styles.logoTagline}>
                 <FormattedMessage id="scene.logo_tagline" />
               </div>
-              <button>create a room with this scene</button>
+              <button onClick={this.createRoom}>create a room with this scene</button>
             </div>
           </div>
           <div className={styles.info}>
             <div className={styles.name}>{this.props.sceneName}</div>
-            <div className={styles.name}>{this.props.sceneAttribution}</div>
+            <div className={styles.attribution}>{this.props.sceneAttribution}</div>
           </div>
           <div className={styles.description}>{this.props.sceneDescription}</div>
         </div>
diff --git a/src/scene.js b/src/scene.js
index 8c77d23649885d2d58541b3fa1ed8d51a0883ae6..29829f1739c0da00d717c72742f6c87bf7e70ebe 100644
--- a/src/scene.js
+++ b/src/scene.js
@@ -89,7 +89,7 @@ const onReady = async () => {
   window.APP.scene = scene;
   document.querySelector("canvas").classList.add("brightened");
 
-  const sceneId = qs.get("scene_id") || document.location.pathname.substring(1).split("/")[0];
+  const sceneId = qs.get("scene_id") || document.location.pathname.substring(1).split("/")[1];
   console.log(`Scene ID: ${sceneId}`);
 
   let uiProps = { sceneId: sceneId };