diff --git a/ref-test/quiz/static/js/quiz.js b/ref-test/quiz/static/js/quiz.js
index b71ed0e..344d849 100644
--- a/ref-test/quiz/static/js/quiz.js
+++ b/ref-test/quiz/static/js/quiz.js
@@ -21,20 +21,23 @@ $("#btn-toggle-navigator").click(function(event){
     if ($quiz_navigator.is(":hidden")) {
         if ($quiz_settings.is(":visible")) {
             toggle_settings = true;
-            $quiz_settings.hide();
+            $quiz_settings.fadeOut();
         }
-        $quiz_render.hide();
-        $quiz_navigator.show();
-        $(".navigator-text").show();
-        $(".review-text").hide();
+        $quiz_render.fadeOut();
+        $quiz_navigator.fadeIn();
+        $(".navigator-text").fadeIn();
+        $(".review-text").fadeOut();
         toggle_navigator = false;
+        $quiz_navigator.focus();
     } else {
-        $quiz_navigator.hide();
+        $quiz_navigator.fadeOut();
         if (toggle_settings) {
-            $quiz_settings.show();
+            $quiz_settings.fadeIn();
+            $quiz_settings.focus()
             toggle_settings = false;
         } else {
-            $quiz_render.show();
+            $quiz_render.fadeIn();
+            $question_title.focus();
         }
     }
     event.preventDefault();
@@ -44,27 +47,31 @@ $("#btn-toggle-settings").click(function(event){
     if (($quiz_settings).is(":hidden")) {
         if ($quiz_navigator.is(":visible")) {
             toggle_navigator = true;
-            $quiz_navigator.hide();
+            $quiz_navigator.fadeOut();
         }
-        $quiz_render.hide();
-        $quiz_settings.show();
+        $quiz_render.fadeOut();
+        $quiz_settings.fadeIn();
+        $quiz_settings.focus()
         toggle_settings = false;
     } else {
-        $quiz_settings.hide();
+        $quiz_settings.fadeOut();
         if (toggle_navigator) {
-            $quiz_navigator.show();
+            $quiz_navigator.fadeIn();
             toggle_navigator = false;
+            $quiz_navigator.focus();
         } else {
-            $quiz_render.show();
+            $quiz_render.fadeIn();
+            $question_title.focus();
         }
     }
     event.preventDefault();
 });
 
 $(".btn-quiz-return").click(function(event){
-    $quiz_navigator.hide();
-    $quiz_settings.hide();
-    $quiz_render.show();
+    $quiz_navigator.fadeOut();
+    $quiz_settings.fadeOut();
+    $quiz_render.fadeIn();
+    $question_title.focus();
     toggle_settings = false;
     toggle_navigator = false;
     event.preventDefault();
@@ -78,8 +85,9 @@ $("#navigator-container").on("click", ".q-navigator-button", function(event){
     check_answered();
     update_navigator();
     current_question = parseInt($(this).attr("name"));
-    $quiz_render.show();
-    $quiz_navigator.hide();
+    $quiz_render.fadeIn();
+    $question_title.focus();
+    $quiz_navigator.fadeOut();
     toggle_navigator = false;
     toggle_settings = false;
     render_question();
@@ -100,8 +108,8 @@ $(".q-question-nav").click(function(event){
         }
     } else if ($(this).hasClass("q-navigator-button")) {
         current_question = $(this).attr("name");
-        $quiz_render.show();
-        $quiz_navigator.hide();
+        $quiz_render.fadeIn();
+        $quiz_navigator.fadeOut();
         toggle_navigator = false;
         toggle_settings = false;
     }
@@ -126,12 +134,6 @@ $("#q-nav-flag").click(function(event){
 });
 
 $("#btn-start-quiz").click(function(event){
-    $(this).hide();
-    $(".btn-quiz-return").show();
-    $(".quiz-console").show();
-    $("#quiz-settings").hide();
-    $("#quiz-navigator").hide();
-    $(".quiz-start-text").hide();
 
     $.ajax({
         url: `/api/questions/`,
@@ -139,6 +141,12 @@ $("#btn-start-quiz").click(function(event){
         data: JSON.stringify({'_id': _id}),
         contentType: "application/json",
         success: function(response) {
+            $(this).fadeOut();
+            $(".btn-quiz-return").fadeIn();
+            $(".quiz-console").fadeIn();
+            $("#quiz-settings").fadeOut();
+            $("#quiz-navigator").fadeOut();
+            $(".quiz-start-text").fadeOut();
             time_limit = response.time_limit;
             start_time = response.start_time;
             questions = response.questions;
@@ -149,15 +157,32 @@ $("#btn-start-quiz").click(function(event){
             render_question();
             build_navigator();
             check_flag();
-            if (time_limit != 'null') {
+            if (time_limit != 'null' && time_limit != null) {
+                $("#q-timer-widget").fadeIn();
                 time_remaining = get_time_remaining();
                 clock = setInterval(timer, 1000);
-            } else {
-                $("#q-timer-widget").hide();
             }
         },
         error: function(response) {
-            console.log(response);
+            if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) {
+                alert.innerHTML = alert.innerHTML + `
+                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                    <i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
+                    ${response.responseJSON.error}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+                `;
+            } else if (response.responseJSON.error instanceof Array) {
+                for (var i = 0; i < response.responseJSON.error.length; i ++) {
+                    alert.innerHTML = alert.innerHTML + `
+                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                        <i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
+                        ${response.responseJSON.error[i]}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                    `;
+                }
+            }
         }
     });
 
@@ -177,20 +202,21 @@ $("#q-review-answers").click(function(event){
     if ($quiz_navigator.is(":hidden")) {
         if ($quiz_settings.is(":visible")) {
             toggle_settings = true;
-            $quiz_settings.hide();
+            $quiz_settings.fadeOut();
         }
-        $quiz_render.hide();
-        $quiz_navigator.show();
-        $(".navigator-text").hide();
-        $(".review-text").show();
+        $quiz_render.fadeOut();
+        $quiz_navigator.fadeIn();
+        $(".navigator-text").fadeOut();
+        $(".review-text").fadeIn();
         toggle_navigator = false;
+        $quiz_navigator.focus();
     } else {
-        $quiz_navigator.hide();
+        $quiz_navigator.fadeOut();
         if (toggle_settings) {
-            $quiz_settings.show();
+            $quiz_settings.fadeIn();
             toggle_settings = false;
         } else {
-            $quiz_render.show();
+            $quiz_render.fadeIn();
         }
     }
     event.preventDefault();
@@ -460,12 +486,12 @@ function update_navigator() {
 }
 
 function start() {
-    $("#btn-start-quiz").hide();
-    $(".btn-quiz-return").show();
-    $(".quiz-console").show();
-    $("#quiz-settings").hide();
-    $("#quiz-navigator").hide();
-    $(".quiz-start-text").hide();
+    $("#btn-start-quiz").fadeOut();
+    $(".btn-quiz-return").fadeIn();
+    $(".quiz-console").fadeIn();
+    $("#quiz-settings").fadeOut();
+    $("#quiz-navigator").fadeOut();
+    $(".quiz-start-text").fadeOut();
 
     questions = JSON.parse(window.localStorage.getItem('questions'));
     total_questions = questions.length;
@@ -485,11 +511,10 @@ function start() {
     render_question();
     build_navigator();
     check_flag();
-    if (time_limit != 'null') {
+    if (time_limit != 'null' && time_limit != null) {
+        $("#q-timer-widget").fadeIn();
         time_remaining = get_time_remaining();
         clock = setInterval(timer, 1000);
-    } else {
-        $("#q-timer-widget").hide();
     }
 }
 
@@ -540,9 +565,9 @@ function timer() {
 }
 
 function stop() {
-    $quiz_render.hide();
-    $quiz_navigator.hide();
-    $quiz_timeout.show();
+    $quiz_render.fadeOut();
+    $quiz_navigator.fadeOut();
+    $quiz_timeout.fadeIn();
     $("#btn-toggle-navigator").addClass('disabled');
     $("#btn-toggle-settings").addClass('disabled')
 }
@@ -582,7 +607,4 @@ const $question_options = $("#quiz-question-options");
 // Execution on Load
 
 apply_settings(display_settings);
-check_started();
-
-// TODO Timeout Function
-// TODO Send data to server
+check_started();
\ No newline at end of file
diff --git a/ref-test/quiz/templates/quiz/client.html b/ref-test/quiz/templates/quiz/client.html
index 46fa1f1..8ace2bf 100644
--- a/ref-test/quiz/templates/quiz/client.html
+++ b/ref-test/quiz/templates/quiz/client.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block content %}
-    <div class="container quiz-panel" id="quiz-settings">
+    <div class="container quiz-panel" id="quiz-settings" tabindex="-1">
         <h1>Adjust Display Settings</h1>
         <div class="container quiz-start-text">
             You can use this panel to adjust the display settings for the exam. Please use the menu below to select the font face and font size. Below is a sample question so you can see how the exam will render with your chosen settings.
@@ -156,15 +156,15 @@
             </div>
         </div>
     </div>
-    <div class="container quiz-panel" style="display: none;" id="quiz-navigator">
+    <div class="container quiz-panel" style="display: none;" id="quiz-navigator" tabindex="-1">
         <h1 class="navigator-text">
-            Navigator
+            Question Grid
         </h1>
         <h1 class="review-text" style="display: none;">
             Review Your Answers
         </h1>
         <div class="navigator-text">
-            This is the exam navigator. It displays the progress you have on the exam so far. Each question is represented by an icon below, and you can click on each icon to skip to that question.
+            This question grid displays the progress you have on the exam so far. Each question is represented by an icon below, and you can click on each icon to skip to that question.
 
             The icons below are colour-coded to represent the status of each question.
         </div>
@@ -237,8 +237,8 @@
         </div>
         <div class="control-button-container">
             <a href="#" class="btn btn-success q-question-nav" id="q-nav-prev" title="Previous Question"><i class="bi bi-caret-left-square-fill"></i>&nbsp;Back</a>
-        <a href="#" class="btn btn-secondary" id="q-nav-flag" title="Question Un-Flagged. Click to flag for revision."><i class="bi bi-flag-fill"></i></a>
-        <a href="#" class="btn btn-success q-question-nav" id="q-nav-next" title="Next Question">Next&nbsp;<i class="bi bi-caret-right-square-fill"></i></a>
+            <a href="#" class="btn btn-secondary" id="q-nav-flag" title="Question Un-Flagged. Click to flag for revision."><i class="bi bi-flag-fill"></i></a>
+            <a href="#" class="btn btn-success q-question-nav" id="q-nav-next" title="Next Question">Next&nbsp;<i class="bi bi-caret-right-square-fill"></i></a>
         </div>
         <div class="control-button-container">
             <a href="#" class="btn btn-primary" id="q-review-answers" title="Submit Answers">Submit Answers</a>