diff --git a/app_web/index.html b/app_web/index.html
index c99dce8f..91a977aa 100644
--- a/app_web/index.html
+++ b/app_web/index.html
@@ -78,13 +78,25 @@
 <script id="jsonToUITemplate" type="text/x-template">
     <div>
         <div v-for="(value, name) in data">
-            <div class="greyOverlay" style="word-break: break-word;">
-                <section>
-                    <label class="smallerLabel">{{ name }}</label>
-                </section>
+            <b-collapse :class="(isinner === false) ? 'cardGrayMain' : 'cardGrayMainInner'" animation="slide"  style="word-break: break-word;">
+                <!-- header -->
+                <template #trigger="props">
+                    <div class="cardHeader" role="button">
+                        <p class="smallerLabel">
+                            {{ name }}
+                        </p>
+                        <!-- a element needed for buefy. can be removed if hover effects are made custom -->
+                        <a>
+                            <b-icon :icon="props.open ? 'menu-down' : 'menu-up'">
+                            </b-icon>
+                        </a>
+                    </div>
+                </template>
+
+                <!-- content -->
                 <!-- if value is object -->
                 <div v-if="value !== null && value !== undefined && value.constructor.name === 'Object'">
-                    <json-to-ui-template v-bind:data="value"></json-to-ui-template>
+                    <json-to-ui-template v-bind:data="value" v-bind:isinner="!isinner"></json-to-ui-template>
                 </div>
                 <!-- if value is array -->
                 <div v-else-if="Array.isArray(value)">
@@ -93,7 +105,7 @@
                 <div v-else>
                     <label class="smallestLabel">{{ value }}</label>
                 </div>
-            </div>
+            </b-collapse>
         </div>
     </div>
 </script>
@@ -234,9 +246,9 @@ <h2>Animation</h2>
                         <span>XMP</span>
                     </template>
 
-                    <div class="tabContent">
+                    <div class="tabContent xmpWrapper">
                         <h2>XMP</h2>
-                        <json-to-ui-template v-bind:data="xmp.xmp"></json-to-ui-template>
+                        <json-to-ui-template v-bind:data="xmp" v-bind:isinner="false" ref="xmpUI"></json-to-ui-template>
                     </div>
                 </b-tab-item>
                 <!--<b-tab-item label="Capture" icon="video">
diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js
index add702b6..bcf890d3 100644
--- a/app_web/src/logic/uimodel.js
+++ b/app_web/src/logic/uimodel.js
@@ -210,12 +210,12 @@ class UIModel
 
         const xmpData = gltfLoadedAndInit.pipe(
             map( (gltf) => {
-                if(gltf.extensions !== undefined && gltf.extensions.KHR_xmp !== undefined)
+                if(gltf.extensions !== undefined && gltf.extensions.KHR_xmp_json_ld !== undefined)
                 {
-                    if(gltf.asset.extensions !== undefined && gltf.asset.extensions.KHR_xmp !== undefined)
+                    if(gltf.asset.extensions !== undefined && gltf.asset.extensions.KHR_xmp_json_ld !== undefined)
                     {
-                        let xmpPacket = gltf.extensions.KHR_xmp.packets[gltf.asset.extensions.KHR_xmp.packet];
-                        return {xmp: xmpPacket};
+                        let xmpPacket = gltf.extensions.KHR_xmp_json_ld.packets[gltf.asset.extensions.KHR_xmp_json_ld.packet];
+                        return xmpPacket;
                     }
                 }
                 return [];
diff --git a/app_web/src/ui/ui.js b/app_web/src/ui/ui.js
index 42539a5e..626bc6ca 100644
--- a/app_web/src/ui/ui.js
+++ b/app_web/src/ui/ui.js
@@ -41,7 +41,7 @@ Vue.component('dual-label-element', {
     template:'#dualLabelTemplate'
 });
 Vue.component('json-to-ui-template', {
-    props: ['data'],
+    props: ['data', 'isinner'],
     template:'#jsonToUITemplate'
 });
 
diff --git a/app_web/ui.css b/app_web/ui.css
index 2f166745..260347d2 100644
--- a/app_web/ui.css
+++ b/app_web/ui.css
@@ -36,7 +36,7 @@ nav.tabs ul
 
 section.tab-content
 {
-    background-color: #333333;
+    background-color: #363636;
     width: 300px;
 }
 
@@ -166,14 +166,35 @@ canvas
     opacity: 0.8;
 }
 
-.greyOverlay
+.xmpWrapper
+{
+    margin-right: 5px;
+}
+
+.cardGrayMain
 {
     background-color: #424242;
-    margin-bottom: 5px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 8px;
+    padding: 8px;
+    padding-right: 0px;
+    padding-bottom: 5px;
+    margin-bottom: 8px;
 }
+.cardGrayMainInner
+{
+    background-color: #4d4d4d;
+    padding: 8px;
+    padding-right: 0px;
+    padding-bottom: 5px;
+    margin-bottom: 8px;
+}
+
+.cardHeader
+{
+    display: flex;
+    justify-content: space-between
+}
+
+
 
 .select, .select select
 {