diff --git a/anatomy/static/css/anatomy.css b/anatomy/static/css/anatomy.css
index cc458644..1d8249f2 100644
--- a/anatomy/static/css/anatomy.css
+++ b/anatomy/static/css/anatomy.css
@@ -139,6 +139,16 @@ button a {
   padding: 20px
 }
 
+#full-question-list  li{
+  padding-bottom: 20px
+}
+
+#full-question-list  img{
+  float: left;
+  padding-right: 20px;
+  padding-left: 10px;
+}
+
 #question-mark-list a {
   color: #bbe1fa
 }
@@ -151,4 +161,9 @@ button a {
   float: right;
   position: sticky;
   top: 30px;
+}
+
+#save-annotations {
+    position: absolute;
+    left: 0;
 }
\ No newline at end of file
diff --git a/anatomy/templates/anatomy/base.html b/anatomy/templates/anatomy/base.html
index 76d82521..1bef86ee 100644
--- a/anatomy/templates/anatomy/base.html
+++ b/anatomy/templates/anatomy/base.html
@@ -4,7 +4,9 @@
 <head>
     <title>Anatomy Quiz</title>
     <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
+    <link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="{% static 'js/toastr.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/hammer.js' %}"></script>
     <script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
     <script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script>
diff --git a/anatomy/templates/anatomy/exam_overview.html b/anatomy/templates/anatomy/exam_overview.html
index 1954d81f..9ce9e36e 100644
--- a/anatomy/templates/anatomy/exam_overview.html
+++ b/anatomy/templates/anatomy/exam_overview.html
@@ -8,28 +8,32 @@
     This exam has {{question_number}} questions.
 
     <div title="Click to enable / disable the exam">
-Exam active: <input type="checkbox" id="exam-active-switch" {% if exam.active %}checked{% endif %}>
+        Exam active: <input type="checkbox" id="exam-active-switch" {% if exam.active %}checked{% endif %}>
     </div>
     <p><a href="{% url 'anatomy:mark_overview' pk=exam.pk %}"><button>Mark exam</button></a></p>
     <!--<p><button><a href="{% url 'anatomy:exam_take' pk=exam.pk sk=0 %}">Click here to start</a></button></p>-->
 
-<ol>
-    {% for question in questions.all %}
+    <ol id="full-question-list">
+        {% for question in questions.all %}
 
-<li>{{ question.description }}: {{ question.GetPrimaryAnswer }}<img src="{{ question.image|thumbnail_url:'exam-list' }}" alt="thumbail" />
-<br />
-Modality: {{ question.modality }}
-</li>
+        <li>
+            <img src="{{ question.image|thumbnail_url:'exam-list' }}" alt="thumbail" />
+            {{ question.description }}
+            <br />
+            {{ question.question_type }}: {{ question.GetPrimaryAnswer }}
+            <br />
+            Modality: {{ question.modality }}, <a href="{% url 'anatomy:question_detail' pk=question.pk %}">View</a>
+        </li>
         {% endfor %}
-</ol>
-<a href="{% url 'anatomy:exam_json' pk=exam.pk %}">JSON</a>
-<a href="{% url 'anatomy:exam_json_recreate' pk=exam.pk %}">Refresh JSON cache</a>
+    </ol>
+    <a href="{% url 'anatomy:exam_json' pk=exam.pk %}">JSON</a>
+    <a href="{% url 'anatomy:exam_json_recreate' pk=exam.pk %}">Refresh JSON cache</a>
 
 </div>
 <script type="text/javascript">
-    $(document).ready(function() {
+    $(document).ready(function () {
         // send request to change the is_private state on customSwitches toggle
-        $("#exam-active-switch").on("change", function() {
+        $("#exam-active-switch").on("change", function () {
             $.ajax({
                 url: "{% url 'anatomy:exam_toggle_active' pk=exam.pk %}",
                 data: {
@@ -37,17 +41,21 @@ Modality: {{ question.modality }}
                     active: this.checked // true if checked else false
                 },
                 type: "POST",
-                dataType : "json",
-            })
-            // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
-            .done(function(data) {
-                console.log(data);
-                // show some message according to the response. 
-                // For eg. A message box showing that the status has been changed
-            })
-            .always(function() {
-                console.log('[Done]');
+                dataType: "json",
             })
+                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
+                .done(function (data) {
+                    console.log(data);
+
+                    if (data.success) {
+                    toastr.info('Exam state changed.')
+                    }
+                    // show some message according to the response. 
+                    // For eg. A message box showing that the status has been changed
+                })
+                .always(function () {
+                    console.log('[Done]');
+                })
         })
     });
 </script>
diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html
index 25d8ebbc..a48df965 100644
--- a/anatomy/templates/anatomy/question_detail.html
+++ b/anatomy/templates/anatomy/question_detail.html
@@ -2,11 +2,11 @@
 
 {% block content %}
 {% load static %}
+<button id="save-annotations">Save Annotations</button>
 <div id="dicom-image" data-url="{{ question.image.url}}"  data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
     <!-- testing -->
 <!--<div id="dicom-image" data-url="http://localhost:8000/static/abdoct.jpg"
     data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>-->
-<button id="save-annotations">Save Annotations</button>
 <div class="question">
     <div class="date">
         Created: {{ question.created_date }}
@@ -44,6 +44,11 @@
                     console.log(data);
                     // show some message according to the response. 
                     // For eg. A message box showing that the status has been changed
+                    if (data.success) {
+                        toastr.info('Annotations saved')
+                    } else {
+                        toastr.warn('Error saving annotations')
+                    }
                 })
                 .always(function () {
                     console.log('[Done]');
diff --git a/anatomy/views.py b/anatomy/views.py
index e6de161a..169f6715 100644
--- a/anatomy/views.py
+++ b/anatomy/views.py
@@ -512,7 +512,7 @@ def exam_json(request, pk):
             "title": "{}".format(q.description),
             "question": str(q.question_type),
             "images": [image_as_base64(q.image)],
-            "annotations": [q.image_annotations],
+            "annotations": [str(q.image_annotations)],
             "type": "anatomy",
         }
 
