diff --git a/atdb/taskdatabase/templates/taskdatabase/details/inputs.html b/atdb/taskdatabase/templates/taskdatabase/details/inputs.html
index fdf5dd5e02bc8bdf9a619c00c3619124c5331246..fa84403790f770fcc41086570b9aa6d4134062bf 100644
--- a/atdb/taskdatabase/templates/taskdatabase/details/inputs.html
+++ b/atdb/taskdatabase/templates/taskdatabase/details/inputs.html
@@ -7,11 +7,37 @@
  <div class="card-body">
      <h3>Inputs </h3>
        <table class="table table-striped">
-           <tbody>
-            {{ results | safe }}
+           <tbody  id="inputs_table">
            </tbody>
        </table>
  </div>
 </div>
+<script>
+    var inputs_values = {{ resultsjson | safe }}
 
+    function generate_tree(tree, div) {
+        if (Array.isArray(tree)) {
+            var array = $("<tbody></tbody>")
+            div.append(array)
+            for (let row_index in tree) {
+                var row = $('<tr></tr>')
+                generate_tree(tree[row_index], row)
+                array.append(row)
+            }
+
+        } else if (typeof (tree) === 'object' && tree !== null) {
+            for (var att_name in tree) {
+                var row = $(`<tr><td><b>${att_name}</b></td></tr>`)
+                generate_tree(tree[att_name], row);
+                div.append(
+                    row
+                )
+            }
+        } else {
+            div.append(`<td>${tree}</td>`)
+        }
+    }
+
+    generate_tree(inputs_values, $('#inputs_table'))
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/atdb/taskdatabase/templates/taskdatabase/details/outputs.html b/atdb/taskdatabase/templates/taskdatabase/details/outputs.html
index 05e04ed4d47dd611a0b8dea16ceaeabe707b77a1..91851d607e85fe9c255c468ddd69abafb4fd448d 100644
--- a/atdb/taskdatabase/templates/taskdatabase/details/outputs.html
+++ b/atdb/taskdatabase/templates/taskdatabase/details/outputs.html
@@ -1,17 +1,44 @@
-
 {% load static %}
 {% block myBlock %}
 
 
 <div class="card">
- <div class="card-body">
-     <h3>Outputs </h3>
-       <table class="table table-striped">
-           <tbody>
-              {{ results | safe }}
-           </tbody>
-       </table>
- </div>
+    <div class="card-body">
+        <h3>Outputs </h3>
+        <table class="table table-striped">
+            <tbody id="output_values">
+
+            </tbody>
+        </table>
+    </div>
 </div>
 
+
+<script>
+    var output_values = {{ resultsjson | safe }}
+
+    function generate_tree(tree, div) {
+        if (Array.isArray(tree)) {
+            var array = $("<tbody></tbody>")
+            div.append(array)
+            for (let row_index in tree) {
+                var row = $('<tr></tr>')
+                generate_tree(tree[row_index], row)
+                array.append(row)
+            }
+        } else if (typeof (tree) === 'object' && tree !== null) {
+            for (var att_name in tree) {
+                var row = $(`<tr><td><b>${att_name}</b></td></tr>`)
+                generate_tree(tree[att_name], row);
+                div.append(
+                    row
+                )
+            }
+        } else {
+            div.append(`<td>${tree}</td>`)
+        }
+    }
+
+    generate_tree(output_values, $('#output_values'))
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/atdb/taskdatabase/views.py b/atdb/taskdatabase/views.py
index ecfee2de5304f650686c43ee3aeb956214eea771..91714ac8f2d4bff1e73cd8b9eff67f3172505cce 100644
--- a/atdb/taskdatabase/views.py
+++ b/atdb/taskdatabase/views.py
@@ -267,7 +267,7 @@ def ShowInputs(request, id):
 
     # convert the json to a presentable piece of html for the output template
     results = algorithms.convert_list_of_dicts_to_html(task.inputs)
-    return render(request, "taskdatabase/details/inputs.html", {'results': results})
+    return render(request, "taskdatabase/details/inputs.html", {'results': results, 'resultsjson': task.inputs})
 
 
 def ShowOutputs(request, id):
@@ -275,7 +275,7 @@ def ShowOutputs(request, id):
 
     # convert the json to a presentable piece of html for the output template
     results = algorithms.convert_list_of_dicts_to_html(task.outputs)
-    return render(request, "taskdatabase/details/outputs.html", {'results': results})
+    return render(request, "taskdatabase/details/outputs.html", {'results': results, 'resultsjson': task.outputs})
 
 
 def ShowMetrics(request, id):