diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index e607ea96c..c939d0363 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -202,6 +202,10 @@ body {
     list-style-type: none;
 }
 
+.multiple-checkbox > div {
+    padding-left: 40px;
+}
+
 .navbar .fa:not(.fa-bars) {
     margin-right: 0.25rem;
 }
diff --git a/static/themes/default/js/main.js b/static/themes/default/js/main.js
index 65c723f56..412ad493a 100644
--- a/static/themes/default/js/main.js
+++ b/static/themes/default/js/main.js
@@ -126,9 +126,14 @@ window.addEventListener('pageshow', function(event) {
  * Select all option for multiple checkboxes.
  */
 document.addEventListener('DOMContentLoaded', function(event) {
-    let parents = document.querySelectorAll('ul.has-select-all');
+    // Django < 4.0 generates <ul> and <li> where as Django >= 4.0 generates <div>s
+    let parents = document.querySelectorAll('ul.has-select-all,div.has-select-all');
     for (const parent of parents) {
-        let li = document.createElement('li');
+        let childElementType = 'div';
+        if (parent.tagName.toLowerCase() == 'ul')
+            childElementType = 'li';
+
+        let selectAllItem = document.createElement(childElementType);
 
         let label = document.createElement('label');
         label.for = "select_all";
@@ -139,9 +144,9 @@ document.addEventListener('DOMContentLoaded', function(event) {
         checkbox.setAttribute('class', 'select-all');
 
         label.appendChild(checkbox);
-        li.appendChild(label);
+        selectAllItem.appendChild(label);
 
-        parent.insertBefore(li, parent.childNodes[0]);
+        parent.insertBefore(selectAllItem, parent.childNodes[0]);
         setSelectAllValue(parent);
 
         checkbox.addEventListener('change', onSelectAllChanged);