diff --git a/templates/layout.html b/templates/layout.html
index 9ff0d01..b8ba43a 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -11,45 +11,62 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
-
        $(".librarian-names").click(function(event){
          var thename = $(this).text();
-         $.getJSON('{{ url_for('static', filename='js/realjson.json') }}', function(test) {
-           alert(thename);
-           // iterate in test[i].librarian to find where the name is present
-           //to get the test[i].debris that goes with it
+         $(".name-elements").empty();
+
+         $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
+           // iterate in test[i].librarian to find where the name is present to get the test[i].debris that goes with it
            var alldocs = [];
            for (var i = 0; i < test.length; ++i) {
              var item = test[i];
              if(item.librarian.includes(thename)){
-               ledocument = item.debris;
-               // alert(ledocument);
-               alldocs.push(ledocument);
+               ledocument = item.debrispath;
+               //put ledocument into li and nest inside ul
+               var extension = ledocument.replace(/^.*\./, '');
+               console.log(ledocument);
+               if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
+                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
+               }
+               else if (extension=="pdf") {
+                 $(".name-elements").append("<li><iframe src='"+ledocument+"'></iframe></li>");
+               }
+               else if (extension=="epub") {
+                 $(".name-elements").append("<li>"+ledocument+"</li>");
+               }
+               else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
+                 $(".name-elements").append("<li><audio controls><source src='"+ledocument+"'></audio></li>");
+               }
+               else if ((extension=="mov") || (extension=="mp4")) {
+                 $(".name-elements").append("<li><video controls><source='"+ledocument+"'></video></li>");
+               }
+               else if ((extension=="odt") || (extension=="docx")) {
+               // something for odt and docx
+                 $(".name-elements").append("<li>"+ledocument+"</li>");
              };
            };
-           alert(alldocs);
-         });
+         };
        });
+     });
 
        $(".file-names").click(function(event){
          var thefile = $(this).text();
-         $.getJSON('{{ url_for('static', filename='js/realjson.json') }}', function(test) {
-           alert(thefile);
+         $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
+           $(".name-elements").empty();
            // iterate in test[i].librarian to find where the name is present
            //to get the test[i].debris that goes with it
            var allpeeps = [];
            var category = null;
            for (var i = 0; i < test.length; ++i) {
              var item = test[i];
-             if(item.debris.includes(thefile)){
-               ledocument = item.librarian;
-               // alert(ledocument);
+             if(item.debrisname.includes(thefile)){
+               ledocument = item.debrispath;
+               $(".name-elements").append("<li>"+ledocument+"</li>");
                allpeeps.push(ledocument);
              };
              category = item.method;
            };
-           alert(allpeeps);
-           alert(category);
+
          });
        });
 
@@ -77,15 +94,17 @@
         <br>
 
         <div class="file-names-container">
-        {% for file in filetoname_dict %}
-          <span class="file-names">{{file["debris"]}}</span><br>
+        {% for file in files_without_folders %}
+          <span class="file-names">{{file}}</span><br>
         {% endfor %}
         </div>
       </div>
 
       <div class="main-column-right">
         <a href="{{ url_for('static', filename='realjson.json') }}">test link</a>
-
+        <ul class="name-elements">
+          <p>hello world</p>
+        </ul>
 
         {% block content %}
         {% endblock content %}