diff --git a/cypress/integration/origin-search.spec.js b/cypress/integration/origin-search.spec.js
--- a/cypress/integration/origin-search.spec.js
+++ b/cypress/integration/origin-search.spec.js
@@ -77,11 +77,11 @@
     // Check all three checkboxes and check if
     // correct url params are added
     cy.get('#swh-search-origins-with-visit')
-      .check()
+      .check({force: true})
       .get('#swh-filter-empty-visits')
-      .check()
+      .check({force: true})
       .get('#swh-search-origin-metadata')
-      .check()
+      .check({force: true})
       .then(() => {
         const searchText = origin.url;
         doSearch(searchText);
@@ -128,9 +128,9 @@
     it('should not paginate if there are not many results', function() {
       // Setup search
       cy.get('#swh-search-origins-with-visit')
-        .uncheck()
+        .uncheck({force: true})
         .get('#swh-filter-empty-visits')
-        .uncheck()
+        .uncheck({force: true})
         .then(() => {
           const searchText = 'libtess';
 
@@ -154,9 +154,9 @@
       stubOriginVisitLatestRequests();
       // Setup search
       cy.get('#swh-search-origins-with-visit')
-        .uncheck()
+        .uncheck({force: true})
         .get('#swh-filter-empty-visits')
-        .uncheck()
+        .uncheck({force: true})
         .then(() => {
           const searchText = 'many.origins';
 
@@ -219,9 +219,9 @@
       stubOriginVisitLatestRequests();
       // Setup search
       cy.get('#swh-search-origins-with-visit')
-        .uncheck()
+        .uncheck({force: true})
         .get('#swh-filter-empty-visits')
-        .uncheck()
+        .uncheck({force: true})
         .then(() => {
           const searchText = 'many.origins';
 
@@ -268,9 +268,9 @@
       stubOriginVisitLatestRequests();
       // Setup search
       cy.get('#swh-search-origins-with-visit')
-        .uncheck()
+        .uncheck({force: true})
         .get('#swh-filter-empty-visits')
-        .uncheck()
+        .uncheck({force: true})
         .then(() => {
           const searchText = 'many.origins';
 
diff --git a/cypress/integration/persistent-identifiers.spec.js b/cypress/integration/persistent-identifiers.spec.js
--- a/cypress/integration/persistent-identifiers.spec.js
+++ b/cypress/integration/persistent-identifiers.spec.js
@@ -137,14 +137,14 @@
         .contains(td.objectPids[0])
         .should('have.attr', 'href', this.Urls.browse_swh_id(td.objectPids[0]));
 
-      cy.get(`#swh-id-tab-${td.objectType} .swh-id-context-option`)
+      cy.get(`#swh-id-tab-${td.objectType} .swh-id-option`)
         .click();
 
       cy.get(`#swh-id-tab-${td.objectType} .swh-id`)
         .contains(td.objectPids[1])
         .should('have.attr', 'href', this.Urls.browse_swh_id(td.objectPids[1]));
 
-      cy.get(`#swh-id-tab-${td.objectType} .swh-id-context-option`)
+      cy.get(`#swh-id-tab-${td.objectType} .swh-id-option`)
         .click();
 
       cy.get(`#swh-id-tab-${td.objectType} .swh-id`)
diff --git a/cypress/integration/vault.spec.js b/cypress/integration/vault.spec.js
--- a/cypress/integration/vault.spec.js
+++ b/cypress/integration/vault.spec.js
@@ -325,7 +325,7 @@
 
     cy.get(`#vault-task-${this.revision}`)
       .find('input[type="checkbox"]')
-      .click();
+      .click({force: true});
     cy.contains('button', 'Remove selected tasks')
       .click();
 
diff --git a/swh/web/assets/config/bootstrap-pre-customize.scss b/swh/web/assets/config/bootstrap-pre-customize.scss
--- a/swh/web/assets/config/bootstrap-pre-customize.scss
+++ b/swh/web/assets/config/bootstrap-pre-customize.scss
@@ -8,6 +8,7 @@
 // override some global bootstrap sass variables before generating stylesheets
 
 // global text colors and fonts
+$primary: #e20026;
 $body-color: rgba(0, 0, 0, 0.55);
 $font-family-sans-serif: "Alegreya Sans", sans-serif !important;
 $link-color: rgba(0, 0, 0, 0.75);
diff --git a/swh/web/assets/src/bundles/vault/vault-ui.js b/swh/web/assets/src/bundles/vault/vault-ui.js
--- a/swh/web/assets/src/bundles/vault/vault-ui.js
+++ b/swh/web/assets/src/bundles/vault/vault-ui.js
@@ -175,8 +175,10 @@
             tableRow = `<tr id="vault-task-${cookingTask.object_id}"  title="Once downloaded, the git repository can be imported with the ` +
                        `following commands:\n\n$ git init\n$ zcat ${cookingTask.object_id}.gitfast.gz | git fast-import">`;
           }
-          tableRow += '<td><input type="checkbox" class="vault-task-toggle-selection"/></td>';
-          tableRow += `<td style="width: 120px"><i class="${swh.webapp.getSwhObjectIcon(cookingTask.object_type)} mdi-fw" aria-hidden="true"></i>${cookingTask.object_type}</td>`;
+          tableRow += '<td><div class="custom-control custom-checkbox">';
+          tableRow += `<input type="checkbox" class="custom-control-input vault-task-toggle-selection" id="vault-task-toggle-selection-${cookingTask.object_id}"/>`;
+          tableRow += `<label class="custom-control-label" for="vault-task-toggle-selection-${cookingTask.object_id}"></label></td>`;
+          tableRow += `<td style="width: 120px"><i class="${swh.webapp.getSwhObjectIcon(cookingTask.object_type)} mdi-fw"></i>${cookingTask.object_type}</td>`;
           tableRow += `<td class="vault-object-id" data-object-id="${cookingTask.object_id}"><a href="${browseUrl}">${cookingTask.object_id}</a></td>`;
           tableRow += `<td style="width: 350px">${progressBar.outerHTML}</td>`;
           let downloadLink = downloadLinkWait;
diff --git a/swh/web/templates/browse/browse.html b/swh/web/templates/browse/browse.html
--- a/swh/web/templates/browse/browse.html
+++ b/swh/web/templates/browse/browse.html
@@ -12,6 +12,7 @@
 {% block title %}{{ heading }} &ndash; Software Heritage archive{% endblock %}
 
 {% block navbar-content %}
+
 {% if snapshot_context %}
   <h4>
     <i class="{{ swh_object_icons|key_value:swh_object_name.lower }} mdi-fw" aria-hidden="true"></i>
@@ -42,6 +43,7 @@
     </a>
   </h4>
 {% endif %}
+
 {% endblock %}
 
 {% block browse-content %}
diff --git a/swh/web/templates/browse/origin-visits.html b/swh/web/templates/browse/origin-visits.html
--- a/swh/web/templates/browse/origin-visits.html
+++ b/swh/web/templates/browse/origin-visits.html
@@ -41,23 +41,26 @@
 
 <h4>History</h4>
 
-<div class="text-center">
-  <div class="form-check-inline">
-    <label class="form-check-label active" onclick="swh.origin.showFullVisitsDifferentSnapshots(event)">
-      <input type="radio" class="form-check-input" name="optradio" checked>Show full visits with different snapshots
+<form class="text-center">
+  <div class="custom-control custom-radio custom-control-inline">
+    <input class="custom-control-input" type="radio" id="swh-different-snapshot-visits" name="swh-visits" value="option1" checked>
+    <label class="custom-control-label font-weight-normal" for="swh-different-snapshot-visits" onclick="swh.origin.showFullVisitsDifferentSnapshots(event)">
+      Show full visits with different snapshots
     </label>
   </div>
-  <div class="form-check-inline">
-    <label class="form-check-label" onclick="swh.origin.showFullVisits(event)">
-      <input type="radio" class="form-check-input" name="optradio">Show all full visits
+  <div class="custom-control custom-radio custom-control-inline">
+    <input class="custom-control-input" type="radio" id="swh-full-visits" name="swh-visits" value="option2">
+    <label class="custom-control-label font-weight-normal" for="swh-full-visits" onclick="swh.origin.showFullVisits(event)">
+      Show all full visits
     </label>
   </div>
-  <div class="form-check-inline disabled">
-    <label class="form-check-label" onclick="swh.origin.showAllVisits(event)">
-      <input type="radio" class="form-check-input" name="optradio">Show all visits
+  <div class="custom-control custom-radio custom-control-inline">
+    <input class="custom-control-input" type="radio" id="swh-all-visits" name="swh-visits" value="option3">
+    <label class="custom-control-label font-weight-normal" for="swh-all-visits" onclick="swh.origin.showAllVisits(event)">
+      Show all visits
     </label>
   </div>
-</div>
+</form>
 
 <h5>Calendar</h5>
 
diff --git a/swh/web/templates/browse/revision-log.html b/swh/web/templates/browse/revision-log.html
--- a/swh/web/templates/browse/revision-log.html
+++ b/swh/web/templates/browse/revision-log.html
@@ -26,29 +26,29 @@
 
   <hr class="mt-0 mb-0">
 
-  <div class="text-center">
+  <form class="text-center">
     sort by:
-    <div class="form-check form-check-inline" title="reverse chronological order">
-      <input class="form-check-input" type="radio" name="revs-ordering" id="revs-ordering-date"
+    <div class="custom-control custom-radio custom-control-inline" title="reverse chronological order">
+      <input class="custom-control-input" type="radio" name="revs-ordering" id="revs-ordering-date"
             value="" onclick="swh.revision.revsOrderingTypeClicked(event)" checked>
-      <label class="form-check-label active" for="revs-ordering-date">revision date</label>
+      <label class="custom-control-label font-weight-normal" for="revs-ordering-date">revision date</label>
     </div>
-    <div class="form-check form-check-inline" title="pre-order, depth-first visit on the revision graph">
-      <input class="form-check-input" type="radio" name="revs-ordering" id="revs-ordering-dfs"
+    <div class="custom-control custom-radio custom-control-inline" title="pre-order, depth-first visit on the revision graph">
+      <input class="custom-control-input" type="radio" name="revs-ordering" id="revs-ordering-dfs"
             value="dfs" onclick="swh.revision.revsOrderingTypeClicked(event)">
-      <label class="form-check-label" for="revs-ordering-dfs">DFS</label>
+      <label class="custom-control-label font-weight-normal" for="revs-ordering-dfs">DFS</label>
     </div>
-    <div class="form-check form-check-inline" title="post-order, depth-first visit on the revision graph">
-      <input class="form-check-input" type="radio" name="revs-ordering" id="revs-ordering-dfs-post"
+    <div class="custom-control custom-radio custom-control-inline" title="post-order, depth-first visit on the revision graph">
+      <input class="custom-control-input" type="radio" name="revs-ordering" id="revs-ordering-dfs-post"
             value="dfs_post" onclick="swh.revision.revsOrderingTypeClicked(event)">
-      <label class="form-check-label" for="revs-ordering-dfs-post">DFS post-ordering</label>
+      <label class="custom-control-label font-weight-normal" for="revs-ordering-dfs-post">DFS post-ordering</label>
     </div>
-    <div class="form-check form-check-inline" title="breadth-first visit on the revision graph">
-      <input class="form-check-input" type="radio" name="revs-ordering" id="revs-ordering-bfs"
+    <div class="custom-control custom-radio custom-control-inline" title="breadth-first visit on the revision graph">
+      <input class="custom-control-input" type="radio" name="revs-ordering" id="revs-ordering-bfs"
             value="bfs" onclick="swh.revision.revsOrderingTypeClicked(event)">
-      <label class="form-check-label" for="revs-ordering-bfs">BFS</label>
+      <label class="custom-control-label font-weight-normal" for="revs-ordering-bfs">BFS</label>
     </div>
-  </div>
+  </form>
 
   <div class="table-responsive mb-3">
     <table class="table swh-table swh-table-striped">
diff --git a/swh/web/templates/browse/search.html b/swh/web/templates/browse/search.html
--- a/swh/web/templates/browse/search.html
+++ b/swh/web/templates/browse/search.html
@@ -19,23 +19,29 @@
   <div class="input-group">
     <input class="form-control" placeholder="Enter a persistent id to resolve or string pattern(s) to search for in origin urls" type="text" id="origins-url-patterns"/>
     <div class="input-group-append">
-      <button class="btn btn-default" type="submit"><i class="swh-search-icon mdi mdi-24px mdi-magnify" aria-hidden="true"></i></button>
+      <button class="btn btn-primary" type="submit"><i class="swh-search-icon mdi mdi-24px mdi-magnify" aria-hidden="true"></i></button>
     </div>
   </div>
-  <div class="form-check swh-id-option">
-    <input class="form-check-input" value="option-origins-with-visit" type="checkbox"
+  <div class="custom-control custom-checkbox swh-id-option">
+    <input class="custom-control-input" value="option-origins-with-visit" type="checkbox"
           id="swh-search-origins-with-visit" checked>
-    <label class="form-check-label" for="swh-search-origins-with-visit">only show origins visited at least once</label>
+    <label class="custom-control-label font-weight-normal" for="swh-search-origins-with-visit">
+      only show origins visited at least once
+    </label>
   </div>
-  <div class="form-check swh-id-option">
-    <input class="form-check-input" value="option-filter-empty-visits" type="checkbox"
+  <div class="custom-control custom-checkbox swh-id-option">
+    <input class="custom-control-input" value="option-filter-empty-visits" type="checkbox"
           id="swh-filter-empty-visits" checked>
-    <label class="form-check-label" for="swh-filter-empty-visits">filter out origins with no archived content</label>
+    <label class="custom-control-label font-weight-normal" for="swh-filter-empty-visits">
+      filter out origins with no archived content
+    </label>
   </div>
-  <div class="form-check swh-id-option">
-    <input class="form-check-input" value="option-filter-empty-visits" type="checkbox"
+  <div class="custom-control custom-checkbox swh-id-option">
+    <input class="custom-control-input" value="option-filter-empty-visits" type="checkbox"
           id="swh-search-origin-metadata">
-    <label class="form-check-label" for="swh-search-origin-metadata">search in metadata (instead of URL)</label>
+    <label class="custom-control-label font-weight-normal" for="swh-search-origin-metadata">
+      search in metadata (instead of URL)
+    </label>
   </div>
 </form>
 <hr>
diff --git a/swh/web/templates/browse/vault-ui.html b/swh/web/templates/browse/vault-ui.html
--- a/swh/web/templates/browse/vault-ui.html
+++ b/swh/web/templates/browse/vault-ui.html
@@ -27,7 +27,12 @@
   <table class="table swh-table swh-table-striped swh-vault-table" id="vault-cooking-tasks">
     <thead>
       <tr>
-        <th><input type="checkbox" id="vault-tasks-toggle-selection"/></th>
+        <th>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="vault-tasks-toggle-selection">
+            <label class="custom-control-label" for="vault-tasks-toggle-selection"></label>
+          </div>
+        </th>
         <th style="width: 100px">Object type</th>
         <th>Object id</th>
         <th style="width: 350px">Cooking status</th>
diff --git a/swh/web/templates/includes/show-swh-ids.html b/swh/web/templates/includes/show-swh-ids.html
--- a/swh/web/templates/includes/show-swh-ids.html
+++ b/swh/web/templates/includes/show-swh-ids.html
@@ -66,12 +66,12 @@
                 {% if swhid_info.swhid_with_context is not None %}
                   <div class="float-left">
                     <form id="swh-id-options">
-                      <div class="form-check swh-id-option">
-                        <input class="form-check-input swh-id-context-option" value="option-origin" type="checkbox"
+                      <div class="custom-control custom-checkbox swh-id-option">
+                        <input class="custom-control-input swh-id-context-option" value="option-origin" type="checkbox"
                               id="swh-id-context-option-{{ swhid_info.object_type }}"
                               data-swhid-with-context="{{ swhid_info.swhid_with_context }}"
                               onclick="swh.browse.swhIdContextOptionToggled(event)">
-                        <label class="form-check-label" for="swh-id-context-option-{{ swhid_info.object_type }}">Add contextual information</label>
+                        <label class="custom-control-label font-weight-normal" for="swh-id-context-option-{{ swhid_info.object_type }}">Add contextual information</label>
                       </div>
                     </form>
                   </div>