diff --git a/html/.eslintrc.json b/html/.eslintrc.json
index 50168101e..929849031 100644
--- a/html/.eslintrc.json
+++ b/html/.eslintrc.json
@@ -1,8 +1,7 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
-    "jquery": true
+    "es2018": true
   },
   "globals": {
     "AppKernel": false,
diff --git a/html/gui/js/modules/efficiency/Efficiency.js b/html/gui/js/modules/efficiency/Efficiency.js
index bae579d40..146135413 100644
--- a/html/gui/js/modules/efficiency/Efficiency.js
+++ b/html/gui/js/modules/efficiency/Efficiency.js
@@ -379,7 +379,7 @@ XDMoD.Module.Efficiency = Ext.extend(XDMoD.PortalModule, {
                                 }
 
                                 dimensionObj[dimension] = filterValues;
-                                jQuery.extend(filterObj, dimensionObj);
+                                filterObj = { ...filterObj, ...dimensionObj };
                             }
                         }
                     }
diff --git a/html/gui/js/modules/efficiency/FilterPanel.js b/html/gui/js/modules/efficiency/FilterPanel.js
index acd0bd2ff..42be64c27 100644
--- a/html/gui/js/modules/efficiency/FilterPanel.js
+++ b/html/gui/js/modules/efficiency/FilterPanel.js
@@ -76,12 +76,12 @@ XDMoD.Module.Efficiency.FilterPanel = Ext.extend(Ext.Panel, {
                                 // Add filters for each dimension to the filterObj to be applied to the scatter plot
                                 var dimensionObj = {};
                                 dimensionObj[dimension] = filterValues;
-                                jQuery.extend(filterObj, dimensionObj);
+                                filterObj = { ...filterObj, ...dimensionObj };
 
                                 // Add filters for each dimension to the aggFilters object for keeping track of filtering on breadcrumb navigation
                                 var aggDimensionObj = {};
                                 aggDimensionObj[dimension] = checkedFilters;
-                                jQuery.extend(aggFilters, aggDimensionObj);
+                                aggFilters = { ...aggFilters, ...aggDimensionObj };
 
                                 subtitle += `${dimensionList[i]}: ${filterSubtitle}; `;
                             }
diff --git a/html/internal_dashboard/supremm/css/style.css b/html/internal_dashboard/supremm/css/style.css
index 4dd6b187f..73d3335e8 100644
--- a/html/internal_dashboard/supremm/css/style.css
+++ b/html/internal_dashboard/supremm/css/style.css
@@ -143,7 +143,7 @@ td.zeroer
 }
 
 #flowchart li {
-     list-style-type: none;
+    list-style-type: none;
 }
 
 .intpart {
@@ -164,9 +164,9 @@ td.zeroer
 }
 
 span.centered {
-  text-align: center;
+    text-align: center;
 	vertical-align: middle;
-  display: table-cell;
+    display: table-cell;
 }
 .filekey {
     border: thin solid black;
@@ -180,3 +180,9 @@ span.centered {
     border: thin solid black;
     background-color: #deb0c4;
 }
+.show {
+    transition: opacity 500ms ease-in;
+}
+.hide {
+    opacity: 0;
+}
diff --git a/html/internal_dashboard/supremm/js/stats.js b/html/internal_dashboard/supremm/js/stats.js
index 7282e567c..880f6e2d8 100644
--- a/html/internal_dashboard/supremm/js/stats.js
+++ b/html/internal_dashboard/supremm/js/stats.js
@@ -4,40 +4,45 @@ Ext.ns('XDMoD', 'XDMoD.SupremmDataFlow');
 XDMoD.SupremmDataFlow = {
     resource_map: {},
     loadData: function (selector, endPoint, resourceId) {
-        $(selector).html('<img src="/gui/images/loading.gif"></img>Loading');
-
-        $.getJSON(XDMoD.REST.url + '/supremm_dataflow/dbstats',
-            {
-                token: XDMoD.REST.token,
-                resource_id: resourceId,
-                db_id: endPoint
-            },
-            function (data) {
-                var html = '<ul>';
-                var d = data.data.data;
-                for (var k in d) {
-                    if (d.hasOwnProperty(k)) {
-                        html += '<li>' + k + ': ' + d[k] + '</li>';
-                    }
-                }
-                html += '</ul>';
-                $(selector).html(html);
+        const el = document.querySelector(selector);
+        el.innerHTML = '<img src="/gui/images/loading.gif"></img>Loading';
+
+        fetch(`${XDMoD.REST.url}/supremm_dataflow/dbstats?token=${XDMoD.REST.token}&resource_id=${resourceId}&db_id=${endPoint}`)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(`[<b>Error<b> ${response.status}]: ${response.statusText}`);
+            } else {
+                return response.json();
             }
-        ).fail(function (jqXHR, textStatus, errorThrown) {
-            var html = '<b>Error<b>';
-            if (jqXHR.responseJSON) {
-                if (jqXHR.responseJSON.message) {
-                    html += '<br />' + jqXHR.responseJSON.message;
+        })
+        .then((data) => {
+            let html = '<ul>';
+            const d = data.data.data;
+            for (const k in d) {
+                if (d.hasOwnProperty(k)) {
+                    html += '<li>' + k + ': ' + d[k] + '</li>';
                 }
-            } else {
-                html += textStatus + ' ' + errorThrown;
             }
-            $(selector).html(html);
+            html += '</ul>';
+            el.innerHTML = html;
+            el.display = 'none';
+        })
+        .catch((errorText) => {
+            document.getElementById('loading').style.display = '';
+            document.getElementById('loading').innerHTML = errorText;
         });
     },
     loadAllStats: function (resourceId) {
-        $('#pagetitle').text('Data flow information for ' + XDMoD.SupremmDataFlow.resource_map[resourceId]);
-        $('#flowchart').show(500);
+        document.getElementById('pagetitle').textContent = 'Data flow information for ' + XDMoD.SupremmDataFlow.resource_map[resourceId];
+        const flowchart = document.getElementById('flowchart');
+        // Need timeout for when going from 'none' display to '' for transition to work.
+        setTimeout(() => {
+            flowchart.style.display = '';
+        }, 50);
+        flowchart.classList.add('hide');
+        setTimeout(() => {
+            flowchart.classList.replace('hide', 'show');
+        }, 100);
 
         XDMoD.SupremmDataFlow.loadData('#local_mirror_content', 'nodearchives', resourceId);
         XDMoD.SupremmDataFlow.loadData('#accountfact_content', 'accountfact', resourceId);
@@ -115,18 +120,26 @@ jsPlumb.ready(function () {
     }, common);
 });
 
-$(document).ready(function () {
-    $('#resourceform').hide();
-    $('#flowchart').hide();
-    $('#resourceform').submit(function (evt) {
+document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('resourceform').style.display = 'none';
+    document.getElementById('flowchart').style.display = 'none';
+
+    document.getElementById('resourceform').addEventListener('submit', (evt) => {
         evt.preventDefault();
-        $('#flowchart').hide();
-        XDMoD.SupremmDataFlow.loadAllStats($('#resourceselect').val());
+        document.getElementById('flowchart').style.display = 'none';
+        XDMoD.SupremmDataFlow.loadAllStats(document.querySelector('#resourceselect').value);
     });
 
-    $.getJSON(XDMoD.REST.url + '/supremm_dataflow/resources', { token: XDMoD.REST.token }, function (data) {
-        var select = document.getElementById('resourceselect');
-
+    fetch(`${XDMoD.REST.url}/supremm_dataflow/resources?token=${XDMoD.REST.token}`)
+    .then((response) => {
+        if (!response.ok) {
+            throw new Error(`[<b>Error<b> ${response.status}]: ${response.statusText}`);
+        } else {
+            return response.json();
+        }
+    })
+    .then((data) => {
+        const select = document.getElementById('resourceselect');
         for (var i = 0; i < data.data.length; i++) {
             var element = data.data[i];
             var tmp = document.createElement('option');
@@ -135,18 +148,17 @@ $(document).ready(function () {
             select.appendChild(tmp);
             XDMoD.SupremmDataFlow.resource_map[element.id] = element.name;
         }
-        $('#loading').hide();
-        $('#resourceform').show(500);
-        $('#resourceform').submit();
-    }).fail(function (jqXHR, textStatus, errorThrown) {
-        var html = '<b>Error</b><br />';
-        if (jqXHR.responseJSON) {
-            if (jqXHR.responseJSON.message) {
-                html += jqXHR.responseJSON.message;
-            }
-        } else {
-            html += textStatus + ' ' + errorThrown;
-        }
-        $('#loading').html(html);
+        document.querySelector('#loading').style.display = 'none';
+        const form = document.getElementById('resourceform');
+        form.style.display = '';
+        form.classList.add('hide');
+        setTimeout(() => {
+            form.classList.replace('hide', 'show');
+        }, 100);
+        XDMoD.SupremmDataFlow.loadAllStats(select.value);
+    })
+    .catch((errorText) => {
+        document.getElementById('loading').style.display = '';
+        document.getElementById('loading').innerHTML = errorText;
     });
 });
diff --git a/html/internal_dashboard/supremm/stats.php b/html/internal_dashboard/supremm/stats.php
index 1409fc2b1..57fb33a57 100644
--- a/html/internal_dashboard/supremm/stats.php
+++ b/html/internal_dashboard/supremm/stats.php
@@ -7,13 +7,9 @@
     <head>
         <meta charset="utf-8">
         <title>Job timeseries demo</title>
-        <script type="text/javascript" src="/gui/lib/jquery/jquery-1.12.4.min.js"></script>
         <script type="text/javascript" src="/gui/lib/node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js"></script>
-
-        <!-- Ext and Jquery adapter -->
-        <script type="text/javascript" src="/gui/lib/extjs/adapter/jquery/ext-jquery-adapter.js"></script>
+        <script type="text/javascript" src="/gui/lib/extjs/adapter/ext/ext-base.js"></script>
         <script type="text/javascript" src="/gui/lib/extjs/ext-all-debug.js"></script>
-
         <script type="text/javascript">
             <?php \xd_rest\printJavascriptVariables(); ?>
         </script>