diff --git a/src/webui/service/templates/device/inventory.html b/src/webui/service/templates/device/inventory.html
index 17c14785a89658b59e07373bc7d939e234937631..96e4b342a28dbfd68cd0d945bfd0123edfeaf2af 100644
--- a/src/webui/service/templates/device/inventory.html
+++ b/src/webui/service/templates/device/inventory.html
@@ -73,34 +73,53 @@
         </button>
     </div>
 </div>
-
 <br>
+
+{% macro render_item(item, components, depth=0) %}
+    {% if depth < 10 %} 
+        {%if item.type != 'CHASSIS' %}
+            <li><span class="caret">{{ item.name }}</span>
+                <ul class="nested">
+                    <li><span><b>Component UUID:</b> {{item.component_uuid.uuid}}</span></li>
+                    <li><span><b>Attributes:</b> {{item.attributes}}</span></li>
+                    {% for comp in components | sort(reverse = false, attribute='name') %}
+                        {% if item.name == comp.parent %}
+                            {{ render_item(comp, components, depth + 1) }}
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endif %}
+{% endmacro %}
+
 <div class="row mb-3">
-    <div class="col-sm-3">
+    <div>
         <ul id="myUL">
-            <li><span class="caret"></span>Components</span>
+            <li><span class="caret">Components</span>
                 <ul class="nested">
-                    {% for item in (device.components|sort(true, attribute='name')) %}
-                    {% if item.parent |length < 1 or item.type=='CHASSIS' %} 
-                    <li><span class="caret"></span>{{item.name}}</span>
-                        <ul class="nested">
-                            {% for comp in (device.components|sort(true, attribute='name')) %}
-                            {% if item.name == comp.parent %}
-                            <li>{{comp.name}}</li>
-                            {% endif %}
-                            {% endfor %}
-                        </ul>
-                    </li>
-                    {% endif %}
+                    {% for item in device.components | sort(reverse = false, attribute='name') %}
+                        {% if item.parent | length < 1 or item.type == 'CHASSIS' %}
+                            <li><span class="caret">{{ item.name }}</span>
+                                <ul class="nested">
+                                    <li><span><b>Component UUID:</b> {{item.component_uuid.uuid}}</span></li>
+                                    <li><span><b>Attributes:</b> {{item.attributes}}</span></li>
+                                    {% for comp in device.components | sort(reverse = false, attribute='name') %}
+                                        {% if item.name == comp.parent %}
+                                            {{ render_item(comp, device.components) }}
+                                        {% endif %}
+                                    {% endfor %}
+                                </ul>
+                            </li>
+                        {% endif %}
                     {% endfor %}
                 </ul>
             </li>
         </ul>
-        
+
         <script>
             var toggler = document.getElementsByClassName("caret");
             var i;
-            
             for (i = 0; i < toggler.length; i++) {
               toggler[i].addEventListener("click", function() {
                 this.parentElement.querySelector(".nested").classList.toggle("active");
@@ -108,44 +127,7 @@
               });
             }
         </script>
-
-    </div>
-    {% if device.components|length > 1 %}
-    <div class="col-sm-8">
-        <table class="table table-striped table-hover">
-            <thead>
-                <tr>
-                    <th scope="col">Component UUID</th>
-                    <th scope="col">Name</th>
-                    <th scope="col">Type</th>
-                    <th scope="col">Parent</th>
-                    <th scope="col">Attributes</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for component in (device.components|sort(true, attribute='name')) %}
-                <tr>
-                    <td>
-                        {{ component.component_uuid.uuid }}
-                    </td>
-                    <td>
-                        {{ component.name }}
-                    </td>
-                    <td>
-                        {{ component.type }}
-                    </td>
-                    <td>
-                        {{ component.parent }}
-                    </td>
-                    <td>
-                        {{ component.attributes }}
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
     </div>
-    {% endif %}
 </div>
 
 {% endblock %}