diff --git a/static/style.css b/static/style.css
index 8eb4bda..408c567 100644
--- a/static/style.css
+++ b/static/style.css
@@ -42,6 +42,10 @@ ul{
     overflow: scroll;
     height: 200px;
 }
+.activeList{
+    text-align: left;
+    padding-bottom: 5px;
+}
 .footer{
     grid-column-start: 1;
     grid-column-end: 5;
diff --git a/templates/index.html b/templates/index.html
index 8d61f66..37bf651 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,7 +6,7 @@
     <title>Title</title>
 </head>
   <body>
-    <dev class="grid-container">
+    <div class="grid-container">
       <div class="header">Super Awesome Mange Downloading and Viewing Thing</div>
       <div class="nav" align="left">
         <ul>
@@ -17,7 +17,6 @@
         </ul>
       </div>
       <div class="main" id="main">
-
       </div>
       <div class="footer">
         bottom stuffs
@@ -27,14 +26,65 @@
 </html>
 
 <script>
+  var x = '';
+  var bookTitle = '';
+  var bookCommand = '';
   function activeReturn() {
+      document.getElementById('main').innerHTML= '';
+      
       fetch('/active')
           .then(response => response.json())
-          .then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
+          .then(function(data) {
+              for (i=0; i < data.active.length; i++ )
+              {
+                  x = data.active[i];
+                  <!--console.log(x.title)-->
+                  var div = document.createElement('div');
+                  div.setAttribute('id', x.id);
+                  div.setAttribute('class', 'activeList');
+                  div.innerHTML = '<b>' + x.title + '</b><br>';
+                  document.getElementById("main").appendChild(div);
+              };
+          });
   };
-   function downloadReturn() {
+  function downloadReturn() {
+      document.getElementById('main').innerHTML='';
+
+<!--Create the main.updated div-->
+      var div = document.createElement('div');
+      div.setAttribute('id','updated')
+      div.innerHTML = '<b>Updated</b>'
+      document.getElementById('main').appendChild(div);
+
+<!--Create the main.missingFlags div-->
+      var div = document.createElement('div');
+      div.setAttribute('id', 'missingFlags');
+      div.innerHTML='<b>Missing Flags</b>';
+      document.getElementById('main').appendChild(div);
+
+<!--Create the main.missingManga div-->
+      var div = document.createElement('div');
+      div.setAttribute('id', 'missingManga');
+      div.innerHTML='<b>Missing Manga</b>';
+      document.getElementById('main').appendChild(div);
+
+<!--Create the main.notUpdated div-->
+      var div = document.createElement('div');
+      div.setAttribute('id','notUpdated');
+      div.innerHTML='<b>Not Updated</b>';
+      document.getElementById('main').appendChild(div);
+
       fetch('/download')
-          .then(response => response.json())
-          .then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
+           .then(response => response.json())
+           .then(function(data){
+               for (i=0; data.updated.length; i++) {
+                   bookTitle  = data.book[i];
+                   bookCommand = data.command[i];
+                   var div = document.createElement('div');
+                   div.setAttribute('id', 'book'+i);
+                   div.innerHTML = bookTitle + "<br>";
+                   document.getElementById("updated").appendChild(div);
+               };
+           });
    };
 </script>
