diff --git a/index.html b/index.html
index f67e3be..be4d81e 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,10 @@
   <a-scene
   xr-mode-ui="XRMode: ar"
   renderer="colorManagement: true;"
+  load-catalog="source: #catalog"
   >
     <a-assets>
+      <a-asset-item id="catalog" src="catalog.json"></a-asset-item>
       <!-- <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg" crossorigin="anonymous" /> -->
       <!-- <img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg" crossorigin="anonymous" /> -->
       <audio id="click-ogg"
diff --git a/src/app/state.js b/src/app/state.js
index 8f55e06..926306c 100644
--- a/src/app/state.js
+++ b/src/app/state.js
@@ -126,6 +126,23 @@ function getModelPathFromState(state) {
   return state.model.list[modelKey].dist;
 }
 
+/**
+ * Load models from catalog json
+ */
+AFRAME.registerComponent('load-catalog', {
+  schema: {
+    source: {type: 'selector'}
+  },
+  init: function () {
+    this.jsonCatalogData = JSON.parse(this.data.source.data);
+    console.log(this.jsonCatalogData)
+    for (let i = 0; i < this.jsonCatalogData.length; i++) {
+      const modelMetadataObject = this.jsonCatalogData[i];
+      AFRAME.scenes[0].emit('addModel', modelMetadataObject);
+    }
+  }
+});
+
 /**
  * Set color for material based on current index from state
  */