diff --git a/css/main.css b/css/main.css
index b493dd1..bb64b41 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1007,4 +1007,9 @@ display: block
 
 #options-link {
     padding-top: 40px;
+}
+
+.packet-list-title {
+    text-transform: capitalize;
+    font-weight: bolder;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 05248b1..fad2ee8 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         <div class="content-panel">
             <div class="nav-bar">
                 <button id="review-button" class="navigation nav-right"><b>☰</b></button>
-                <button class="submit-button navigation nav-right"><b>submit</b></button>
+                <button id="nav-submit-button" class="submit-button navigation nav-right"><b>submit</b></button>
                 <button id="options-button" class="navigation nav-right"
                     title="click to load new packet or manage saved answers">options</button>
                 <button id="review-overlay-button" class="navigation nav-right"
diff --git a/js/interact.js b/js/interact.js
index cefee76..d74e8c1 100644
--- a/js/interact.js
+++ b/js/interact.js
@@ -4,7 +4,11 @@
 export function submitAnswers(window, db) {
   console.log(
     getJsonAnswers(window, db).then((a) => {
-      postAnswers(a);
+      let json = {
+        eid: window.eid,
+        answers: JSON.stringify(a),
+      };
+      postAnswers(json);
     })
   );
 }
@@ -28,58 +32,79 @@ export function getJsonAnswers(window, db) {
  * @param {*} ans - json representation of answers
  */
 export function postAnswers(ans) {
-  $("#progress").html(`Submitting answers...`);
+  $("#progress").html("Submitting answers...");
   // ans = {"test" : 1}
-  $.post(window.config.exam_submit_url, JSON.stringify(ans)).done((data) => {
-    console.log(data);
-    if (data.success) {
-      if (data.question_count == window.number_of_questions) {
-        let ret = confirm(
-          `${data.question_count} answers sucessfully submitted. Click OK to finish the exam.`
-        );
+  console.log(ans);
+  $.post(window.config.exam_submit_url, ans, null, "json")
+    .done((data) => {
+      console.log("returned data", data);
+      if (data.success) {
+        $("#submit-error-overlay").remove();
+        if (data.question_count == window.number_of_questions) {
+          let ret = confirm(
+            `${data.question_count} answers sucessfully submitted. Click OK to finish the exam.`
+          );
 
-        if (ret) {
-          window.review = true;
-          window.saveSession();
-          if (config.exam_results_url != "") {
-            let url = config.exam_results_url;
+          if (ret) {
+            window.review = true;
+            window.saveSession();
+            if (config.exam_results_url != "") {
+              let url = config.exam_results_url;
 
-            if (window.cid != "") {
-              url = url + window.cid;
+              if (window.cid != "") {
+                url = url + window.cid;
+              }
+              $("#options-link")
+                .empty()
+                .append(
+                  `<a href="${url}" target="_blank"><div class="packet-button">Results and answers</div></a>`
+                );
             }
-            $("#options-link")
-              .empty()
-              .append(
-                `<a href="${url}" target="_blank"><div class="packet-button">Results and answers</div></a>`
-              );
+            $("#options-panel").show();
+          } else {
           }
-          $("#options-panel").show();
         } else {
+          alert(`${data.question_count} answers sucessfully submitted.`);
         }
       } else {
-        alert(`${data.question_count} answers sucessfully submitted.`);
+            submissionError(data, ans);
       }
-    } else {
-      alert(`Error submitting answers: ${data.error}`);
+    })
+    .fail((e) => {
+      // Will occur with server error such as 500
+      console.log("error", e);
+      submissionError(e, ans);
+    });
+  // $.post( "http://localhost:8000/submit_answers", JSON.stringify(ans));
+}
+
+function submissionError(data, ans) {
+  // error will not be defined with server errors
+  if (data.error != undefined) {
+    alert(`Error submitting answers: ${data.error}`);
+  } else {
+    alert(`Error submitting answers`);
+  }
   var docHeight = $(document).height();
 
-    $("body").append(`<div id='overlay'><span style='color: white'><p>An error has occured when submit your answers. A copy of your answers are displayed below, you may wish to save a copy. Please refresh this page to continue.</p>${JSON.stringify(ans)}</span></div>`);
+  $("body").append(
+    `<div id='submit-error-overlay'><span style='color: white'><p>An error has occured when submit your answers. A copy of your answers are displayed below, you may wish to save a copy. Please try submitting again or refresh this page to continue.</p>${JSON.stringify(
+      ans
+    )}</span></div>`
+  );
 
-    $("#overlay")
-        .height(docHeight)
-        .css({
-          'opacity' : 0.9,
-          'position': 'absolute',
-          'top': 0,
-          'left': 0,
-          'background-color': 'black',
-          'width': '100%',
-          'user-select': 'text',
-          '-moz-user-select': 'text',
-          '-webkit-user-select': 'text',
-          'z-index': 5000
-        });
-      }
-    });
-    // $.post( "http://localhost:8000/submit_answers", JSON.stringify(ans));
+  $("#nav-submit-button").prependTo("#submit-error-overlay");
+
+  $("#submit-error-overlay").height(docHeight).css({
+    opacity: 0.9,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    "background-color": "black",
+    width: "100%",
+    "user-select": "text",
+    "-moz-user-select": "text",
+    "-webkit-user-select": "text",
+    "z-index": 5000,
+  });
 }
diff --git a/js/main.js b/js/main.js
index dcaeaf9..4eba875 100644
--- a/js/main.js
+++ b/js/main.js
@@ -127,7 +127,19 @@ async function loadExamList(data) {
     if (exams_completed.indexOf(name) > -1) {
       c = " session-completed";
     }
-    $("#packet-list").append(
+
+    let list;
+    if (exam.type != undefined) {
+      if ($(`#packet-list .${exam.type}`).length) {
+        list = $(`#packet-list .${exam.type}`);
+      } else {
+        list = $("#packet-list").append(`<div class='packet-list ${exam.type}'><span class='packet-list-title'>${exam.type}</span><br/></div>`);
+      }
+    } else {
+      list = $("#packet-list");
+    }
+    
+    list.append(
       $(`<div class='packet-button${c}' title='Load packet'></div>`)
         .text(name)
         .click(function () {
@@ -186,6 +198,19 @@ async function loadPacketList(data) {
 
   $("#packet-list").empty();
   window.packet_list.forEach(function (packet) {
+    // Seperate packet types
+    let list;
+    if (packet.type != undefined) {
+      if ($(`#packet-list .${packet.type}`)) {
+        list = $(`#packet-list .${packet.type}`);
+      } else {
+        list = $(`<div class='packet-list ${packet.type}'>${packet.type}<br/></div>`);
+        $("#packet-list").append(list);
+      }
+    } else {
+      list = $("#packet-list");
+    }
+
     let c = "";
     if (packets_started.indexOf(packet) > -1) {
       c = " session-started";
@@ -193,7 +218,7 @@ async function loadPacketList(data) {
     if (packets_completed.indexOf(packet) > -1) {
       c = " session-completed";
     }
-    $("#packet-list").append(
+    list.append(
       $(`<div class='packet-button${c}' title='Load packet'></div>`)
         .text(packet)
         .click(function () {
diff --git a/js/viewer.js b/js/viewer.js
index a277f63..19d59a7 100644
--- a/js/viewer.js
+++ b/js/viewer.js
@@ -511,7 +511,7 @@ export function openMainImage(current_question, t, source) {
   function loadAnnotation(imageId, annotation) {
     const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
 
-    if (annotation.length < 1) { return }
+    if (annotation == undefined || annotation.length < 1) { return }
 
     let tool_state_no_id = JSON.parse(annotation);