diff --git a/src/assets/stylesheets/footer.css b/src/assets/stylesheets/footer.css
deleted file mode 100644
index ffab91afb8cf690000973bf644c72464a64a9fe1..0000000000000000000000000000000000000000
--- a/src/assets/stylesheets/footer.css
+++ /dev/null
@@ -1,2 +0,0 @@
-:local(.container) {
-}
diff --git a/src/hub.js b/src/hub.js
index cf096150c926e89d4999d87cd0ff34210dc73cd3..6a889632adf4c22606f1503df58342312bf3b8da 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -287,7 +287,10 @@ const onReady = async () => {
 
   if (qs.room) {
     // If ?room is set, this is `yarn start`, so just use a default environment and query string room.
-    remountUI({ janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1 });
+    remountUI({
+      janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1,
+      hubName: "My Super Test Hub"
+    });
     initialEnvironmentEl.setAttribute("gltf-bundle", {
       src: "https://asset-bundles-prod.reticulum.io/rooms/meetingroom/MeetingRoom.bundle.json"
       // src: "https://asset-bundles-prod.reticulum.io/rooms/theater/TheaterMeshes.bundle.json"
@@ -318,7 +321,7 @@ const onReady = async () => {
       const hub = data.hubs[0];
       const defaultSpaceTopic = hub.topics[0];
       const gltfBundleUrl = defaultSpaceTopic.assets.find(a => a.asset_type === "gltf_bundle").src;
-      remountUI({ janusRoomId: defaultSpaceTopic.janus_room_id });
+      remountUI({ janusRoomId: defaultSpaceTopic.janus_room_id, hubName: hub.name });
       initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`);
       hubChannel.setPhoenixChannel(channel);
     })
diff --git a/src/react-components/footer.js b/src/react-components/footer.js
index 1045da49f664701ac7675c6076ababf07ffaef2b..86728e614e089f32a06e79a4a33967380f3cd90a 100644
--- a/src/react-components/footer.js
+++ b/src/react-components/footer.js
@@ -1,9 +1,10 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import FontAwesomeIcon from "@fortawesome/react-fontawesome";
-import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft";
+import faShare from "@fortawesome/fontawesome-free-solid/faShare";
+import faUsers from "@fortawesome/fontawesome-free-solid/faUsers";
 
-import styles from "../assets/stylesheets/footer.css";
+import styles from "../assets/stylesheets/footer.scss";
 
 export default class Footer extends Component {
   static propTypes = {
@@ -13,13 +14,15 @@ export default class Footer extends Component {
   render() {
     return (
       <div className={styles.container}>
-        <span className={styles.hubName}>{this.props.hubName}</span>
-        <button className="{styles.shareButton}" onClick={this.emitChangeToPrevious}>
-          <FontAwesomeIcon icon={faAngleLeft} />
-        </button>
-        <div>
-          <FontAwesomeIcon icon={faAngleLeft} />
-          <span>{this.props.participantCount}</span>
+        <div className={styles.hubInfo}>
+          <span className={styles.hubName}>{this.props.hubName}</span>
+          <button className={styles.shareButton} onClick={this.emitChangeToPrevious}>
+            <FontAwesomeIcon icon={faShare} className={styles.shareButtonIcon} />
+          </button>
+        </div>
+        <div className={styles.hubStats}>
+          <FontAwesomeIcon icon={faUsers} />
+          <span className={styles.hubParticipantCount}>{this.props.participantCount}</span>
         </div>
       </div>
     );
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index fa4f0ee177013995b5904dd954573c034ffbc9a8..0734bdf6163937d74a86f3b0500d96df058e87a2 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -65,7 +65,8 @@ class UIRoot extends Component {
     showProfileEntry: PropTypes.bool,
     availableVREntryTypes: PropTypes.object,
     initialEnvironmentLoaded: PropTypes.bool,
-    janusRoomId: PropTypes.number
+    janusRoomId: PropTypes.number,
+    hubName: PropTypes.string
   };
 
   state = {
@@ -767,7 +768,7 @@ class UIRoot extends Component {
           {this.state.entryStep === ENTRY_STEPS.finished ? (
             <div>
               <TwoDHUD muted={this.state.muted} onToggleMute={this.toggleMute} />
-              <Footer />
+              <Footer hubName={this.props.hubName} />
             </div>
           ) : null}
         </div>
diff --git a/webpack.config.js b/webpack.config.js
index 4f9b26d26cab4c3959a5b1796696f7a0b531c086..ad98143b501e72b300362f7086a452485e92adec 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -141,7 +141,8 @@ const config = {
               loader: "css-loader",
               options: {
                 name: "[path][name]-[hash].[ext]",
-                minimize: process.env.NODE_ENV === "production"
+                minimize: process.env.NODE_ENV === "production",
+                camelCase: true
               }
             },
             "sass-loader"
@@ -156,7 +157,8 @@ const config = {
             loader: "css-loader",
             options: {
               name: "[path][name]-[hash].[ext]",
-              minimize: process.env.NODE_ENV === "production"
+              minimize: process.env.NODE_ENV === "production",
+              camelCase: true
             }
           }
         })