diff --git a/runtimes/eoapi/stac/eoapi/stac/templates/collection.html b/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
index c193ebd..a3ff5d1 100644
--- a/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
+++ b/runtimes/eoapi/stac/eoapi/stac/templates/collection.html
@@ -32,6 +32,18 @@ <h1 class="my-4">
     {% if response.description %}
     <p>{{ response.description }}</p>
     {% endif %}
+    {% if response.license %}
+    <div class="d-flex align-items-center mb-2">
+      {% include "icons/license.html" %}
+      <p class="mb-0 pl-2">{{ response.license }}</p>
+    </div>
+    {% endif %}
+    {% if response.extent and response.extent.temporal %}
+    <div class="d-flex align-items-center mb-4">
+      {% include "icons/clock.html" %}
+      <p class="mb-0 pl-2">{{ response.extent.temporal.interval.0.0 or "..." }} — {{ response.extent.temporal.interval.0.1 or "..." }}</p>
+    </div>
+    {% endif %}
     {% if "keywords" in response and response.keywords|length > 0 %}
     <div class="d-flex align-items-center mb-4">
       {% include "icons/tag.html" %}
@@ -43,6 +55,52 @@ <h1 class="my-4">
     </div>
     {% endif %}
 
+    {% if response.item_assets and response.item_assets.items()|length > 0 %}
+    <h2>Item Assets</h2>
+    <ul class="list-unstyled">
+      {% for key, asset in response.item_assets.items() %}
+      <li class="mb-2">
+        <p class="small text-monospace text-muted mb-0">{{ key }}</p>
+        <p class="mb-0"><b>{{ asset.title }}</b></p>
+        <p class="mb-0">{{ asset.type }}</p>
+        {% if asset.roles|length > 0 %}
+        <ul class="list-inline">
+          {% for role in asset.roles %}
+          <li class="list-inline-item badge badge-light">{{ role }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+
+    {% if response.renders and response.renders.items()|length > 0 %}
+    <h2>Render Options</h2>
+    <ul class="list-unstyled">
+      {% for key, option in response.renders.items() %}
+      <li class="mb-2">
+        <p class="small text-monospace text-muted mb-0">{{ key }}</p>
+        {% if option.title %}<p class="mb-0"><b>{{ option.title }}</b></p>{% endif %}
+
+        <div class="row">
+          <div class="col-3">assets</div>
+          <div class="col-9">{% for asset in option.assets %}{{ asset }}{% if not loop.last %}, {% endif%}{% endfor %}</div>
+        </div>
+
+        {% for render_key, render_opt in option.items() %}
+        {% if render_key != 'title' and render_key != 'assets' %}
+        <div class="row">
+          <div class="col-3">{{ render_key }}</div>
+          <div class="col-9">{{ render_opt }}</div>
+        </div>
+        {% endif %}
+        {% endfor %}
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+
     <h2>Links</h2>
     <ul>
       {% for link in response.links %}
@@ -51,18 +109,6 @@ <h2>Links</h2>
     </ul>
   </div>
   <div class="col-md-5">
-    {% if response.license %}
-    <div class="d-flex align-items-center mb-2">
-      {% include "icons/license.html" %}
-      <p class="mb-0 pl-2">{{ response.license }}</p>
-    </div>
-    {% endif %}
-    {% if response.extent and response.extent.temporal %}
-    <div class="d-flex align-items-center mb-2">
-      {% include "icons/clock.html" %}
-      <p class="mb-0 pl-2">{{ response.extent.temporal.interval.0.0 or "..." }} — {{ response.extent.temporal.interval.0.1 or "..." }}</p>
-    </div>
-    {% endif %}
     {% if response.extent and response.extent.spatial %}
     <div id="map" class="rounded" style="width: 100%; height: 400px">
       Loading...
@@ -89,7 +135,7 @@ <h2>Links</h2>
         content: '<i class="fa fa-expand"></i>'  // You can customize this icon
       }
     }).setView([0, 0], 1);
-    
+
     var osmLayer = new L.TileLayer(
       'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 18,
@@ -122,12 +168,12 @@ <h2>Links</h2>
         map.fitBounds(bbox_polygon.getBounds());
       }
     }
-    
+
     // Add any tilejson links as layers to the map
     const tileJsonLinks = collection.links.filter(link => link.rel === "tiles");
-    
+
     const overlayLayers = {};
-    
+
     if (tileJsonLinks.length > 0) {
       tileJsonLinks.forEach((link, index) => {
         fetch(link.href)
@@ -139,22 +185,22 @@ <h2>Links</h2>
               minZoom: tileJson.minzoom || 0,
               maxZoom: tileJson.maxzoom || 18
             });
-            
+
             const layerName = link.title || `TileJSON Layer ${index + 1}`;
             overlayLayers[layerName] = tileLayer;
-            
+
             // Add the first layer to the map by default
             if (index === 0) {
               tileLayer.addTo(map);
             }
-            
+
             // Add layer control after all layers are processed
             if (index === tileJsonLinks.length - 1) {
               // Define the base layers
               const baseLayers = {
                 "OpenStreetMap": osmLayer
               };
-              
+
               // Add the layer control to the map
               L.control.layers(baseLayers, overlayLayers).addTo(map);
             }
@@ -164,7 +210,7 @@ <h2>Links</h2>
           });
       });
     }
-    
+
     // Handle fullscreen change event to resize map
     map.on('fullscreenchange', function() {
       if (map.isFullscreen()) {