diff --git a/src/json-utils.js b/src/json-utils.js
index d874a3810..abdac1f34 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -410,7 +410,35 @@ AFRAME.registerComponent('metadata', {
     sceneTitle: { default: '' },
     sceneId: { default: '' }
   },
-  init: function () {}
+  init: function () {
+    this.titleElement = undefined;
+  },
+  createTitleElement: function (titleText) {
+    const titleDiv = this.titleElement = document.createElement('div');
+    const newContent = document.createTextNode(titleText);
+    titleDiv.setAttribute('id', 'sceneTitle');
+    titleDiv.appendChild(newContent);
+    document.body.append(titleDiv);
+  },
+  updateTitleText: function (titleText) {
+    this.titleElement.textContent = titleText;
+  },
+  update: function (oldData) {
+    // If `oldData` is empty, then this means we're in the initialization process.
+    // No need to update.
+    if (Object.keys(oldData).length === 0) { return; }
+
+    const titleText = this.data.sceneTitle;
+    const titleElement = this.titleElement;
+
+    if (titleText !== oldData.sceneTitle) {
+      if (!titleElement) {
+        this.createTitleElement(titleText);
+      } else {
+        this.updateTitleText(titleText);
+      }
+    }   
+  }
 });
 
 AFRAME.registerComponent('set-loader-from-hash', {
diff --git a/src/viewer-styles.css b/src/viewer-styles.css
index 0418d02d9..f83b2c22a 100644
--- a/src/viewer-styles.css
+++ b/src/viewer-styles.css
@@ -137,3 +137,22 @@ body {
 	background: #6100FF;
 	z-index: 9999;
 }
+
+/********* scene title css *********/
+
+#sceneTitle {
+	position: fixed;
+	color: white;
+	font-size: 20px;
+	font-family: Lato;
+	font-weight: 400;
+	word-wrap: break-word;
+	bottom: 43px;
+	pointer-events: none;
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+    height: 26px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
\ No newline at end of file