diff --git a/course/flow.py b/course/flow.py
index 19957024d..28aa92a7a 100644
--- a/course/flow.py
+++ b/course/flow.py
@@ -2080,11 +2080,6 @@ def view_flow_page(
         "viewing_prior_version": viewing_prior_version,
         "prev_answer_visits": prev_answer_visits,
         "prev_visit_id": prev_visit_id,
-
-        # Wrappers used by JavaScript template (tmpl) so as not to
-        # conflict with Django template's tag wrapper
-        "JQ_OPEN": "{%",
-        "JQ_CLOSE": "%}",
     }
 
     if fpctx.page.expects_answer() and fpctx.page.is_answer_gradable():
@@ -2103,7 +2098,8 @@ def view_flow_page(
 
 
 @course_view
-def get_prev_answer_visits_dropdown_content(pctx, flow_session_id, page_ordinal):
+def get_prev_answer_visits_dropdown_content(
+            pctx, flow_session_id, page_ordinal, prev_visit_id):
     """
     :return: serialized prev_answer_visits items for past-submission-dropdown
     """
@@ -2120,16 +2116,13 @@ def get_prev_answer_visits_dropdown_content(pctx, flow_session_id, page_ordinal)
         FlowPageData, flow_session=flow_session, page_ordinal=page_ordinal)
     prev_answer_visits = get_prev_answer_visits_qset(page_data)
 
-    def serialize(obj):
-        return {
-            "id": obj.id,
-            "visit_time": (
-                format_datetime_local(as_local_time(obj.visit_time))),
-            "is_submitted_answer": obj.is_submitted_answer,
-        }
-
-    return http.JsonResponse(
-        {"result": [serialize(visit) for visit in prev_answer_visits]})
+    return render(request, "course/flow-page-prev-visits.html", {
+        "prev_answer_visits": prev_answer_visits,
+        "prev_visit_id": (
+            None
+            if prev_visit_id == "None" else
+            int(prev_visit_id)),
+    })
 
 
 def get_pressed_button(form: StyledForm) -> str:
diff --git a/course/grading.py b/course/grading.py
index af2bd8179..df4ed319f 100644
--- a/course/grading.py
+++ b/course/grading.py
@@ -33,7 +33,7 @@
     PermissionDenied,
     SuspiciousOperation,
 )
-from django.shortcuts import get_object_or_404, redirect  # noqa
+from django.shortcuts import get_object_or_404, redirect, render  # noqa
 from django.utils.translation import gettext as _
 
 from course.constants import participation_permission as pperm
@@ -53,8 +53,6 @@
 )
 from course.views import get_now_or_fake_time
 from relate.utils import (
-    as_local_time,
-    format_datetime_local,
     retry_transaction_decorator,
 )
 
@@ -92,7 +90,8 @@ def get_prev_visit_grades(
 
 
 @course_view
-def get_prev_grades_dropdown_content(pctx, flow_session_id, page_ordinal):
+def get_prev_grades_dropdown_content(pctx, flow_session_id, page_ordinal,
+                                     prev_grade_id):
     """
     :return: serialized prev_grades items for rendering past-grades-dropdown
     """
@@ -111,17 +110,13 @@ def get_prev_grades_dropdown_content(pctx, flow_session_id, page_ordinal):
     prev_grades = get_prev_visit_grades(pctx.course_identifier,
                                         flow_session_id, page_ordinal, True)
 
-    def serialize(obj):
-        return {
-            "id": obj.id,
-            "visit_time": (
-                format_datetime_local(as_local_time(obj.visit.visit_time))),
-            "grade_time": format_datetime_local(as_local_time(obj.grade_time)),
-            "value": obj.value(),
-        }
-
-    return http.JsonResponse(
-        {"result": [serialize(pgrade) for pgrade in prev_grades]})
+    return render(pctx.request, "course/prev-grades-dropdown.html", {
+                      "prev_grades": prev_grades,
+                      "prev_grade_id": (
+                          None
+                          if prev_grade_id == "None" else
+                          int(prev_grade_id)),
+                  })
 
 
 # {{{ grading driver
@@ -398,12 +393,6 @@ def grade_flow_page(
                 "correct_answer": fpctx.page.correct_answer(
                     fpctx.page_context, fpctx.page_data.data,
                     answer_data, grade_data),
-
-
-                # Wrappers used by JavaScript template (tmpl) so as not to
-                # conflict with Django template's tag wrapper
-                "JQ_OPEN": "{%",
-                "JQ_CLOSE": "%}",
             })
 
 
diff --git a/course/templates/course/course-base-with-markup.html b/course/templates/course/course-base-with-markup.html
index 391728f6d..165eb325a 100644
--- a/course/templates/course/course-base-with-markup.html
+++ b/course/templates/course/course-base-with-markup.html
@@ -4,13 +4,5 @@
 {% block bundle_loads %}
   {# contains mathjax config #}
   <script src="{% static 'bundle-base-with-markup.js' %}"></script>
-
-  <script type="text/javascript">
-    const rlUtils = rlBase.rlUtils;
-    const tmpl = rlBase.tmpl;
-    const bootstrap = rlBase.bootstrap;
-  </script>
-
   <script src="{% static "mathjax/es5/tex-svg.js" %}" id="MathJax-script" async></script>
-
 {% endblock %}
diff --git a/course/templates/course/course-datatables.html b/course/templates/course/course-datatables.html
index 845523a84..9c48be2d4 100644
--- a/course/templates/course/course-datatables.html
+++ b/course/templates/course/course-datatables.html
@@ -3,7 +3,4 @@
 
 {% block bundle_loads %}
   <script src="{% static 'bundle-datatables.js' %}"></script>
-  <script type="text/javascript">
-    const rlUtils = rlDataTables.rlUtils;
-  </script>
 {% endblock %}
diff --git a/course/templates/course/flow-page-prev-visits.html b/course/templates/course/flow-page-prev-visits.html
new file mode 100644
index 000000000..8c608f74c
--- /dev/null
+++ b/course/templates/course/flow-page-prev-visits.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+
+{% if not prev_answer_visits %}
+  <li><h6 class="dropdown-header">{% trans 'No submission history' %}</h6> </li>
+{% else %}
+  {% for visit in prev_answer_visits %}
+    <li>
+      {% if forloop.first %}
+      <a class="dropdown-item" href="?">
+      {% else %}
+      <a class="dropdown-item" href="?visit_id={{ visit.id }}">
+      {% endif %}
+        {% if visit.id == prev_visit_id %}<b>{% endif %}
+        {{ visit.visit_time }}
+        {% if forloop.first %}(current){% endif %}
+        {% if visit.id == prev_visit_id %}</b>{% endif %}
+        {% if visit.is_submitted_answer %}(submitted){% endif %}
+      </a>
+    </li>
+  {% endfor %}
+{% endif %}
diff --git a/course/templates/course/flow-page.html b/course/templates/course/flow-page.html
index 6c0787040..8fa6c81a9 100644
--- a/course/templates/course/flow-page.html
+++ b/course/templates/course/flow-page.html
@@ -130,11 +130,19 @@
           {% if expects_answer %}
             <div class="relate-flow-page-past-submissions">
               <div class="dropdown" id="past-submission_dropdown">
-                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="past-submission_dropdown_button" data-bs-toggle="dropdown"
+                <button
+                  class="btn btn-outline-secondary dropdown-toggle"
+                  type="button" id="past-submission_dropdown_button"
+                  hx-get="{% url "relate-get_prev_answer_visits_dropdown_content" course.identifier flow_session.id page_ordinal prev_visit_id %}"
+                  hx-target="#past-submission_dropdown_content"
+                  data-bs-toggle="dropdown"
                   title='{% trans "Submission history for this page" %}'>
                   <i class="bi bi-clock-history"></i>
                 </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="past-submission_dropdown_button" id="past-submission_dropdown_content">
+                <ul
+                  class="dropdown-menu dropdown-menu-end shadow"
+                  aria-labelledby="past-submission_dropdown_button"
+                  id="past-submission_dropdown_content">
                   <li style="list-style:none; position:relative; left:50%;">
                     <i class="bi bi-hourglass"></i>
                   </li>
@@ -545,51 +553,4 @@
 
 {% endblock %}
 
-{% block page_bottom_javascript_extra %}
-
-  {% if expects_answer %}
-    <script>
-      function generate_past_submission_dropdown_content(){
-        var jqxhr = $.ajax({
-          url: "{% url "relate-get_prev_answer_visits_dropdown_content" course.identifier flow_session.id page_ordinal %}"
-        }).done(function (result) {
-          if(result.result)
-            document.getElementById("past-submission_dropdown_content").innerHTML = tmpl("tmpl-prev-answer-visits", result.result);
-        });
-      }
-
-      $('#past-submission_dropdown').on('shown.bs.dropdown', generate_past_submission_dropdown_content);
-
-
-    </script>
-
-    {# https://github.com/blueimp/JavaScript-Templates #}
-    <script type="text/x-tmpl" id="tmpl-prev-answer-visits">
-      {{ JQ_OPEN }} if (o.length==0) { {{ JQ_CLOSE }}
-        <li><h6 class="dropdown-header">{% trans 'No submission history' %}</h6> </li>
-      {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-        {{ JQ_OPEN }} for (var i=0; i<o.length; i++) { {{ JQ_CLOSE }}
-          <li>
-            {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?">
-            {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?visit_id={{ JQ_OPEN }}=o[i].id{{ JQ_CLOSE }}">
-            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_visit_id }}) { {{ JQ_CLOSE }}<b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-                {{ JQ_OPEN }}=o[i].visit_time{{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_visit_id }}) { {{ JQ_CLOSE }}</b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              {% trans "(current)" %}
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].is_submitted_answer) { {{ JQ_CLOSE }}
-                {% trans "(submitted)" %}
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-            </a>
-          </li>
-        {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-      {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-    </script>
-  {% endif %}
-  {{ block.super }}
-{% endblock %}
 {# vim: set foldmethod=marker: #}
diff --git a/course/templates/course/grade-flow-page.html b/course/templates/course/grade-flow-page.html
index ee2aea81a..d66d15ab3 100644
--- a/course/templates/course/grade-flow-page.html
+++ b/course/templates/course/grade-flow-page.html
@@ -111,12 +111,18 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
             {% if expects_answer %}
               <div class="dropdown" id="past-submission-and-grades_dropdown">
-                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="past-submission-and-grades_dropdown_button"
-                        data-bs-toggle="dropdown">
+                <button
+                    class="btn btn-sm btn-outline-secondary dropdown-toggle"
+                    type="button" id="past-submission-and-grades_dropdown_button"
+                    hx-get='{% url "relate-get_prev_grades_dropdown_content" course.identifier flow_session.id page_ordinal prev_grade_id %}'
+                    hx-target="#past-submission-and-grades_dropdown_content"
+                    data-bs-toggle="dropdown">
                   {% trans "Past submissions/grades" %}
                   <span class="caret"></span>
                 </button>
-                <ul class="dropdown-menu dropdown-menu shadow" aria-labelledby="past-submission-and-grades_dropdown_button" id="past-submission-and-grades_dropdown_content">
+                <ul class="dropdown-menu dropdown-menu shadow"
+                    aria-labelledby="past-submission-and-grades_dropdown_button"
+                    id="past-submission-and-grades_dropdown_content">
                   <li style="list-style:none; position:relative; left:50%;">
                     <i class="bi bi-hourglass"></i>
                   </li>
@@ -219,23 +225,13 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
   {# {{{ grade ui #}
 
-  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
-    <div id="grade-ui-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-      <div class="toast-header">
-        <strong class="me-auto text-danger">{% trans "Error" %}</strong>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-      </div>
-      <div id="grade-ui-toast-body" class="toast-body">
-      </div>
-    </div>
-  </div>
-
   <script>
 
     function getFeedbackCodemirror() {
-      return rlCodemirror.EditorView.findFromDOM(
-         document.querySelector('#div_id_feedback_text .cm-editor')
-      );
+      let editorDom = document.querySelector('#div_id_feedback_text .cm-editor');
+      if (!editorDom)
+        return null;
+      return rlCodemirror.EditorView.findFromDOM(editorDom);
     }
 
     function setFeedback(p) {
@@ -385,10 +381,7 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
       }
       catch (err)
       {
-        var error_toast = document.getElementById('grade-ui-toast');
-        document.getElementById("grade-ui-toast-body").innerHTML = err;
-        var toast = new bootstrap.Toast(error_toast);
-        toast.show();
+        bsUtils.showToast(err);
       }
     }
 
@@ -410,13 +403,17 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
       updateFeedbackItems();
 
-      rlCodemirror.setListener(
-        getFeedbackCodemirror(),
-        (viewUpdate) => {
-          if (viewUpdate.docChanged) {
-            processFeedbackChange(viewUpdate.view.state.doc.toString())
-          }
-        })
+      let fbcm = getFeedbackCodemirror();
+      if (fbcm)
+      {
+        rlCodemirror.setListener(
+          getFeedbackCodemirror(),
+          (viewUpdate) => {
+            if (viewUpdate.docChanged) {
+              processFeedbackChange(viewUpdate.view.state.doc.toString())
+            }
+          })
+      }
 
       document.addEventListener("keydown", listenForFocusHotkey);
     }
@@ -481,55 +478,4 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
 {% endblock %}
 
-{% block page_bottom_javascript_extra %}
-
-  {% if expects_answer %}
-    <script>
-
-      function generate_past_submission_and_grades_dropdown_content(){
-        var jqxhr = $.ajax({
-          url: "{% url "relate-get_prev_grades_dropdown_content" course.identifier flow_session.id page_ordinal %}"
-        }).done(function (result) {
-          if(result.result)
-          document.getElementById("past-submission-and-grades_dropdown_content").innerHTML = tmpl("tmpl-prev-grades", result.result);
-        });
-      }
-
-      $('#past-submission-and-grades_dropdown').on('shown.bs.dropdown', generate_past_submission_and_grades_dropdown_content);
-
-    </script>
-
-    {# https://github.com/blueimp/JavaScript-Templates #}
-    <script type="text/x-tmpl" id="tmpl-prev-grades">
-      {{ JQ_OPEN }} if (o.length==0) { {{ JQ_CLOSE }}
-        <li><h6 class="dropdown-header">{% trans 'No submission/grade history' %}</h6><li>
-      {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-        {{ JQ_OPEN }} for (var i=0; i<o.length; i++) { {{ JQ_CLOSE }}
-          <li>
-            {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?">
-            {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?grade_id={{ JQ_OPEN }}=o[i].id{{ JQ_CLOSE }}">
-            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_grade_id }}) { {{ JQ_CLOSE }}<b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {% trans "Submission:" %} {{ JQ_OPEN }}=o[i].visit_time{{ JQ_CLOSE }} &middot; {% trans "Grade:" %} {{ JQ_OPEN }}=o[i].grade_time{{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_grade_id }}) { {{ JQ_CLOSE }}</b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              {% trans "(current)" %}
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (!o[i].value) { {{ JQ_CLOSE }}
-                [{% trans "no grade" %}]
-              {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-                [{{ JQ_OPEN }}=o[i].value{{ JQ_CLOSE }}
-                {{ JQ_OPEN }} if (o[i].value <=1) { {{ JQ_CLOSE }}{% trans "point" %}{{ JQ_OPEN }} } else { {{ JQ_CLOSE }}{% trans "points" %}{{ JQ_OPEN }} } {{ JQ_CLOSE }}]
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-            </a>
-          </li>
-        {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-      {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-    </script>
-  {% endif %}
-  {{ block.super }}
-{% endblock %}
-
 {# vim: set foldmethod=marker: #}
diff --git a/course/templates/course/prev-grades-dropdown.html b/course/templates/course/prev-grades-dropdown.html
new file mode 100644
index 000000000..83c8a753b
--- /dev/null
+++ b/course/templates/course/prev-grades-dropdown.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+
+{% if not prev_grades %}
+  <li><h6 class="dropdown-header">{% trans 'No submission/grade history' %}</h6><li>
+{% else %}
+  {% for grade in prev_grades %}
+    <li>
+      {% if forloop.first %}
+        <a class="dropdown-item" href="?">
+      {% else %}
+        <a class="dropdown-item" href="?grade_id={{ grade.id }}">
+      {% endif %}
+        {% if grade.id == prev_grade_id %}<b>{% endif %}
+        {{ grade.visit.visit_time }}
+        &middot;
+        {% trans "Grade:" %} {{ grade.grade_time }}
+        {% if grade.id == prev_grade_id %}</b>{% endif %}
+        {% if grade.value == none %}
+          [{% trans "no grade" %}]
+        {% else %}
+          [{{ grade.value }} {% trans "points" %}]
+        {% endif %}
+        {% if forloop.first %}(current){% endif %}
+      </a>
+    </li>
+  {% endfor %}
+{% endif %}
diff --git a/package-lock.json b/package-lock.json
index 026b950e9..0f9869e85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "datatables.net-bs5": "^1.13.5",
         "datatables.net-fixedcolumns": "^4.3.0",
         "datatables.net-fixedcolumns-bs5": "^4.3.0",
+        "htmx.org": "^2",
         "jquery": "^3.5.1",
         "jstree": "^3.3.5",
         "mathjax": "^3.2.0",
@@ -3695,6 +3696,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "node_modules/htmx.org": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz",
+      "integrity": "sha512-wO/rWlveSLD2mzRS9Em0v5hlsi6r21iUvaS17GPMgehBbM7eoQmqGQCkscsM67poF24zONgq3gQv+q/cgCHn2w=="
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -11084,6 +11090,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "htmx.org": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz",
+      "integrity": "sha512-wO/rWlveSLD2mzRS9Em0v5hlsi6r21iUvaS17GPMgehBbM7eoQmqGQCkscsM67poF24zONgq3gQv+q/cgCHn2w=="
+    },
     "http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
diff --git a/package.json b/package.json
index ffd5a6a83..5d83ba80b 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,6 @@
     "@fullcalendar/list": "^5.10.1",
     "@fullcalendar/timegrid": "^5.10.1",
     "@popperjs/core": "^2.11.2",
-    "blueimp-tmpl": "^3.11.0",
     "bootstrap": "^5.3.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.29",
@@ -34,7 +33,8 @@
     "mathjax": "^3.2.0",
     "select2": "^4.0.5",
     "select2-bootstrap-theme": "^0.1.0-beta.10",
-    "video.js": "^7.14.3"
+    "video.js": "^7.14.3",
+    "htmx.org": "^2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.1.0",
diff --git a/relate/static/js/base-with-markup.js b/relate/static/js/base-with-markup.js
index 242573f13..0f39ac861 100644
--- a/relate/static/js/base-with-markup.js
+++ b/relate/static/js/base-with-markup.js
@@ -1,9 +1,4 @@
-// FIXME: blueimp-tmpl is deprecated. Only used in flow-page and grade-flow-page.
-import tmpl from 'blueimp-tmpl';
-
 import './base';
-import * as bootstrap from 'bootstrap';
-import * as rlUtils from './rlUtils';
 import 'jstree';
 import 'video.js';
 
@@ -15,5 +10,3 @@ window.MathJax = {
     displayMath: [['$$', '$$'], ['\\[', '\\]']],
   },
 };
-
-export { rlUtils, tmpl, bootstrap };
diff --git a/relate/static/js/base.js b/relate/static/js/base.js
index e69266ef1..73228a4aa 100644
--- a/relate/static/js/base.js
+++ b/relate/static/js/base.js
@@ -4,10 +4,25 @@ import * as bootstrap from 'bootstrap';
 
 import select2 from 'select2';
 import * as rlUtils from './rlUtils';
+import * as bsUtils from './bsUtils';
+
+import 'htmx.org';
 
 import '../css/base.scss';
 
 select2(jQuery);
 
-/* eslint-disable-next-line import/prefer-default-export */
-export { rlUtils, bootstrap };
+document.addEventListener('DOMContentLoaded', () => {
+  // document.body is not available until the DOM is loaded.
+  document.body.addEventListener('htmx:responseError', (evt) => {
+    bsUtils.showToast(
+      `HTMX request failed: ${evt.detail.xhr.status}:
+      ${evt.detail.xhr.statusText}
+      (${evt.detail.xhr.responseURL})`,
+    );
+  });
+});
+
+globalThis.rlUtils = rlUtils;
+globalThis.bsUtils = bsUtils;
+globalThis.bootstrap = bootstrap;
diff --git a/relate/static/js/bsUtils.js b/relate/static/js/bsUtils.js
new file mode 100644
index 000000000..d007830c5
--- /dev/null
+++ b/relate/static/js/bsUtils.js
@@ -0,0 +1,12 @@
+import * as bootstrap from 'bootstrap';
+
+/* eslint-disable-next-line import/prefer-default-export */
+export function showToast(msg, title) {
+  const errorToast = document.getElementById('relate-ui-toast');
+  document.getElementById('relate-ui-toast-body').innerHTML = msg;
+  if (title) {
+    document.getElementById('relate-ui-toast-title').innerHTML = title;
+  }
+  const toast = new bootstrap.Toast(errorToast);
+  toast.show();
+}
diff --git a/relate/static/js/codemirror.js b/relate/static/js/codemirror.js
index b246e524b..45bf70f24 100644
--- a/relate/static/js/codemirror.js
+++ b/relate/static/js/codemirror.js
@@ -134,6 +134,9 @@ export function setListener(view, fn) {
 }
 
 Vim.defineEx('write', 'w', () => {
+  // assume we're submitting the changes, reset the change flag
+  anyEditorChangedFlag = false;
+
   const textarea = document.querySelector('textarea.rl-managed-by-codemirror');
   if (textarea.form) {
     const { form } = textarea;
diff --git a/relate/static/js/datatables.js b/relate/static/js/datatables.js
index b4bce67ef..9c3427d82 100644
--- a/relate/static/js/datatables.js
+++ b/relate/static/js/datatables.js
@@ -12,8 +12,6 @@ import datatablesFixedColumns from 'datatables.net-fixedcolumns/js/dataTables.fi
 import 'datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.css';
 import 'datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5';
 
-import * as rlUtils from './rlUtils';
-
 datatables(window, jQuery);
 datatablesBs(window, jQuery);
 datatablesFixedColumns(window, jQuery);
@@ -36,7 +34,4 @@ jQuery.extend(jQuery.fn.dataTableExt.oSort, {
 
 // }}}
 
-/* eslint-disable-next-line import/prefer-default-export */
-export { rlUtils };
-
 // vim: foldmethod=marker
diff --git a/relate/templates/base.html b/relate/templates/base.html
index ce670cb2c..662119b1d 100644
--- a/relate/templates/base.html
+++ b/relate/templates/base.html
@@ -13,10 +13,6 @@
 
     {% block bundle_loads %}
       <script src="{% static 'bundle-base.js' %}"></script>
-      <script type="text/javascript">
-        const bootstrap = rlBase.bootstrap;
-        const rlUtils = rlBase.rlUtils;
-      </script>
     {% endblock %}
 
     {% block head_assets_form_media %}
@@ -175,5 +171,21 @@
       {% endif %}
 
     {% endblock %}
+
+    {# {{{ toast #}
+
+    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+      <div id="relate-ui-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <strong class="me-auto text-danger" id="relate-ui-toast-title">{% trans "Error" %}</strong>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div id="relate-ui-toast-body" class="toast-body">
+        </div>
+      </div>
+    </div>
+
+    {# }}} #}
+
   </body>
 </html>
diff --git a/relate/urls.py b/relate/urls.py
index 811a8597e..7e7c8052a 100644
--- a/relate/urls.py
+++ b/relate/urls.py
@@ -244,6 +244,7 @@
         "/flow-page"
         "/(?P<flow_session_id>[0-9]+)"
         "/(?P<page_ordinal>[0-9]+)"
+        "/(?P<prev_grade_id>[0-9]+|None)"
         "/$",
         course.grading.get_prev_grades_dropdown_content,
         name="relate-get_prev_grades_dropdown_content"),
@@ -400,6 +401,7 @@
         "/flow-page"
         "/(?P<flow_session_id>[0-9]+)"
         "/(?P<page_ordinal>[0-9]+)"
+        "/(?P<prev_visit_id>[0-9]+|None)"
         "/$",
         course.flow.get_prev_answer_visits_dropdown_content,
         name="relate-get_prev_answer_visits_dropdown_content"),
diff --git a/rollup.config.js b/rollup.config.js
index 9f0b446a1..fdc371ac4 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -38,7 +38,6 @@ export default [
       file: 'frontend-dist/bundle-base.js',
       format: 'iife',
       sourcemap: true,
-      name: 'rlBase',
     },
     plugins: defaultPlugins,
   },
@@ -48,7 +47,6 @@ export default [
       file: 'frontend-dist/bundle-base-with-markup.js',
       format: 'iife',
       sourcemap: true,
-      name: 'rlBase',
     },
     plugins: defaultPlugins,
   },
diff --git a/tests/base_test_mixins.py b/tests/base_test_mixins.py
index b2dec9865..e2c3668bd 100644
--- a/tests/base_test_mixins.py
+++ b/tests/base_test_mixins.py
@@ -1501,16 +1501,20 @@ def assertSessionScoreEqual(  # noqa
     @classmethod
     def get_page_submit_history_url_by_ordinal(
             cls, page_ordinal, course_identifier=None, flow_session_id=None):
-        return cls.get_page_view_url_by_ordinal(
+        page_params = cls.get_page_params(
+            course_identifier, flow_session_id, page_ordinal)
+        page_params["prev_visit_id"] = None
+        return reverse(
             "relate-get_prev_answer_visits_dropdown_content",
-            page_ordinal, course_identifier, flow_session_id)
+            kwargs=page_params)
 
     @classmethod
     def get_page_grade_history_url_by_ordinal(
             cls, page_ordinal, course_identifier=None, flow_session_id=None):
-        return cls.get_page_view_url_by_ordinal(
-            "relate-get_prev_grades_dropdown_content",
-            page_ordinal, course_identifier, flow_session_id)
+        page_params = cls.get_page_params(
+            course_identifier, flow_session_id, page_ordinal)
+        page_params["prev_grade_id"] = None
+        return reverse("relate-get_prev_grades_dropdown_content", kwargs=page_params)
 
     @classmethod_with_client
     def get_page_submit_history_by_ordinal(
@@ -1538,9 +1542,14 @@ def assertSubmitHistoryItemsCount(  # noqa
         resp = self.get_page_submit_history_by_ordinal(
             page_ordinal, course_identifier=course_identifier,
             flow_session_id=flow_session_id)
-        import json
-        result = json.loads(resp.content.decode())["result"]
-        self.assertEqual(len(result), expected_count)
+
+        content = resp.content.decode()
+        if "No submission" in content:
+            count = 0
+        else:
+            count = content.count("<li")
+
+        assert count == expected_count
 
     def assertGradeHistoryItemsCount(  # noqa
             self, page_ordinal, expected_count,
@@ -1561,9 +1570,13 @@ def assertGradeHistoryItemsCount(  # noqa
                 page_ordinal, course_identifier=course_identifier,
                 flow_session_id=flow_session_id)
 
-        import json
-        result = json.loads(resp.content.decode())["result"]
-        self.assertEqual(len(result), expected_count)
+        content = resp.content.decode()
+        if "No submission" in content:
+            count = 0
+        else:
+            count = content.count("<li")
+
+        assert count == expected_count
 
     @classmethod
     def get_update_course_url(cls, course_identifier=None):