diff --git a/website/web/static/capture.js b/website/web/static/capture.js
index 218ab5f1..e69d14c0 100644
--- a/website/web/static/capture.js
+++ b/website/web/static/capture.js
@@ -1,33 +1,192 @@
-$("#os").change(function(){
-  var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
-  var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
-  // Hide and disable everything
-  $("#os > option").removeAttr('selected');
-  $(".style-sub-1").hide();
-  $(".style-sub-1 > div > select").attr('disabled', true);
-  $(".style-sub-1 > div > select").removeAttr('selected');
-  $(".style-sub-2").hide();
-  $(".style-sub-2 > div > select").attr('disabled', true);
-  $(".style-sub-2 > div > select").removeAttr('selected');
+// scripts for chosing what should be captured
 
-  $("[id='" + os_name + "']").show();
-  $("[id='" + os_name + "'] > div > select").removeAttr('disabled');
-  $("[id='" + os_name + "'] > div > select option:first").prop('selected',true);
-  $("[id='" + os_name + '_' + first_browser_name + "']").show();
-  $("[id='" + os_name + '_' + first_browser_name + "'] > div > select").removeAttr('disabled');
-  $("[id='" + os_name + '_' + first_browser_name + "'] > div > select option:first").prop('selected',true);
+document.getElementById('nav-url-tab').addEventListener('click', function (e) {
+    // switch to tab for capture of URL(s)
+
+    // default: single capture field
+    document.getElementById("singleCaptureField").required = true;
+    document.getElementById("singleCaptureField").classList.remove("d-none");
+    // hide multiple captures field
+    document.getElementById('multipleCaptures').checked = false;
+    document.getElementById("multipleCapturesField").required = false;
+    document.getElementById("multipleCapturesField").classList.add("d-none");
+
+    document.getElementById("document").required = false;
 });
 
-$('select[name="browser"]').change(function(){
-  var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
-  var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
-
-  // Hide what makes sense
-  $(".style-sub-1 > div > select").removeAttr('selected');
-  $(".style-sub-2").hide();
-  $(".style-sub-2 > div > select").attr('disabled', true);
-  $(".style-sub-2 > div > select").removeAttr('selected');
-
-  $("[id='" + os_name + '_' + browser_name + "']").show();
-  $("[id='" + os_name + '_' + browser_name + "'] > div > select").removeAttr('disabled');
+document.getElementById('nav-doc-tab').addEventListener('click', function (e) {
+    // switch to tab for capture of document
+    document.getElementById("document").required = true;
+    document.getElementById("multipleCapturesField").required = false;
+    document.getElementById("singleCaptureField").required = false;
 });
+
+document.getElementById('multipleCaptures').addEventListener('click', function (e) {
+    // switch input-fields between multiple and single capture
+    if (document.getElementById('multipleCaptures').checked === true) {
+        // enable multiple captures
+        document.getElementById('singleCaptureField').value = '';
+        document.getElementById("singleCaptureField").classList.add("d-none");
+        document.getElementById("singleCaptureField").required = false;
+        document.getElementById("multipleCapturesField").classList.remove("d-none");
+        document.getElementById("multipleCapturesField").required = true;
+    } else {
+        // disable multiple captures
+        document.getElementById('multipleCapturesField').value = '';
+        document.getElementById("multipleCapturesField").classList.add("d-none");
+        document.getElementById("multipleCapturesField").required = false;
+        document.getElementById("singleCaptureField").classList.remove("d-none");
+        document.getElementById("singleCaptureField").required = true;
+    }
+});
+
+
+// scripts for browser configuration of the capture
+
+document.getElementById("os").addEventListener("change", function () {
+    let osSelect = document.getElementById("os");
+    let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
+    let first_browser_name = document.querySelector("[id='" + os_name + "'] select option:first-child").value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
+
+    // Hide and disable everything
+    document.querySelectorAll("#os option").forEach(function (option) {
+        option.removeAttribute('selected');
+    });
+    document.querySelectorAll(".style-sub-1").forEach(function (element) {
+        element.style.display = 'none';
+    });
+    document.querySelectorAll(".style-sub-1 > div > select").forEach(function (select) {
+        select.disabled = true;
+        select.querySelectorAll('option').forEach(function (option) {
+            option.removeAttribute('selected');
+        });
+    });
+    document.querySelectorAll(".style-sub-2").forEach(function (element) {
+        element.style.display = 'none';
+    });
+    document.querySelectorAll(".style-sub-2 > div > select").forEach(function (select) {
+        select.disabled = true;
+        select.querySelectorAll('option').forEach(function (option) {
+            option.removeAttribute('selected');
+        });
+    });
+
+    // Re-enable and show what makes sense
+    document.querySelector("[id='" + os_name + "']").style.display = 'block';
+    document.querySelectorAll("[id='" + os_name + "'] > div > select").forEach(function (select) {
+        select.disabled = false;
+        select.querySelector('option:first-child').selected = true;
+    });
+    document.querySelector("[id='" + os_name + '_' + first_browser_name + "']").style.display = 'block';
+    document.querySelectorAll("[id='" + os_name + '_' + first_browser_name + "'] > div > select").forEach(function (select) {
+        select.disabled = false;
+        select.querySelector('option:first-child').selected = true;
+    });
+});
+
+document.querySelector('select[name="browser"]').addEventListener('click', function (e) {
+    let browser_name = document.querySelector('select[name="browser"]').options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
+    let os_name = document.querySelector('select[name="browser"]').parentNode.parentNode.getAttribute("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g, "_");
+
+    // Hide what makes sense
+    document.querySelectorAll(".style-sub-1 > div > select").forEach(function (select) {
+        select.querySelectorAll('option').forEach(function (option) {
+            option.removeAttribute('selected');
+        });
+    });
+    document.querySelectorAll(".style-sub-2").forEach(function (element) {
+        element.style.display = 'none';
+    });
+    document.querySelectorAll(".style-sub-2 > div > select").forEach(function (select) {
+        select.disabled = true;
+        select.querySelectorAll('option').forEach(function (option) {
+            option.removeAttribute('selected');
+        });
+    });
+    document.querySelector("[id='" + os_name + '_' + browser_name + "']").style.display = 'block';
+    document.querySelectorAll("[id='" + os_name + '_' + browser_name + "'] > div > select").forEach(function (select) {
+        select.disabled = false;
+        select.querySelector('option:first-child').selected = true;
+    });
+});
+
+
+document.getElementById('personal_ua_select').addEventListener('click', function (e) {
+    //disable select fields when personal useragent (ua) selected etc...
+    document.getElementById('personal_ua').disabled = false;
+    document.getElementById('freetext_ua').disabled = true;
+    disablePredefinedUA();
+});
+
+
+document.getElementById('predefined_ua_select').addEventListener('click', function (e) {
+    document.getElementById('os-type').value = 'desktop';
+    document.getElementById('os-type').dispatchEvent(new Event('change'));
+    document.getElementById('freetext_ua').disabled = true;
+    document.getElementById('personal_ua').disabled = true;
+    // Enable predefinded user-agent
+    let os_type = document.getElementById('os-type');
+    os_type.value = 'desktop';
+    os_type.dispatchEvent(new Event('change'))
+});
+
+document.getElementById('freetext_ua_select').addEventListener('click', function (e) {
+    // Enable freetext user-agent
+    document.getElementById('freetext_ua').disabled = false;
+    document.getElementById('personal_ua').disabled = true;
+    disablePredefinedUA()
+})
+
+const disablePredefinedUA = function () {
+    document.getElementById('os-type').disabled = true;
+    document.getElementById('device-name-mobile').disabled = true;
+    document.getElementById('os').disabled = true;
+    document.querySelectorAll('select[name="browser"]').forEach(function (element) {
+        element.disabled = true;
+    });
+    document.querySelectorAll('select[name="user_agent"]').forEach(function (element) {
+        element.disabled = true;
+    });
+
+};
+
+document.getElementById('os-type').addEventListener('change', function () {
+    document.getElementById('os-type').disabled = false;
+    if (this.value === "mobile") {
+        document.getElementById("mobiles-list").style.display = 'block';
+        document.getElementById('device-name-mobile').disabled = false;
+
+        document.getElementById("desktops-list").style.display = 'none';
+        document.getElementById('os').disabled = true;
+        document.querySelectorAll('select[name="browser"]').forEach(function (element) {
+            element.disabled = true;
+        });
+        document.querySelectorAll('select[name="user_agent"]').forEach(function (element) {
+            element.disabled = true;
+        });
+    } else { // os-type is desktop
+        document.getElementById("desktops-list").style.display = 'block';
+        document.getElementById('os').disabled = false;
+        document.querySelectorAll('select[name="browser"]:not([hidden])').forEach(function (element) {
+            element.disabled = false;
+        });
+        document.querySelectorAll('select[name="user_agent"]:not([hidden])').forEach(function (element) {
+            element.disabled = false;
+        });
+        document.getElementById("mobiles-list").style.display = 'none';
+        document.getElementById('device-name-mobile').disabled = true;
+    }
+});
+
+// admin-only report-form
+const displayReportForm = function() {
+    let show_form = document.getElementById("auto-report").checked;
+    if(show_form) {
+    document.getElementById("collapseMailConfiguration").style.display = "block";
+    } else {
+        document.getElementById("collapseMailConfiguration").style.display = "none";
+    }
+}
+displayReportForm()
+document.getElementById("auto-report").addEventListener('change', displayReportForm);
+
diff --git a/website/web/templates/capture.html b/website/web/templates/capture.html
index 31786edd..7ea6e6b8 100644
--- a/website/web/templates/capture.html
+++ b/website/web/templates/capture.html
@@ -22,12 +22,12 @@
 
 {% block content %}
 <div class="container">
-  <center>
+
     <a href="{{ url_for('index') }}" title="Go back to index">
       <img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
            alt="Lookyloo" width="25%">
     </a>
-  </center>
+
   {{ render_messages(container=True, dismissible=True) }}
   <form role="form" action="{{ url_for('capture_web') }}" method=post enctype=multipart/form-data>
     <div class="row mb-3">
@@ -81,7 +81,6 @@
     <hr>
     <!-- End of Submission type -->
 
-
     <div>
       <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigBrowser"
               aria-expanded="false" aria-controls="collapseConfigBrowser">
@@ -389,7 +388,6 @@
         </div>
     {%  endif %}
 
-    <center>
       <b>
       {% if default_public %}
         By default, the capture is public. If you do not want that, untick the box at the top of the form.
@@ -400,7 +398,7 @@
       </br>
       </br>
       <button type="submit" class="new-capture-button btn btn-primary" id="btn-looking">Start looking!</button>
-    </center>
+
   </form>
 </div>
 {% endblock %}
@@ -410,104 +408,5 @@
   <script src='{{ url_for('static', filename='capture.js') }}'
           {{get_sri('static', 'capture.js')}}
           crossorigin="anonymous"></script>
-    <script>
-        const displayReportForm = function() {
-            let show_form = document.getElementById("auto-report").checked;
-            if(show_form){
-                document.getElementById("collapseMailConfiguration").style.display = "block";
-            } else {
-                document.getElementById("collapseMailConfiguration").style.display = "none";
-            }
-        }
-        displayReportForm()
-        document.getElementById("auto-report").addEventListener('change', displayReportForm);
-    </script>
-  <script>
-  $('#nav-url-tab').on('click', function(e) {
-    document.getElementById("singleCaptureField").required = true;
-    document.getElementById("document").required = false;
-    $("#singleCaptureField").removeClass("d-none");
-    document.getElementById('multipleCaptures').checked = false;
-    $("#multipleCapturesField").addClass("d-none");
-  });
-  $('#nav-doc-tab').on('click', function(e) {
-    document.getElementById("document").required = true;
-    document.getElementById("multipleCapturesField").required = false;
-    document.getElementById("singleCaptureField").required = false;
-  });
-  </script>
-  <script>
-      $('#multipleCaptures').on('click', function(e) {
-        if (document.getElementById('multipleCaptures').checked == true) {
-            document.getElementById('singleCaptureField').value = '';
-            $("#singleCaptureField").addClass("d-none");
-            document.getElementById("singleCaptureField").required = false;
-            $("#multipleCapturesField").removeClass("d-none");
-            document.getElementById("multipleCapturesField").required = true;
-        }
-        else {
-            document.getElementById('multipleCapturesField').value = '';
-            $("#singleCaptureField").removeClass("d-none");
-            document.getElementById("singleCaptureField").required = true;
-            $("#multipleCapturesField").addClass("d-none");
-            document.getElementById("multipleCapturesField").required = false;
-        }
-      })
-  </script>
-  <script>
-      $('#personal_ua_select').on('click', function(e) {
-        $('#personal_ua').prop("disabled", false);
-
-        $('#freetext_ua').prop("disabled", true);
-        disablePredefinedUA();
-      });
-
-      $('#predefined_ua_select').on('click', function(e) {
-        $('#os-type').val('desktop').trigger('change');
-
-        $('#freetext_ua').prop("disabled", true);
-        $('#personal_ua').prop("disabled", true);
-      });
-
-      $('#freetext_ua_select').on('click', function(e) {
-        $('#freetext_ua').prop("disabled", false);
-
-        $('#personal_ua').prop("disabled", true);
-        disablePredefinedUA();
-      });
-
-      const disablePredefinedUA = function() {
-        $('#os-type').prop("disabled", true);
-        $('#device-name-mobile').prop("disabled", true);
-        $('#os').prop("disabled", true);
-        $('select[name="browser"]').prop("disabled", true);
-        $('select[name="user_agent"]').prop("disabled", true);
-      };
-
-      $('#os-type').on('change', function() {
-          $('#os-type').prop("disabled", false);
-          if ( this.value == "mobile")
-          {
-            $("#mobiles-list").show();
-            $('#device-name-mobile').prop("disabled", false);
-
-            $("#desktops-list").hide();
-            $('#os').prop("disabled", true);
-            $('select[name="browser"]').prop("disabled", true);
-            $('select[name="user_agent"]').prop("disabled", true);
-          }
-          else
-          {
-            $("#desktops-list").show();
-            $('#os').prop("disabled", false);
-            $('select[name="browser"]:visible').prop("disabled", false);
-            $('select[name="user_agent"]:visible').prop("disabled", false);
-
-            $("#mobiles-list").hide();
-            $('#device-name-mobile').prop("disabled", true);
-          }
-        });
-  </script>
-
 
 {% endblock %}