From 518b97a4c03f12a61854210b924748d384190c2f Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Mon, 13 Nov 2023 16:26:55 +0000
Subject: [PATCH 01/31] Rubocop fix after v4.1.1

---
 CHANGELOG.md                                     | 4 ++++
 app/controllers/plan_exports_controller.rb       | 2 +-
 app/helpers/customizable_template_link_helper.rb | 6 +++---
 app/models/answer.rb                             | 2 +-
 app/models/exported_plan.rb                      | 2 +-
 app/models/plan.rb                               | 8 ++++----
 app/models/question.rb                           | 2 +-
 lib/csvable.rb                                   | 7 +++----
 lib/tasks/upgrade.rake                           | 2 +-
 spec/support/helpers/identifier_helper.rb        | 2 +-
 10 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9deb1e87a..d6ab484e6c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## V4.1.2 or V4.2.0
+
+### Fixed 
+- Fixed rubocop errors after V4.1.1 release 
 ## V4.1.1
 
 ### Added
diff --git a/app/controllers/plan_exports_controller.rb b/app/controllers/plan_exports_controller.rb
index a000a53588..c9f191c339 100644
--- a/app/controllers/plan_exports_controller.rb
+++ b/app/controllers/plan_exports_controller.rb
@@ -155,6 +155,6 @@ def export_params
   # in html that break docx creation by htmltoword gem.
   def clean_html_for_docx_creation(html)
     # Replaces single backslash \ with \\ with gsub.
-    html.gsub(/\\/, '\&\&')
+    html.gsub('\\', '\&\&')
   end
 end
diff --git a/app/helpers/customizable_template_link_helper.rb b/app/helpers/customizable_template_link_helper.rb
index f0cb62dfd8..d8b72e8353 100644
--- a/app/helpers/customizable_template_link_helper.rb
+++ b/app/helpers/customizable_template_link_helper.rb
@@ -10,16 +10,16 @@ def link_to_customizable_template(name, customization, template)
 
     if customization.present?
       if customization.created_at < template.created_at
-        name = name.blank? ? _('Transfer customisation') : name
+        name = _('Transfer customisation') if name.blank?
         link_to name,
                 org_admin_template_customization_transfers_path(customization.id),
                 data: { method: 'post' }
       else
-        name = name.blank? ? _('Edit customisation') : name
+        name = _('Edit customisation') if name.blank?
         link_to name, org_admin_template_path(id: customization.id)
       end
     else
-      name = name.blank? ? _('Customise') : name
+      name = _('Customise') if name.blank?
       link_to name,
               org_admin_template_customizations_path(template.id),
               'data-method': 'post'
diff --git a/app/models/answer.rb b/app/models/answer.rb
index d1ff70e9b3..9a4dcb4d14 100644
--- a/app/models/answer.rb
+++ b/app/models/answer.rb
@@ -105,7 +105,7 @@ def answered?
   #
   # Returns Array
   def non_archived_notes
-    notes.select { |n| n.archived.blank? }.sort! { |x, y| x.created_at <=> y.created_at }
+    notes.select { |n| n.archived.blank? }.sort_by!(&:created_at)
   end
 
   # The parsed JSON hash for the current answer object. Generates a new hash if none
diff --git a/app/models/exported_plan.rb b/app/models/exported_plan.rb
index 65890d3286..a6219edab2 100644
--- a/app/models/exported_plan.rb
+++ b/app/models/exported_plan.rb
@@ -182,7 +182,7 @@ def as_txt(sections, unanswered_questions, question_headings, details)
         next if answer.nil? && !unanswered_questions
 
         if question_headings
-          qtext = sanitize_text(question.text.gsub(/<li>/, '  * '))
+          qtext = sanitize_text(question.text.gsub('<li>', '  * '))
           output += "\n* #{qtext}"
         end
         if answer.nil?
diff --git a/app/models/plan.rb b/app/models/plan.rb
index 3b7e18ec85..7626bba207 100644
--- a/app/models/plan.rb
+++ b/app/models/plan.rb
@@ -375,7 +375,7 @@ def complete_feedback(org_admin)
   #
   # Returns Boolean
   def editable_by?(user_id)
-    roles.select { |r| r.user_id == user_id && r.active && r.editor }.any?
+    roles.any? { |r| r.user_id == user_id && r.active && r.editor }
   end
 
   ##
@@ -409,7 +409,7 @@ def readable_by?(user_id)
   #
   # Returns Boolean
   def commentable_by?(user_id)
-    roles.select { |r| r.user_id == user_id && r.active && r.commenter }.any? ||
+    roles.any? { |r| r.user_id == user_id && r.active && r.commenter } ||
       reviewable_by?(user_id)
   end
 
@@ -419,7 +419,7 @@ def commentable_by?(user_id)
   #
   # Returns Boolean
   def administerable_by?(user_id)
-    roles.select { |r| r.user_id == user_id && r.active && r.administrator }.any?
+    roles.any? { |r| r.user_id == user_id && r.active && r.administrator }
   end
 
   # determines if the plan is reviewable by the specified user
@@ -539,7 +539,7 @@ def num_questions
   #
   # Returns Boolean
   def visibility_allowed?
-    !is_test? && phases.select { |phase| phase.visibility_allowed?(self) }.any?
+    !is_test? && phases.any? { |phase| phase.visibility_allowed?(self) }
   end
 
   # Determines whether or not a question (given its id) exists for the self plan
diff --git a/app/models/question.rb b/app/models/question.rb
index adf8753f66..509a977136 100644
--- a/app/models/question.rb
+++ b/app/models/question.rb
@@ -118,7 +118,7 @@ def deep_copy(**options)
     copy = dup
     copy.modifiable = options.fetch(:modifiable, modifiable)
     copy.section_id = options.fetch(:section_id, nil)
-    copy.save!(validate: false)  if options.fetch(:save, false)
+    copy.save!(validate: false) if options.fetch(:save, false)
     options[:question_id] = copy.id
     question_options.each { |qo| copy.question_options << qo.deep_copy(**options) }
     annotations.each do |annotation|
diff --git a/lib/csvable.rb b/lib/csvable.rb
index b86c19bf02..9a2b3d004f 100644
--- a/lib/csvable.rb
+++ b/lib/csvable.rb
@@ -5,14 +5,13 @@ module Csvable
   require 'csv'
   class << self
     # rubocop:disable Style/OptionalBooleanParameter
-    # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+    # rubocop:disable Metrics/AbcSize
     def from_array_of_hashes(data = [], humanize = true, sep = ',')
       return '' unless data.first&.keys
 
       headers = if humanize
                   data.first.keys
-                      .map(&:to_s)
-                      .map(&:humanize)
+                      .map { |x| x.to_s.humanize }
                 else
                   data.first.keys
                       .map(&:to_s)
@@ -27,6 +26,6 @@ def from_array_of_hashes(data = [], humanize = true, sep = ',')
       end
     end
     # rubocop:enable Style/OptionalBooleanParameter
-    # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+    # rubocop:enable Metrics/AbcSize
   end
 end
diff --git a/lib/tasks/upgrade.rake b/lib/tasks/upgrade.rake
index 66fc66998c..98c97cdcb2 100644
--- a/lib/tasks/upgrade.rake
+++ b/lib/tasks/upgrade.rake
@@ -924,7 +924,7 @@ namespace :upgrade do
 
         orgs.each do |org|
           # If the Org already has a ROR identifier skip it
-          next if org.identifiers.select { |id| id.identifier_scheme_id == ror.id }.any?
+          next if org.identifiers.any? { |id| id.identifier_scheme_id == ror.id }
 
           # The abbreviation sometimes causes weird results so strip it off
           # in this instance
diff --git a/spec/support/helpers/identifier_helper.rb b/spec/support/helpers/identifier_helper.rb
index 53afc495e3..caeabe70de 100644
--- a/spec/support/helpers/identifier_helper.rb
+++ b/spec/support/helpers/identifier_helper.rb
@@ -19,7 +19,7 @@ def orcid_scheme
   end
 
   def append_prefix(scheme:, val:)
-    val = val.start_with?('/') ? val[1..val.length] : val
+    val = val[1..val.length] if val.start_with?('/')
     url = landing_page_for(scheme: scheme)
     val.start_with?(url) ? val : "#{url}#{val}"
   end

From 932e31e8d216fdd5125cf5886520efba398d1479 Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Fri, 27 Oct 2023 16:37:41 +0100
Subject: [PATCH 02/31] Issue #3144 - Upgrade to Bootstrap 5 This commit
 consists of the file changes required for the upgrade from Bootstrap 3 to 5. 
 A more detailed version is in CHANGELOG.md (and in wiki:
 https://github.com/DMPRoadmap/roadmap/wiki/Release-notes-for-Bootstrap-5-upgrade)

---
 CHANGELOG.md                                  | 152 +++++++++++++++-
 app/assets/stylesheets/application.scss       |  30 ++-
 .../stylesheets/blocks/_accessibility.scss    |   2 +-
 app/assets/stylesheets/blocks/_accordion.scss |  82 +++++++++
 app/assets/stylesheets/blocks/_buttons.scss   |  51 +++---
 app/assets/stylesheets/blocks/_cards.scss     |  55 ++++++
 app/assets/stylesheets/blocks/_dropdowns.scss |   7 +
 .../stylesheets/blocks/_font_awesomes.scss    |   4 +-
 app/assets/stylesheets/blocks/_footers.scss   |   7 +-
 app/assets/stylesheets/blocks/_forms.scss     |  21 +++
 app/assets/stylesheets/blocks/_html.scss      |  31 +++-
 app/assets/stylesheets/blocks/_index.scss     |   4 +-
 .../stylesheets/blocks/_input_groups.scss     |  13 +-
 .../blocks/_inverse_dropdowns.scss            |   3 +-
 app/assets/stylesheets/blocks/_labels.scss    |  15 +-
 app/assets/stylesheets/blocks/_lists.scss     |   6 +-
 app/assets/stylesheets/blocks/_logos.scss     |   7 +-
 .../stylesheets/blocks/_modal_dialogs.scss    |  39 ++--
 .../blocks/_modal_permissions.scss            |   6 +-
 .../stylesheets/blocks/_modal_search.scss     |   1 +
 app/assets/stylesheets/blocks/_navbars.scss   |  15 +-
 app/assets/stylesheets/blocks/_navs.scss      |  58 +++---
 .../stylesheets/blocks/_new_plans_form.scss   |   6 +-
 .../blocks/_notification_areas.scss           |   6 +-
 app/assets/stylesheets/blocks/_org_links.scss |   2 +-
 app/assets/stylesheets/blocks/_panels.scss    |  30 ---
 .../stylesheets/blocks/_profile_form.scss     |   6 +-
 app/assets/stylesheets/blocks/_spinner.scss   |  15 +-
 app/assets/stylesheets/blocks/_tables.scss    |  24 ++-
 .../stylesheets/blocks/_template_filters.scss |   6 +-
 app/assets/stylesheets/utils/_functions.scss  |   9 +
 app/assets/stylesheets/utils/_index.scss      |   1 +
 .../stylesheets/variables/_bootstrap.scss     |  14 +-
 .../stylesheets/variables/_colours.scss       |  15 +-
 .../customizable_template_link_helper.rb      |  14 +-
 app/javascript/application.js                 |   3 -
 .../orgAdmin/conditions/updateConditions.js   |  26 ++-
 app/javascript/src/orgAdmin/phases/newEdit.js |  66 +++----
 app/javascript/src/orgAdmin/phases/show.js    |   2 +-
 app/javascript/src/researchOutputs/form.js    |   6 +-
 app/javascript/src/utils/accordion.js         | 171 +++++++++++++-----
 app/javascript/src/utils/popoverHelper.js     |   8 -
 app/javascript/src/utils/requiredField.js     |   2 +-
 app/javascript/src/utils/sectionUpdate.js     |  15 +-
 app/javascript/src/utils/spinner.js           |   4 +-
 app/javascript/src/utils/tinymce.js           |   5 +-
 app/javascript/src/utils/tooltipHelper.js     |   4 +-
 app/views/answers/_new_edit.html.erb          |   8 +-
 app/views/answers/_status.html.erb            |  10 +-
 .../contact_us/contacts/_new_left.html.erb    |  18 +-
 app/views/contact_us/contacts/new.html.erb    |   4 +-
 app/views/contributors/_form.html.erb         |  33 ++--
 app/views/contributors/edit.html.erb          |   4 +-
 app/views/contributors/new.html.erb           |   2 +-
 app/views/devise/invitations/edit.html.erb    |  86 ++++-----
 app/views/devise/passwords/edit.html.erb      |  80 ++++----
 app/views/devise/passwords/new.html.erb       |  50 ++---
 .../devise/registrations/_api_token.html.erb  |  12 +-
 .../_password_confirmation.html.erb           |  22 +--
 .../registrations/_password_details.html.erb  |  25 ++-
 .../registrations/_personal_details.html.erb  |  36 ++--
 app/views/devise/registrations/edit.html.erb  |  28 +--
 .../_guidance_group_form.html.erb             |  10 +-
 .../guidance_groups/_index_by_theme.html.erb  |  41 ++---
 app/views/guidance_groups/_show.html.erb      |  21 +--
 app/views/guidance_groups/admin_edit.html.erb |   2 +-
 app/views/guidance_groups/admin_new.html.erb  |   2 +-
 .../guidances/_guidance_display.html.erb      |  85 +++++----
 app/views/guidances/new_edit.html.erb         |  14 +-
 app/views/kaminari/_last_page.html.erb        |   2 +-
 app/views/kaminari/_next_page.html.erb        |   2 +-
 app/views/kaminari/_page.html.erb             |   2 +-
 app/views/kaminari/_prev_page.html.erb        |   2 +-
 app/views/layouts/_branding.html.erb          |  91 +++++-----
 app/views/layouts/_footer.html.erb            |  32 ++--
 app/views/layouts/_header.html.erb            |   4 +-
 app/views/layouts/_navigation.html.erb        |  84 +++++----
 app/views/layouts/_paginable.html.erb         |   4 +-
 app/views/layouts/_signin_signout.html.erb    |  29 +--
 app/views/layouts/application.html.erb        |  10 +-
 app/views/layouts/modal_search/_form.html.erb |  27 +--
 .../layouts/modal_search/_result.html.erb     |   4 +-
 .../layouts/modal_search/_results.html.erb    |   4 +-
 .../layouts/modal_search/_selections.html.erb |   4 +-
 app/views/notes/_archive.html.erb             |   6 +-
 app/views/notes/_edit.html.erb                |   8 +-
 app/views/notes/_layout.html.erb              |   8 +-
 app/views/notes/_list.html.erb                |   4 +-
 app/views/notes/_new.html.erb                 |   6 +-
 app/views/notes/_show.html.erb                |   2 +-
 .../org_admin/annotations/_form.html.erb      |   4 +-
 app/views/org_admin/conditions/_add.html.erb  |   2 +-
 .../org_admin/conditions/_container.html.erb  |   8 +-
 app/views/org_admin/conditions/_form.html.erb |  14 +-
 .../conditions/_webhook_form.html.erb         |  24 ++-
 app/views/org_admin/departments/edit.html.erb |  14 +-
 app/views/org_admin/departments/new.html.erb  |  14 +-
 app/views/org_admin/phases/_form.html.erb     |  16 +-
 app/views/org_admin/phases/_index.html.erb    |  23 +--
 app/views/org_admin/phases/_phase.html.erb    |  12 +-
 app/views/org_admin/phases/container.html.erb |  16 +-
 app/views/org_admin/phases/preview.html.erb   |  10 +-
 app/views/org_admin/plans/index.html.erb      |   6 +-
 .../question_options/_option_fields.html.erb  |  18 +-
 app/views/org_admin/questions/_form.html.erb  |  45 +++--
 app/views/org_admin/questions/_index.html.erb |   4 +-
 app/views/org_admin/questions/_show.html.erb  |  75 ++++----
 app/views/org_admin/sections/_form.html.erb   |  20 +-
 app/views/org_admin/sections/_index.html.erb  |  71 ++++----
 .../org_admin/sections/_progress.html.erb     |   2 +-
 .../org_admin/sections/_section.html.erb      |  61 +++----
 .../sections/_section_group.html.erb          |   4 +-
 .../org_admin/shared/_theme_selector.html.erb |   7 +-
 app/views/org_admin/templates/_form.html.erb  |  30 +--
 .../org_admin/templates/_navigation.html.erb  |  12 +-
 .../org_admin/templates/container.html.erb    |   8 +-
 .../org_admin/templates/history.html.erb      |   2 +-
 app/views/org_admin/templates/index.html.erb  |  22 +--
 app/views/org_admin/templates/new.html.erb    |   6 +-
 app/views/org_admin/users/edit.html.erb       |  26 +--
 app/views/orgs/_external_identifiers.html.erb |  10 +-
 app/views/orgs/_feedback_form.html.erb        |  10 +-
 app/views/orgs/_profile_form.html.erb         |  52 +++---
 app/views/orgs/admin_edit.html.erb            |  36 ++--
 app/views/orgs/shibboleth_ds.html.erb         |   6 +-
 .../paginable/api_clients/_index.html.erb     |   2 +-
 .../paginable/contributors/_index.html.erb    |  12 +-
 .../paginable/departments/_index.html.erb     |   4 +-
 .../paginable/guidance_groups/_index.html.erb |  10 +-
 app/views/paginable/guidances/_index.html.erb |  12 +-
 app/views/paginable/orgs/_index.html.erb      |   6 +-
 .../plans/_privately_visible.html.erb         |  16 +-
 .../research_outputs/_index.html.erb          |   6 +-
 .../templates/_customisable.html.erb          |  21 ++-
 .../templates/_organisational.html.erb        |  22 ++-
 .../templates/_publicly_visible.html.erb      |   2 +-
 app/views/phases/_edit_plan_answers.html.erb  |  41 ++---
 app/views/phases/_guidances_notes.html.erb    |  67 ++++---
 app/views/phases/_overview.html.erb           |   2 +-
 app/views/plans/_download_form.html.erb       |  64 +++----
 app/views/plans/_edit_details.html.erb        |   6 +-
 app/views/plans/_guidance_choices.html.erb    |   6 +-
 app/views/plans/_guidance_selection.html.erb  |  14 +-
 app/views/plans/_navigation.html.erb          |  43 +++--
 app/views/plans/_overview_details.html.erb    |  26 ++-
 app/views/plans/_project_details.html.erb     |  96 +++++-----
 .../plans/_request_feedback_form.html.erb     |   4 +-
 app/views/plans/_share_form.html.erb          |  30 +--
 app/views/plans/new.html.erb                  |  34 ++--
 app/views/public_pages/plan_index.html.erb    |   4 +-
 .../public_pages/template_index.html.erb      |   4 +-
 .../_new_edit_question_datefield.html.erb     |   6 +-
 .../_new_edit_question_option_based.html.erb  |  14 +-
 .../_new_edit_question_textarea.html.erb      |   4 +-
 .../_new_edit_question_textfield.html.erb     |   6 +-
 .../questions/_preview_question.html.erb      |   2 +-
 app/views/research_outputs/_form.html.erb     |  80 ++++----
 app/views/research_outputs/edit.html.erb      |   2 +-
 .../research_outputs/licenses/_form.html.erb  |   2 +-
 app/views/research_outputs/new.html.erb       |   2 +-
 .../repositories/_search_result.html.erb      |   2 +-
 .../select_output_type.js.erb                 |   8 +-
 app/views/shared/_access_controls.html.erb    |  21 +--
 app/views/shared/_copy_link_modal.html.erb    |  28 +--
 .../shared/_create_account_form.html.erb      |  37 ++--
 app/views/shared/_create_plan_modal.html.erb  |  10 +-
 app/views/shared/_links.html.erb              |  22 +--
 app/views/shared/_modal.html.erb              |   4 +-
 app/views/shared/_popover.html.erb            |   2 +-
 app/views/shared/_search.html.erb             |  18 +-
 app/views/shared/_sign_in_form.html.erb       |  70 +++----
 app/views/shared/_table_filter.html.erb       |  42 ++---
 app/views/static_pages/about_us.html.erb      |   2 +-
 app/views/static_pages/privacy.html.erb       |   2 +-
 app/views/static_pages/termsuse.html.erb      |   2 +-
 .../super_admin/api_clients/_form.html.erb    |  46 ++---
 .../super_admin/api_clients/edit.html.erb     |   2 +-
 .../super_admin/api_clients/index.html.erb    |   2 +-
 .../super_admin/api_clients/new.html.erb      |   2 +-
 .../super_admin/notifications/_form.html.erb  |  36 ++--
 .../super_admin/notifications/edit.html.erb   |   2 +-
 .../super_admin/notifications/index.html.erb  |   9 +-
 .../super_admin/notifications/new.html.erb    |   2 +-
 app/views/super_admin/orgs/_analysis.html.erb |   4 +-
 app/views/super_admin/orgs/index.html.erb     |   2 +-
 app/views/super_admin/orgs/new.html.erb       |   6 +-
 app/views/super_admin/themes/_form.html.erb   |  14 +-
 app/views/super_admin/themes/edit.html.erb    |   2 +-
 app/views/super_admin/themes/index.html.erb   |   4 +-
 app/views/super_admin/themes/new.html.erb     |   2 +-
 .../super_admin/users/_confirm_merge.html.erb |   8 +-
 app/views/super_admin/users/edit.html.erb     |  40 ++--
 .../_template_statistics_accordion.html.erb   |  34 ++--
 app/views/usage/_total_usage.html.erb         |  20 +-
 app/views/usage/_user_statistics.html.erb     |  32 ++--
 .../usage/_user_statistics_accordion.html.erb |  34 ++--
 app/views/usage/index.html.erb                |   2 +-
 .../users/_admin_grant_permissions.html.erb   |  18 +-
 .../users/_notification_preferences.html.erb  |  44 ++---
 app/views/users/admin_index.html.erb          |   2 +-
 package.json                                  |   6 +-
 yarn.lock                                     |  28 +--
 202 files changed, 2248 insertions(+), 1784 deletions(-)
 create mode 100644 app/assets/stylesheets/blocks/_accordion.scss
 create mode 100644 app/assets/stylesheets/blocks/_cards.scss
 create mode 100644 app/assets/stylesheets/blocks/_forms.scss
 delete mode 100644 app/assets/stylesheets/blocks/_panels.scss
 create mode 100644 app/assets/stylesheets/utils/_functions.scss
 delete mode 100644 app/javascript/src/utils/popoverHelper.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9deb1e87a..5894631ca5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,153 @@
 # Changelog
 
+## v4.2.0
+
+**Note this upgrade is mainly a migration from Bootstrap 3 to Bootstrap 5.** 
+
+Note that this will have a significant impact on any scss and html customizations you may have made to your fork of this project. 
+
+The following links will be helpful:
+
+[Get started with Bootstrap v5.2.3](https://getbootstrap.com/docs/5.2/getting-started/introduction/)<br>
+[Migrating to v4](https://getbootstrap.com/docs/4.0/migration)<br>
+[How to Migrate from Bootstrap Version 3 to 4](https://designmodo.com/migrate-bootstrap-4/)<br>
+[Migrating to v5](https://getbootstrap.com/docs/5.0/migration)<br>
+[How to Migrate from Bootstrap Version 4 to 5](https://designmodo.com/migrate-bootstrap-5/)<br>
+[Use Bootstrap 5 with Ruby on Rails 6 and webpack](https://medium.com/daily-web-dev/use-bootstrap-4-with-ruby-on-rails-6-and-webpack-fe7300604267)<br>
+[What happened to $grid-float-breakpoint in Bootstrap 4. And screen size breakpoint shift from 3 -> 4](
+https://bibwild.wordpress.com/2019/06/10/what-happened-to-grid-float-breakpoint-in-bootstrap-4-and-screen-size-breakpoint-shift-from-3-4/)<br>
+[What are media queries in Bootstrap 4?](https://www.educative.io/answers/what-are-media-queries-in-bootstrap-4)<br>
+   
+### Key changes
+    
+- Node  package changes:
+  * Changed version of `bootstrap "^3.4.1"` --> `"^5.2.3"`
+  * Added  `@popperjs/core.`
+  * Removed `bootstrap-3-typeahead, bootstrap-sass & popper.js`
+- Stylesheet changes
+  * In `app/assets/stylesheets/application.scss`:
+    + removed `bootstrap-sass` import <br>
+      and replaced with<br>
+       `@import "../../../node_modules/bootstrap/scss/bootstrap";`
+
+  * The order of the `import` statements have been changed to import the `blocks/` and `utils/` after the default bootstrap stylesheets
+
+  * In `app/assets/stylesheets/blocks/`:
+    + Replaced in relevant files:
+      + `@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as * ;`<br>
+         with <br>
+         `@use "../../../../node_modules/bootstrap/scss/bootstrap" as *;`
+    + Enclosed all division calculations using symbol `/` with `calc()` function,<br> 
+      e.g., replaced<br>
+         `padding-right: $grid-gutter-width / 2;`<br>
+      with<br>
+         `padding-right: calc($grid-gutter-width / 2);`<br>
+    + Replaced breaking media queries since Bootstrap 3:
+      - `@media (max-width: $grid-float-breakpoint-max) {}`<br>
+        with<br>
+        `@include media-breakpoint-down(md){}`
+    
+      - `@media (max-width: $grid-float-breakpoint-max) {}`<br>
+        with<br>
+        `@include media-breakpoint-down(md) {}`
+  *  Deleted `app/javascript/src/utils/popoverHelper.js`.
++ Mixins
+  - Media query mixins parameters have changed for a more logical approach.
+    * `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than lg).
++ Color system
+  -  All `lighten()`and `darken()` functions replaced. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount.
+     * Replaced `lighten()` by `tint-color()`.
+     * Replaced `darken()` by `shade-color()`.
+
+#### Components & HTML
+
+Note many of these Bootstrap changes has required us to rewrite or change some of the Javascript files.
+
+When we use a native DOM element in Javascript, we obtain it by applying get() to the Jquery element (cf., https://api.jquery.com/get/).
+We sometimes use the button native Dom element to programmatically click, as the Jquery button element with trigger('click') won't work because the trigger() function cannot be used to mimic native browser events, such as clicking (cf., https://learn.jquery.com/events/triggering-event-handlers/ )
+
++ Accordion & spinners
+  - Bespoke versions replaced by Bootstrap 5 accordion and spinner now. 
+  - Accordion
+    * Changed the default Bootstrap arrow icon for the accordion to use the fontawesome icons plus and minus icons. Created a several accordion specific colour variables:
+       <br>// Accordion colors
+       <br> `$color-accordion-button: $color-primary-text`;
+       <br> `$color-accordion-button-icon: $color-primary-text`;
+       <br> `$color-accordion-button-bg: $color-primary-background`;
+       <br> `$color-accordion-button-active-bg:  shade-color($color-accordion-button-bg, 30%)`;
+       <br>(See `app/assets/stylesheets/blocks/_accordion.scss` and `app/assets/stylesheets/variables/_colours.scss` for details.)
+    * The drag icon in `app/views/org_admin/sections/_section.html.erb` now appears after the plus (or minus) icon.
+  - The spinner block now uses class`d-none` instead of`hidden` to hide.
+  - In views with multiple accordion sections with "expand all" or "collapse all" links, we use the native Dom element of the accordion buttons to programmatically click, (cf. to note above).
++ Buttons
+  - Bootstrap dropped `btn-block` class for utilities. So we removed any styling using it.
+  - Close Buttons: Renamed `close` to`btn-close`.
+  - Renamed `btn-default` to `btn-secondary` and variable `$btn-default-color` changed to `$btn-secondary-color`.
++ Dropdowns 
+    - Dropdown list items with class `dropdown` have class `dropdown-item` added usually with`px-3` for positioning.
+    - Added new `dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
+    - Data attributes changes required by Bootstrap 5 (as used by accordion and dropdown buttons):
+       * `data-display` --> `data-bs-display`
+       * `data-parent` --> `data-bs-parent`
+       * `data-target` --> `data-bs-target`
+       * `data-toggle` --> `data-bs-toggle`
+    - Bootstrap 5 Popover added to some dropdown-menu items by adding attribute `data-bs-toggle="popover"`
++ Form 
+  - `form-group` class replaced with `form-control`.
+  - Form labels now require `form-label` or `form-check-label` to go with `form-control` and `form-check` respectively. So all obsolete `control-label` replaced by `form-label` and missing ones added.
+  - Dropped form-specific layout classes for our grid system. Use Bootstrap grid and utilities instead of `form-group`, `form-row`, or `form-inline`.
+  - `form-text` no longer sets display, allowing you to create inline or block help text as you wish just by changing the HTML element.
+  - Input group addons are now specific to their placement relative to an input. So `input-group-addon` and in our case we replaced with
+`input-group-addon`.
+  - Renamed `checkbox` and `radio` into `form-check`.
++ Images
+  - Renamed `img-responsive` to `img-fluid`.
++ Labels and badges
+   - Class `label` has been removed and replaced by `badge` to disambiguate from the `<label>` element.
+      * Renamed `label` class to `badge`
+      * Replaced `label-default` by `bg-secondary`
+      * Replaced `label-info` by `bg-info`
+      * Replaced `label-warning` by  `bg-warning .text-dark`
+      * Replaced `label-danger` by `bg-danger`
++ Links
+  - Links are underlined by default (not just on hover), unless they're part of specific components. So we had to add css to remove underline in many cases.
++ Modals
+  - To programmatically show or hide a Bootstrap modal, we have followed both these approaches:
+     * Either, get access to the Jquery modal element and call functions `modal('show')` or `modal('hide')`.
+     * Or, apply click() to the native Dom element of the button to trigger the modal (cf. to note above).
++ Navs & navbars
+  - Bootstrap rewrote component with flexbox. Dropped nearly all > selectors for simpler styling via un-nested classes.
+    Instead of HTML-specific selectors like .nav > li > a, we use separate classes for `navs, nav-items, and nav-links`. (Note because the `nav-link` class has not always been added as it comes with styles not appropriate for our styling for links.)
+    This makes your HTML more flexible while bringing along increased extensibility. So we have dropped  HTML-specific selectors and css in `_navs.scss`
+    e.g., 
+    <br>`.nav-tabs > li > a:hover` --> `nav-tabs nav-link:hover`,
+    <br>`.nav-pills > li > a:hover` -->`nav-pills .nav-link:hover`.
+    - Pages with css classes `nav` and`navbar` updated to work with Bootstrap 5. So `app/assets/stylesheets/blocks/_navbars.scss` and `app/assets/stylesheets/blocks/_navs.scss` updated.
+      * Replaced`nav navbar-nav` combination --> `navbar-nav`
+      * Replaced`navbar-toggle` --> `navbar-toggler`
+      * Replaced multiple spans in`navbar-toggle` button with class`icon-bar`<br>  --> single span with`toggler-icon`
+      * Lists with `nav navbar-nav` have class`nav-item` added to list elements.
+    - Note because the `nav-link` class include styling that is not appropriate in many places, we have not included it in those cases.
++ Notifications
+    - Notifications now use classes `d-block` and `d-none` to show and hide respectively.
++ Panels, thumbnails & wells (replacements)
+  - Bootstrap 5 dropped panels, thumbnails and wells. So pages with them updated with Bootstrap 5 replacements. 
+    * All views with css classes`panel, panel-body, panel-*` Have panel replaced by card to give `card, card_body, card-*`, etc. 
+    * As `panel-default` and some otherpanel css classes don't have card equivalents with same suffixes we have added these classes temporarily in `_cards.sccs`, e.g.,`.card-default`, etc.
++ Utilities
+  - Bootstrap renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
+    * Renamed `left-*` and `right-*` to `start-*` and `end-*`.
+    * Renamed `float-left` and `float-right` to `float-start` and `float-end`.
+    * Renamed `ml-*` and `mr-*` to `ms-*` and `me-*`.
+    * Renamed `pl-*` and `pr-*` to `ps-*` and `pe-*`.
+    * Renamed `text-left` and `text-right` to `text-start` and `text-end`.
+  - The `hidden` and `show` classes have been removed because they conflicted with jQuery's.
+    * Replaced `hidden` with `d-none`.
+  - Text utilities
+    * As Bootstrap 5.2 dropped class `text-justify` we have created a custom version based on comment https://github.com/twbs/bootstrap/pull/29793#issuecomment-1814683346
+    * `text-*` utilities do not add hover and focus states to links anymore. `link-*` helper classes can be used instead.
+
+
 ## V4.1.1
 
 ### Added
@@ -25,7 +173,7 @@ All gem and JS dependencies were also updated via `bundle update && yarn upgrade
 
 - Upgrade to Ruby version 3.0.5 [#3225](https://github.com/DMPRoadmap/roadmap/issues/3225)
 - Bumped all Github actions to use ruby 3.0
-- Removed `.freeze` from Regex and Range constants since those types are already immutable
+- Removed `freeze` from Regex and Range constants since those types are already immutable
 - Fixed Rubocop complaint about redundancy of `r.nil? ? nil : r.user`, so changed it to `r&.user` in `app/models/plan.rb`
 - Fixed Rubocop complaint about redundant `::` in config.log_formatter = `::Logger::Formatter.new` in `config/environments/production.rb`
 - Froze `lib/deprecators/*.rb` constants that were Strings
@@ -52,7 +200,7 @@ As Webpacker is no longer maintained by the Rails community, we have replaced it
 - Added `cssbundling-rails` gem and DartSass JS library
 - Updated SASS stylesheets following the migration to the latest version of the `sass` package (See below).
 - Removed `font-awesome-sass` gem and used `@fortawesome/fontawesome-free` npm package
-- Issue with `@import 'font-awesome-sprockets';` line in `app/assets/stylesheets/application.scss`. Removed that line after referring to the latest font-awesome install/setup guide which no longer includes it.
+- Issue with `@import 'font-awesome-sprockets';` line in `app/assets/stylesheets/application.scss` Removed that line after referring to the latest font-awesome install/setup guide which no longer includes it.
 
 With the removal of Webpacker, the Javascript/SASS code is no longer automaticaly compiled when using the `rails server` command. It has been replaced by the `bin/dev` command that launch the rails server and the processes that watch for changes in the SASS and Javascript code.
 
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 5e6d597552..523645353e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,12 +1,8 @@
 // Import locally defined variables. Load this before 'bootstrap'
-
 @use "variables";
 
-@use "blocks";
-@use "utils";
-
 // Pull in the webpacker managed copy of Bootstrap Stylesheets
-@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../../node_modules/bootstrap/scss/bootstrap";
 @import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
 
 // Pull in the webapcker managed copy of JQuery-UI Stylesheets
@@ -19,3 +15,27 @@ $fa-font-path: '.';
 // @import '@fortawesome/fontawesome-free/scss/brands';
 @import '@fortawesome/fontawesome-free/scss/regular';
 @import '@fortawesome/fontawesome-free/scss/solid';
+
+// Custom.scss
+// Option B: Include parts of Bootstrap
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "../../../node_modules/bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+// 4. Include any optional Bootstrap components as you like
+@import "../../../node_modules/bootstrap/scss/root";
+@import "../../../node_modules/bootstrap/scss/reboot";
+@import "../../../node_modules/bootstrap/scss/type";
+@import "../../../node_modules/bootstrap/scss/images";
+@import "../../../node_modules/bootstrap/scss/containers";
+@import "../../../node_modules/bootstrap/scss/grid";
+
+//Importing customised stylesheets after Bootstrap defaults
+@import "blocks";
+@import "utils";
diff --git a/app/assets/stylesheets/blocks/_accessibility.scss b/app/assets/stylesheets/blocks/_accessibility.scss
index d2dd003e0d..9bd2f3b9fd 100644
--- a/app/assets/stylesheets/blocks/_accessibility.scss
+++ b/app/assets/stylesheets/blocks/_accessibility.scss
@@ -38,7 +38,7 @@ div.skip a:focus {
 }
 
 /** Focus outline required for accessibility */
-a, input, select, .form-control {
+a, input, select, .form-control input, .form-control textarea {
   &:focus,
   &:hover,
   &:active {
diff --git a/app/assets/stylesheets/blocks/_accordion.scss b/app/assets/stylesheets/blocks/_accordion.scss
new file mode 100644
index 0000000000..2705314a6f
--- /dev/null
+++ b/app/assets/stylesheets/blocks/_accordion.scss
@@ -0,0 +1,82 @@
+@use '../variables/colours' as *;
+
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
+
+// An explanation of how we change the Bootstrap arrow icon for the accordion to use the fontawesome icons.
+// First we get the fontawesome plus.svg and minus.svg for use in background image from:
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg (in .accordion-button.collapsed::after)
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg
+// We then encode the svg.
+// Next the svg fill attribute is added with color set by a variable $color-accordion-button-icon in the _colours.scss.
+// This allows us to change color of symbols.
+// "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'
+// SVG we are using are encoded with fill added as fill='#{$color-accordion-button-icon}': 
+// After encoding # symbols in svg with the unicode %23. Hence the use of the replace function.
+// We could have done this without str-replace by adding encoded fill='%23{$color-accordion-button-icon}'.
+// Example of process for version Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free).
+// Get svgs
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg:
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+// Encode using a "URL-encoder for SVG" like  https://yoksel.github.io/url-encoder/
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E
+// Repeat for
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
+// Encode using a "URL-encoder for SVG"
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E?
+// We now use svgs as the background-image for the .accordion-button class as follows leaving a space.
+// After viewBox='0 0 448 512' we add fill='#{$color-accordion-button-icon}' as follows:
+// For node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg:
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg:
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E??
+// Now add to scss with a str-replace javascript function (which replaces '#' with '%23' after evaluation of #{$color-accordion-button-icon}.
+// background-image: str-replace(url("data:image/svg+xml, ENCODED_SVG, , '#', '%23');
+
+// Change when fontawesome library upgraded. Using Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free). See above explanation on how it is done.
+.accordion-button::after, .accordion-button.collapsed::after {
+  background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E"), '#', '%23');
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"), '#', '%23');
+  transition: all 0.5s;
+}
+
+
+// // move fa-arrows-alt to right
+h2.accordion-header {
+  display: flex;
+  align-items: center;
+  color: $color-accordion-button;
+  background-color: $color-accordion-button-bg;
+  font-size: 1rem;
+}
+
+h2.accordion-header > a.i {
+  margin-left: auto; 
+}
+
+// Remove box-shadow and highlight from Accordion button
+a.accordion-button,
+a.accordion-button.collapsed,
+a.accordion-button:not(.collapsed),
+a.accordion-button:hover,
+a.accordion-button:active, 
+a.accordion-button:focus,
+a.accordion-button:focus-visible,
+button.accordion-button.collapsed,
+button.accordion-button:not(.collapsed),
+button.accordion-button,
+button.accordion-button:hover,
+button.accordion-button:active, 
+button.accordion-button:focus,
+button.accordion-button:focus-visible {
+  color: $color-accordion-button;
+  background-color: $color-accordion-button-bg;
+  text-decoration: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
diff --git a/app/assets/stylesheets/blocks/_buttons.scss b/app/assets/stylesheets/blocks/_buttons.scss
index ffc1d5ee69..46fd31b66e 100644
--- a/app/assets/stylesheets/blocks/_buttons.scss
+++ b/app/assets/stylesheets/blocks/_buttons.scss
@@ -1,10 +1,6 @@
 @use '../variables/colours' as *;
 // Bootstrap overrides
 
-.btn {
-  border-radius: 0px;
-}
-
 /* primary button */
 .btn-primary,
 .btn-primary:hover,
@@ -17,33 +13,37 @@
   border-color: $color-border-default;
   color: $color-primary-text;
   outline: none;
-  margin-top: 5px;
-  margin-bottom: 10px;
+  border-radius: 0rem;
+  margin-top: 4px;
+  margin-bottom: 5px;
 }
 
 /* default button */
-.btn-default,
-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active,
-.btn-default:visited,
-.btn-default:active:hover,
-.btn-default.active:hover {
+.btn-secondary,
+.btn-secondary:hover,
+.btn-secondary:focus,
+.btn-secondary:active,
+.btn-secondary:visited,
+.btn-secondary:active:hover,
+.btn-secondary.active:hover {
   background-color: $color-primary-background;
   border-color: $color-border-default;
   color: $color-primary-text;
   outline: none;
-  margin-top: 5px;
-  margin-bottom: 10px;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 0rem;
+  margin-top: 4px;
+  margin-bottom: 5px;
 }
 
 /* Popover button */
-.btn-default[data-toggle=tooltip],
-.btn-default:hover[data-toggle=tooltip],
-.btn-default:focus[data-toggle=tooltip],
-.btn-default:active[data-toggle=tooltip],
-.btn-default:visited[data-toggle=tooltip],
-.btn-default:active:hover[data-toggle=tooltip] {
+.btn-secondary[data-toggle=tooltip],
+.btn-secondary:hover[data-toggle=tooltip],
+.btn-secondary:focus[data-toggle=tooltip],
+.btn-secondary:active[data-toggle=tooltip],
+.btn-secondary:visited[data-toggle=tooltip],
+.btn-secondary:active:hover[data-toggle=tooltip] {
   color: $color-secondary-text;
   background-color: $color-secondary-background;
   border: none;
@@ -52,6 +52,13 @@
 }
 
 /* link button */
-.btn-link {
+.btn-link, .btn-close {
   color: $color-link-text;
+  border: $color-border-default;
+  border-radius: 0rem;
+}
+
+.btn:disabled {
+  background-color: tint-color($color-primary-background, 40%);
+  border: none;
 }
diff --git a/app/assets/stylesheets/blocks/_cards.scss b/app/assets/stylesheets/blocks/_cards.scss
new file mode 100644
index 0000000000..edb25d6e1f
--- /dev/null
+++ b/app/assets/stylesheets/blocks/_cards.scss
@@ -0,0 +1,55 @@
+@use '../variables/colours' as *;
+
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
+// Override Bootstrap 5 cards
+
+.card {
+  border-color: $color-border-default;
+  border-radius: 0rem;
+}
+.heading-button > .card-heading, .card > .card-heading {
+  background-color: $color-primary-background;
+  color: $color-primary-text;
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+
+.empty-section {
+  background-color: $color-muted-background !important;
+  cursor: 'auto' !important;
+}
+
+.card-title a {
+  display: block;
+  padding: 8px calc($grid-gutter-width / 2);
+  margin: -10px calc($grid-gutter-width / -2);
+  background-color: $color-primary-background;
+  color: $color-primary-text;
+}
+.card-title > a.reverse {
+  background-color: $color-secondary-background;
+  color: $color-secondary-text;
+}
+
+// Classes from Boostrap 3 panels (renamed card) - interim solution
+.card-default {
+  border-color: #ddd;
+  border-radius: 0rem;
+}
+.card-default > .card-heading {
+  color: #333333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+}
+.card-default > .card-heading + .card-collapse > .card-body {
+  border-top-color: #ddd;
+}
+.card-default > .card-heading .badge {
+  color: #f5f5f5;
+  background-color: #333333;
+}
+.card-default > .card-footer + .card-collapse > .card-body {
+  border-bottom-color: #ddd;
+}
diff --git a/app/assets/stylesheets/blocks/_dropdowns.scss b/app/assets/stylesheets/blocks/_dropdowns.scss
index 5459a7182a..0773c504df 100644
--- a/app/assets/stylesheets/blocks/_dropdowns.scss
+++ b/app/assets/stylesheets/blocks/_dropdowns.scss
@@ -40,3 +40,10 @@
 .nav-pills > li > a {
   border-radius: 0px;
 }
+
+/* custom styling for dropdown menus */
+.dropdown-menu {
+  border-radius: 0px;
+  border: 1px solid $color-border-default;
+  // box-shadow: 0px 0px 1px 1px $color-primary-background;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/blocks/_font_awesomes.scss b/app/assets/stylesheets/blocks/_font_awesomes.scss
index ddfc9d197d..57e6fba58f 100644
--- a/app/assets/stylesheets/blocks/_font_awesomes.scss
+++ b/app/assets/stylesheets/blocks/_font_awesomes.scss
@@ -1,6 +1,6 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 // Override FontAwesome icons
 
 /* FONTAWESOME STYLING */
diff --git a/app/assets/stylesheets/blocks/_footers.scss b/app/assets/stylesheets/blocks/_footers.scss
index 768fb83001..8e0b09c949 100644
--- a/app/assets/stylesheets/blocks/_footers.scss
+++ b/app/assets/stylesheets/blocks/_footers.scss
@@ -1,5 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-/* For sticky footer */
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 #footer-navbar {
   margin-bottom: 0px;
   position: absolute;
@@ -8,6 +9,6 @@
   border-radius:0px;
   z-index: 1;
   ul {
-    padding-right: $grid-gutter-width / 2;
+    padding-right: calc($grid-gutter-width / 2);
   }
 }
diff --git a/app/assets/stylesheets/blocks/_forms.scss b/app/assets/stylesheets/blocks/_forms.scss
new file mode 100644
index 0000000000..59dfd49f88
--- /dev/null
+++ b/app/assets/stylesheets/blocks/_forms.scss
@@ -0,0 +1,21 @@
+@use '../variables/colours' as *;
+
+.form-control {
+    border: 0px;
+}
+
+.form-control input, .form-control textarea, .form-control select{
+    border: 2px solid $color-border-light;
+}
+
+.form-check {
+    padding-left: 0rem;
+}
+
+.form-inline{
+    margin-bottom: 5px;
+}
+
+.form-check-label {
+    padding-left: 5px;
+}
diff --git a/app/assets/stylesheets/blocks/_html.scss b/app/assets/stylesheets/blocks/_html.scss
index 226b940dd3..ea5e89299b 100644
--- a/app/assets/stylesheets/blocks/_html.scss
+++ b/app/assets/stylesheets/blocks/_html.scss
@@ -4,6 +4,8 @@
 // blocks.
 
 html {
+  font-size: 0.9rem;
+  font-weight: 300;
   position: relative;
   min-height: 100%;
 }
@@ -11,6 +13,7 @@ html {
 /* For sticky footer */
 main {
   margin-bottom: 100px;
+  margin-top: 30px;
   @media (max-width: 768px) {
     margin-bottom: 420px;
   }
@@ -21,6 +24,15 @@ main {
 
 body{
   padding-bottom: 50px;
+
+  hr {
+    border-top: 1px solid #eeeeee;
+  }
+
+  .row {
+    --bs-gutter-x: 0rem;
+  }
+  
 }
 
 /* footer */
@@ -51,7 +63,7 @@ fieldset {
 
 legend {
   border: none;
-  font-size: 14px;
+  font-size: 14px; 
   font-weight: bold;
   margin-bottom: 5px;
   text-transform: capitalize;
@@ -65,3 +77,20 @@ h1, h2, h3, h4, h5, h6 {
   /* font-family: "GillSansLight"; */
   color: $color-heading-text;
 }
+
+
+.fas:not(.small) {
+  font-size: 1rem;
+}
+
+/** Added as Bootstrap 5.2 has dropped  .text-justify class. 
+So we added this based on comment 
+https://github.com/twbs/bootstrap/pull/29793#issuecomment-1814683346
+*/
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+
+
diff --git a/app/assets/stylesheets/blocks/_index.scss b/app/assets/stylesheets/blocks/_index.scss
index b850d43e6d..35ba43018a 100644
--- a/app/assets/stylesheets/blocks/_index.scss
+++ b/app/assets/stylesheets/blocks/_index.scss
@@ -1,12 +1,15 @@
 @use 'accessibility';
+@use 'accordion';
 @use 'alerts';
 @use 'autocomplete';
 @use 'buttons';
+@use 'cards';
 @use 'clearable_field';
 @use 'datepicker';
 @use 'display';
 @use 'dropdowns';
 @use 'font_awesomes';
+@use 'forms';
 @use 'footers';
 @use 'help_blocks';
 @use 'html';
@@ -23,7 +26,6 @@
 @use 'new_plans_form';
 @use 'new_window_popup';
 @use 'notification_areas';
-@use 'panels';
 @use 'profile_form';
 @use 'progress';
 @use 'project_details';
diff --git a/app/assets/stylesheets/blocks/_input_groups.scss b/app/assets/stylesheets/blocks/_input_groups.scss
index 88f19d1cec..f704bb6d84 100644
--- a/app/assets/stylesheets/blocks/_input_groups.scss
+++ b/app/assets/stylesheets/blocks/_input_groups.scss
@@ -1,5 +1,14 @@
 @use '../variables/colours' as *;
-.input-group-addon {
-  border-radius: 0px;
+.input-group-text {
+  border-radius: 0rem;
   background-color: $color-primary-background;
+  padding: 0.5rem;
+}
+
+.form-control {
+  border-radius: 0rem;
+}
+
+.input-group .form-control {
+  border: 2px solid $color-border-light;
 }
diff --git a/app/assets/stylesheets/blocks/_inverse_dropdowns.scss b/app/assets/stylesheets/blocks/_inverse_dropdowns.scss
index e7f48d5378..f39b41bfdd 100644
--- a/app/assets/stylesheets/blocks/_inverse_dropdowns.scss
+++ b/app/assets/stylesheets/blocks/_inverse_dropdowns.scss
@@ -1,4 +1,5 @@
-@use '../variables/bootstrap' as *;
+ @use '../variables/bootstrap' as *;
+ 
 /* For dark (inverse) navbars */
 .inverse-dropdown {
   background-color: $dropdown-inverse-bg !important;
diff --git a/app/assets/stylesheets/blocks/_labels.scss b/app/assets/stylesheets/blocks/_labels.scss
index 71d6b7fdb5..0830ac244a 100644
--- a/app/assets/stylesheets/blocks/_labels.scss
+++ b/app/assets/stylesheets/blocks/_labels.scss
@@ -1,6 +1,11 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 
 /* label stlying */
+label {
+  font-weight: 700;
+}
+
 .label {
   font-size: 85%;
   border-radius: 0px;
@@ -8,10 +13,14 @@
 
 /* RADIO BUTTONS */
 .radio label {
-  margin-right: $grid-gutter-width / 2;
+  margin-right: calc($grid-gutter-width / 2);
+}
+
+.radio label, .checkbox label {
+  font-weight: 400;
 }
 
 /* Remove mandatory * from check_box_tag in Admin search */
 .form-inline span.red {
-  visibility:hidden;
+  visibility: collapse;
 }
diff --git a/app/assets/stylesheets/blocks/_lists.scss b/app/assets/stylesheets/blocks/_lists.scss
index 1bd84f06b3..50e10d6546 100644
--- a/app/assets/stylesheets/blocks/_lists.scss
+++ b/app/assets/stylesheets/blocks/_lists.scss
@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // Overrides Bootstrap 3.0's lists
 
 /* list-group styling */
@@ -13,6 +15,6 @@
 
 /* LIST STYLING */
 span.sublist {
-  margin-left: $grid-gutter-width / -2;
+  margin-left: calc($grid-gutter-width / -2);
   margin-right: 25px;
 }
diff --git a/app/assets/stylesheets/blocks/_logos.scss b/app/assets/stylesheets/blocks/_logos.scss
index 33baedbbe1..7b9af2f22a 100644
--- a/app/assets/stylesheets/blocks/_logos.scss
+++ b/app/assets/stylesheets/blocks/_logos.scss
@@ -1,12 +1,13 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 
 /* HEADER LOGOS */
 .app-logo {
   height: 50px;
-  padding-right: $grid-gutter-width / 2;
+  padding-right: calc($grid-gutter-width / 2);
 }
 
 .org-logo {
   height: 100px;
-  padding-right: $grid-gutter-width / 2;
+  padding-right: calc($grid-gutter-width / 2);
 }
diff --git a/app/assets/stylesheets/blocks/_modal_dialogs.scss b/app/assets/stylesheets/blocks/_modal_dialogs.scss
index 051f8b8096..de6eeb405d 100644
--- a/app/assets/stylesheets/blocks/_modal_dialogs.scss
+++ b/app/assets/stylesheets/blocks/_modal_dialogs.scss
@@ -1,27 +1,30 @@
 @use '../variables/colours' as *;
 // Overrides Bootstrap 3.0's Modals
 
+.modal{
+  --bs-modal-border-radius: 0rem;
+}
+
 .modal-dialog {
   background-color: $color-secondary-background;
 }
 
+.modal-header > h2 {
+  font-size: 20px;
+}
 
 // Footer (for actions)
-.modal-footer {
-  // right align buttons
-  text-align: right;
-  // Properly space out buttons within modal to fix alignment issues
-  .btn + .btn {
-    margin-left: 5px;
-    // account for input[type="submit"] which gets the bottom margin like all other inputs
-    margin-bottom: 10px;
-  }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
-  // and override it for block buttons as well
-  .btn-block + .btn-block {
-    margin-left: 0;
-  }
-}
+// .modal-footer {
+//   // right align buttons
+//   text-align: right;
+//   // Properly space out buttons within modal to fix alignment issues
+//   .btn + .btn {
+//     margin-left: 5px;
+//     // account for input[type="submit"] which gets the bottom margin like all other inputs
+//     margin-bottom: 10px;
+//   }
+//   // but override that for button groups
+//   .btn-group .btn + .btn {
+//     margin-left: -1px;
+//   }
+// }
diff --git a/app/assets/stylesheets/blocks/_modal_permissions.scss b/app/assets/stylesheets/blocks/_modal_permissions.scss
index 9a5d277be6..c6afcd9b2b 100644
--- a/app/assets/stylesheets/blocks/_modal_permissions.scss
+++ b/app/assets/stylesheets/blocks/_modal_permissions.scss
@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 /* Overrides ul list */
 #modal-permissions ul {
   list-style-type: none;
@@ -12,5 +14,5 @@
 /* Overrides list-group-item */
 #modal-permissions .list-group-item {
   height: 30px;
-  padding: 5px $grid-gutter-width / 2;
+  padding: 5px calc($grid-gutter-width / 2);
 }
diff --git a/app/assets/stylesheets/blocks/_modal_search.scss b/app/assets/stylesheets/blocks/_modal_search.scss
index 5c842c7a23..6b9ebd4eb6 100644
--- a/app/assets/stylesheets/blocks/_modal_search.scss
+++ b/app/assets/stylesheets/blocks/_modal_search.scss
@@ -65,6 +65,7 @@
   border-radius: 25px;
   padding: 2px 5px;
   font-size: 1.3rem;
+  text-decoration: none;
 }
 .modal-search-result .modal-search-result-selector {
   background-color: $color-green;
diff --git a/app/assets/stylesheets/blocks/_navbars.scss b/app/assets/stylesheets/blocks/_navbars.scss
index f8851e6b5c..b79d58ab1c 100644
--- a/app/assets/stylesheets/blocks/_navbars.scss
+++ b/app/assets/stylesheets/blocks/_navbars.scss
@@ -1,5 +1,8 @@
 @use '../variables/bootstrap' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins";
+
 /* For org navbar custom height */
 #org-navbar {
   border-radius: 0px;
@@ -35,11 +38,11 @@
     color: $navbar-org-link-color;
     &:hover,
     &:focus {
-      color: darken($navbar-org-link-hover-color,10%)
+      color: shade-color($navbar-org-link-hover-color,10%)
     }
   }
   #org-navbar .org-links {
-    padding-top: $grid-gutter-width / 2;
+    padding-top: calc($grid-gutter-width / 2);
   }
   #org-navbar .org-a {
     line-height: 36px !important;
@@ -52,7 +55,7 @@
 
 // Branding navbar. This is defined as a clone of .navbar-branding with customizations
 .navbar-branding {
-  @extend .navbar-inverse;
+  @extend .navbar-inverse !optional;
   background-color: $navbar-branding-bg;
   border-color: $navbar-branding-border;
 
@@ -102,7 +105,7 @@
 
   .navbar-collapse,
   .navbar-form {
-    border-color: darken($navbar-branding-bg, 7%);
+    border-color: shade-color($navbar-branding-bg, 7%);
   }
 
   // Dropdowns
@@ -116,7 +119,7 @@
       }
     }
 
-    @media (max-width: $grid-float-breakpoint-max) {
+    @include media-breakpoint-down(lg) {
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {
diff --git a/app/assets/stylesheets/blocks/_navs.scss b/app/assets/stylesheets/blocks/_navs.scss
index 8849b77155..4b34d787a9 100644
--- a/app/assets/stylesheets/blocks/_navs.scss
+++ b/app/assets/stylesheets/blocks/_navs.scss
@@ -19,44 +19,58 @@ nav ul {
 }
 
 
-// Overrides Bootstrap 3.0's nav-tabs
+// Overrides Bootstrap 
 
 /* nav-tabs and nav-pills styling */
+
 .nav-tabs, .nav-pills {
   background-color: $color-primary-background;
   color: $color-primary-text;
-  border-bottom: 0px;
+  border-radius: 0px;
+}
+
+.nav-tabs .nav-item .nav-link, .nav-pills .nav-item .nav-link {
+  border-radius: 0px;
 }
-.nav-tabs > li > a, .nav-pills > li > a {
+
+.nav-link {
   color: $color-primary-text;
+  border-radius: 0px;
 }
-.nav-tabs > li > a:hover,
-.nav-tabs > li > a:focus,
-.nav-tabs > li > a.active,
-.nav-tabs > li > a.active:focus,
-.nav-tabs > li > a.active:hover {
+
+.nav-tabs .nav-link:hover,
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:focus,
+.nav-tabs .nav-link.active:hover {
   background-color: $color-secondary-background;
   color: $color-secondary-text;
   border: 1px solid $color-border-default;
   border-bottom-color: transparent; /* Only nav-tabs have a transparent border-bottom */
 }
-.nav-pills > li > a:hover,
-.nav-pills > li > a:focus,
-.nav-pills > li > a.active,
-.nav-pills > li > a:focus.active,
-.nav-pills > li > a:hover.active {
+
+.nav-pills .nav-link:hover,
+.nav-pills .nav-link:focus,
+.nav-pills .nav-link.active,
+.nav-pills .nav-link:focus.active,
+.nav-pills .nav-link:hover.active {
   background-color: $color-secondary-background;
   color: $color-secondary-text;
   border: 1px solid $color-border-default;
 }
-.nav-pills > li:last-child > a:hover,
-.nav-pills > li:last-child > a:focus,
-.nav-pills > li:last-child > a.active,
-.nav-pills > li:last-child > a.active:focus,
-.nav-pills > li:last-child > a.active:hover {
+
+.nav-pills li:first-child .nav-link:hover,
+.nav-pills li:first-child .nav-link:focus,
+.nav-pills li:first-child .nav-link.active,
+.nav-pills li:first-child .nav-link.active:focus,
+.nav-pills li:first-child .nav-link.active:hover,
+.nav-pills li:last-child .nav-link:hover,
+.nav-pills li:last-child .nav-link:focus,
+.nav-pills li:last-child .nav-link.active,
+.nav-pills li:last-child .nav-link.active:focus,
+.nav-pills li:last-child .nav-link.active:hover {
   border-right: 0px;
+  background-color: $color-secondary-background;
+  color: $color-secondary-text;
 }
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  border-radius: 0px;
-}
+
diff --git a/app/assets/stylesheets/blocks/_new_plans_form.scss b/app/assets/stylesheets/blocks/_new_plans_form.scss
index 34b8928596..f1394be173 100644
--- a/app/assets/stylesheets/blocks/_new_plans_form.scss
+++ b/app/assets/stylesheets/blocks/_new_plans_form.scss
@@ -1,9 +1,11 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // TODO: Refactor this. Instead of writing specific CSS rules for particular objects,
 // we should provide utility classes which can provide the desired style to this object
 #new_plan {
   .create-plan-or {
-    padding: 5px 0 0 $grid-gutter-width / 2;
+    padding: 5px 0 0 calc($grid-gutter-width / 2);
   }
   .create-plan-checkbox {
     margin-left: -40px;
diff --git a/app/assets/stylesheets/blocks/_notification_areas.scss b/app/assets/stylesheets/blocks/_notification_areas.scss
index 5570785be5..1bb63f5629 100644
--- a/app/assets/stylesheets/blocks/_notification_areas.scss
+++ b/app/assets/stylesheets/blocks/_notification_areas.scss
@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins";
 
 .notification-area--floating {
   position: fixed;
@@ -9,7 +11,7 @@
   width: 90vw;
 
   // Non-mobile settings
-  @media (min-width: #{$screen-sm-min}) {
+  @include media-breakpoint-up(sm) {
     right: 4rem;
     width: 300px;
   }
diff --git a/app/assets/stylesheets/blocks/_org_links.scss b/app/assets/stylesheets/blocks/_org_links.scss
index 3ce92c4b23..ca5b7dd02d 100644
--- a/app/assets/stylesheets/blocks/_org_links.scss
+++ b/app/assets/stylesheets/blocks/_org_links.scss
@@ -1,6 +1,6 @@
 // TODO: Refactor this. Instead of writing specific CSS rules for particular objects,
 // we should provide utility classes which can provide the desired style to this object
 .remove-org-link i {
-  margin-left: $grid-gutter-width / -2;
+  margin-left: calc($grid-gutter-width / -2);
   margin-top: $grid-gutter-width;
 }
diff --git a/app/assets/stylesheets/blocks/_panels.scss b/app/assets/stylesheets/blocks/_panels.scss
deleted file mode 100644
index ca7197aa96..0000000000
--- a/app/assets/stylesheets/blocks/_panels.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-// Override Bootstrap 3.0's Panels
-
-.panel-default {
-  border-color: $color-border-default;
-}
-.heading-button > .panel-heading, .panel-default > .panel-heading {
-  background-color: $color-primary-background;
-  color: $color-primary-text;
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-}
-
-.empty-section {
-  background-color: $color-muted-background !important;
-  cursor: 'auto' !important;
-}
-
-.panel-title a {
-  display: block;
-  padding: 8px $grid-gutter-width / 2;
-  margin: -10px $grid-gutter-width / -2;
-  background-color: $color-primary-background;
-  color: $color-primary-text;
-}
-.panel-title > a.reverse {
-  background-color: $color-secondary-background;
-  color: $color-secondary-text;
-}
diff --git a/app/assets/stylesheets/blocks/_profile_form.scss b/app/assets/stylesheets/blocks/_profile_form.scss
index 19a26e017f..2883d74994 100644
--- a/app/assets/stylesheets/blocks/_profile_form.scss
+++ b/app/assets/stylesheets/blocks/_profile_form.scss
@@ -1,9 +1,11 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // TODO: Refactor this. Instead of writing specific CSS rules for particular objects,
 // we should provide utility classes which can provide the desired style to this object
 .org-logo-controls {
   display: inline-block;
-  margin-left: $grid-gutter-width / 2;
+  margin-left: calc($grid-gutter-width / 2);
   input { display: inline-block; }
   strong { margin: 0 10px; }
 }
diff --git a/app/assets/stylesheets/blocks/_spinner.scss b/app/assets/stylesheets/blocks/_spinner.scss
index a812084c90..6897b2ac1e 100644
--- a/app/assets/stylesheets/blocks/_spinner.scss
+++ b/app/assets/stylesheets/blocks/_spinner.scss
@@ -1,10 +1,9 @@
+
 .spinner-border {
-  position: fixed;
-  top: 48%;
-  left: 43%;
+  animation: spinner-border 1.5s linear infinite !important;
+  position: fixed !important;
+  top: 48% !important;
+  left: 43%  !important;
+  width: 2rem !important;
+  height: 2rem !important;
 }
-
-.spinner-border img {
-  height: 80px;
-  width: 80px;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/blocks/_tables.scss b/app/assets/stylesheets/blocks/_tables.scss
index 32e3a2038c..bc8f91dd1b 100644
--- a/app/assets/stylesheets/blocks/_tables.scss
+++ b/app/assets/stylesheets/blocks/_tables.scss
@@ -1,11 +1,21 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // This file contains overrides to the core Bootstrap 3.x styling
-.table { border: 1px solid $color-border-default; }
-.table thead > tr > th { border-bottom: none; }
-.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid $color-border-default; }
+.table { 
+  border: 1px solid $color-border-default;   
+}
+
+.table thead > tr > th { 
+  border-bottom: none;
+ }
+
+.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { 
+  border: 1px solid $color-border-default; 
+}
 
-thead th {
+.table thead th {
   background-color: $color-border-default;
   color: $color-primary-text;
 }
@@ -16,7 +26,7 @@ thead th.table-scope {
 
   a {
     color: $color-secondary-text;
-    padding: 2px ($grid-gutter-width / 2) 2px 2px;
+    padding: 2px calc($grid-gutter-width / 2) 2px 2px;
   }
 }
 
@@ -35,7 +45,7 @@ th.download-column {
 /* Fix issues with dropdwon within tables being cut off */
 .table-responsive > .table {
   width: 100%;
-  margin-bottom: $grid-gutter-width / 2;
+  margin-bottom: calc($grid-gutter-width / 2);
   overflow: auto;
 }
 
diff --git a/app/assets/stylesheets/blocks/_template_filters.scss b/app/assets/stylesheets/blocks/_template_filters.scss
index ed78964bba..1d20649327 100644
--- a/app/assets/stylesheets/blocks/_template_filters.scss
+++ b/app/assets/stylesheets/blocks/_template_filters.scss
@@ -1,6 +1,8 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 .template-table-filters .navbar-nav > li > a {
   color: $color-secondary-text;
-  padding: 5px ($grid-gutter-width / 2) 5px 5px;
+  padding: 5px calc($grid-gutter-width / 2) 5px 5px;
 }
diff --git a/app/assets/stylesheets/utils/_functions.scss b/app/assets/stylesheets/utils/_functions.scss
new file mode 100644
index 0000000000..50d6bbb27c
--- /dev/null
+++ b/app/assets/stylesheets/utils/_functions.scss
@@ -0,0 +1,9 @@
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
diff --git a/app/assets/stylesheets/utils/_index.scss b/app/assets/stylesheets/utils/_index.scss
index b323b19921..ec7573c8c0 100644
--- a/app/assets/stylesheets/utils/_index.scss
+++ b/app/assets/stylesheets/utils/_index.scss
@@ -5,3 +5,4 @@
 @use 'font_size';
 @use 'icons';
 @use 'margins';
+@use 'functions';
diff --git a/app/assets/stylesheets/variables/_bootstrap.scss b/app/assets/stylesheets/variables/_bootstrap.scss
index d8fbbb4a4b..29ac8f9524 100644
--- a/app/assets/stylesheets/variables/_bootstrap.scss
+++ b/app/assets/stylesheets/variables/_bootstrap.scss
@@ -10,23 +10,19 @@
 // NOTE: We need to stick to the !default format below, to ensure variables can be set in
 // other files for individual deployments.
 
-// Forms
-$input-border-radius: 0px !default;
-
-
-// Navbar
-$navbar-border-radius: 0px !default;
 
 // Buttons
-$btn-border-radius-base: 0px !default;
+$btn-border-radius-base: 0rem !default;
 
 $btn-primary-color: $color-primary-text !default;
 
-$btn-default-color: $color-primary-text !default;
+$btn-secondary-color: $color-primary-text !default;
 
 // Panels
-$panel-border-radius: 0px !default;
+$panel-border-radius: 0rem !default;
 
+// Links
+$link-decoration: none !default;
 
 // from colors:
 
diff --git a/app/assets/stylesheets/variables/_colours.scss b/app/assets/stylesheets/variables/_colours.scss
index 041d394803..6219d2aebb 100644
--- a/app/assets/stylesheets/variables/_colours.scss
+++ b/app/assets/stylesheets/variables/_colours.scss
@@ -25,11 +25,12 @@ $color-primary-background: $color-grey;
 $color-secondary-background: $color-white;
 $color-muted-background: $color-muted;
 $color-navbar-background: $color-grey-darkest;
-$color-navbar-background-active: darken($color-navbar-background, 10%) ;
+$color-navbar-background-active: shade-color($color-navbar-background, 10%) ;
 $color-footer-background: $color-navbar-background;
 $color-tooltip-background: $color-primary-background;
 $color-icon-bar-background: $color-white;
 
+
 // Text
 $color-primary-text: $color-white;
 $color-secondary-text: $color-grey;
@@ -38,7 +39,7 @@ $color-navbar-text: $color-grey-light;
 $color-navbar-text-hover: $color-white;
 $color-navbar-text-disabled: $color-grey-darker;
 $color-link-text: $color-blue-alice-darkest;
-$color-navbar-link-text: lighten($color-navbar-text, 15%);
+$color-navbar-link-text: tint-color($color-navbar-text, 15%);
 $color-org-navbar-links: $color-grey-light;
 $color-org-navbar-links-hover: $color-grey-darker;
 $color-dropdown-inverse-text: $color-grey-lighter;
@@ -54,7 +55,7 @@ $color-text-black: $color-black;
 $color-border-default: $color-grey;
 $color-border-light: #ddd;
 $color-dropdown-inverse-border: #080808;
-$color-navbar-border: darken($color-navbar-background, 10%);
+$color-navbar-border: shade-color($color-navbar-background, 10%);
 
 // Shadow colors
 $color-shadow-dark: $color-black;
@@ -64,3 +65,11 @@ $color-fa: $color-grey;
 
 // Focus colors
 $color-focus-outline: $color-blue-alice-darkest;
+
+// Accordion colors
+$color-accordion-button: $color-primary-text;
+$color-accordion-button-icon: $color-primary-text;
+$color-accordion-button-bg: $color-primary-background;
+$color-accordion-button-active-bg:  shade-color($color-accordion-button-bg, 30%);
+
+
diff --git a/app/helpers/customizable_template_link_helper.rb b/app/helpers/customizable_template_link_helper.rb
index f0cb62dfd8..524f007e98 100644
--- a/app/helpers/customizable_template_link_helper.rb
+++ b/app/helpers/customizable_template_link_helper.rb
@@ -5,24 +5,28 @@ module CustomizableTemplateLinkHelper
   # Link to the appropriate customizable template.
   # Default link name set if name not set which can be overwritten.
   # rubocop:disable Metrics/AbcSize, Metrics/PerceivedComplexity
-  def link_to_customizable_template(name, customization, template)
+  def link_to_customizable_template(name, customization, template, dropdown=true)
     name = nil unless name.present?
+    link_css =  dropdown ? 'dropdown-item px-3' : 'px-3'
+
+    if customization.present? 
 
-    if customization.present?
       if customization.created_at < template.created_at
         name = name.blank? ? _('Transfer customisation') : name
         link_to name,
                 org_admin_template_customization_transfers_path(customization.id),
-                data: { method: 'post' }
+                data: { method: 'post' },
+                class: link_css
       else
         name = name.blank? ? _('Edit customisation') : name
-        link_to name, org_admin_template_path(id: customization.id)
+        link_to name, org_admin_template_path(id: customization.id), class: link_css
       end
     else
       name = name.blank? ? _('Customise') : name
       link_to name,
               org_admin_template_customizations_path(template.id),
-              'data-method': 'post'
+              'data-method': 'post',
+              class: link_css
     end
   end
   # rubocop:enable Metrics/AbcSize, Metrics/PerceivedComplexity
diff --git a/app/javascript/application.js b/app/javascript/application.js
index dff19b9c41..ccad6aa6a5 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -12,7 +12,6 @@ import 'regenerator-runtime/runtime';
 
 // Pull in Bootstrap JS functionality
 import 'bootstrap';
-import 'bootstrap-3-typeahead';
 import 'bootstrap-select';
 
 // Uncomment to copy all static images under ../images to the output folder and reference
@@ -29,10 +28,8 @@ import './src/utils/modalSearch';
 import './src/utils/outOfFocus';
 import './src/utils/paginable';
 import './src/utils/panelHeading';
-import './src/utils/popoverHelper';
 import './src/utils/requiredField';
 import './src/utils/tabHelper';
-import './src/utils/tooltipHelper';
 
 // Specific functions from the Utilities files that will be made available to
 // the js.erb templates in the `window.x` statements below
diff --git a/app/javascript/src/orgAdmin/conditions/updateConditions.js b/app/javascript/src/orgAdmin/conditions/updateConditions.js
index 17b9194f6a..2e65989cfb 100644
--- a/app/javascript/src/orgAdmin/conditions/updateConditions.js
+++ b/app/javascript/src/orgAdmin/conditions/updateConditions.js
@@ -10,22 +10,26 @@ export default function updateConditions(id) {
   // display conditions already saved
   if (addLogicButton.length > 0) {
     if (addLogicButton.attr('data-loaded').toString() === 'true') {
-      addLogicButton.trigger('click');
+      // Get the native Dom element from the Jquery button element.
+      // We are getting native DOM element by applying get() from the Jquery element (cf., https://api.jquery.com/get/).
+      addLogicButton.get(0).click();
     }
   }
-
-  // set up selectpicker select boxes for condition options
+  // set up form-select select boxes for condition options
   const setSelectPicker = () => {
-    $('.selectpicker.narrow').selectpicker({ width: 120 });
-    $('.selectpicker.regular').selectpicker({ width: 150 });
+    // $('.form-select.narrow').selectpicker({ width: 120 });
+    // $('.form-select.regular').selectpicker({ width: 150 });
   };
 
   // test if a webhook is selected and set up if so
   const allowWebhook = (selectObject, webhook = false) => { // webhook false => new condition
     const condition = $(selectObject).closest('.condition-partial');
+
     if (webhook === false) {
       if ($(selectObject).val() === 'add_webhook') { // condition type is webhook
-        condition.find('.pseudo-webhook-btn').trigger('click');
+        // Retreive 'data-bs-target' for modal and create Jquery element
+        const associatedModal = $(condition.find('.pseudo-webhook-btn').attr('data-bs-target'));
+        associatedModal.modal('show');
       } else { // condition type is remove
         condition.find('.remove-dropdown').show();
         condition.find('.webhook-replacement').hide();
@@ -57,9 +61,11 @@ export default function updateConditions(id) {
       // display edit email section
       condition.find('.remove-dropdown').hide();
       condition.find('.webhook-replacement').show();
-      condition.find('.webhook-replacement').on('click', (event) => {
+      $(condition.find('.webhook-replacement')).on('click', (event) => {
         event.preventDefault();
-        condition.find('.pseudo-webhook-btn').trigger('click');
+        // Retreive 'data-bs-target' for modal and create Jquery element
+        const associatedModal1 = $(condition.find('.pseudo-webhook-btn').attr('data-bs-target'));
+        associatedModal1.modal('show');
       });
     }
   };
@@ -78,7 +84,7 @@ export default function updateConditions(id) {
   // webhook form
   const webhookForm = (webhooks = false, selectObject = false) => {
     if (selectObject === false) {
-      $('.selectpicker.action-type').each((idx, selectObject2) => {
+      $('.form-select.action-type').each((idx, selectObject2) => {
         webhookSelected(selectObject2, webhooks[idx]);
       });
     } else {
@@ -109,7 +115,7 @@ export default function updateConditions(id) {
       addDiv.html(e.detail[0].add_link);
       conditionList.attr('data-loaded', 'false');
       setSelectPicker();
-      const selectObject = conditionList.find('.selectpicker.action-type').last();
+      const selectObject = conditionList.find('.form-select.action-type').last();
       webhookForm(undefined, selectObject);
     }
   });
diff --git a/app/javascript/src/orgAdmin/phases/newEdit.js b/app/javascript/src/orgAdmin/phases/newEdit.js
index 7904ed124b..1872452104 100644
--- a/app/javascript/src/orgAdmin/phases/newEdit.js
+++ b/app/javascript/src/orgAdmin/phases/newEdit.js
@@ -1,5 +1,5 @@
 // import 'bootstrap-sass/assets/javascripts/bootstrap/collapse';
-import { Tinymce } from '../../utils/tinymce.js';
+import { Tinymce } from '../../utils/tinymce';
 import { isObject, isString } from '../../utils/isType';
 import getConstant from '../../utils/constants';
 import { addAsterisks } from '../../utils/requiredField';
@@ -46,14 +46,14 @@ $(() => {
   });
 
   const getQuestionPanel = (target) => {
-    let panelBody;
+    let cardBody;
     if (isObject(target)) {
-      panelBody = target.closest('.question_container');
-      if (!isObject(panelBody) || !isString(panelBody.attr('id'))) {
-        panelBody = target.closest('.panel-body').find('.new-question');
+      cardBody = target.closest('.question_container');
+      if (!isObject(cardBody) || !isString(cardBody.attr('id'))) {
+        cardBody = target.closest('.card-body').find('.new-question');
       }
     }
-    return panelBody;
+    return cardBody;
   };
   const initSection = (selector) => {
     if (isString(selector)) {
@@ -61,7 +61,7 @@ $(() => {
       // For some reason the toolbar options are retained after the call to Tinymce.init() on
       // the views/notifications/edit.js file. Tried 'Object.assign' instead of '$.extend' but it
       // made no difference
-      const prefix = 'collapseSection'
+      const prefix = 'collapseSection';
       let sectionId = selector;
       if (sectionId.startsWith(prefix)) {
         sectionId = `sc_${sectionId.replace(prefix, '')}_section_description`
@@ -90,69 +90,69 @@ $(() => {
 
   // Attach handlers for the Section expansion
   $(parentSelector).on('ajax:before', 'a.ajaxified-section[data-remote="true"]', (e) => {
-    const panelBody = $(e.target).parent().find('.panel-body');
-    return panelBody.attr('data-loaded') === 'false';
+    const accordionBody = $(e.target).parents('.accordion-item').find('.accordion-collapse').find('.accordion-body');
+    return accordionBody.attr('data-loaded') === 'false';
   });
 
   $(parentSelector).on('ajax:success', 'a.ajaxified-section[data-remote="true"]', (e) => {
-    const panelBody = $(e.target).parent().find('.panel-body');
-    const panel = panelBody.parent();
-    if (isObject(panelBody)) {
+    const accordionBody = $(e.target).parents('.accordion-item').find('.accordion-collapse').find('.accordion-body');
+    const accordionCollapse = accordionBody.parents('.accordion-collapse');
+    if (isObject(accordionBody)) {
       // Display the section's html
-      panelBody.attr('data-loaded', 'true');
-      panelBody.html(e.detail[0].html);
+      accordionBody.attr('data-loaded', 'true');
+      accordionBody.append(e.detail[0].html);
 
       // Wire up the section
-      initSection(`${panel.attr('id')}`);
+      initSection(`${accordionCollapse.attr('id')}`);
     }
   });
 
   // Attach handlers for the Question show/edit/new
   $(parentSelector).on('ajax:before', 'a.ajaxified-question[data-remote="true"]', (e) => {
-    const panelBody = getQuestionPanel($(e.target));
-    if (isObject(panelBody)) {
+    const cardBody = getQuestionPanel($(e.target));
+    if (isObject(cardBody)) {
       // Release any Tinymce editors that have been loaded
-      panelBody.find('.question').each((idx, el) => {
+      cardBody.find('.question').each((idx, el) => {
         Tinymce.destroyEditorById($(el).attr('id'));
       });
     }
   });
   $(parentSelector).on('ajax:success', 'a.ajaxified-question[data-remote="true"]', (e) => {
     const target = $(e.target);
-    const panelBody = getQuestionPanel(target);
-    if (isObject(panelBody)) {
-      const id = panelBody.attr('id');
+    const cardBody = getQuestionPanel(target);
+    if (isObject(cardBody)) {
+      const id = cardBody.attr('id');
       // Display the section's html
-      panelBody.html(e.detail[0].html);
+      cardBody.html(e.detail[0].html);
       initQuestion(id);
       updateConditions(id);
-      if (panelBody.is('.new-question')) {
+      if (cardBody.is('.new-question')) {
         target.hide();
       }
     }
   });
   $(parentSelector).on('ajax:error', 'a.ajaxified-question[data-remote="true"]', (e) => {
-    const panelBody = getQuestionPanel($(e.target));
-    if (isObject(panelBody)) {
-      panelBody.html(`<div class="pull-right alert alert-warning" role="alert">${getConstant('AJAX_UNABLE_TO_LOAD_TEMPLATE_SECTION')}</div>`);
+    const cardBody = getQuestionPanel($(e.target));
+    if (isObject(cardBody)) {
+      cardBody.html(`<div class="float-end alert alert-warning" role="alert">${getConstant('AJAX_UNABLE_TO_LOAD_TEMPLATE_SECTION')}</div>`);
     }
   });
   // When we cancel the new question we just remove the form and its Tinymce editors
   $(parentSelector).on('click', '.cancel-new-question', (e) => {
     e.preventDefault();
     const target = $(e.target);
-    const panel = target.closest('.question_container');
-    panel.find('.question').each((idx, el) => {
+    const card = target.closest('.question_container');
+    card.find('.question').each((idx, el) => {
       Tinymce.destroyEditorById($(el).attr('id'));
     });
-    panel.html('');
-    panel.closest('.panel-body').find('.new-question-button a.ajaxified-question[data-remote="true"]').show();
+    card.html('');
+    card.closest('.card-body').find('.new-question-button a.ajaxified-question[data-remote="true"]').show();
   });
 
   // Handle the section that has focus on initial page load
-  const currentSection = $('.section-group .in');
-  if (currentSection.length > 0) {
-    initSection(`${currentSection.attr('id')}`);
+  const currentUpdatedSection = $('.accordion-collapse.collapse.show');
+  if (currentUpdatedSection.length > 0) {
+    initSection(`${currentUpdatedSection.attr('id')}`);
   }
   // Handle the new section
   // initSection('#new_section_section_description');
diff --git a/app/javascript/src/orgAdmin/phases/show.js b/app/javascript/src/orgAdmin/phases/show.js
index f7f7f96095..57af3b2634 100644
--- a/app/javascript/src/orgAdmin/phases/show.js
+++ b/app/javascript/src/orgAdmin/phases/show.js
@@ -29,7 +29,7 @@ $(() => {
   // Initialize the draggable-sections element as a jQuery sortable.
   // Read the docs here for more info: http://api.jqueryui.com/sortable/
   $('.draggable-sections').sortable({
-    handle: 'i.fa-up-down-left-right',
+    handle: 'i.fa-arrows-alt',
     axis: 'y',
     cursor: 'move',
     // Remove the placeholder object from the DOM once the item has been placed
diff --git a/app/javascript/src/researchOutputs/form.js b/app/javascript/src/researchOutputs/form.js
index c3df1eb317..c57035f3c6 100644
--- a/app/javascript/src/researchOutputs/form.js
+++ b/app/javascript/src/researchOutputs/form.js
@@ -18,11 +18,11 @@ $(() => {
       const info = $(link).siblings('div.info');
 
       if (info.length > 0) {
-        if (info.hasClass('hidden')) {
-          info.removeClass('hidden');
+        if (info.hasClass('d-none')) {
+          info.removeClass('d-none');
           link.text(`${getConstant('LESS_INFO')}`);
         } else {
-          info.addClass('hidden');
+          info.addClass('d-none');
           link.text(`${getConstant('MORE_INFO')}`);
         }
       }
diff --git a/app/javascript/src/utils/accordion.js b/app/javascript/src/utils/accordion.js
index 253893bbd9..fdb7da12d1 100644
--- a/app/javascript/src/utils/accordion.js
+++ b/app/javascript/src/utils/accordion.js
@@ -9,53 +9,138 @@
  *      <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
  *    </div>
  *
- * Your accordion should follow the Boostrap 3.x layout:
+ * Your accordion should follow the Boostrap 5.x layout:
  * ------------------------------------------------------------
- *    <div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
- *      <div class="panel panel-default">
- *        <div class="panel-heading" role="tab" id="headingA">
- *          <h2 class="panel-title">
- *            <a role="button" data-toggle="collapse" data-parent="accordion"
- *                   href="#collapseA" aria-controls="collapseA" aria-expanded="false">
- *              Section A
- *            </a>
- *          </h2>
+n*
+ *  <div class="accordion" id="accordionDefault">
+ *
+ *    <div class="accordion-item">
+ *      <h2 class="accordion-header" id="headingDefaultOne">
+ *        <button
+ *          class="accordion-button"
+ *          type="button"
+ *          data-bs-toggle="collapse"
+ *          data-bs-target="#collapseDefaultOne"
+ *          aria-expanded="false"
+ *          aria-controls="collapseDefaultOne"
+ *        >
+ *          Accordion Item #1
+ *        </button>
+ *      </h2>
+ *
+ *      <div
+ *        id="collapseDefaultOne"
+ *        class="accordion-collapse collapse show"
+ *        aria-labelledby="headingDefaultOne"
+ *        data-bs-parent="#accordionDefault"
+ *      >
+ *        <div class="accordion-body">
+ *          Accordion Body #1
+ *        </div>
+ *      </div>
+ *
+ *    </div>
+ *
+ *    <div class="accordion-item">
+ *      <h2 class="accordion-header" id="headingDefaultTwo">
+ *        <button
+ *          class="accordion-button collapsed"
+ *          type="button"
+ *          data-bs-toggle="collapse"
+ *          data-bs-target="#collapseDefaultTwo"
+ *          aria-expanded="false"
+ *          aria-controls="collapseDefaultTwo"
+ *        >
+ *          Accordion Item #2
+ *        </button>
+ *      </h2>
+ *
+ *      <div
+ *        id="collapseDefaultTwo"
+ *        class="accordion-collapse collapse"
+ *        aria-labelledby="headingDefaultTwo"
+ *        data-bs-parent="#accordionDefault"
+ *      >
+ *        <div class="accordion-body">
+ *          Accordion Body #2
  *        </div>
- *        <div id="collapseA" class="panel-collapse collapse" role="tabpanel"
- *          aria-labelledby="headingA">
- *          <div class="panel-body">
- *            This is test section A.
- *          </div>
+ *      </div>
+ *
+ *    </div>
+ *
+ *    <div class="accordion-item">
+ *      <h2 class="accordion-header" id="headingDefaultThree">
+ *        <button
+ *          class="accordion-button collapsed"
+ *          type="button"
+ *          data-bs-toggle="collapse"
+ *          data-bs-target="#collapseDefaultThree"
+ *          aria-expanded="false"
+ *          aria-controls="collapseDefaultThree"
+ *        >
+ *          Accordion Item #3
+ *        </button>
+ *      </h2>
+ *
+ *      <div
+ *        id="collapseDefaultThree"
+ *        class="accordion-collapse collapse"
+ *        aria-labelledby="headingDefaultThree"
+ *        data-bs-parent="#accordionDefault"
+ *      >
+ *        <div class="accordion-body">
+ *          Accordion Body #3
  *        </div>
  *      </div>
+ *
  *    </div>
+ *
+ *  </div>
+ *
  */
-$(() => {
-  $('body').on('click', '.accordion-controls a', (e) => {
-    e.preventDefault();
-    const currentTarget = $(e.currentTarget);
-    const target = $(e.target);
-    const direction = target.attr('data-toggle-direction');
-    const parentTargetName = currentTarget.parent().attr('data-parent');
-    if (direction) {
-      // Selects all .panel elements where the parent is currentTarget.attr('data-parent') and
-      // after gets the immediately children whose class selector is panel-collapse
-      const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
-      $(parentTarget).find('.panel').find('.panel-collapse').each((i, el) => {
-        const panelCollapse = $(el);
-        // Expands or collapses the panel according to the
-        // direction passed (e.g. show --> expands, hide --> collapses)
-        if (direction === 'show') {
-          if (!panelCollapse.find('.panel-body').attr('data-loaded') || !panelCollapse.hasClass('in')) {
-            panelCollapse.prev()[0].click();
-          }
-        } else {
-          panelCollapse.collapse(direction);
+
+$(() => $('body').on('click', '.accordion-controls a[data-toggle-direction]', (e) => {
+  e.preventDefault();
+  const currentTarget = $(e.currentTarget);
+  const target = $(e.target);
+  const direction = target.attr('data-toggle-direction');
+  const parentTargetName = currentTarget.parent().attr('data-parent');
+
+  if (direction) {
+    // Selects all .accordion-item elements where the parent is
+    // currentTarget.attr('data-parent') and
+    // after gets the immediate children whose class selector is accordion-item
+    const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
+    parentTarget.children('.accordion-item').each((i, el) => {
+      // We use $() to get Jquery HTML element from native Dom element
+      const accordionItem = $(el);
+      // Not these are Jquery HTML elements, again using $()
+      const accordionHeader = $(accordionItem.children('.accordion-header').get(0));
+      const accordionButton = $(accordionHeader.children('.accordion-button').get(0));
+      const accordionCollapse = $(accordionItem.children('.accordion-collapse').get(0));
+      // Expands or collapses according to the
+      // direction passed (e.g. show --> expands, hide --> collapses)
+      if (direction === 'show') {
+        // To check if element with class .accordion-body has attribute data-loaded
+        // we use the native Dom element so we can use hasAttribute()
+        // and getAttribute() methods.
+        const accordionBodyNativeDomEl = accordionCollapse.children('.accordion-body').get(0);
+        if (accordionBodyNativeDomEl.hasAttribute('data-loaded')
+          && accordionBodyNativeDomEl.getAttribute('data-loaded') === 'false') {
+          // We need the native om element of the button to
+          // to trigger click as the jquery trigger('click')
+          // does not work for rails-ujs
+          const accordionButtonNativeDomEl = accordionHeader.children('.accordion-button').get(0);
+          accordionButtonNativeDomEl.click();
         }
-        // Sets icon at panel-title accordingly
-        panelCollapse.prev().find('i.fa')
-          .removeClass('fa-plus fa-minus').addClass(direction === 'show' ? 'fa-minus' : 'fa-plus');
-      });
-    }
-  });
-});
+        accordionButton.removeClass('collapsed');
+        accordionCollapse.addClass('show');
+      }
+
+      if (direction === 'hide') {
+        accordionButton.addClass('collapsed');
+        accordionCollapse.removeClass('show');
+      }
+    });
+  }
+}));
diff --git a/app/javascript/src/utils/popoverHelper.js b/app/javascript/src/utils/popoverHelper.js
deleted file mode 100644
index 68770bb450..0000000000
--- a/app/javascript/src/utils/popoverHelper.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'bootstrap/js/popover';
-
-$(() => {
-  $('[data-toggle="popover"]').popover({
-    animated: 'fade',
-    placement: 'right',
-  });
-});
diff --git a/app/javascript/src/utils/requiredField.js b/app/javascript/src/utils/requiredField.js
index 6bb826a509..6b4995e65a 100644
--- a/app/javascript/src/utils/requiredField.js
+++ b/app/javascript/src/utils/requiredField.js
@@ -17,7 +17,7 @@ export const addAsterisk = (el) => {
 
     // Else place the asterisk before the corresponding label
     } else {
-      const label = target.closest('.form-group').find('label');
+      const label = target.prev();
       if (isObject(label)) {
         $(label[0]).before(asterisk);
       }
diff --git a/app/javascript/src/utils/sectionUpdate.js b/app/javascript/src/utils/sectionUpdate.js
index d31ce3331a..a6bec9c0df 100644
--- a/app/javascript/src/utils/sectionUpdate.js
+++ b/app/javascript/src/utils/sectionUpdate.js
@@ -2,19 +2,24 @@
 export const updateSectionProgress = (id, numSecAnswers, numSecQuestions) => {
   const progressDiv = $(`#section-panel-${id}`).find('.section-status');
   progressDiv.html(`(${numSecAnswers} /  ${numSecQuestions})`);
-  const heading = progressDiv.closest('.panel-heading');
+
+  /**
+   // THIS CODE MAY BE OBSOLETE.
+   // RETAINING IT TILL SURE.
+  const heading = progressDiv.closest('.card-heading');
   if (numSecQuestions === 0) { // disable section if empty
     if (heading.parent().attr('aria-expanded') === 'true') {
       heading.parent().trigger('click');
     }
     heading.addClass('empty-section');
-    heading.closest('.panel').find(`#collapse-${id}`).hide();
-    heading.closest('.panel').find('i.fa-plus, i.fa-minus').removeClass('fa-plus').removeClass('fa-minus');
+    heading.closest('.card').find(`#collapse-${id}`).hide();
+    heading.closest('.card').find('i.fa-plus, i.fa-minus').removeClass('fa-plus').removeClass('fa-minus');
   } else if (heading.hasClass('empty-section')) { // enable section if questions re-added
     heading.removeClass('empty-section');
-    heading.closest('.panel').find('i[aria-hidden="true"]').addClass('fa-plus');
-    heading.closest('.panel').find(`#collapse-${id}`).css('display', '');
+    heading.closest('.card').find('i[aria-hidden="true"]').addClass('fa-plus');
+    heading.closest('.card').find(`#collapse-${id}`).css('display', '');
   }
+  */
 };
 
 // given a question id find the containing div
diff --git a/app/javascript/src/utils/spinner.js b/app/javascript/src/utils/spinner.js
index 9298e9f009..6102b10c76 100644
--- a/app/javascript/src/utils/spinner.js
+++ b/app/javascript/src/utils/spinner.js
@@ -5,9 +5,9 @@ const toggleSpinner = (visible) => {
 
   if (spinnerBlock.length > 0) {
     if (visible) {
-      spinnerBlock.removeClass('hidden');
+      spinnerBlock.removeClass('d-none');
     } else {
-      spinnerBlock.addClass('hidden');
+      spinnerBlock.addClass('d-none');
     }
   }
 };
diff --git a/app/javascript/src/utils/tinymce.js b/app/javascript/src/utils/tinymce.js
index 3c7eb73c47..de778da215 100644
--- a/app/javascript/src/utils/tinymce.js
+++ b/app/javascript/src/utils/tinymce.js
@@ -16,6 +16,7 @@ import 'tinymce/plugins/lists';
 import 'tinymce/plugins/autoresize';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/autolink';
 
 // Other dependencies
 import { isObject, isString, isUndefined } from './isType';
@@ -27,7 +28,7 @@ export const defaultOptions = {
   statusbar: true,
   menubar: false,
   toolbar: 'bold italic | bullist numlist | link | table',
-  plugins: 'table autoresize link advlist lists',
+  plugins: 'table autoresize link advlist lists autolink',
   browser_spellcheck: true,
   advlist_bullet_styles: 'circle,disc,square', // Only disc bullets display on htmltoword
   target_list: false,
@@ -37,7 +38,7 @@ export const defaultOptions = {
   autoresize_bottom_margin: 10,
   branding: false,
   extended_valid_elements: 'iframe[tooltip] , a[href|target=_blank]',
-  paste_as_text: true,
+  paste_as_text: false,
   paste_block_drop: true,
   paste_merge_formats: true,
   paste_tab_spaces: 4,
diff --git a/app/javascript/src/utils/tooltipHelper.js b/app/javascript/src/utils/tooltipHelper.js
index f67edd2192..cfcfae0a08 100644
--- a/app/javascript/src/utils/tooltipHelper.js
+++ b/app/javascript/src/utils/tooltipHelper.js
@@ -1,8 +1,6 @@
-import 'bootstrap/js/tooltip';
-
 $(() => {
   // When using a tooltip on a tinymce textarea, add the HTML attributes for the tooltips to
-  // the parent `<div class="form-group">`. TODO: this does not work on focus though since tinymce
+  // the parent `<div class="form-control">`. TODO: this does not work on focus though since tinymce
   // uses an iframe and we can't detect when the editor window gains focus. It only works on hover.
   //
   // If the content of the tooltip contains HTML, then add `data-html="true"` to the element
diff --git a/app/views/answers/_new_edit.html.erb b/app/views/answers/_new_edit.html.erb
index f3804a2e68..24e47f10cc 100644
--- a/app/views/answers/_new_edit.html.erb
+++ b/app/views/answers/_new_edit.html.erb
@@ -65,17 +65,17 @@
     <% elsif question.question_format.date? %>
         <%= render(partial: 'questions/new_edit_question_datefield', locals: { f: f, question: question, answer: answer, locking: locking, readonly: readonly }) %>
     <% end %>
-    <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+    <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
   </fieldset>
   <!--Example Answer area -->
   <% if template.present? && template.org.present? %>
     <% question.example_answers([base_template_org.id, template.org.id]).each do |annotation| %>
       <% if annotation.present? && annotation.org.present? && annotation.text.present? %>
-        <div class="panel panel-default">
-          <span class="label label-default">
+        <div class="card card-default">
+          <span class="badge bg-secondary">
             <%="#{annotation.org.abbreviation} "%><%=_('example answer')%>
           </span>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="display-readonly-textarea-content"><%= sanitize annotation.text %></div>
           </div>
         </div>
diff --git a/app/views/answers/_status.html.erb b/app/views/answers/_status.html.erb
index 9d25e9ef83..cb1994395f 100644
--- a/app/views/answers/_status.html.erb
+++ b/app/views/answers/_status.html.erb
@@ -6,14 +6,14 @@
   helpdesk_email = Rails.configuration.x.organisation.helpdesk_email
   email_subject = _('Plan writing error related to %{tool_name}') %{ :tool_name => tool_name }
 %>
-<span class="label label-warning status" style="display:none;" data-status="saving">
+<span class="badge bg-warning text-dark status" style="display:none;" data-status="saving">
   <%= _("Saving...Please do not refresh or go to another page!") %>
   <br><br>
   <%= sanitize(_("If you stuck on this message, please save your plan to a separate file and contact us at %{helpdesk_email} .") % {
       helpdesk_email: mail_to(helpdesk_email, helpdesk_email,subject: email_subject)
     }) %>
 </span>
-<span class="label label-danger status" style="display: none;" data-status="error-saving">
+<span class="badge bg-danger status" style="display: none;" data-status="error-saving">
 <%= sanitize(_("Sorry, we had trouble saving your data. Please contact us at %{helpdesk_email} .") % {
       helpdesk_email: mail_to(helpdesk_email, helpdesk_email,subject: email_subject)
     }) %>
@@ -21,19 +21,19 @@
 <%= _("Save your plan content to a separate file now. You will LOSE them after refreshing or closing this page.") %>
 </span>
 <% if answer.answered? %>
-    <span class="label label-info status" data-status="saved-at">
+    <span class="badge bg-info status" data-status="saved-at">
       <%= _('Answered')%> <time class="timeago" datetime="<%= answer.updated_at.iso8601 %>"></time>
       <%= _(' by %{user_name}') %{ :user_name => answer.user.name } if answer.user.present? %>
     </span><br>
     <% n_question_to_remove = answer_remove_list(answer).size %>
     <% if n_question_to_remove > 0 %>
-      <span class="label label-info status" data-status="saved-at">
+      <span class="badge bg-info status" data-status="saved-at">
         <%= _('This answer removes ') + n_question_to_remove.to_s + _(' questions from your plan.') %>
       </span>
     <% end %>
     <% email_list = email_trigger_list(answer) %>
     <% unless email_list.blank? %>
-      <span class="label label-info status" data-status="saved-at">
+      <span class="badge bg-info status" data-status="saved-at">
         <%= _('This answer triggers email(s) to ') + email_list %>
       </span>
     <% end %>
diff --git a/app/views/contact_us/contacts/_new_left.html.erb b/app/views/contact_us/contacts/_new_left.html.erb
index 3e67a5ce7b..03bd430060 100644
--- a/app/views/contact_us/contacts/_new_left.html.erb
+++ b/app/views/contact_us/contacts/_new_left.html.erb
@@ -1,7 +1,7 @@
 <%= form_for @contact, url: contacts_path do |f| %>
 <% if ContactUs.require_name %>
-    <div class="form-group">
-        <%= f.label(:name, _('Name'), class: 'control-label') %>
+    <div class="form-control mb-3">
+        <%= f.label(:name, _('Name'), class: 'form-label') %>
         <%= f.text_field(:name,
             class: "form-control",
             value: current_user.nil? ? '' : current_user.name(false),
@@ -9,8 +9,8 @@
             "aria-required": true) %>
     </div>
 <% end %>
-    <div class="form-group">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
+    <div class="form-control mb-3">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
         <%= f.email_field(:email,
             class: "form-control",
             value: current_user.nil? ? '' : current_user.email,
@@ -18,7 +18,7 @@
             "aria-required": true) %>
     </div>
 <% if ContactUs.require_subject %>
-    <div class="form-group">
+    <div class="form-control mb-3">
         <%= f.label(:subject, _('Subject')) %>
         <%= f.text_field(:subject,
             class: "form-control",
@@ -26,7 +26,7 @@
             "aria-required": true) %>
     </div>
 <% end %>
-    <div class="form-group">
+    <div class="form-control mb-3">
         <%= f.label(:message, _('Message')) %>
         <%= f.text_area(:message,
             class: "form-control",
@@ -35,10 +35,10 @@
             "aria-required": true) %>
     </div>
 <% if !user_signed_in? && Rails.configuration.x.recaptcha.enabled then %>
-    <div class="form-group">
-        <%= label_tag(nil, _('Security check')) %>
+    <div class="form-control mb-3">
+        <%= label_tag(nil, _('Security check'), class: "form-label") %>
         <%= recaptcha_tags %>
     </div>
 <% end %>
-    <%= f.button(_('Submit'), class: "btn btn-default", type: "submit") %>
+    <%= f.button(_('Submit'), class: "btn btn-secondary", type: "submit") %>
 <% end %>
diff --git a/app/views/contact_us/contacts/new.html.erb b/app/views/contact_us/contacts/new.html.erb
index 08abc711f0..407deb4fa9 100644
--- a/app/views/contact_us/contacts/new.html.erb
+++ b/app/views/contact_us/contacts/new.html.erb
@@ -1,5 +1,5 @@
 <% title _('Contact Us') %>
-<div class="row">
+<div class="row mt-5">
   <div class="col-md-12">
     <h1><%= _("Contact Us") %></h1>
     <p>
@@ -17,7 +17,7 @@
       <%= render :partial => "contact_us/contacts/new_left" %>
   </div><!-- Left column container -->
   <div class="col-md-6"><!-- Right column container -->
-    <div class="pull-right">
+    <div class="float-end">
       <%= render :partial => "contact_us/contacts/new_right" %>
     </div>
  </div><!-- Right column container -->
diff --git a/app/views/contributors/_form.html.erb b/app/views/contributors/_form.html.erb
index 4c9ef30562..e95c8d1c5f 100644
--- a/app/views/contributors/_form.html.erb
+++ b/app/views/contributors/_form.html.erb
@@ -5,32 +5,32 @@ phone_tooltip = _("Phone numbers should only include numbers and dashes ('-').")
 roles_tooltip = _("Select each role that applies to the contributor.")
 %>
 
-<div class="form-group row"><!-- name -->
+<div class="form-control mb-3 row"><!-- name -->
   <div class="col-md-12">
-    <%= form.label(:name, _("Name"), class: "control-label") %>
+    <%= form.label(:name, _("Name"), class: "form-label") %>
   </div>
   <div class="col-md-6">
     <%= form.text_field :name, class: "form-control", spellcheck: true %>
   </div>
 </div>
 
-<div class="form-group row"><!-- email -->
+<div class="form-control mb-3 row"><!-- email -->
   <div class="col-md-12">
-    <%= form.label(:email, _("Email"), class: "control-label") %>
+    <%= form.label(:email, _("Email"), class: "form-label") %>
   </div>
   <div class="col-md-4">
     <%= form.email_field :email, class: "form-control" %>
   </div>
 </div>
 
-<div class="form-group row"><!-- orcid -->
+<div class="form-control mb-3 row"><!-- orcid -->
   <% orcid = ContributorPresenter.orcid(contributor: contributor) %>
   <%= form.fields_for :identifiers, orcid do |orcid_fields| %>
     <%= orcid_fields.hidden_field :id %>
     <%= orcid_fields.hidden_field :identifier_scheme_id,
                                   value: orcid.identifier_scheme_id %>
     <div class="col-md-12">
-      <%= orcid_fields.label(:value, _("ORCID"), class: "control-label") %>
+      <%= orcid_fields.label(:value, _("ORCID"), class: "form-label") %>
     </div>
     <div class="col-md-4">
       <%= orcid_fields.text_field :value, class: "form-control" %>
@@ -39,9 +39,9 @@ roles_tooltip = _("Select each role that applies to the contributor.")
 </div>
 
 <% if Rails.configuration.x.application.display_contributor_phone_number %><!-- phone: only show if property set true -->
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
-      <%= form.label(:phone, _("Phone number"), class: "control-label") %>
+      <%= form.label(:phone, _("Phone number"), class: "form-label") %>
     </div>
     <div class="col-md-3">
       <em class="sr-only"><%= phone_tooltip %></em>
@@ -54,7 +54,7 @@ roles_tooltip = _("Select each role that applies to the contributor.")
   </div>
 <% end %>
 
-<div class="form-group row" id="contributor-org-controls"><!-- org -->
+<div class="form-control mb-3 row" id="contributor-org-controls"><!-- org -->
   <div class="col-md-8">
     <%= render partial: org_partial,
                locals: { form: form,
@@ -65,18 +65,18 @@ roles_tooltip = _("Select each role that applies to the contributor.")
   </div>
 </div>
 
-<div class="form-group row">
+<div class="form-control mb-3 row">
   <div class="col-md-12">
     <fieldset>
       <legend>
         <span class="red">*</span> <%= _("Roles") %>
       </legend>
       <p><%= roles_tooltip.html_safe %></p>
-
+        <div class="row">
       <% roles = ContributorPresenter.roles_for_radio(contributor: contributor) %>
       <% roles.each do |hash| %>
         <div class="col-md-3">
-          <div class="checkbox">
+          <div class="form-check">
             <%= form.check_box hash.keys.first.to_sym,
                                value: hash.values.first,
                                data: { toggle: "tooltip" },
@@ -86,18 +86,19 @@ roles_tooltip = _("Select each role that applies to the contributor.")
           </div>
         </div>
       <% end %>
+      </div>
     </fieldset>
   </div>
 </div>
 
-<div class="form-group row">
+<div class="form-control mb-3 row">
   <div class="col-md-6">
-    <%= form.button(_("Save"), class: "btn btn-default", type: "submit") %>
+    <%= form.button(_("Save"), class: "btn btn-secondary", type: "submit") %>
     <% unless contributor.new_record? %>
       <%= link_to _("Remove"), plan_contributor_path(plan, contributor),
-                               method: :delete, class: "btn btn-default" %>
+                               method: :delete, class: "btn btn-secondary" %>
       <% end %>
       <%= link_to _("Cancel"), plan_contributors_path(plan),
-                               class: "btn btn-default" %>
+                               class: "btn btn-secondary" %>
   </div>
 </div>
diff --git a/app/views/contributors/edit.html.erb b/app/views/contributors/edit.html.erb
index 59c4b37706..6387e19c21 100644
--- a/app/views/contributors/edit.html.erb
+++ b/app/views/contributors/edit.html.erb
@@ -10,9 +10,9 @@
 <% content_for :plan_tab_body do %>
   <h2>
     <%= _("Editing contributor") %>
-    <%= link_to _('View all contributors'), plan_contributors_path(@plan),
-                                            class: "btn btn-default pull-right" %>
   </h2>
+      <%= link_to _('View all contributors'), plan_contributors_path(@plan),
+                                            class: "btn btn-secondary float-end" %>
   <div class="row">
     <div class="col-md-12">
       <%= form_for @contributor, url: plan_contributor_path(@plan, @contributor),
diff --git a/app/views/contributors/new.html.erb b/app/views/contributors/new.html.erb
index 85c0454d2f..a4b0fd502b 100644
--- a/app/views/contributors/new.html.erb
+++ b/app/views/contributors/new.html.erb
@@ -11,7 +11,7 @@
   <h2>
     <%= _("New contributor") %>
     <%= link_to _('View all contributors'), plan_contributors_path(@plan),
-                                            class: "btn btn-default pull-right" %>
+                                            class: "btn btn-secondary float-end" %>
   </h2>
   <div class="row">
     <div class="col-md-12">
diff --git a/app/views/devise/invitations/edit.html.erb b/app/views/devise/invitations/edit.html.erb
index 586af8dff6..744c37e8e3 100644
--- a/app/views/devise/invitations/edit.html.erb
+++ b/app/views/devise/invitations/edit.html.erb
@@ -1,43 +1,43 @@
-<% title _('Create an account to view the plan') %>
-<div class="row">
-  <div class="col-md-12">
-    <h1><%= _("Create an account to view the plan") %></h1>
-    <p><%= _("You will need to create an account in order to accept your invitation to view the data management plan (DMP).") %></p>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <%= form_for resource, as: resource_name, url: invitation_path(resource_name), html: {method: :put, id: "invitation_create_account_form"} do |f| %>
-      <%= devise_error_messages! %>
-      <%= f.hidden_field :invitation_token %>
-      <div class="form-group">
-        <%= f.label(:password, _('New password'), class: 'control-label') %>
-        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'control-label') %>
-        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:firstname, _('First name'), class: 'control-label') %>
-        <%= f.text_field(:firstname, class: "form-control", "aria-required": true,
-                         spellcheck: true, value: @user.firstname) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:surname, _('Last name'), class: 'control-label') %>
-        <%= f.text_field(:surname, class: "form-control", "aria-required": true, value: @user.surname) %>
-      </div>
-      <div class="form-group" id="invite-org-controls">
-        <%= render partial: @org_partial,
-                   locals: {
-                     form: f,
-                     orgs: @all_orgs,
-                     default_org: nil,
-                     required: true
-                   } %>
-      </div>
-      <%= f.button(_('Create account'), class: "btn btn-default", type: "submit") %>
-    <% end %>
-  </div>
-</div>
+<% title _('Create an account to view the plan') %>
+<div class="row">
+  <div class="col-md-12">
+    <h1><%= _("Create an account to view the plan") %></h1>
+    <p><%= _("You will need to create an account in order to accept your invitation to view the data management plan (DMP).") %></p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <%= form_for resource, as: resource_name, url: invitation_path(resource_name), html: {method: :put, id: "invitation_create_account_form"} do |f| %>
+      <%= devise_error_messages! %>
+      <%= f.hidden_field :invitation_token %>
+      <div class="form-control mb-3">
+        <%= f.label(:password, _('New password'), class: 'form-label') %>
+        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'form-label') %>
+        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:firstname, _('First name'), class: 'form-label') %>
+        <%= f.text_field(:firstname, class: "form-control", "aria-required": true,
+                         spellcheck: true, value: @user.firstname) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:surname, _('Last name'), class: 'form-label') %>
+        <%= f.text_field(:surname, class: "form-control", "aria-required": true, value: @user.surname) %>
+      </div>
+      <div class="form-control mb-3" id="invite-org-controls">
+        <%= render partial: @org_partial,
+                   locals: {
+                     form: f,
+                     orgs: @all_orgs,
+                     default_org: nil,
+                     required: true
+                   } %>
+      </div>
+      <%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index b658a735bd..40b0805d8a 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -1,40 +1,40 @@
-<% title _('Change your password') %>
-<div class="row">
-  <div class="col-md-12">
-    <h1><%= _('Change your password') %></h1>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: {method: :put, id: "user_reset_password_form"}) do |f| %>
-      <%= devise_error_messages! %>
-      <%= f.hidden_field :reset_password_token %>
-
-      <div class="form-group">
-        <%= f.label(:password, _('New password'), class: 'control-label') %>
-        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'control-label') %>
-        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" id="passwords_toggle" class="passwords_toggle"/><%= _('Show passwords') %>
-        </label>
-      </div>
-      
-      <% if Rails.configuration.x.recaptcha.enabled %>
-        <div class="form-group">
-          <%= label_tag(nil, _('Security check')) %>
-          <%= recaptcha_tags %>
-        </div>
-      <% end %>
-
-      <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
-
-      <%= render "devise/shared/links" %>
-    <% end %>
-  </div>
-</div>
+<% title _('Change your password') %>
+<div class="row">
+  <div class="col-md-12">
+    <h1><%= _('Change your password') %></h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: {method: :put, id: "user_reset_password_form"}) do |f| %>
+      <%= devise_error_messages! %>
+      <%= f.hidden_field :reset_password_token %>
+
+      <div class="form-control mb-3">
+        <%= f.label(:password, _('New password'), class: 'form-label') %>
+        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'form-label') %>
+        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-check">
+        <label class="form-check-label">
+          <input type="checkbox" id="passwords_toggle" class="passwords_toggle"/><%= _('Show passwords') %>
+        </label>
+      </div>
+      
+      <% if Rails.configuration.x.recaptcha.enabled %>
+        <div class="form-control mb-3">
+          <%= label_tag(nil, _('Security check'), class: 'form-label') %>
+          <%= recaptcha_tags %>
+        </div>
+      <% end %>
+
+      <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
+
+      <%= render "devise/shared/links" %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 3b08103ac5..925bacad5a 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,25 +1,25 @@
-<% title _('Forgot your password?') %>
-<div class="row">
-  <div class="col-md-12">
-    <% unless @user.errors[:email].empty? %>
-      <p class="alert alert-error"><%= _('The email address you entered is not registered.') %></p>
-    <% end %>
-    
-    <h1><%= _('Forgot your password?') %></h1>
-
-    <p class="left-indent"><%= _('Please enter your email below and we will send you instructions on how to reset your password.') %></p>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <%= form_for resource, as: 'user', url: user_password_path, html: {method: :post, id: "user_request_reset_password_form"} do |f| %>
-      <div class="form-group">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
-        <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
-      </div>
-
-      <%= f.button(_('Send'), class: "btn btn-default", type: "submit") %>
-    <% end %>
-  </div>
-</div>
\ No newline at end of file
+<% title _('Forgot your password?') %>
+<div class="row">
+  <div class="col-md-12">
+    <% unless @user.errors[:email].empty? %>
+      <p class="alert alert-error"><%= _('The email address you entered is not registered.') %></p>
+    <% end %>
+    
+    <h1><%= _('Forgot your password?') %></h1>
+
+    <p class="start-indent"><%= _('Please enter your email below and we will send you instructions on how to reset your password.') %></p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <%= form_for resource, as: 'user', url: user_password_path, html: {method: :post, id: "user_request_reset_password_form"} do |f| %>
+      <div class="form-control mb-3">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
+        <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
+      </div>
+
+      <%= f.button(_('Send'), class: "btn btn-secondary", type: "submit") %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/registrations/_api_token.html.erb b/app/views/devise/registrations/_api_token.html.erb
index 704be320b1..e308692b99 100644
--- a/app/views/devise/registrations/_api_token.html.erb
+++ b/app/views/devise/registrations/_api_token.html.erb
@@ -2,24 +2,24 @@
 
 <% api_wikis = Rails.configuration.x.application.api_documentation_urls %>
 <div id="api-token" class="col-xs-12">
-  <div class="form-group col-xs-8">
-    <%= label_tag(:api_token, _('Access token'), class: 'control-label') %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= label_tag(:api_token, _('Access token'), class: 'form-label') %>
     <% if user.api_token.present? %>
       <%= user.api_token %>
     <% else %>
       <%= _("Click the button below to generate an API token") %>
     <% end %>
   </div>
-  <div class="form-group col-xs-12">
-    <%= label_tag(:api_information, _('Documentation'), class: 'control-label') %>
+  <div class="form-control mb-3 col-xs-12">
+    <%= label_tag(:api_information, _('Documentation'), class: 'form-label') %>
     <br>
     <%= _('See the <a href="%{api_v0_wiki}">documentation for v0</a> for more details on the original API which includes access to statistics, the full text of plans and the ability to connect users with departments.').html_safe % { api_v0_wiki: api_wikis[:v0] } %></a>
     <br><br>
     <%= _('See the <a href="%{api_v1_wiki}">documentation for v1</a> for more details on the API that supports the <a href="%{rda_standard_url}">RDA Common metadata standard for DMPs.</a>').html_safe % { api_v1_wiki: api_wikis[:v1], rda_standard_url: 'https://github.com/RDA-DMP-Common/RDA-DMP-Common-Standard' } %></a>
   </div>
-  <div class="form-group col-xs-8">
+  <div class="form-control mb-3 col-xs-8">
     <%= link_to _("Regenerate token"),
                 refresh_token_user_path(user),
-                class: "btn btn-default", remote: true %>
+                class: "btn btn-secondary", remote: true %>
   </div>
 </div>
diff --git a/app/views/devise/registrations/_password_confirmation.html.erb b/app/views/devise/registrations/_password_confirmation.html.erb
index 26768c409f..f11b6aa782 100644
--- a/app/views/devise/registrations/_password_confirmation.html.erb
+++ b/app/views/devise/registrations/_password_confirmation.html.erb
@@ -7,22 +7,22 @@
       <div id="confirmation" class="modal-body">
         <div id="email-change">
           <p><%= _('Your email address is also your login id and therefore an important part of your account information. For your safety we require you to confirm your password to make this change.') %></p>
-          <div class="form-group">
-            <%= f.label :current_password, _('Password'), class: 'control-label', for: 'current_password' %>
+          <div class="form-control mb-3">
+            <%= f.label :current_password, _('Password'), class: 'form-label', for: 'current_password' %>
             <%= f.password_field :current_password, class: 'form-control', id: 'current_password' %>
-            <%= f.password_field :password, class: 'hide' %>
+            <%= f.password_field :password, class: 'd-none' %>
           </div>
         </div>
 
-        <div id="org-change" class="hide">
+        <div id="org-change" class="d-none">
           <p>
             <%= _('Are you sure you want to change your organisational affiliation? Doing so will remove your administrative privileges.') %>
           </p>
-          <div class="form-group">
-            <label class="control-label"><%= _('Organisation') %></label>
+          <div class="form-control mb-3">
+            <label class="form-label"><%= _('Organisation') %></label>
           </div>
-          <div class="checkbox">
-            <label>
+          <div class="form-check">
+            <label class="form-check-label">
               <input type="checkbox" id="confirm_org_change" />
               <%= _('Yes, I understand that I will lose my administrative privileges') %>
             </label>
@@ -31,10 +31,10 @@
       </div>
 
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" id="pwd-cancel-confirmation"
-                data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-secondary" id="pwd-cancel-confirmation"
+                data-bs-dismiss="modal">Cancel</button>
         <button type="button" class="btn btn-primary" id="pwd-confirmation"
-                data-dismiss="modal">Continue</button>
+                data-bs-dismiss="modal">Continue</button>
       </div>
     </div>
   </div>
diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index e1afd03e9a..83159a3fed 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -4,30 +4,29 @@
 
   <%= hidden_field_tag :skip_personal_details, "true" %>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:current_password, _('Current password'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:current_password, _('Current password'), class: 'form-label') %>
     <%= f.password_field(:current_password,  class: "form-control", "aria-required": true ) %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:password, _('New password'),  class: 'control-label') %> 
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:password, _('New password'),  class: 'form-label') %> 
     <%= f.password_field(:password,  class: "form-control", "aria-required": true , id: 'user_new_password') %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'form-label') %>
     <%= f.password_field(:password_confirmation, class: "form-control", "aria-required": true,  ) %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <div class="checkbox">
-      <label>
-         <input type="checkbox" id="passwords_toggle" class="passwords_toggle" /><%= _('Show passwords') %>
-      </label>
+  <div class="form-control mb-3 col-sm-8">
+    <div class="form-check">
+        <input type="checkbox" id="passwords_toggle" class="passwords_toggle" />
+        <%= label_tag('passwords_toggle', _('Show passwords'), class: 'form-check-label') %>
     </div>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
   </div>
 <% end %>
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index 6e2ab54c67..7dd7840985 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -6,24 +6,24 @@
   <p class="form-control-static"><%= _('You can edit any of the details below.') %></p>
   <%= hidden_field_tag :unlink_flag, "false", id: 'unlink_flag' %>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:email, _('Email'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:email, _('Email'), class: 'form-label') %>
     <%= f.email_field(:email, class: "form-control", "aria-required": true, value: @user.email) %>
     <%= hidden_field_tag :original_email, @user.email %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:firstname, _('First name'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:firstname, _('First name'), class: 'form-label') %>
     <%= f.text_field(:firstname, class: "form-control", "aria-required": true, value: @user.firstname) %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:surname, _('Last name'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:surname, _('Last name'), class: 'form-label') %>
     <%= f.text_field(:surname, class: "form-control", "aria-required": true, value: @user.surname) %>
   </div>
 
   <% org_admin = (current_user.can_org_admin? && !current_user.can_super_admin?) %>
-  <div class="form-group col-xs-8" id="profile-org-controls" <%= "data-toggle=\"tooltip\" title=\"#{_('Changing your organisation will result in the loss of your administrative privileges.')}\"" if org_admin %>>
+  <div class="form-control mb-3 col-sm-8" id="profile-org-controls" <%= "data-toggle=\"tooltip\" title=\"#{_('Changing your organisation will result in the loss of your administrative privileges.')}\"" if org_admin %>>
     <%= render partial: org_partial,
                locals: {
                  form: f,
@@ -38,9 +38,9 @@
 
     <% departments = current_user.org.departments.order(:name) %>
     <% if departments.count > 0 %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <% dept_id = current_user.department.nil? ? -1 : current_user.department.id  %>
-      <%= f.label(:department_id, _('Department or school'), class: 'control-label') %>
+      <%= f.label(:department_id, _('Department or school'), class: 'form-label') %>
       <%= select_tag("user[department_id]",
           options_from_collection_for_select(departments, "id", "name", dept_id),
           include_blank: true,
@@ -50,9 +50,9 @@
     <% end %>
 
   <% if Language.many? %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <% lang_id = current_user.language.nil? ? Language.default.id : current_user.language.id %>
-      <%= f.label(:language_id, _('Language'), class: 'control-label') %>
+      <%= f.label(:language_id, _('Language'), class: 'form-label') %>
       <%= select_tag("user[language_id]",
           options_from_collection_for_select(@languages, "id", "name", lang_id),
           class: "form-control") %>
@@ -60,22 +60,22 @@
   <% end %>
 
   <% if current_user.can_org_admin? %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <label><%= _('My privileges') %></label>
       <p><%= (current_user.can_super_admin? ? _('Super Admin') : _('Organisational Admin')) %></p>
     </div>
   <% end %>
 
   <% @identifier_schemes.each do |scheme| %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <% if scheme.name.downcase == 'shibboleth' %>
-        <label class='control-label'>
+        <label class='form-label'>
           <span class="aria-only" aria-hidden="false"><%= _('Institutional credentials') %></span>
         </label>
       <% elsif scheme.name.downcase == 'orcid' %>
-        <%= label_tag(:scheme_name, 'ORCID', class: 'control-label') %>
+        <%= label_tag(:scheme_name, 'ORCID', class: 'form-label') %>
       <% else %>
-        <%= label_tag(:scheme_name, scheme.name.capitalize, class: 'control-label') %>
+        <%= label_tag(:scheme_name, scheme.name.capitalize, class: 'form-label') %>
       <% end %>
 
       <div class='identifier-scheme'>
@@ -86,8 +86,8 @@
     </div>
   <% end %>
 
-  <div class="form-group col-xs-8">
-    <%= f.button(_('Save'), class: 'btn btn-default', type: "submit", id: "personal_details_registration_form_submit") %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit", id: "personal_details_registration_form_submit") %>
   </div>
 
   <%= render partial: 'password_confirmation', locals: {f: f} %>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index f83d208068..487547d944 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -8,53 +8,53 @@
 <div class="row">
   <div class="col-md-12">
       <ul class="nav nav-tabs" role="tablist">
-        <li role="personal-details" class="nav-item active">
-          <a href="#personal-details" role="tab" class="nav-link"
-             aria-controls="personal-details" data-toggle="tab"><%= _('Personal Details') %></a>
+        <li role="personal-details" class="nav-item">
+          <a href="#personal-details" role="tab" class="nav-link active"
+             aria-controls="personal-details" data-bs-toggle="tab"><%= _('Personal Details') %></a>
         </li>
         <li role="password-details" class="nav-item">
           <a href="#password-details" role="tab" class="nav-link"
-             aria-controls="password-details" data-toggle="tab"><%= _('Password') %></a>
+             aria-controls="password-details" data-bs-toggle="tab"><%= _('Password') %></a>
         </li>
         <% if @user.can_use_api? %>
           <li role="api-details" class="nav-item">
             <a href="#api-details" role="tab" class="nav-link"
-               aria-controls="api-details" data-toggle="tab"><%= _('API Access') %></a>
+               aria-controls="api-details" data-bs-toggle="tab"><%= _('API Access') %></a>
           </li>
         <% end %>
         <li role="notification-preferences" class="nav-item">
           <a href="#notification-preferences" role="tab" class="nav-link"
-             aria-controls="notification-preferences" data-toggle="tab"><%= _('Notification Preferences') %></a>
+             aria-controls="notification-preferences" data-bs-toggle="tab"><%= _('Notification Preferences') %></a>
         </li>
       </ul>
 
       <div class="tab-content">
         <div id="personal-details" role="tabpanel" class="tab-pane active">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <%= render partial: 'devise/registrations/personal_details', locals: {orgs: @orgs, org_partial: @org_partial} %>
             </div>
           </div>
         </div>
         <div id="password-details" role="tabpanel" class="tab-pane">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <%= render partial: 'devise/registrations/password_details' %>
             </div>
           </div>
         </div>
         <% if @user.can_use_api? %>
           <div id="api-details" role="tabpanel" class="tab-pane">
-            <div class="panel panel-default">
-              <div class="panel-body">
+            <div class="card card-default">
+              <div class="card-body">
                 <%= render partial: 'devise/registrations/api_token', locals: { user: @user } %>
               </div>
             </div>
           </div>
         <% end %>
         <div id="notification-preferences" role="tabpanel" class="tab-pane">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <%= render partial: 'users/notification_preferences' %>
             </div>
           </div>
diff --git a/app/views/guidance_groups/_guidance_group_form.html.erb b/app/views/guidance_groups/_guidance_group_form.html.erb
index b5bd06bd25..71bd58271e 100644
--- a/app/views/guidance_groups/_guidance_group_form.html.erb
+++ b/app/views/guidance_groups/_guidance_group_form.html.erb
@@ -4,26 +4,26 @@ name_tip = _('Add an appropriate name for your guidance group. This name will te
 published_tip = _("Check this box when you are ready for guidance associated with this group to appear on user's plans.")
 subset_tip = _("If the guidance is only meant for a subset of users e.g. those in a specific college or institute, check this box.  Users will be able to select to display this subset guidance when answering questions in the 'create plan' wizard.")
 %>
- <div class="form-group col-xs-8">
-  <%= form.label(:name, _('Name'), class: "control-label") %>
+ <div class="form-control mb-3 col-xs-8">
+  <%= form.label(:name, _('Name'), class: "form-label") %>
   <%= form.text_field :name, class: "form-control", spellcheck: true, aria: { required: true },
                              data: { toggle: 'tooltip' }, title: name_tip %>
 </div>
 
  <div class='form-input col-xs-8'>
   <%= form.check_box :published, data: { toggle: 'tooltip' }, title: published_tip %>
-  <%= form.label(:published, _("Published"), class: "control-label") %>
+  <%= form.label(:published, _("Published"), class: "form-label") %>
 </div>
 <%# Only display the optional subset flag if allowed. Otherwise default to 'false' %>
 <% if allow_subset_flag %>
   <div class='form-input col-xs-8'>
     <%= form.check_box :optional_subset, data: { toggle: 'tooltip' }, title: subset_tip %>
-    <%= form.label(:optional_subset, _("Optional subset"), class: "control-label") %><%= _(' (e.g. School/ Department) ') %>
+    <%= form.label(:optional_subset, _("Optional subset"), class: "form-label") %><%= _(' (e.g. School/ Department) ') %>
   </div>
 <% else %>
   <%= form.hidden_field :optional_subset, value: "0" %>
 <% end %>
-<div class="form-group col-xs-8">
+<div class="form-control mb-3 col-xs-8">
   <%= form.hidden_field :org_id %>
   <%= form.submit _('Save'), class: "btn btn-primary" %>
   <%= link_to _('Cancel'), admin_index_guidance_path, class: "btn btn-primary", role: 'button' %>
diff --git a/app/views/guidance_groups/_index_by_theme.html.erb b/app/views/guidance_groups/_index_by_theme.html.erb
index bbaa2b991e..bae531f6c1 100644
--- a/app/views/guidance_groups/_index_by_theme.html.erb
+++ b/app/views/guidance_groups/_index_by_theme.html.erb
@@ -1,12 +1,12 @@
 <%# locals{ guidance_groups_by_theme } %>
 <% parent_id = guidance_groups_by_theme.object_id %>
-<div id="<%= parent_id %>" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="<%= parent_id %>" class="d-flex flex-column" role="tablist" aria-multiselectable="true">
   <% guidance_groups_by_theme.each_pair do |guidance_group, theme_hash| %>
     <% guidances_output = [] %>
     <%# Do not show expand/collapse all links if there is only one item in theme_hash %>
     <% if theme_hash.length > 1 %>
-    <div id="guidance-accordion-controls">
-      <div class="accordion-controls" data-parent="<%= parent_id %>">
+  <div id="guidance-accordion-controls">
+      <div class="accordion-controls px-1" data-parent="<%= parent_id %>">
         <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
           <span>|</span>
         <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
@@ -17,27 +17,24 @@
       <% question_guidance_id = "#{question.object_id}-#{guidances.object_id}" %>
       <%# if guidances with this theme have not been output %>
       <% if (guidances.map(&:id) - guidances_output).any? %>
-        <div class="panel panel-default">
-          <div
-            class="heading-button"
-            role="button"
-            data-toggle="collapse"
-            href="<%= "##{question_guidance_id}" %>"
+        <div class="accordion-item my-1 card card-default">
+          <h2 class="accordion-header" id="<%= "headingGuidance-#{question_guidance_id}" %>">
+            <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            href="<%= "#collapseGuidance-#{question_guidance_id}" %>"
             aria-expanded="false"
-            aria-controls="<%= "##{question_guidance_id}" %>">
-            <div class="panel-heading" role="tab" id="<%= "panel-heading-#{question_guidance_id}" %>">
-              <h2 class="panel-title">
+            aria-controls="<%= "#collapseGuidance-#{question_guidance_id}" %>">
                 <%= theme.title %>
-                <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-              </h2>
-            </div>
-          </div>
+            </button>
+           </h2>
           <div
-            id="<%= "#{question_guidance_id}" %>"
-            class="panel-collapse collapse"
+            id="<%= "collapseGuidance-#{question_guidance_id}" %>"
+            class="accordion-collapse collapse"
             role="tabpanel"
-            aria-labelledby="<%= "panel-heading-#{question_guidance_id}" %>">
-            <div class="panel-body">
+            aria-labelledby="<%= "headingGuidance-#{question_guidance_id}" %>">
+            <div class="accordion-body card card-body">
               <% multiple = false %>
               <% guidances.each do |guidance| %>
                 <% if multiple %>
@@ -45,8 +42,8 @@
                 <% end %>
                 <p>
                   <% unless guidances_output.include?(guidance.id) %>
-                    <div class="display-readonly-textarea-content">
-                      <%= sanitize(guidance.text) %>
+                    <div class="display-readonly-textarea-content allow-break-words">
+                      <%= sanitize guidance.text %>
                     </div>
                     <% guidances_output << guidance.id %>
                     <% multiple = true %>
diff --git a/app/views/guidance_groups/_show.html.erb b/app/views/guidance_groups/_show.html.erb
index 7154800d11..e910a57234 100644
--- a/app/views/guidance_groups/_show.html.erb
+++ b/app/views/guidance_groups/_show.html.erb
@@ -1,8 +1,8 @@
 <%# locals: { group, question, guidance_accordion_id }%>
-<div id="guidance-<%= guidance_accordion_id %>-accordion" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="guidance-<%= guidance_accordion_id %>-accordion" class="card-group" role="tablist" aria-multiselectable="true">
   <% if group.keys.length > 1 %>
     <div id="guidance-accordion-controls">
-      <div class="accordion-controls" data-parent="guidance-<%= guidance_accordion_id %>-accordion">
+      <div class="accordion-controls px-1" data-parent="guidance-<%= guidance_accordion_id %>-accordion">
         <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
         <span>|</span>
         <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
@@ -10,23 +10,22 @@
     </div>
   <% end %>
   <% group.keys.each_with_index do |theme, i| %>
-    <div class="panel panel-default">
-      <div class="heading-button" role="button" data-toggle="collapse"
-           data-parent="<%= question.id %>-guidance"
+    <div class="accordion-item card card-default">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+           data-bs-parent="#<%= question.id %>-guidance"
            href="#collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>"
            aria-expanded="false"
            aria-controls="#collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>">
 
-        <div class="panel-heading" role="tab" id="heading-<%= i %>">
-          <h2 class="panel-title">
+        <div class="card-heading" role="tab" id="heading-<%= i %>">
+          <h2 class="accordion-header">
             <%= theme %>
-            <i class="fas fa-plus pull-right" aria-hidden="true"></i>
           </h2>
         </div>
-      </div>
-      <div id="collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>" class="panel-collapse collapse" role="tabpanel"
+      </button>
+      <div id="collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>" class="accordion-collapse collapse" role="tabpanel"
          aria-labelledby="heading-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>">
-        <div class="panel-body">
+        <div class="accordion-body card card-body">
           <% group[theme].each do |guidance| %>
             <%= sanitize guidance %>
           <% end %>
diff --git a/app/views/guidance_groups/admin_edit.html.erb b/app/views/guidance_groups/admin_edit.html.erb
index 6a1413d984..650a51e7f0 100644
--- a/app/views/guidance_groups/admin_edit.html.erb
+++ b/app/views/guidance_groups/admin_edit.html.erb
@@ -3,7 +3,7 @@
   <div class="col-md-12">
     <h1><%= _('Guidance group') %></h1>
     <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id),
-                                        class: 'btn btn-default pull-right' %>
+                                        class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
diff --git a/app/views/guidance_groups/admin_new.html.erb b/app/views/guidance_groups/admin_new.html.erb
index 1f99bb0a19..457c59b2a0 100644
--- a/app/views/guidance_groups/admin_new.html.erb
+++ b/app/views/guidance_groups/admin_new.html.erb
@@ -3,7 +3,7 @@
   <div class="col-md-12">
     <h1><%= _('Guidance group') %></h1>
     <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id),
-                                        class: 'btn btn-default pull-right' %>
+                                        class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
diff --git a/app/views/guidances/_guidance_display.html.erb b/app/views/guidances/_guidance_display.html.erb
index 6208b8a36d..0e74aec60f 100644
--- a/app/views/guidances/_guidance_display.html.erb
+++ b/app/views/guidances/_guidance_display.html.erb
@@ -1,44 +1,41 @@
-<!--this block displays all guidance related with the question. question is passed as an argument-->
-
-<div class="question-guidance">
-  <div class="accordion" id="<%= question.id %>-guidance">
-    <% if !question.guidance_annotation(current_user.org).nil? && question.guidance_annotation(current_user.org) != "" %>
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= question.id%>">
-            <div class="accordion_heading_text">
-            <%= question.section.phase.template.org.abbreviation %> <%= _('Guidance')%>
-            </div>
-            <span class="plus-laranja"> </span></a>
-        </div>
-        <div id="collapse-guidance-<%= question.id%>" class="guidance-accordion-body collapse">
-          <div class="accordion-inner">
-            <div class="display-readonly-textarea-content">
-               <%= sanitize question.guidance_annotation(current_user.org).text %>
-            </div>
-          </div>
-        </div>
-      </div>
-    <% end %>
-
-    <% question.guidance_for_org(current_user.org).each_pair do |title,guidance| %>
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= guidance.id%>-<%= question.id %>">
-            <div class="accordion_heading_text">
-            <%= title %>
-            </div>
-            <span class="plus-laranja"> </span></a>
-        </div>
-        <div id="collapse-guidance-<%= guidance.id%>-<%= question.id %>" class="guidance-accordion-body collapse">
-          <div class="accordion-inner">
-            <div class="display-readonly-textarea-content">
-              <%= sanitize guidance.text %>
-            </div>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-
-</div>
+<!--this block displays all guidance related with the question. question is passed as an argument-->
+<div class="question-guidance">
+  <div class="accordion" id="<%= question.id %>-guidance">
+    <% if !question.guidance_annotation(current_user.org).nil? && question.guidance_annotation(current_user.org) != "" %>
+      <div class="accordion-item w-100 my-3">
+        <h2 class="accordion-header">
+          <a class="accordion-guidance-link" data-bs-toggle="collapse" data-bs-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= question.id%>">
+            <div class="accordion_heading_text">
+              <%= question.section.phase.template.org.abbreviation %> <%= _('Guidance')%>
+            </div>
+          </h2>
+          <div id="collapse-guidance-<%= question.id%>" 
+                 class="guidance-accordion-body accordion-collapse collapse">
+            <div class="accordion-body card card-body">
+              <div class="display-readonly-textarea-content">
+                <%= sanitize question.guidance_annotation(current_user.org).text %>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% end %>
+      <% question.guidance_for_org(current_user.org).each_pair do |title,guidance| %>
+        <div class="accordion-item w-100 my-3">
+          <h2 class="accordion-header" role="tab">
+            <div class="accordion-guidance-link" data-bs-toggle="collapse" data-bs-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= guidance.id%>-<%= question.id %>">
+              <div class="accordion_heading_text">
+                <%= title %>
+              </div>
+            </h2>
+            <div id="collapse-guidance-<%= guidance.id%>-<%= question.id %>" 
+        class="guidance-accordion-body accordion-collapse collapse">
+              <div class="accordion-body card card-body">
+                <div class="display-readonly-textarea-content">
+                  <%= sanitize guidance.text %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
diff --git a/app/views/guidances/new_edit.html.erb b/app/views/guidances/new_edit.html.erb
index 8b26be6a19..e2109152e1 100644
--- a/app/views/guidances/new_edit.html.erb
+++ b/app/views/guidances/new_edit.html.erb
@@ -14,15 +14,15 @@ end
 <div class="row">
   <div class="col-xs-12">
     <h1><%= _('Guidance') %></h1>
-    <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id), class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id), class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 <div class="row">
   <div class="col-xs-12">
     <%= form_for(@guidance, url: url, html: { method: method , id: 'new_edit_guidance'}) do |f| %>
-      <div class="form-group" data-toggle="tooltip" title="<%= guidance_text_tooltip %>">
+      <div class="form-control mb-3" data-toggle="tooltip" title="<%= guidance_text_tooltip %>">
         <em class="sr-only"><%= guidance_text_tooltip %></em>
-        <%= f.label :text, class: 'control-label' %>
+        <%= f.label :text, class: 'form-label' %>
         <%= f.text_area :text, rows: 10, class: "form-control", spellcheck: true,
                         aria: { required: true } %>
       </div>
@@ -30,13 +30,13 @@ end
                  locals: { f: f, all_themes: Theme.all.order("title"), as_radio: false, required: true,
                            in_error: @guidance.errors[:themes].present?,
                            popover_message: _('Select one or more themes that are relevant to this guidance. This will display your generic organisation-level guidance, or any Schools/Departments for which you create guidance groups, across all templates that have questions with the corresponding theme tags.') } %>
-      <div class="form-group">
-        <%= f.label _('Guidance group'), for: :guidance_group_id, class: 'control-label' %>
+      <div class="form-control mb-3">
+        <%= f.label _('Guidance group'), for: :guidance_group_id, class: 'form-label' %>
         <%= f.collection_select(:guidance_group_id,
                 GuidanceGroup.where(org_id: current_user.org_id).order("name ASC"),
                 :id, :name, {prompt: false}, {multiple: false, 'data-toggle': 'tooltip', title: _('Select which group this guidance relates to.'), class: 'form-control', 'aria-required': true})%>
       </div>
-      <div class="checkbox">
+      <div class="form-check">
         <%= f.label :published do %>
           <%= f.check_box :published,
                           as: :check_boxes,
@@ -45,7 +45,7 @@ end
           <%= _('Published?') %>
         <% end %>
       </div>
-      <div class="form-group clear-fix">
+      <div class="form-control mb-3 clear-fix">
         <%= f.submit _('Save'), name: "edit_guidance_submit", class: "btn btn-primary" %>
         <%= link_to _('Cancel'), admin_index_guidance_path, class: "btn btn-primary", role: 'button' %>
       </div>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index 687ae85887..7f18a6f979 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="last">
+<span class="last px-1">
   <%= link_to_unless current_page.last?, _('Last'), url, remote: remote, class: 'paginable-action' %>
 </span>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index ad9b2ce3e7..1b588316d3 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="next">
+<span class="next px-1">
   <%= link_to_unless current_page.last?, _('Next'), url, rel: 'next', remote: remote, class: 'paginable-action' %>
 </span>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index adb0b14396..2aeab0b472 100644
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -7,6 +7,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page<%= ' current' if page.current? %>">
+<span class="page<%= ' current' if page.current? %> px-1">
   <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: 'paginable-action'} %>
 </span>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index b4d39bd219..4780356110 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="prev">
+<span class="prev px-1">
   <%= link_to_unless current_page.first?, _('Previous'), url, rel: 'prev', remote: remote, class: 'paginable-action' %>
 </span>
diff --git a/app/views/layouts/_branding.html.erb b/app/views/layouts/_branding.html.erb
index cbcaf31595..62ff6493f8 100644
--- a/app/views/layouts/_branding.html.erb
+++ b/app/views/layouts/_branding.html.erb
@@ -1,24 +1,27 @@
-<nav id="org-navbar" class="navbar navbar-default" role="navigation">
+<nav id="org-navbar" class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header" >
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#org-navbar-menu" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <% if user_signed_in? && !current_user.org.nil? %>
-        <% if current_user.org.logo.present? %>
+    <% if user_signed_in? && !current_user.org.nil? %>
+      <% if current_user.org.logo.present? %>
+        <div class="navbar-header d-sm-flex justify-content-sm-between">
           <%= image_tag(logo_url_for_org(current_user.org),
-                                alt: current_user.org.name,
-                                class: "org-logo",
-                                title: current_user.org.name) %>
+                        alt: current_user.org.name,
+                        class: "org-logo me-sm-auto",
+                        title: current_user.org.name) %>
+        </div>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                   data-bs-target="#org-navbar-menu" aria-controls="org-navbar-menu" 
+                   aria-expanded="false" aria-label="Toggle navigation">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="navbar-toggler-icon"></span>
+        </button>
         <% else %>
+         <div class="navbar-header d-sm-flex justify-content-sm-between">
           <p id="banner-org-name" class="fontsize-h4"><%= current_user.org.name %></p>
+         </div>
         <% end %>
       <% end %>
-    </div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="org-navbar-menu">
@@ -28,13 +31,13 @@
       i = 1
       %>
       <% if user_signed_in? && (links.any? || current_user.org.contact_email.present?) %>
-        <ul class="nav navbar-nav">
+        <ul class="navbar-nav me-auto">
           <% links.each do |link| %>
             <% if link.present? && i <= max_number_links %>
               <% if i.odd? %>
-                </li><li class="org-links">
+                </li><li class="org-links nav-item">
               <% end %>
-              <%= link_to link['link'], :target=>'_blank', :class => 'org-a has-new-window-popup-info' do %>
+              <%= link_to link['link'], :target=>'_blank', :class => 'org-a has-new-window-popup-info nav-link' do %>
                 <i class="fas fa-globe" aria-hidden="true">&nbsp;</i>
                 <%= link['text'].blank? ? link['link'] : link['text'] %>
                 <em class="sr-only"> (new window)</em>
@@ -44,10 +47,10 @@
             <% end %>
           <% end %>
           <% if i.odd? %>
-            </li><li class="org-links">
+            </li><li class="org-links nav-item">
           <% end %>
           <% if !current_user.org.contact_email.blank? %>
-            <%= mail_to current_user.org.contact_email, :class => 'org-a' do %>
+            <%= mail_to current_user.org.contact_email, :class => 'org-a nav-link' do %>
               <i class="fas fa-envelope" aria-hidden="true">&nbsp;</i>
               <%= current_user.org.contact_name ? current_user.org.contact_name : current_user.org.contact_email %>
             <% end %>
@@ -56,64 +59,66 @@
       <% end %>
 
       <!-- Navigation for organisation admin -->
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="navbar-nav ms-auto">
         <!-- if org admin -->
         <% if current_user.can_org_admin? %>
-          <li class="dropdown navbar-default" id="admin-dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="admin-menu" href="#">
+          <li class="dropdown" id="admin-dropdown">
+            <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" data-bs-display="static" 
+               role="button" aria-haspopup="true" aria-expanded="false" id="admin-menu" href="#">
               <i class="fas fa-lock" aria-hidden="true">&nbsp;</i>
               <%= _('Admin') %>
               <span class="caret"></span>
             </a>
-            <ul class="dropdown-menu" aria-labelledby="admin-menu">
+            <ul class="dropdown-menu dropdown-menu-end" 
+                data-bs-popper="static" aria-labelledby="admin-menu">
               <% if current_user.can_org_admin? %>
-                <li <%= 'class=active' if active_page?(org_admin_plans_path) %>>
-                  <%= link_to _('Plans'), org_admin_plans_path %>
+                <li class="nav-item <%= 'class=active' if active_page?(org_admin_plans_path) %>">
+                  <%= link_to _('Plans'), org_admin_plans_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
               <% if current_user.can_modify_templates? %>
                 <% template_path = current_user.can_super_admin? ? org_admin_templates_path : organisational_org_admin_templates_path %>
-                  <li <%= 'class=active' if active_page?(template_path) %>>
-                    <%= link_to _('Templates'), template_path %>
+                  <li class="nav-item <%= 'class=active' if active_page?(template_path) %>">
+                    <%= link_to _('Templates'), template_path, class: 'nav-link dropdown-item  px-3' %>
                   </li>
               <% end %>
               <% if current_user.can_modify_guidance? %>
-                  <li <%= 'class=active' if active_page?(admin_index_guidance_path(current_user.org_id)) %>>
-                    <%= link_to _('Guidance'), admin_index_guidance_path(current_user.org_id) %>
+                  <li class="nav-item <%= 'class=active' if active_page?(admin_index_guidance_path(current_user.org_id)) %>">
+                    <%= link_to _('Guidance'), admin_index_guidance_path(current_user.org_id), class: 'nav-link dropdown-item  px-3' %>
                   </li>
               <% end %>
               <% if current_user.can_super_admin? %>
-                  <li <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>>
-                    <%= link_to _('Organisations'), super_admin_orgs_path %>
+                  <li class="nav-item <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>">
+                    <%= link_to _('Organisations'), super_admin_orgs_path, class: 'nav-link dropdown-item  px-3' %>
                   </li>
               <% else %>
                 <% if current_user.can_modify_org_details? %>
-                    <li <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>>
-                      <%= link_to _('Organisation details'), admin_edit_org_path(current_user.org_id) %>
+                    <li class="nav-item <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>">
+                      <%= link_to _('Organisation details'), admin_edit_org_path(current_user.org_id), class: 'nav-link dropdown-item  px-3' %>
                     </li>
                 <% end %>
               <% end %>
               <% if current_user.can_grant_permissions? %>
-                  <li <%= 'class=active' if active_page?(admin_index_users_path) %>>
-                    <%= link_to _('Users'), admin_index_users_path, class: 'main_nav_last_li' %>
+                  <li class="nav-item <%= 'class=active' if active_page?(admin_index_users_path) %>">
+                    <%= link_to _('Users'), admin_index_users_path, class: 'main_nav_last_li nav-link dropdown-item  px-3' %>
                   </li>
               <% end %>
               <% if current_user.can_super_admin? %>
-                <li <%= 'class=active' if active_page?(super_admin_themes_path) %>>
-                  <%= link_to(_('Themes'), super_admin_themes_path) %>
+                <li class="nav-item <%= 'class=active' if active_page?(super_admin_themes_path) %>">
+                  <%= link_to _('Themes'), super_admin_themes_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
               <% if current_user.can_org_admin? || current_user.can_super_admin? %>
-                <li <%= 'class=active' if active_page?(usage_index_path) %>>
-                  <%= link_to(_('Usage'), usage_index_path) %>
+                <li class="nav-item <%= 'class=active' if active_page?(usage_index_path) %>">
+                  <%= link_to _('Usage'), usage_index_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
               <% if current_user.can_super_admin? %>
-                <li <%= 'class=active' if active_page?(super_admin_api_clients_path) %>>
-                  <%= link_to(_('Api Clients'), super_admin_api_clients_path) %>
+                <li class="nav-item <%= 'class=active' if active_page?(super_admin_api_clients_path) %>">
+                  <%= link_to _('Api Clients'), super_admin_api_clients_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
-                <li <%= 'class=active' if active_page?(super_admin_notifications_path) %>>
-                  <%= link_to _('Notifications'), super_admin_notifications_path %>
+               <li class="nav-item <%= 'class=active' if active_page?(super_admin_notifications_path) %>">
+                  <%= link_to _('Notifications'), super_admin_notifications_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
             </ul>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index 753406faa3..85d2060a31 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -5,27 +5,27 @@
 %>
 
 <!-- footer container -->
-<div id="footer-navbar" class="navbar-inverse navbar-fixed-bottom" role="navigation">
+<div id="footer-navbar" class="navbar navbar-expand-md navbar-branding navbar-fixed-bottom" role="navigation">
   <div class="container-fluid">
-    <ul class="nav navbar-nav">
-      <li><%= link_to sanitize("&copy; 2004 - #{Time.now.year} #{Rails.configuration.x.organisation.name}"), "#{Rails.configuration.x.organisation.url}"%></li>
-      <li>•</li>
-      <li><a href="<%= about_us_path %>"><%= _('About') %></a></li>
-      <li><a href="<%= contact_us %>"><%= _('Contact us') %></a></li>
-      <li><a href="<%= terms_path %>"><%= _('Terms of use') %></a></li>
-      <li><a href="<%= privacy_path %>"><%= _('Privacy statement') %></a></li>
-      <li><a href="https://github.com/DMPRoadmap/roadmap"><%= _('GitHub') %></a></li>
+    <ul class="navbar-nav">
+      <li class="nav-item"><%= link_to sanitize("&copy; 2004 - #{Time.now.year} #{Rails.configuration.x.organisation.name}"), "#{Rails.configuration.x.organisation.url}", class: 'nav-link' %></li>
+      <li class="nav-item">•</li>
+      <li class="nav-item"><a class="nav-link" href="<%= about_us_path %>"><%= _('About') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="<%= contact_us %>"><%= _('Contact us') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="<%= terms_path %>"><%= _('Terms of use') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="<%= privacy_path %>"><%= _('Privacy statement') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="https://github.com/DMPRoadmap/roadmap"><%= _('GitHub') %></a></li>
     </ul>
-    <ul class="nav navbar-nav navbar-right">
-      <li>
-        <%= link_to("http://www.cdlib.org/services/uc3/", title: "University of California Curation Center", target: '_blank', class: 'has-new-window-popup-info')  do %>
-          <%= image_tag("uc3_logo_white.png", class: "img-responsive", alt: 'University of California Curation Center (opens in a new window)') %>
+    <ul class="navbar-nav navbar-right">
+      <li class="nav-item">
+        <%= link_to("http://www.cdlib.org/services/uc3/", title: "University of California Curation Center", target: '_blank', class: 'nav-link has-new-window-popup-info')  do %>
+          <%= image_tag("uc3_logo_white.png", class: "img-fluid", alt: 'University of California Curation Center (opens in a new window)') %>
           <span class="new-window-popup-info"><%= _('Opens in new window') %></span>
         <% end %>
       </li>
-      <li>
-        <%= link_to("http://www.dcc.ac.uk/", title: "Digital Curation Centre", target: '_blank', class: 'has-new-window-popup-info')  do %>
-          <%= image_tag("dcc_logo_white.png", class: "img-responsive", alt: 'Digital Curation Centre (opens in a new window)') %>
+      <li class="nav-item">
+        <%= link_to("http://www.dcc.ac.uk/", title: "Digital Curation Centre", target: '_blank', class: 'nav-link has-new-window-popup-info')  do %>
+          <%= image_tag("dcc_logo_white.png", class: "img-fluid", alt: 'Digital Curation Centre (opens in a new window)') %>
           <span class="new-window-popup-info"><%= _('Opens in new window') %></span>
         <% end %>
       </li>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 293f92465e..5520d6c6a2 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,5 +1,5 @@
-<!-- header information (bootstrap 3 column layout) -->
-<div class="main-nav">
+<!-- header information (bootstrap column layout) -->
+<div class="main-nav pb-3">
   <%= render partial: "layouts/navigation" %>
 </div>
 <div class="org-branding">
diff --git a/app/views/layouts/_navigation.html.erb b/app/views/layouts/_navigation.html.erb
index 95e0798168..32326ccfae 100644
--- a/app/views/layouts/_navigation.html.erb
+++ b/app/views/layouts/_navigation.html.erb
@@ -1,63 +1,71 @@
-<nav id="app-navbar" class="navbar navbar-inverse">
+<nav id="app-navbar" class="navbar navbar-expand-md navbar-branding">
   <div class="container-fluid" >
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-menu" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
+    <div class="navbar-header d-sm-flex justify-content-sm-between">
+      <!-- Brand and toggle get grouped for better mobile display -->
       <%= link_to(image_tag("logo.png",
                             alt: "#{ApplicationService.application_name} #{_('logo')}",
-                            class: "app-logo",
+                            class: "app-logo me-sm-auto",
                             title: ApplicationService.application_name),
                   root_path) %>
     </div>
+   
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
+            data-bs-target="#app-navbar-menu" aria-controls="app-navbar-menu" 
+            aria-expanded="false" aria-label="Toggle navigation">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="navbar-toggler-icon"></span>
+    </button>
+
 
     <!-- Collect the nav links, forms, and other content for toggling -->
+  
     <div class="collapse navbar-collapse" id="app-navbar-menu">
-      <ul class="nav navbar-nav">
+      <ul class="navbar-nav">
         <% if user_signed_in? %>
-          <li <%= 'class=active' if active_page?(plans_path, true)%>>
-            <%= link_to _('My Dashboard'), plans_path %>
+          <li class="nav-item <%= ' active' if active_page?(plans_path, true) %>">
+            <%= link_to _('My Dashboard'), plans_path, class: 'nav-link' %>
           </li>
-          <li <%= 'class=active' if active_page?(new_plan_path, true) %>>
-            <%= link_to _('Create plans'), new_plan_path %>
+          <li class="nav-item <%= ' active' if active_page?(new_plan_path, true) %>">
+            <%= link_to _('Create plans'), new_plan_path, class: 'nav-link' %>
           </li>
-            <li class="dropdown <%= 'active' if active_page?(public_plans_path, true) || active_page?(public_templates_path, true) %>" id="reference-dropdown">
-              <a href="#" class="dropdown-toggle" role="button" id="reference-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-book" aria-hidden="true">&nbsp;</i>
-                <%= _("Reference") %>
-                <span class="caret"></span>
-              </a>
-              <ul class="dropdown-menu inverse-dropdown" aria-labelledby="reference-menu">
-                <li <%= 'class=active' if active_page?(public_plans_path) %>>
-                  <%= link_to _('Public DMPs'), public_plans_path %>
-                </li>
-                <li <%= 'class=active' if active_page?(public_templates_path) %>>
-                  <%= link_to _('DMP Templates'), public_templates_path %>
-              </ul>
+          <li class="dropdown <%= ' active' if active_page?(public_plans_path, true) || active_page?(public_templates_path, true) %>" id="reference-dropdown">
+            <a href="#" class="dropdown-toggle nav-link" role="button" id="reference-menu" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
+              <i class="fas fa-book" aria-hidden="true">&nbsp;</i>
+              <%= _("Reference") %>
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end" 
+                data-bs-popper="static" aria-labelledby="reference-menu">
+              <li class="nav-item <%= ' active' if active_page?(public_plans_path) %>">
+                <%= link_to _('Public DMPs'), public_plans_path, class: 'dropdown-item  px-3' %>
+              </li>
+              <li class="nav-item <%= ' active' if active_page?(public_templates_path) %>">
+                <%= link_to _('DMP Templates'), public_templates_path, class: 'dropdown-item  px-3' %>
+              </li>
+            </ul>
           </li>
         <% else %>
-          <li <%= 'class=active' if active_page?(root_path, true) || active_page?(plans_path, true) %>>
-            <%= link_to _('Home'), root_path %>
+          <li class="nav-item <%= ' active' if active_page?(root_path, true) || active_page?(plans_path, true) %>">
+            <%= link_to _('Home'), root_path, class: 'nav-link' %>
           </li>
-          <li <%= 'class=active' if active_page?(public_plans_path, true) %>>
-            <%= link_to _('Public DMPs'), public_plans_path %>
+          <li class="nav-item <%= ' active' if active_page?(public_plans_path, true) %>">
+            <%= link_to _('Public DMPs'), public_plans_path, class: 'nav-link' %>
           </li>
-          <li <%= 'class=active' if active_page?(public_templates_path, true) %>>
-            <%= link_to _('DMP Templates'), public_templates_path %>
+          <li class="nav-item <%= ' active' if active_page?(public_templates_path, true) %>">
+            <%= link_to _('DMP Templates'), public_templates_path, class: 'nav-link' %>
           </li>
         <% end %>
         <!-- help page -->
-        <li <%= 'class=active' if active_page?(help_path, true) %>>
-          <%= link_to _('Help'), help_path %>
+        <li class="nav-item <%= ' active' if active_page?(help_path, true) %>">
+          <%= link_to _('Help'), help_path, class: 'nav-link' %>
         </li>
       </ul>
-      <ul class="nav navbar-nav navbar-right">
-          <%= render "layouts/signin_signout" %>
+
+      <ul class="navbar-nav ms-auto">
+        <%= render "layouts/signin_signout" %>
       </ul>
+      
+      
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
 </nav>
diff --git a/app/views/layouts/_paginable.html.erb b/app/views/layouts/_paginable.html.erb
index 5afb3f7c56..17393fc135 100644
--- a/app/views/layouts/_paginable.html.erb
+++ b/app/views/layouts/_paginable.html.erb
@@ -26,7 +26,7 @@
     </div>
     <div class="row">
       <div class="col-md-12">
-        <div class="pull-left">
+        <div class="float-start">
           <% if total > Kaminari.config.default_per_page %>
             <% if searchable? %>
                 <ul class="list-inline">
@@ -50,7 +50,7 @@
             <% end %>
           <% end %>
         </div>
-        <div class="pull-right">
+        <div class="float-end">
           <% if paginable? %>
               <%= paginate(scope, params: paginable_params, remote: remote) %>
           <% end %>
diff --git a/app/views/layouts/_signin_signout.html.erb b/app/views/layouts/_signin_signout.html.erb
index 56ad183de7..98be5cc4b8 100644
--- a/app/views/layouts/_signin_signout.html.erb
+++ b/app/views/layouts/_signin_signout.html.erb
@@ -1,15 +1,21 @@
 <!-- language dropdown -->
 <% if Language.many? %>
-  <li class="dropdown" id="change-language">
-    <a href="#" class="dropdown-toggle" role="button" id="language-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <li class="dropdown nav-item" id="change-language">
+    <a href="#" class="dropdown-toggle nav-link" role="button" id="language-menu" data-bs-toggle="dropdown"
+       data-bs-display="static" aria-haspopup="true" aria-expanded="false">
       <i class="fas fa-language" aria-hidden="true">&nbsp;</i>
       <%= _('Language') %>
       <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu inverse-dropdown" aria-labelledby="language-menu">
+    <ul class="dropdown-menu dropdown-menu-end" 
+        data-bs-popper="static" aria-labelledby="language-menu">
       <% languages.each do |l| %>
-        <li <%= 'class=active' if I18n.locale == l.abbreviation %>>
-          <%= link_to l.name, locale_path(l.abbreviation), method: :patch %>
+        <li>
+          <% if I18n.locale == l.abbreviation %>
+            <%= link_to l.name, locale_path(l.abbreviation), method: :patch, class: 'active dropdown-item  px-3' %>
+          <% else %>
+            <%= link_to l.name, locale_path(l.abbreviation), method: :patch, class: 'dropdown-item  px-3' %>
+          <% end %>
         </li>
       <% end %>
     </ul>
@@ -18,25 +24,26 @@
 
 <!-- Sign in / out -->
 <% if user_signed_in? %>
-  <li class="dropdown" id="signin-signout">
-    <a href="#" class="dropdown-toggle" role="button" id="user-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <li class="dropdown nav-item" id="signin-signout">
+    <a href="#" class="dropdown-toggle nav-link" role="button" id="user-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <i class="fas fa-user" aria-hidden="true">&nbsp;</i>
       <%= current_user.name(false) %>
       <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu inverse-dropdown" aria-labelledby="user-menu">
+    <ul class="dropdown-menu dropdown-menu-end" 
+        data-bs-popper="static" aria-labelledby="user-menu">
       <li>
-        <%= link_to '<i class="fas fa-square-pen" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Edit profile'), edit_user_registration_path %>
+        <%= link_to '<i class="fas fa-square-pen" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Edit profile'), edit_user_registration_path, class: 'dropdown-item' %>
       </li>
       <li>
-        <%= link_to '<i class="fas fa-right-to-bracket" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Logout'), destroy_user_session_path, method: :delete %>
+        <%= link_to '<i class="fas fa-right-to-bracket" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Logout'), destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
       </li>
     </ul>
   </li>
 <% else %>
   <% if !active_page?(root_path, true) %>
     <li>
-      <a href="<%= root_path %>">
+      <a href="<%= root_path %>" class="nav-link">
         <i class="fas fa-right-to-bracket" aria-hidden="true">&nbsp;</i>
         <%= _('Sign in') %>
       </a>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index fe98bb3b93..687385e6a9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -86,7 +86,7 @@
       <main class="container" id="maincontent">
         <div id="notification-area"
              class="notification-area alert <%= has_alert ? 'alert-warning ' : 'alert-info ' %>
-                    <%= (has_alert or has_notice) ? 'show' : 'hide' %>"
+                    <%= (has_alert or has_notice) ? 'd-block' : 'd-none' %>"
              role="<%= (has_notice ? 'status' : (has_alert ? 'alert' : '')) %>">
           <i class="fas <%= has_alert ? ' fa-circle-xmark' : ' fa-circle-check' %>" aria-hidden="true"></i>
           <span class="aria-only"><%= has_alert ? _('Error:') : _('Notice:') %></span>
@@ -97,11 +97,9 @@
         <%= yield %>
 
 
-        <%# Generic UJS/Ajax spinner. Bootstrap 5+ has built in spinner for this class, so update when
-            we upgrade to remove the img tag %>
-        <div class="spinner-border hidden" role="status">
-          <%spinner_msg = _("Loading...") %>
-          <%= image_tag("spinner.gif", alt: spinner_msg) %>
+        <%# Updated with Bootstrap 5 built in spinner %>
+        <div class="spinner-border d-none" role="status">
+          <span class="visually-hidden"><%spinner_msg = _("Loading...") %></span>
         </div>
 
       </main>
diff --git a/app/views/layouts/modal_search/_form.html.erb b/app/views/layouts/modal_search/_form.html.erb
index cf4501d08b..f0cca4c6c9 100644
--- a/app/views/layouts/modal_search/_form.html.erb
+++ b/app/views/layouts/modal_search/_form.html.erb
@@ -32,30 +32,29 @@ no_results_msg = _("No results matched your filter criteria.")
      aria-labelledby="modal-search-label"
      aria-hidden="true">
 
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
 
       <div class="modal-header">
-        <%= button_tag "X", type: "button", class: "close",
-                       data: { dismiss: "modal" },
-                       aria: { label: _("Close") } %>
-
-        <h3 id="modal-search-label" class="modal-title">
+              <h3 id="modal-search-label" class="modal-title">
           <%= _("%{topic} search") % { topic: label } %>
         </h3>
+
+        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
+
       </div>
 
       <div class="modal-body">
         <%# Search filters %>
         <%= form_with model: model_instance, url: search_path, method: search_method, local: false,
                       id: "modal-search-#{namespace}-filters" do |f| %>
-          <div class="form-group row">
-            <div class="col-md-10">
+          <div class="form-control mb-3 row">
+            <div class="d-flex justify-content-between col-md-10">
               <%= yield :"filters-#{namespace}" %>
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="form-control mb-3 row">
             <div class="col-md-10">
               <span class="col-md-10">
                 <%= f.text_field :search_term,
@@ -65,7 +64,7 @@ no_results_msg = _("No results matched your filter criteria.")
               </span>
               <div class="col-md-3">
                 <%= f.button _("Apply filter(s)"),
-                             class: "btn btn-default",
+                             class: "btn btn-secondary",
                              type: "submit" %>
               </div>
             </div>
@@ -73,18 +72,12 @@ no_results_msg = _("No results matched your filter criteria.")
         <% end %>
 
         <%# Search Results %>
-        <div id="modal-search-<%= namespace %>-results" class="form-group row modal-search-results">
+        <div id="modal-search-<%= namespace %>-results" class="form-control mb-3 row modal-search-results">
           <div class="col-md-12">
             <div class="col-md-12"><%= no_results_msg %></div>
           </div>
         </div>
       </div>
-
-      <div class="modal-footer">
-        <%= button_tag _("Close"), type: "button", class: "close",
-                       data: { dismiss: "modal" } %>
-      </div>
-
     </div>
   </div>
 </div>
diff --git a/app/views/layouts/modal_search/_result.html.erb b/app/views/layouts/modal_search/_result.html.erb
index b7c4a5f736..2240fbafae 100644
--- a/app/views/layouts/modal_search/_result.html.erb
+++ b/app/views/layouts/modal_search/_result.html.erb
@@ -18,10 +18,10 @@ Locals:
     <%= result[item_name_attr] %>
 
     <%= link_to _("Select"), '#',
-                class: "modal-search-result-selector #{selected ? 'hidden' : ''}",
+                class: "modal-search-result-selector #{selected ? 'd-none' : ''}",
                 title: _("Click to select %{item_name}") % { item_name: title } %>
     <%= link_to _("Remove"), '#',
-                class: "modal-search-result-unselector #{selected ? '' : 'hidden'}",
+                class: "modal-search-result-unselector #{selected ? '' : 'd-none'}",
                 title: _("Click to remove %{item_name}") % { item_name: title } %>
   </div>
 
diff --git a/app/views/layouts/modal_search/_results.html.erb b/app/views/layouts/modal_search/_results.html.erb
index c237b76644..f0fc332237 100644
--- a/app/views/layouts/modal_search/_results.html.erb
+++ b/app/views/layouts/modal_search/_results.html.erb
@@ -24,7 +24,7 @@ no_results_msg = _("No results matched your filter criteria.")
   <% if results.any? %>
     <div class="col-md-12 modal-search-results-pagination">
       <%= page_entries_info results %>
-      <span class="float-right">
+      <span class="float-end">
         <%= paginate results, remote: true, method: :post %>
       </span>
     </div>
@@ -49,7 +49,7 @@ no_results_msg = _("No results matched your filter criteria.")
 <% if results.any? && !selected %>
   <div class="col-md-9">&nbsp;</div>
   <div class="col-md-3">
-    <span class="float-right">
+    <span class="float-end">
       <%= paginate results, remote: true, method: :post %>
     </span>
   </div>
diff --git a/app/views/layouts/modal_search/_selections.html.erb b/app/views/layouts/modal_search/_selections.html.erb
index 2ace4f1fec..4ddc1587d7 100644
--- a/app/views/layouts/modal_search/_selections.html.erb
+++ b/app/views/layouts/modal_search/_selections.html.erb
@@ -29,7 +29,7 @@ locals:
 </div>
 <div class="col-md-12">
   <div class="col-md-12">
-    <%= button_tag button_label, type: "button", class: "btn btn-default",
-                   data: { toggle: "modal", target: "#modal-search-#{namespace}" } %>
+    <%= button_tag button_label, type: "button", class: "btn btn-secondary",
+                   'data-bs-toggle' => "modal", 'data-bs-target' => "#modal-search-#{namespace}" %>
   </div>
 </div>
diff --git a/app/views/notes/_archive.html.erb b/app/views/notes/_archive.html.erb
index 2075a78f69..f6d7afd2aa 100644
--- a/app/views/notes/_archive.html.erb
+++ b/app/views/notes/_archive.html.erb
@@ -6,9 +6,9 @@
     <%= render partial: "notes/show", locals: { note: note }, formats: [:html] %>
 
     <p><%= _('Are you sure you want to remove this comment?')%></p>
-    <div class="pull-right">
-      <%= f.button(_('Remove'), class: "btn btn-default", type: "submit") %>
-      <%= f.button(_('Cancel'), class: "btn btn-default", type: "button") %>
+    <div class="float-end">
+      <%= f.button(_('Remove'), class: "btn btn-secondary", type: "submit") %>
+      <%= f.button(_('Cancel'), class: "btn btn-secondary", type: "button") %>
     </div>
   <% end %>
 <% end %>
\ No newline at end of file
diff --git a/app/views/notes/_edit.html.erb b/app/views/notes/_edit.html.erb
index ce86331dec..13768990ba 100644
--- a/app/views/notes/_edit.html.erb
+++ b/app/views/notes/_edit.html.erb
@@ -1,14 +1,14 @@
 <%# locals: { note } %>
 <% if !note.nil? %>
     <%= form_for(note, url: note_path(note), method: :put) do |f| %>
-        <div class="form-group">
+        <div class="form-control mb-3">
             <%= f.label(:text, _('Edit comment to share with collaborators')) %>
             <%= f.text_area(:text, class: 'form-control', id: "note-#{note.id}",
                             spellcheck: true) %>
         </div>
-        <div class="pull-right">
-            <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
-            <%= f.button(_('Cancel'), class: "btn btn-default", type: "button") %>
+        <div class="float-end">
+            <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
+            <%= f.button(_('Cancel'), class: "btn btn-secondary", type: "button") %>
         </div>
     <% end %>
 <% end %>
diff --git a/app/views/notes/_layout.html.erb b/app/views/notes/_layout.html.erb
index 814e5082e3..0eed9eb069 100644
--- a/app/views/notes/_layout.html.erb
+++ b/app/views/notes/_layout.html.erb
@@ -1,7 +1,7 @@
 <%# locals: { plan, question, answer } %>
 <% notes = answer.non_archived_notes %>
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card card-default">
+  <div class="card-body">
     <div class="row">
       <div class="col-md-12">
         <%= render partial: "/notes/list", locals: { question_id: question.id, notes: notes, plan: plan }, formats: [:html] %>
@@ -17,8 +17,8 @@
       </div>
       <div class="row">
         <div class="col-md-12">
-          <div class="pull-right">
-            <%= link_to(_('Add Comment'), "#note_new#{question.id}", class: "btn btn-default note_new_link", role: "button", style: "visibility: hidden") %>
+          <div class="float-end">
+            <%= link_to(_('Add Comment'), "#note_new#{question.id}", class: "btn btn-secondary note_new_link", role: "button", style: "visibility: hidden") %>
           </div>
         </div>
       </div>
diff --git a/app/views/notes/_list.html.erb b/app/views/notes/_list.html.erb
index 8c8e5f6149..e1e567f4b3 100644
--- a/app/views/notes/_list.html.erb
+++ b/app/views/notes/_list.html.erb
@@ -5,11 +5,11 @@
             <div class="col-md-12">
                 <ul class="list-group">
                     <li class="list-group-item">
-                        <div class="pull-left allow-break-words"><!-- note info -->
+                        <div class="float-start allow-break-words"><!-- note info -->
                             <%= render partial: "notes/show", locals: {note: note }, formats: [:html] %>
                         </div>
                         <% if plan.commentable_by?(current_user.id) %>
-                        <div class="pull-right"><!-- note actions -->
+                        <div class="float-end"><!-- note actions -->
                             <ul class="list-inline">
                                   <% if current_user.id == note.user_id %>
                                       <li><%= link_to(_('Edit'), "#note_edit#{note.id}", class: 'note_edit_link') %></li>
diff --git a/app/views/notes/_new.html.erb b/app/views/notes/_new.html.erb
index fc1e90abf0..336c5581a5 100644
--- a/app/views/notes/_new.html.erb
+++ b/app/views/notes/_new.html.erb
@@ -4,12 +4,12 @@
   <%= f.hidden_field :question_id, value: question.id %>
   <%= f.hidden_field :answer_id, value: answer.id %>
   <%= f.hidden_field :plan_id, value: plan.id %>
-  <div class="form-group">
+  <div class="form-control mb-3">
     <%= f.label(:text, _('Add comments to share with collaborators')) %>
     <%= f.text_area(:text, class: 'form-control note', id: "note-#{question.id}",
                     spellcheck: true) %>
   </div>
-  <div class="pull-right">
-    <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+  <div class="float-end">
+    <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
   </div>
 <% end %>
diff --git a/app/views/notes/_show.html.erb b/app/views/notes/_show.html.erb
index 3a0fd7101d..95eca19594 100644
--- a/app/views/notes/_show.html.erb
+++ b/app/views/notes/_show.html.erb
@@ -8,7 +8,7 @@
           </div>
         </li>
         <li>
-            <span class="label label-info">
+            <span class="badge bg-info">
                 <%= "#{user.name} " %> <time class="timeago" datetime="<%= note.updated_at.iso8601 %>"></time>
             </span>
         </li>
diff --git a/app/views/org_admin/annotations/_form.html.erb b/app/views/org_admin/annotations/_form.html.erb
index 12489bdb36..93e03e94f4 100644
--- a/app/views/org_admin/annotations/_form.html.erb
+++ b/app/views/org_admin/annotations/_form.html.erb
@@ -1,7 +1,7 @@
 <fieldset class="annotation_fields" id="<%= unique_dom_id(f.object, "fields") %>">
-  <div class="form-group col-md-10">
+  <div class="form-control mb-3 col-md-10">
     <% lbl = f.object.type.humanize.downcase == 'example answer' ? _('Example answer') : _('Guidance') %>
-    <%= f.label(:type, lbl, class: "control-label") %>
+    <%= f.label(:type, lbl, class: "form-label") %>
     <div data-toggle="tooltip" title="<%= tooltip_for_annotation_text(f.object) %>">
       <em class="sr-only"><%= tooltip_for_annotation_text(f.object) %></em>
       <%= f.text_area(:text, class: 'question', spellcheck: true,
diff --git a/app/views/org_admin/conditions/_add.html.erb b/app/views/org_admin/conditions/_add.html.erb
index 37cf0825d0..85126c6dd6 100644
--- a/app/views/org_admin/conditions/_add.html.erb
+++ b/app/views/org_admin/conditions/_add.html.erb
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-md-12 mt-2">
     <%= link_to _('Add condition'), new_org_admin_question_condition_path(question_id: question.id, condition_no: condition_no), remote: true, class: "add-condition" %> 
   </div>
 </div>
diff --git a/app/views/org_admin/conditions/_container.html.erb b/app/views/org_admin/conditions/_container.html.erb
index bd54fbb5f3..03e4b96af6 100644
--- a/app/views/org_admin/conditions/_container.html.erb
+++ b/app/views/org_admin/conditions/_container.html.erb
@@ -1,13 +1,13 @@
 <div id="condition-container">
-  <div class="condition-list" data-loaded="false">
+  <div class="condition-list" data-bs-loaded="false">
     <div class="row">
-      <div class="col-md-3 bold">
+      <div class="col-md-3 mb-2 bold">
         <%= label(:text, _('Option'), class: "control-label")%>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 mb-2">
         <%= label(:text, _('Action'), class: "control-label") %>
       </div>
-      <div class="col-md-3 bold">
+      <div class="col-md-3 mb-2 bold">
         <%= _('Remove')%>
       </div>
       <div class="col-md-3">
diff --git a/app/views/org_admin/conditions/_form.html.erb b/app/views/org_admin/conditions/_form.html.erb
index 45c67d2f2c..8a48a3fc5c 100644
--- a/app/views/org_admin/conditions/_form.html.erb
+++ b/app/views/org_admin/conditions/_form.html.erb
@@ -1,4 +1,4 @@
-<div class="row condition-partial">
+<div class="row condition-partial mb-3">
   <%
    action_type_arr = [["removes", :remove], ["adds notification", :add_webhook]]
    name_start = "conditions[]condition_" + condition_no.to_s
@@ -10,16 +10,16 @@
       grouped_options_for_select(remove_question_collection)
     multiple = (question.question_format.multiselectbox? || question.question_format.checkbox?)
   %>
-  <div class="col-md-3">
+  <div class="col-md-3 pe-2">
     <%= select_tag(:question_option, options_from_collection_for_select(question.question_options.sort_by(&:number), "id", "text",
-        condition_exists ? condition[:question_option_id] : question.question_options.sort_by(&:number)[0]), {class: 'selectpicker regular', 'data-style': 'bg-white px-4 py-3', multiple: multiple, name: name_start + "[question_option][]"}) %>
+        condition_exists ? condition[:question_option_id] : question.question_options.sort_by(&:number)[0]), {class: 'form-select regular', 'data-bs-style': 'dropdown-toggle bg-white px-4 py-3', name: name_start + "[question_option][]"}) %>
   </div>
-  <div class="col-md-3">
-    <%= select_tag(:action_type, options_for_select(action_type_arr, type_default), {name: name_start + "[action_type]", class: 'action-type selectpicker narrow', 'data-style': 'bg-white px-4 py-3'}) %>
+  <div class="col-md-3 pe-2">
+    <%= select_tag(:action_type, options_for_select(action_type_arr, type_default), {name: name_start + "[action_type]", class: 'action-type form-select narrow', 'data-bs-style': 'dropdown-toggle bg-white px-4 py-3'}) %>
   </div>
-  <div class="col-md-3">
+  <div class="col-md-3 pe-2">
     <div class="remove-dropdown">
-      <%= select_tag(:remove_question_id, remove_question_group, {name: name_start + "[remove_question_id][]", class: 'selectpicker regular', multiple: true, 'data-style': 'bg-white px-4 py-3'}) %>
+      <%= select_tag(:remove_question_id, remove_question_group, {name: name_start + "[remove_question_id][]", class: 'form-select regular', multiple: true, 'data-bs-style': 'dropdown-toggle bg-white px-4 py-3'}) %>
     </div>
     <div class="webhook-replacement display-off my-auto text-center">
       <%= link_to _('Edit email'), '#' %>
diff --git a/app/views/org_admin/conditions/_webhook_form.html.erb b/app/views/org_admin/conditions/_webhook_form.html.erb
index 8230e61b63..8871af47c4 100644
--- a/app/views/org_admin/conditions/_webhook_form.html.erb
+++ b/app/views/org_admin/conditions/_webhook_form.html.erb
@@ -1,44 +1,42 @@
 <div class="modal fade" id= "<%= condition_no %>modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
   aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header text-center">
         <h4 class="modal-title w-100 font-weight-bold"><%= _('Send email') %></h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Close') %>"></button>
       </div>
       <div class="modal-body mx-3">
         <div class="md-form mb-5 prefix grey-text">
           <i class="fa-solid fa-user"></i>
-          <%= label_tag name_start + "[webhook-name]", _('Name'), {'data-error': 'wrong', 'data-success': 'right'} %>
+          <%= label_tag name_start + "[webhook-name]", _('Name'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
           <%= text_field_tag name_start + "[webhook-name]", nil, class: 'form-control validate' %>
         </div>
 
         <div class="md-form mb-5 prefix grey-text">
         <i class="fa-solid fa-envelope"></i> <!-- mdbootstrap should have treatment for bad input for this -->
-          <%= label_tag name_start + "[webhook-email]", _('Email'), {'data-error': 'wrong', 'data-success': 'right'} %>
-          <%= email_field_tag name_start + "[webhook-email]", nil, placeholder: _('recipient_email@example.com'), class: 'form-control validate' %>
+          <%= label_tag name_start + "[webhook-email]", _('Email'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
+          <%= email_field_tag name_start + "[webhook-email]", nil, { placeholder: _('recipient_email@example.com'), class: 'form-control validate'} %>
         </div>
 
         <div class="md-form mb-5 prefix grey-text">
           <i class="fa-solid fa-tag"></i>
-          <%= label_tag name_start + "[webhook-subject]", _('Subject'), {'data-error': 'wrong', 'data-success': 'right'} %>
+          <%= label_tag name_start + "[webhook-subject]", _('Subject'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
           <%= text_field_tag name_start + "[webhook-subject]", nil, class: 'form-control validate' %>
         </div>
 
         <div class="md-form prefix grey-text">
           <i class="fa-solid fa-pencil"></i>
-          <%= label_tag name_start + "[webhook-message]", _('Message'), {'data-error': 'wrong', 'data-success': 'right'} %>
-          <%= text_area_tag name_start + "[webhook-message]", nil, placeholder: _('Email content'), class: 'form-control md-textarea', rows: 4 %>
+          <%= label_tag name_start + "[webhook-message]", _('Message'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
+          <%= text_area_tag name_start + "[webhook-message]", nil, { placeholder: _('Email content'), class: 'form-control md-textarea', rows: 4 } %>
         </div>
       </div>
       <div class="modal-footer d-flex justify-content-center">
-        <button class="btn btn-default discard" data-dismiss="modal"><%= _('Discard ') %><i class="fa-solid fa-trash-can"></i></button>
-        <button class="btn btn-default" ><%= _('Save ') %><i class="fa-solid fa-paper-plane"></i></button>
+        <button class="btn btn-secondary discard" data-bs-dismiss="modal"><%= _('Discard ') %><i class="fa-solid fa-trash-can"></i></button>
+        <button class="btn btn-secondary" ><%= _('Save ') %><i class="fa-solid fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
 </div>
 
-<a href="" class="pseudo-webhook-btn" data-toggle="modal" data-target="#<%= condition_no %>modalContactForm"></a>
+<a href="" class="pseudo-webhook-btn" data-bs-toggle="modal" data-bs-target="#<%= condition_no %>modalContactForm"></a>
diff --git a/app/views/org_admin/departments/edit.html.erb b/app/views/org_admin/departments/edit.html.erb
index 06aafff09f..bd72b783d4 100644
--- a/app/views/org_admin/departments/edit.html.erb
+++ b/app/views/org_admin/departments/edit.html.erb
@@ -2,7 +2,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= _('Edit the School/Department') %></h1>
-    <%= link_to _('View all departments'), departments_url, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all departments'), departments_url, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
@@ -10,19 +10,19 @@
   <div class="col-md-12">
     <%= form_for :department, url: org_department_path(org_id: @org_id, id: @department.id), html: { method: :put, id: 'edit_department_form' } do |f| %>
         <%= f.hidden_field :org_id, value: @org_id %>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Name'), for: :name, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Name'), for: :name, class: "form-label" %>
           <%= f.text_field :name, as: :string, class: "form-control", spellcheck: true, 'aria-required': true, 'data-toggle': 'tooltip', title: _('Add the name of a school/department.') %>
         </div>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Abbreviated name or code'), for: :code, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Abbreviated name or code'), for: :code, class: "form-label" %>
           <%= f.text_field :code, as: :string, class: "form-control", 'aria-required': false, 'data-toggle': 'tooltip', title: _('Add the abbreviated name or code for the school/department.') %>
         </div>
         <!-- submit buttons -->
-        <div class="form-group col-xs-8">
+        <div class="form-control mb-3 col-xs-8">
           <%= f.submit _('Save'), name: "draft", class: "btn btn-primary" %>
           <%= link_to _('Cancel'), departments_url, class: "btn btn-primary", role: 'button' %>
         </div>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/departments/new.html.erb b/app/views/org_admin/departments/new.html.erb
index 0911ab5db1..5812f88fd0 100644
--- a/app/views/org_admin/departments/new.html.erb
+++ b/app/views/org_admin/departments/new.html.erb
@@ -2,7 +2,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= _('Create a School/Department') %></h1>
-    <%= link_to _('View all departments'), departments_url, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all departments'), departments_url, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
@@ -10,19 +10,19 @@
   <div class="col-md-12">
     <%= form_for :department, url: org_departments_path(@org_id), html: { method: :post, id: 'create_department_form' } do |f| %>
         <%= f.hidden_field :org_id, value: @org_id %>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Name'), for: :name, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Name'), for: :name, class: "form-label" %>
           <%= f.text_field :name, as: :string, class: "form-control", spellcheck: true, 'aria-required': true, 'data-toggle': 'tooltip', title: _('Add the name of a school/department.') %>
         </div>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Abbreviated name or code'), for: :code, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Abbreviated name or code'), for: :code, class: "form-label" %>
           <%= f.text_field :code, as: :string, class: "form-control", 'aria-required': false, 'data-toggle': 'tooltip', title: _('Add the abbreviated name or code for the school/department.') %>
         </div>
         <!-- submit buttons -->
-        <div class="form-group col-xs-8">
+        <div class="form-control mb-3 col-xs-8">
           <%= f.submit _('Save'), name: "draft", class: "btn btn-primary" %>
           <%= link_to _('Cancel'), departments_url, class: "btn btn-primary", role: 'button' %>
         </div>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/phases/_form.html.erb b/app/views/org_admin/phases/_form.html.erb
index 66a8a8a57a..6bc5c766bc 100644
--- a/app/views/org_admin/phases/_form.html.erb
+++ b/app/views/org_admin/phases/_form.html.erb
@@ -1,26 +1,26 @@
 <% title_tooltip = _('Enter a title for the phase e.g. initial DMP, full DMP... This is what users will see in the tabs when completing a plan. If you only have one phase, call it something generic e.g. Glasgow DMP') %>
 
 <%= f.hidden_field :template_id, value: template.id%>
-<div class="form-group col-md-10">
-  <%= f.label(:title, _('Title') ,class: "control-label") %>
+<div class="form-control mb-3 col-md-10">
+  <%= f.label(:title, _('Title') ,class: "form-label") %>
   <em class="sr-only"><%= title_tooltip %></em>
   <%= f.text_field(:title, class: "form-control", spellcheck: true, 'aria-required': true, 'data-toggle': 'tooltip', title: title_tooltip ) %>
 </div>
 
-<div class="form-group">
+<div class="form-control mb-3">
   <div class="col-md-10">
-    <%= f.label(:number, _('Order of display'), class: "control-label") %>
+    <%= f.label(:number, _('Order of display'), class: "form-label") %>
   </div>
   <div class="col-md-4">
     <%= f.number_field(:number, in: 1..5, class: "form-control", 'aria-required': true, 'data-toggle': 'tooltip', title: _('This allows you to order the phases of your template.')) %>
   </div>
 </div>
 
-<div class="form-group col-md-10" data-toggle="tooltip" title="<%= _("Enter a basic description. This will be presented to users on the 'Admin Plan' tab, above the summary of the sections and questions which they will be asked to answer.") %>">
-  <%= f.label(:description, _('Description'), class: "control-label") %>
+<div class="form-control mb-3 col-md-10" data-toggle="tooltip" title="<%= _("Enter a basic description. This will be presented to users on the 'Admin Plan' tab, above the summary of the sections and questions which they will be asked to answer.") %>">
+  <%= f.label(:description, _('Description'), class: "form-label") %>
   <%= f.text_area(:description, class: "phase", spellcheck: true) %>
 </div>
 
-<div class="form-group col-md-4 pull-right">
-  <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+<div class="form-control mb-3 col-md-4 float-end">
+  <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
 </div>
diff --git a/app/views/org_admin/phases/_index.html.erb b/app/views/org_admin/phases/_index.html.erb
index 6dfdb99e6f..ffc9fd0792 100644
--- a/app/views/org_admin/phases/_index.html.erb
+++ b/app/views/org_admin/phases/_index.html.erb
@@ -2,7 +2,7 @@
   <div class="col-md-12">
     <% if template_hash[:template][:phases].present? && template_hash[:template][:phases].length > 1 %>
       <div id="sections-accordion-controls">
-        <div class="accordion-controls" data-parent="phases_accordion">
+        <div class="accordion-controls px-1" data-parent="phases_accordion">
           <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
           <span>|</span>
           <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
@@ -13,31 +13,28 @@
 </div>
 <div class="row">
   <div class="col-md-12">
-    <div class="panel-group" id="phases_accordion" role="tablist">
+    <div class="accordion" id="phases_accordion" role="tablist">
       <!-- If template has phases-->
       <% if template_hash[:template][:phases].present? %>
         <% i = 0 %>
         <% template_hash[:template][:phases].each do |phase_no, phase_hash| %>
           <% phase = phase_hash[:data] %>
-            <div class="panel panel-default">
-              <div class="heading-button" role="button" data-toggle="collapse"
-                   data-parent="phases_accordion"
+            <div class="card card-default">
+              <div class="heading-button" role="button" data-bs-toggle="collapse"
+                   data-bs-parent="#phases_accordion"
                    href="#collapsePhase<%= phase.id %>"
+                   role="button"
                    aria-expanded="<%= i == 0 ? 'true' : 'false' %>"
                    aria-controls="#collapsePhase<%= phase.id %>">
 
-                <div class="panel-heading" role="tab" id="<%= "headingPhase#{phase.id}" %>">
-                  <div class="panel-title pull-left">
+                <div class="card-heading" role="tab" id="<%= "headingPhase#{phase.id}" %>">
+                  <div class="card-title float-start">
                     <%= phase.title %>
                   </div>
-                  <div class="pull-right">
-                    <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-                  </div>
-                  <div class="clearfix"></div>
                 </div>
               </div>
-              <div id="<%= "collapsePhase#{phase.id}" %>" class="panel-collapse collapse<%= i == 0 ? 'in' : '' %>" role="tabpanel" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="true"' : '' %>>
-                <div class="panel-body">
+              <div id="<%= "collapsePhase#{phase.id}" %>" class="accordion-collapse collapse<%= i == 0 ? 'show' : 'hide' %>" role="tabcard" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="false"' : '' %>>
+                <div class="card-body">
                   <%= render partial: 'org_admin/templates/show_phases_sections', locals: { phase: phase, phase_hash: phase_hash, template: template, current: current } %>
                 </div>
               </div>
diff --git a/app/views/org_admin/phases/_phase.html.erb b/app/views/org_admin/phases/_phase.html.erb
index 70ae5b8c21..530fe9512a 100644
--- a/app/views/org_admin/phases/_phase.html.erb
+++ b/app/views/org_admin/phases/_phase.html.erb
@@ -4,22 +4,22 @@
     <div>
       <h3>
         <%= phase.title %>
-        <div class="pull-right">
+        <div class="float-end">
           <% if template.customization_of.present? && template.latest? %>
-            <%= link_to _('Customise phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
+            <%= link_to _('Customise phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-secondary", role: 'button' } %>
           <% elsif modifiable %>
-            <%= link_to _('Edit phase'), edit_org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
+            <%= link_to _('Edit phase'), edit_org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-secondary", role: 'button' } %>
           <% else %>
-            <%= link_to _('Show phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
+            <%= link_to _('Show phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-secondary", role: 'button' } %>
           <% end %>
           <% if template.latest? && phase.modifiable %>
             <%= link_to _('Delete phase'), org_admin_template_phase_path(template.id, phase.id),
                         data: { confirm: _("You are about to delete the '%{phase_title}' phase. This will remove all of the sections and questions listed below. Are you sure?") % { phase_title: phase.title },
-                                length: 20, omission: _('... (continued)') }, method: :delete, class: 'btn btn-default', role: 'button' %>
+                                length: 20, omission: _('... (continued)') }, method: :delete, class: 'btn btn-secondary', role: 'button' %>
           <% end %>
         </div>
       </h3>
-      <p class="pull-left">
+      <p class="float-start">
         <div class="display-readonly-textarea-content">
           <%= sanitize phase.description %>
         </div>
diff --git a/app/views/org_admin/phases/container.html.erb b/app/views/org_admin/phases/container.html.erb
index 00533e9630..10503be72d 100644
--- a/app/views/org_admin/phases/container.html.erb
+++ b/app/views/org_admin/phases/container.html.erb
@@ -4,7 +4,7 @@
   <div class="col-md-12">
     <h1><%= template.title %></h1>
     <% referrer = template.customization_of.present? ? customisable_org_admin_templates_path : organisational_org_admin_templates_path %>
-    <%= link_to _('View all templates'), referrer, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all templates'), referrer, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 <div class="row">
@@ -14,16 +14,16 @@
                locals: local_assigns.merge({ modifiable: modifiable }) %>
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <% # locals: { phase, template, edit, current_section } %>
-            <div class="pull-left">
+            <div class="float-start">
               <h2><%= _('Phase details')%></h2>
             </div>
-            <div class="pull-right">
+            <div class="float-end">
               <%= link_to(_('Preview'),
                           preview_org_admin_template_phase_path(template, phase),
-                          class: 'btn btn-default phase_preview_link', role: 'button') %>
+                          class: 'btn btn-secondary phase_preview_link', role: 'button') %>
             </div>
             <div class="clearfix"></div>
             <div class="row">
@@ -41,7 +41,7 @@
                   <div class="col-sm-6">
                     <% if phase.sections.many? %>
                       <div id="sections-accordion-controls">
-                        <div class="accordion-controls"
+                        <div class="accordion-controls px-1"
                              data-parent="sections_accordion">
                           <a href="#" data-toggle-direction="show">
                             <%= _('expand all') %>
@@ -56,7 +56,7 @@
                   </div>
 
                   <div class="col-sm-6">
-                    <div class='text-right text-muted'>
+                    <div class='text-end text-muted'>
                       <% if template.latest? && (modifiable || template.customization_of.present?) %>
                         <i class="fas fa-circle-info small"></i>
                         <%= _("Drag arrows to rearrange sections.") %>
diff --git a/app/views/org_admin/phases/preview.html.erb b/app/views/org_admin/phases/preview.html.erb
index 00467e55e2..191f856416 100644
--- a/app/views/org_admin/phases/preview.html.erb
+++ b/app/views/org_admin/phases/preview.html.erb
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= @template.title %></h1>
-    <div class="pull-right">
+    <div class="float-end">
       <ul class="list-inline">
         <% if @template.latest? %>
           <% if @template.customization_of.present? %>
@@ -34,16 +34,16 @@
 <div class="row">
   <div class="col-md-12">
     <ul class="nav nav-tabs" role="tablist">
-      <li role="presentation" class="active">
-        <%= link_to _('Write plan'), '#', class: 'preview-tab' %>
+      <li role="presentation" class=" nav-item active">
+        <%= link_to _('Write plan'), '#', class: 'nav-link preview-tab' %>
       </li>
     </ul>
 
     <!-- render phase below -->
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <%= render partial: '/phases/edit_plan_answers',
                   locals: {
                     plan: nil,
diff --git a/app/views/org_admin/plans/index.html.erb b/app/views/org_admin/plans/index.html.erb
index 2b16861c5d..2689adab13 100644
--- a/app/views/org_admin/plans/index.html.erb
+++ b/app/views/org_admin/plans/index.html.erb
@@ -9,8 +9,8 @@
   <div class="col-md-12">
     <% if @feedback_plans.length > 0 %>
       <h2><%= _('Notifications') %></h2>
-      <div class="panel panel-default">
-        <div class="panel-body notifications">
+      <div class="card card-default">
+        <div class="card-body notifications">
           <table class="table">
             <thead>
               <th scope="col"><%= _('Plan') %></th>
@@ -41,7 +41,7 @@
                            tags: %w{ span em }),
                   org_admin_download_plans_path(format: :csv),
                   target: '_blank',
-                  class: 'btn btn-default pull-right has-new-window-popup-info' %>
+                  class: 'btn btn-secondary float-end has-new-window-popup-info' %>
       <% end %>
       <div class="table-responsive">
         <%= paginable_renderise(
diff --git a/app/views/org_admin/question_options/_option_fields.html.erb b/app/views/org_admin/question_options/_option_fields.html.erb
index 1de4ee4710..50656fc1ae 100644
--- a/app/views/org_admin/question_options/_option_fields.html.erb
+++ b/app/views/org_admin/question_options/_option_fields.html.erb
@@ -1,11 +1,11 @@
 <div class="row">
-  <div class="col-md-3 bold">
+  <div class="col-md-3 bold mb-2">
     <%= _('Order')%>
   </div>
-  <div class="col-md-3">
-    <%= f.label(:text, _('Text'), class: "control-label") %>
+  <div class="col-md-3 mb-2">
+    <%= f.label(:text, _('Text'), class: "form-label") %>
   </div>
-  <div class="col-md-3 bold">
+  <div class="col-md-3 bold mb-2">
     <%= _('Default')%>
   </div>
   <div class="col-md-3">
@@ -20,18 +20,18 @@
   <%= f.fields_for :question_options, options_q do |op| %>
     <% i = i + 1 %>
     <% options_q.number = i %>
-    <div class="row" data-attribute="question_option">
-      <div class="col-md-3">
+    <div class="row mb-2" data-attribute="question_option">
+      <div class="col-md-3 pe-2">
         <%= op.number_field :number, min: 1, class: 'form-control', readonly: true %>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 pe-2">
         <% if i == 1 %>
           <%= op.text_field :text, as: :string, class: 'form-control', spellcheck: true, 'aria-required': true %>
         <% else %>
           <%= op.text_field :text, as: :string, class: 'form-control', spellcheck: true %>
         <% end %>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 pe-2">
         <%= op.check_box :is_default %>
       </div>
       <% if i > 1 %>
@@ -44,7 +44,7 @@
   <% end %>
 <% end %>
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-md-12 mt-2">
     <a href="#" class="new_question_option"><%= _('Add option') %></a>
   </div>
 </div>
diff --git a/app/views/org_admin/questions/_form.html.erb b/app/views/org_admin/questions/_form.html.erb
index 64a222b92e..f966845301 100644
--- a/app/views/org_admin/questions/_form.html.erb
+++ b/app/views/org_admin/questions/_form.html.erb
@@ -11,21 +11,21 @@
   <% current_format = question.question_format.present? ? question.question_format : QuestionFormat.find_by(formattype: QuestionFormat.formattypes[:textarea]) %>
   <div class="row">
     <!--Question number -->
-    <div class="form-group col-md-4">
-      <%= f.label(:number, _('Question Number'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-4">
+      <%= f.label(:number, _('Question Number'), class: "form-label") %>
       <%= f.number_field(:number, in: 1..50, class: "form-control",
                                   "aria-required": true) %>
     </div>
 
     <!--Question text -->
-    <div class="form-group col-md-10">
-      <%= f.label(:text, _('Question text'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-10">
+      <%= f.label(:text, _('Question text'), class: "form-label") %>
       <%= f.text_area(:text, class: "question", spellcheck: true, "aria-required": true) %>
     </div>
 
     <!-- Question format -->
-    <div class="form-group col-md-4">
-      <%= f.label(:question_format_id, _('Answer format'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-4">
+      <%= f.label(:question_format_id, _('Answer format'), class: "form-label") %>
         <%= f.select :question_format_id,
           options_from_collection_for_select(question_formats,
           :id,
@@ -40,36 +40,35 @@
     </div>
 
     <!--display form to enter option for option_based questions -->
-    <div class="form-group col-md-10" data-attribute="question_options" style="<%= current_format.option_based? ? '' : 'display:none;' %>">
+    <div class="form-control mb-3 col-md-10" data-attribute="question_options" style="<%= current_format.option_based? ? '' : 'display:none;' %>">
       <div class="col-md-offset-2">
         <%= render "/org_admin/question_options/option_fields", f: f, q: question %>
         <!--display for selecting comment box when multiple choice is being used-->
       </div>
       <% if question.id != nil && question.question_options[0].text != nil %>
-        <%= link_to _('Add Conditions'), org_admin_question_open_conditions_path(question_id: question.id, conditions: conditions), class: "add-logic btn btn-default", 'data-loaded': (conditions.size > 0).to_s, remote: true %>
+        <%= link_to _('Add Conditions'), org_admin_question_open_conditions_path(question_id: question.id, conditions: conditions), class: "add-logic btn btn-secondary", 'data-loaded': (conditions.size > 0).to_s, remote: true %>
         <div id="content" class="col-md-offset-2">
           <p>
             <%= render partial: 'org_admin/conditions/container', locals: { f: f, question: question, conditions: conditions } %>
           </p>
         </div>
       <% else %>
-        <div class="form-group" data-toggle="tooltip", title="<%= _('Save this question before adding conditions.') %>" >
-          <%= link_to _('Add Conditions'), '#', class: "add-logic btn btn-default disabled" %>
+        <div class="form-control mb-3" data-toggle="tooltip", title="<%= _('Save this question before adding conditions.') %>" >
+          <%= link_to _('Add Conditions'), '#', class: "add-logic btn btn-secondary disabled" %>
         </div>
       <% end %>
     </div>
 
     <% comment_disp = current_format.option_based? || current_format.rda_metadata? %>
-    <div class="form-group col-md-10" data-attribute="option_comment"
+    <div class="form-check mb-3 col-md-10" data-attribute="option_comment"
          style="<%=comment_disp ? '' : 'display:none;'%>">
-      <label>
-        <%= f.check_box :option_comment_display, as: :check_boxes %><%= _('Display additional comment area.') %>
-      </label>
+        <%= f.check_box :option_comment_display, as: :check_boxes %>
+        <%= f.label(:option_comment_display, _('Display additional comment area'), class: 'form-check-label') %>
     </div>
 
   <!--Question default_value -->
-    <div class="form-group col-md-10" data-attribute="default_value" style="<%= current_format.textfield? || current_format.textarea? ? '' : 'display: none;' %>">
-      <%= f.label(:default_value, _('Default answer'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-10" data-attribute="default_value" style="<%= current_format.textfield? || current_format.textarea? ? '' : 'display: none;' %>">
+      <%= f.label(:default_value, _('Default answer'), class: "form-label") %>
       <div class="" data-toggle="tooltip" title="<%= question_default_value_tooltip %>">
         <em class="sr-only"><%= question_default_value_tooltip %></em>
         <span data-attribute="textfield" style="<%= current_format.textfield? ? '' : 'display:none;' %>">
@@ -89,20 +88,20 @@
       <% end %>
     <% end %>
     <!-- Themes -->
-    <div class="form-group col-md-10">
+    <div class="form-control mb-3 col-md-10">
       <%= render partial: 'org_admin/shared/theme_selector',
                  locals: { f: f, all_themes: Theme.all.order("title"), as_radio: false,
                            popover_message: _('Select one or more themes that are relevant to this question. This will allow similarly themed organisation-level guidance to appear alongside your question.') } %>
     </div>
-    <div class="form-group col-md-10">
-      <div class="pull-right">
-        <%= f.submit _('Save'), class: "btn btn-default", role:'button' %>
+    <div class="form-control mb-3 col-md-10">
+      <div class="float-end">
+        <%= f.submit _('Save'), class: "btn btn-secondary", role:'button' %>
         <% if question.id.present? %>
             <% href = org_admin_template_phase_section_question_path(template_id: template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id) %>
-            <%= link_to _('Delete'), href, method: :delete, class: "btn btn-default", role:'button', 'data-confirm': _("You are about to delete question #%{question_number}. Are you sure?") % { question_number: question.number } %>
-          <%= link_to _('Cancel'), href, class: "btn btn-default ajaxified-question", method: 'get', remote: true %>
+            <%= link_to _('Delete'), href, method: :delete, class: "btn btn-secondary", role:'button', 'data-confirm': _("You are about to delete question #%{question_number}. Are you sure?") % { question_number: question.number } %>
+          <%= link_to _('Cancel'), href, class: "btn btn-secondary ajaxified-question", method: 'get', remote: true %>
         <% else %>
-          <%= link_to _('Cancel'), '#', class: "btn btn-default cancel-new-question" %>
+          <%= link_to _('Cancel'), '#', class: "btn btn-secondary cancel-new-question" %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/org_admin/questions/_index.html.erb b/app/views/org_admin/questions/_index.html.erb
index 5e6e3282ab..0fb7e6efb7 100644
--- a/app/views/org_admin/questions/_index.html.erb
+++ b/app/views/org_admin/questions/_index.html.erb
@@ -10,8 +10,8 @@
   <% end %>
 <% end %>
 <% if template.latest? && section.modifiable? %>
-  <div class="pull-right new-question-button">
-    <%= link_to(_('Add Question'), new_org_admin_template_phase_section_question_path(template_id: template.id, phase_id: section.phase.id, section_id: section.id), { class: 'btn btn-default ajaxified-question', role: "button", remote: true }) %>
+  <div class="float-end new-question-button">
+    <%= link_to(_('Add Question'), new_org_admin_template_phase_section_question_path(template_id: template.id, phase_id: section.phase.id, section_id: section.id), { class: 'btn btn-secondary ajaxified-question', role: "button", remote: true }) %>
   </div>
 
   <div class="row">
diff --git a/app/views/org_admin/questions/_show.html.erb b/app/views/org_admin/questions/_show.html.erb
index 2de1aeda85..55a9069ce6 100644
--- a/app/views/org_admin/questions/_show.html.erb
+++ b/app/views/org_admin/questions/_show.html.erb
@@ -91,11 +91,11 @@
         </dl>
       </div>
 
-      <div class="col-md-4">
+      <div class="ps-4 col-md-4">
         <% has_org_themed_guidance = false %>
         <% themes_q = question.themes %>
         <% if !themes_q.nil? %>
-          <div class="panel-group" id="<%= question.id %>-guidance">
+          <div class="d-flex flex-column" id="<%= question.id %>-guidance">
             <% ggs = GuidanceGroup.where(org_id: current_user.org.id) %>
             <h4><%= _("Themed Guidance") %></h4>
 
@@ -124,40 +124,37 @@
                       ) %>
                     <% if theme_guidances.length > 0 %>
                       <% theme_guidances.each do |guidance| %>
-                        <div class="panel panel-default">
-                          <div class="heading-button"
-                               role="button"
-                               data-toggle="collapse"
-                               href="#collapseGuidance-<%= guidance.id%>-<%= question.id %>"
-                               aria-expanded="false"
-                               aria-controls="#collapseGuidance-<%= guidance.id%>-<%= question.id %>">
-
-                            <div class="panel-heading"
-                                        role="tab"
-                                        id="#headingGuidance-<%= guidance.id%>-<%= question.id %>">
-                              <div class="panel-title">
-                                  <i class="fas fa-plus pull-left" aria-hidden="true"></i>
-                                &nbsp;<%= theme.title %>
-                                <% if ggs.length > 1 %>
-                                  &nbsp;(<%= guidance_group.name %>)
-                                <% end %>
-                              </div>
-                              <div class="clearfix"></div>
-                            </div>
-                          </div>
-                          <div id="collapseGuidance-<%= guidance.id%>-<%= question.id %>"
-                               class="panel-collapse collapse"
-                               role="tabpanel"
-                               aria-labelledby="headingGuidance-<%= guidance.id%>-<%= question.id %>">
-                            <div class="panel-body allow-break-words">
-                              <div class="display-readonly-textarea-content">
-                                <%= sanitize guidance.text %>
+                        <div class="accordion my-1 card card-default">
+                          <div class="accordion-item w-100">
+                              <h2 class="accordion-header" 
+                                  id="#headingGuidance-<%= guidance.id%>-<%= question.id %>">
+                                <button class="accordion-button collapsed"
+                                     type="button"
+                                     data-bs-toggle="collapse"
+                                     href="#collapseGuidance-<%= guidance.id%>-<%= question.id %>"
+                                     aria-expanded="false"
+                                     aria-controls="#collapseGuidance-<%= guidance.id%>-<%= question.id %>">
+                                     <%= theme.title %>
+                                     <% if ggs.length > 1 %>
+                                        &nbsp;(<%= guidance_group.name %>)
+                                    <% end %>
+                                </button>
+                              </h2>
+                            
+                              <div id="collapseGuidance-<%= guidance.id%>-<%= question.id %>"
+                                 class="accordion-collapse collapse"
+                                 role="tabpanel"
+                                 aria-labelledby="headingGuidance-<%= guidance.id%>-<%= question.id %>">
+                                <div class="accordion-body card card-body allow-break-words">
+                                   <div class="display-readonly-textarea-content">
+                                      <%= sanitize guidance.text %>
+                                   </div>
+                                </div>
                               </div>
-                            </div>
+                           </div>
                         </div>
-                      </div>
+                      <% end %>
                     <% end %>
-                   <% end %>
                   <% end %>
                 <% end %>
               <% end %>
@@ -204,18 +201,18 @@
                                locals: { f: annotation_fields } %>
                   <% end %>
                 <% end %>
-                <div class="form-group col-md-10">
-                  <div class="pull-right">
-                    <%= f.submit _('Save'), class: "btn btn-default", role: 'button' %>
+                <div class="form-control mb-3 col-md-10">
+                  <div class="float-end">
+                    <%= f.submit _('Save'), class: "btn btn-secondary", role: 'button' %>
                   </div>
                 </div>
               <% end %>
             <% end %>
           <% end %>
           <% if section.modifiable? %>
-            <div class="form-group col-md-10">
-              <div class="pull-right">
-                <%= link_to _('Edit'), edit_org_admin_template_phase_section_question_path(template_id: question.section.phase.template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id), class: "btn btn-default ajaxified-question", remote: true %>
+            <div class="form-control mb-3 col-md-10">
+              <div class="float-end">
+                <%= link_to _('Edit'), edit_org_admin_template_phase_section_question_path(template_id: question.section.phase.template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id), class: "btn btn-secondary ajaxified-question", remote: true %>
               </div>
             </div>
           <% end %>
diff --git a/app/views/org_admin/sections/_form.html.erb b/app/views/org_admin/sections/_form.html.erb
index 23e7d2664a..557173982b 100644
--- a/app/views/org_admin/sections/_form.html.erb
+++ b/app/views/org_admin/sections/_form.html.erb
@@ -1,24 +1,24 @@
 <% description_tooltip = _("Enter a basic description. This could be a summary of what is covered in the section or instructions on how to answer. This text will be displayed in the coloured banner once a section is opened to edit.") %>
 
 <%= form_for(section, url: url, namespace: section.id.present? ? "sc_#{section.id}" : 'new_section', html: { method: method }) do |f| %>
-  <div class="form-group col-md-10">
-    <%= f.label(:title, _('Title') ,class: "control-label") %>
+  <div class="form-control mb-3 col-md-10">
+    <%= f.label(:title, _('Title') ,class: "form-label") %>
     <%= f.text_field(:title, { class: "form-control", placeholder: _('Enter a title for the section'), 'data-toggle': 'tooltip', title: _('Enter a title for the section'), spellcheck: true, 'aria-required': true} ) %>
   </div>
 
-  <div class="form-group col-md-10" data-toggle="tooltip" title="<%= description_tooltip %>">
+  <div class="form-control mb-3 col-md-10" data-toggle="tooltip" title="<%= description_tooltip %>">
     <em class="sr-only"><%= description_tooltip %></em>
-    <%= f.label(:description, _('Description'), class: "control-label") %>
-    <%= f.text_area(:description, class: "section") %>
+    <%= f.label(:description, _('Description'), class: "form-label") %>
+    <%= f.text_area(:description, class: "section", spellcheck: true) %>
   </div>
 
-  <div class="form-group col-md-10">
-    <div class="pull-right">
-      <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+  <div class="form-control mb-3 col-md-10">
+    <div class="float-end">
+      <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
       <% if section.id.present? %>
         <%= link_to _('Delete'), org_admin_template_phase_section_path(template_id: template.id, phase_id: section.phase.id, id: section), 'data-method': 'delete', rel: 'nofollow',
-            'data-confirm': _("You are about to delete '%{section_title}'. This will affect questions linked to this section. Are you sure?") % { :section_title => section.title }, class: 'btn btn-default', role:'button' %>
+            'data-confirm': _("You are about to delete '%{section_title}'. This will affect questions linked to this section. Are you sure?") % { :section_title => section.title }, class: 'btn btn-secondary', role:'button' %>
       <% end %>
     </div>
   </div>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/org_admin/sections/_index.html.erb b/app/views/org_admin/sections/_index.html.erb
index ef6816c6f4..2377492590 100644
--- a/app/views/org_admin/sections/_index.html.erb
+++ b/app/views/org_admin/sections/_index.html.erb
@@ -1,9 +1,7 @@
 <%# locals modifiable %>
-
 <!-- Accordion for sections -->
 <div class="row">
   <div class="col-md-12">
-
     <div class="draggable-sections" data-url="<%=
       sort_org_admin_template_phase_path(template, phase)
      %>">
@@ -14,7 +12,6 @@
                            current_section: current_section,
                            panel_id: "section-#{prefix_section.id}",
                            modifiable: modifiable } if prefix_section %>
-
       <%# If we are working with a modifiable phase then allow the core sections to be reordered %>
       <% if phase.modifiable? %>
         <% sections.each do |s| %>
@@ -27,7 +24,7 @@
                                modifiable: s.modifiable } %>
         <% end %>
       <% else %>
-          <%= render partial: "org_admin/sections/section_group",
+        <%= render partial: "org_admin/sections/section_group",
                      locals: { sections: sections,
                                phase: phase,
                                template: template,
@@ -35,8 +32,7 @@
                                panel_id: "baseline-sections",
                                modifiable: modifiable } %>
       <% end %>
-
-      <% suffix_sections.each do |s| %>
+         <% suffix_sections.each do |s| %>
         <%= render partial: "org_admin/sections/section_group",
                    locals: { sections: Array(s),
                              phase: phase,
@@ -45,39 +41,42 @@
                              current_section: current_section,
                              modifiable: true } %>
       <% end %>
-
-    </div>
-
-    <% if template.latest? && (modifiable || template.customization_of.present?) %>
-      <div class="panel panel-default">
-        <a href="#new_section" class="heading-button"
-           data-toggle="collapse" data-parent="sections-accordion"
-           data-target="#collapseSectionNew"
-           aria-expanded="false"
-           aria-controls="#collapseSectionNew">
-
-          <div class="panel-heading" role="tab" id="headingSectionNew">
-            <div class="panel-title pull-left">
-              <%= _('Add a new section') %>
-            </div>
-            <div class="pull-right">
-              <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-            </div>
-            <div class="clearfix"></div>
-          </div>
-        </a>
-        <div
-          id="collapseSectionNew" class="panel-collapse collapse" role="tabpanel"
+      </div>
+      <%# locals modifiable %>
+      <!-- Accordion for sections -->
+      <div class="row">
+        <div class="col-md-12">
+          <% if template.latest? && (modifiable || template.customization_of.present?) %>
+            <div class="accordion section-group sections_accordion"
+         data-modifiable="<%= modifiable %>"
+         role="tablist">
+              <div class="accordion-item w-100 my-3 section">
+                <h2 class="accordion-header" role="tab" id="headingSectionNew">
+                  <a href="#new_section" 
+                  class="accordion-button collapsed"
+                  role="button"
+                  data-bs-toggle="collapse" 
+                  data-bs-parent="sections_accordion"
+                  data-bs-target="#collapseSectionNew"
+                  aria-expanded="false"
+                  aria-controls="#collapseSectionNew">
+                    <%= _('Add a new section') %>
+                  </a>
+                </h2>
+                <div
+          id="collapseSectionNew" class="accordion-collapse collapse" role="tabpanel"
           aria-labelledby="<%= "headingSectionNew" %>">
-           <div class="panel-body">
-             <%= render partial: 'org_admin/sections/new',
+                  <div class="accordion-body card card-body">
+                    <%= render partial: 'org_admin/sections/new',
                         locals: {
                           template: template,
                           phase: phase } %>
-           </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
   </div>
-
-</div>
diff --git a/app/views/org_admin/sections/_progress.html.erb b/app/views/org_admin/sections/_progress.html.erb
index d02cbac485..f64e8237b1 100644
--- a/app/views/org_admin/sections/_progress.html.erb
+++ b/app/views/org_admin/sections/_progress.html.erb
@@ -2,6 +2,6 @@
 <!-- Partial template for showing the progress for a section, i.e. the valid answers -->
 <% num_section_questions = section.questions.size() %>
 <% num_section_answers = section.num_answered_questions(plan) %>
-<span class="right section-status">
+<span class="right section-status mx-1">
   (<%= num_section_answers %> / <%= num_section_questions %>)
 </span>
\ No newline at end of file
diff --git a/app/views/org_admin/sections/_section.html.erb b/app/views/org_admin/sections/_section.html.erb
index 65d4456661..03a5108229 100644
--- a/app/views/org_admin/sections/_section.html.erb
+++ b/app/views/org_admin/sections/_section.html.erb
@@ -1,39 +1,30 @@
-<div class="panel panel-default section" data-section-id="<%= section.id %>">
+<div class="accordion-item w-100 my-3 section" data-section-id="<%= section.id %>">
+  <h2 class="accordion-header" role="tab" id="<%= "headingSection#{section.id}" %>">
+    <a
+      href="<%= header_path_for_section(section, phase, template) %>"
+      role="button"
+      data-remote="true"
+      class="accordion-button collapsed ajaxified-section"
+      data-bs-toggle="collapse"
+      data-bs-parent="<%= data_parent %>"
+      data-bs-target="#collapseSection<%= section.id %>"
+      aria-expanded="false"
+      aria-controls="#collapseSection<%= section.id %>">
+      <%= section.title %>
+    </a>
+    <% if local_assigns[:draggable] %>
+      <i class="fas fa-arrows-alt px-3" aria-hidden="true"
+         title="Drag to reposition">
+      </i>
+    <% end %>
+  </h2>
+ 
 
-  <a
-    href="<%= header_path_for_section(section, phase, template) %>"
-    data-remote="true"
-    class="heading-button ajaxified-section"
-    data-toggle="collapse"
-    data-parent="<%= data_parent %>"
-    data-target="#collapseSection<%= section.id %>"
-    aria-expanded="false"
-    aria-controls="#collapseSection<%= section.id %>">
-
-    <div class="panel-heading" role="tab" id="<%= "headingSection#{section.id}" %>">
-      <div class="panel-title pull-left">
-        <%= section.title %>
-      </div>
-      <div class="pull-right">
-        <% plussign = "fa-plus" %>
-        <% plussign = "fa-minus" if current_section.present? && section.id == current_section.id %>
-        <i class="fas <%= plussign %> pull-right" aria-hidden="true" title="Click to expand"></i>
-        <% if local_assigns[:draggable] %>
-          <i class="fas fa-up-down-left-right pull-right" aria-hidden="true"
-             title="Drag to reposition">
-          </i>
-        <% end %>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  </a>
-
-  <div
-  id="<%= "collapseSection#{section.id}" %>"
-  class="panel-collapse collapse<%= " in" if current_section.present? && section.id == current_section.id %>"
-  role="tabpanel"
-  aria-labelledby="<%= "headingSection#{section.id}" %>">
-    <div class="panel-body" data-loaded="<%= current_section.present? && section.id == current_section.id %>">
+  <div id="<%= "collapseSection#{section.id}" %>"
+       class="accordion-collapse collapse <%= "show" if current_section.present? && section.id == current_section.id %>"
+      role="tabpanel"
+      aria-labelledby="<%= "headingSection#{section.id}" %>">
+    <div class="accordion-body card card-body" data-loaded="<%= current_section.present? && section.id == current_section.id %>">
       <%# This is AJAX loaded on demand unless section_id is specified in the URL %>
       <% if current_section.present? && section.id == current_section.id %>
         <% partial = "org_admin/sections/#{section.modifiable? ? 'edit' : 'show'}" %>
diff --git a/app/views/org_admin/sections/_section_group.html.erb b/app/views/org_admin/sections/_section_group.html.erb
index 37a960ab59..62fb041dea 100644
--- a/app/views/org_admin/sections/_section_group.html.erb
+++ b/app/views/org_admin/sections/_section_group.html.erb
@@ -1,5 +1,5 @@
 <!-- TODO: Move this away from using ID attr -->
-<div class="panel-group section-group sections_accordion"
+<div class="accordion section-group sections_accordion"
      data-modifiable="<%= modifiable %>"
      id="<%= panel_id %>"
      role="tablist">
@@ -12,4 +12,4 @@
                          data_parent: panel_id,
                          draggable: draggable_for_section?(section) } %>
   <% end%>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/shared/_theme_selector.html.erb b/app/views/org_admin/shared/_theme_selector.html.erb
index b3813408b3..540c68fc23 100644
--- a/app/views/org_admin/shared/_theme_selector.html.erb
+++ b/app/views/org_admin/shared/_theme_selector.html.erb
@@ -3,7 +3,7 @@
 <% required ||= false %>
 <% in_error ||= false %>
 
-<div class="form-group">
+<div class="form-control mb-3">
   <% if all_themes.length > 0 %>
     <%
       cntr = 0
@@ -17,7 +17,7 @@
         <%= render partial: 'shared/popover',
                    locals: { message: popover_message, placement: 'right' }%>
       </legend>
-
+      <div class="row">
       <div class="col-md-<%= col_size %>">
         <% all_themes.each do |theme| %>
           <% if cntr >= per_col %>
@@ -25,7 +25,7 @@
             <div class="col-md-<%= col_size %>">
             <% cntr = 0 %>
           <% end %>
-          <div class="checkbox">
+          <div class="form-check">
             <% namespace = f.object.class.name.downcase %>
             <% id = f.object.id.present? ? f.object.id : 'new' %>
             <input id="<%= id %>_<%= namespace %>_theme_ids_<%= theme.id %>"
@@ -38,6 +38,7 @@
           <% cntr += 1 %>
         <% end %>
       </div>
+      </div>
     </fieldset>
   <% else %>
     <p><%= _('No themes have been defined. Please contact your administrator for assistance.') %></p>
diff --git a/app/views/org_admin/templates/_form.html.erb b/app/views/org_admin/templates/_form.html.erb
index abf6569b17..0f2514b8cb 100644
--- a/app/views/org_admin/templates/_form.html.erb
+++ b/app/views/org_admin/templates/_form.html.erb
@@ -1,24 +1,24 @@
 <% description_tooltip = _('Enter a description that helps you to differentiate between templates e.g. if you have ones for different audiences') %>
 
-<div class="form-group col-xs-8">
-  <%= f.label(:title, _('Title'), class: "control-label") %>
+<div class="form-control mb-3 col-xs-8">
+  <%= f.label(:title, _('Title'), class: "form-label") %>
   <%= f.text_field(:title, class: "form-control", spellcheck: true, "aria-required": true) %>
 </div>
 
-<div class="form-group col-xs-8" data-toggle="tooltip" title="<%=  description_tooltip %>">
+<div class="form-control mb-3 col-xs-8" data-toggle="tooltip" title="<%=  description_tooltip %>">
   <em class="sr-only"><%= description_tooltip %></em>
-  <%= f.label(:description, _('Description'), class: "control-label") %>
+  <%= f.label(:description, _('Description'), class: "form-label") %>
   <%= f.text_area(:description, class: "template", spellcheck: true) %>
 </div>
 
 <% if current_user.org.funder? && !current_user.org.funder_only? %>
   <!-- If the Org is a funder and another org type then allow then to set the visibility -->
-  <div class="form-group col-xs-8">
-    <%= f.label _('Visibility'), class: 'control-label' %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= f.label _('Visibility'), class: 'form-label' %>
     <%= render partial: 'shared/popover',
                locals: { message: _('Checking this box prevents the template from appearing in the public list of templates.'),
                          placement: 'right' }%>
-    <div class="checkbox">
+    <div class="form-check">
       <%= f.label(:visibility) do %>
         <%= f.check_box(:visibility, checked: f.object.visibility == 'organisationally_visible') %>
 
@@ -34,8 +34,8 @@
   <%= f.hidden_field :visibility, value: visibility %>
 <% end %>
 
-<div class="form-group col-xs-8">
-  <%= label_tag(:status, _('Status'), class: "control-label") %>
+<div class="form-control mb-3 col-xs-8">
+  <%= label_tag(:status, _('Status'), class: "form-label") %>
     <p class="form-control-static">
       <% if f.object.published? %>
         <%= _('Published') %>
@@ -48,14 +48,14 @@
 </div>
 
 <% if f.object.id.present? %>
-  <div class="form-group col-xs-8">
-    <%= label_tag(:created_at, _('Created at'), class: "control-label") %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= label_tag(:created_at, _('Created at'), class: "form-label") %>
     <p class="form-control-static">
       <%= l f.object.created_at.to_date, formats: :short %>
     </p>
   </div>
-  <div class="form-group col-xs-8">
-    <%= label_tag(:updated, _('Last updated'), class: "control-label") %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= label_tag(:updated, _('Last updated'), class: "form-label") %>
     <p class="form-control-static">
       <%= l f.object.updated_at.to_date, formats: :short %>
     </p>
@@ -84,6 +84,6 @@
   <%= hidden_field_tag('template-links', ActiveSupport::JSON.encode(f.object.links)) %>
 <% end %>
 
-<div class="form-group col-xs-8">
-  <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+<div class="form-control mb-3 col-xs-8">
+  <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
 </div>
diff --git a/app/views/org_admin/templates/_navigation.html.erb b/app/views/org_admin/templates/_navigation.html.erb
index 3c87adfc71..a0168710f1 100644
--- a/app/views/org_admin/templates/_navigation.html.erb
+++ b/app/views/org_admin/templates/_navigation.html.erb
@@ -1,17 +1,17 @@
 <ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" <%= active_page?(template_details_path(template), true) ? ' class=active' : '' %>>
-    <%= link_to(_('Template details'), template_details_path(template), { 'aria-controls': 'show_template', role: 'tab' }) %>
+  <li role="presentation" class="nav-item <%= active_page?(template_details_path(template), true) ? 'active' : '' %>">
+    <%= link_to(_('Template details'), template_details_path(template), { 'aria-controls': 'show_template', role: 'tab', class:'nav-link' }) %>
   </li>
   <% template.phases.each do |phase| %><%# TODO when phase is modifiable and show is accessed, it does not get active tab %>
     <% phase_path = (modifiable && !template.customization_of.present?) ? edit_org_admin_template_phase_path(template.id, phase.id) : org_admin_template_phase_path(template.id, phase.id) %>
-    <li role="presentation" <%= active_page?(phase_path) ? ' class=active' : '' %>>
-      <%= link_to(phase.title, phase_path, { 'aria-controls': "#{phase.id}", role: 'tab' }) %>
+    <li role="presentation" class="nav-item <%= active_page?(phase_path) ? 'active' : '' %>">
+      <%= link_to(phase.title, phase_path, { 'aria-controls': "#{phase.id}", role: 'tab', class:'nav-link' }) %>
     </li>
   <% end %>
   <!-- Add another phase button -->
   <% if template_modifiable?(template) %>
-    <li role="presentation" <%= active_page?(new_org_admin_template_phase_path(template.id)) ? ' class=active' : '' %>>
-      <%= link_to(_('Add new phase'), new_org_admin_template_phase_path(template.id), { 'aria-controls': 'add_phase', role: 'tab' }) %>
+    <li role="presentation" class="nav-item <%= active_page?(new_org_admin_template_phase_path(template.id)) ? 'active' : '' %>">
+      <%= link_to(_('Add new phase'), new_org_admin_template_phase_path(template.id), { 'aria-controls': 'add_phase', role: 'tab', class:'nav-link' }) %>
     </li>
   <% end %>
 </ul>
diff --git a/app/views/org_admin/templates/container.html.erb b/app/views/org_admin/templates/container.html.erb
index ff6136e8c0..51ff29e886 100644
--- a/app/views/org_admin/templates/container.html.erb
+++ b/app/views/org_admin/templates/container.html.erb
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= template.id.present? ? template.title : _('New Template') %></h1>
-    <%= link_to _('View all templates'), referrer, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all templates'), referrer, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 <div class="row">
@@ -12,12 +12,12 @@
     <%= render partial: "org_admin/templates/navigation", locals: local_assigns.merge({ modifiable: modifiable }) %>
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <%= render partial: partial_path, locals: local_assigns.merge({ referrer: referrer, modifiable: modifiable }) %>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/templates/history.html.erb b/app/views/org_admin/templates/history.html.erb
index da311ea07b..605b41efd0 100644
--- a/app/views/org_admin/templates/history.html.erb
+++ b/app/views/org_admin/templates/history.html.erb
@@ -2,7 +2,7 @@
   <div class="col-md-12">
     <h1>
       <%= templates.first.customization_of.present? ? _('Template Customisation History') : _('Template History') %>
-      <div class="pull-right">
+      <div class="float-end">
         <%= link_to _('View all templates'), referrer, class: "btn btn-primary" %>
       </div>
     </h1>
diff --git a/app/views/org_admin/templates/index.html.erb b/app/views/org_admin/templates/index.html.erb
index 9de826dfe5..a6cd4235f7 100644
--- a/app/views/org_admin/templates/index.html.erb
+++ b/app/views/org_admin/templates/index.html.erb
@@ -10,7 +10,7 @@
         <%= _('If you would like to modify one of the templates below, you must first change your organisation affiliation.') %>
       </p>
     </div>
-    <div class="col-md-6">
+    <div class="form-control col-md-6">
       <%= form_for current_user, url: user_org_swaps_path(current_user),
                                  namespace: 'superadmin',
                                  method: "post",
@@ -22,7 +22,7 @@
                         orgs: @orgs,
                         required: false
                       } %>
-        <%= f.submit _('Change affiliation'), class: 'btn btn-default' %>
+        <%= f.submit _('Change affiliation'), class: 'btn btn-secondary' %>
       <% end %>
     </div>
   <% end %>
@@ -39,15 +39,15 @@
     <ul class="nav nav-tabs" role="tablist">
 
       <% if current_user.can_super_admin? %>
-        <li role="presentation" class="<%= action_name == 'index' ? 'active' : '' %>">
-          <%= link_to(_('All Templates'), org_admin_templates_path, { role: 'tab' }) %>
+        <li role="presentation" class="<%= action_name == 'index' ? 'nav-item active' : 'nav-item' %>">
+          <%= link_to(_('All Templates'), org_admin_templates_path, { class: 'nav-link' }) %>
         </li>
       <% end %>
 
       <li role="presentation"
-          class="<%= action_name == 'organisational' ? 'active' : '' %>">
+          class="<%= action_name == 'organisational' ? 'nav-item active' : 'nav-item' %>">
 
-        <%= link_to(organisational_org_admin_templates_path, { role: 'tab' }) do %>
+        <%= link_to(organisational_org_admin_templates_path, { class: 'nav-link' }) do %>
           <% if current_user.can_super_admin? %>
             <% _('%{org_name} Templates') % { org_name: current_user.org.name } %>
           <% else %>
@@ -59,17 +59,17 @@
 
       <% if !current_user.org.funder_only? %>
         <li role="presentation"
-            class="<%= action_name == 'customisable' ? 'active' : '' %>">
+            class="<%= action_name == 'customisable' ? 'nav-item active' : 'nav-item' %>">
           <%= link_to(_('Customisable Templates'),
-              customisable_org_admin_templates_path, { role: 'tab' }) %>
+              customisable_org_admin_templates_path, { class: 'nav-link' }) %>
         </li>
       <% end %>
     </ul>
 
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body template-scope">
+        <div class="card card-default">
+          <div class="card-body template-scope">
             <h2><%= @title %></h2>
             <div class="template-table-filters">
               <% filter_path = "/paginable/templates/#{action_name}/#{1}" %>
@@ -118,4 +118,4 @@
       <%= _('Create a template') %>
     </a>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/templates/new.html.erb b/app/views/org_admin/templates/new.html.erb
index 3fc20468d0..92cd1a6994 100644
--- a/app/views/org_admin/templates/new.html.erb
+++ b/app/views/org_admin/templates/new.html.erb
@@ -3,7 +3,7 @@
     <h1><%= @template.id.present? ? template.title : _('New Template') %></h1>
     <%= link_to _('View all templates'),
         org_admin_templates_path,
-        class: 'btn btn-default pull-right' %>
+        class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
@@ -15,8 +15,8 @@
 
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div class="template_edit">
               <%= form_for([:org_admin, @template]) do |f| %>
                 <%= render 'form', { f: f }%>
diff --git a/app/views/org_admin/users/edit.html.erb b/app/views/org_admin/users/edit.html.erb
index e144293b34..83a9ae2616 100644
--- a/app/views/org_admin/users/edit.html.erb
+++ b/app/views/org_admin/users/edit.html.erb
@@ -2,7 +2,7 @@
   <div class="col-md-12">
     <h1>
       <%= _('Editing profile for %{username}') % { username: @user.name(false) } %>
-      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-default pull-right', role: 'button') %>
+      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-secondary float-end', role: 'button') %>
     </h1>
   </div>
 </div>
@@ -10,25 +10,25 @@
 <div class="row">
   <div class="col-md-7">
     <%= form_for(@user, namespace: :orgadmin, as: :user, url: org_admin_user_path(@user), html: {method: :put, id: 'org_admin_user_edit' }) do |f| %>
-      <div class="form-group col-xs-12">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
         <%= f.email_field(:email, class: "form-control", "disabled": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:firstname, _('First name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:firstname, _('First name'), class: 'form-label') %>
         <%= f.text_field(:firstname, class: "form-control", "disabled": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:surname, _('Last name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:surname, _('Last name'), class: 'form-label') %>
         <%= f.text_field(:surname, class: "form-control", "disabled": true) %>
       </div>
 
       <% if @departments.any? %>
-      <div class="form-group col-xs-12">
+      <div class="form-control mb-3 col-xs-12">
         <% dept_id = @user.department.nil? ? -1 : @user.department.id  %>
-        <%= f.label(:department_id, _('Department or school'), class: 'control-label') %>
+        <%= f.label(:department_id, _('Department or school'), class: 'form-label') %>
         <%= select_tag(:department_id,
             options_from_collection_for_select(@departments, "id", "name", dept_id),
             include_blank: true,
@@ -38,9 +38,9 @@
       <% end %>
 
       <% if Language.many? %>
-        <div class="form-group col-xs-12">
+        <div class="form-control mb-3 col-xs-12">
           <% lang_id = @user.language.nil? ? Language.id_for(I18n.default_locale) : @user.language.id %>
-          <%= f.label(:language_id, _('Language'), class: 'control-label') %>
+          <%= f.label(:language_id, _('Language'), class: 'form-label') %>
           <%= select_tag(:org_admin_user_language_id,
               options_from_collection_for_select(Language.sorted_by_abbreviation, "id", "name", lang_id),
               disabled: true,
@@ -48,10 +48,10 @@
         </div>
       <% end %>
 
-      <div class="form-group col-xs-12">
+      <div class="form-control mb-3 col-xs-12">
         <!-- Hide save button if no departments for org -->
         <% if @departments.any? %>
-          <%= f.button(_('Save'), class: 'btn btn-default', type: "submit", id: "personal_details_registration_form_submit") %>
+          <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit", id: "personal_details_registration_form_submit") %>
         <% end %>
       </div>
     <% end %>
diff --git a/app/views/orgs/_external_identifiers.html.erb b/app/views/orgs/_external_identifiers.html.erb
index 2422e44948..010180c216 100644
--- a/app/views/orgs/_external_identifiers.html.erb
+++ b/app/views/orgs/_external_identifiers.html.erb
@@ -14,7 +14,7 @@
     end
     schemes.each do |scheme| %>
       <div class="row">
-        <div class="form-group col-xs-10">
+        <div class="form-control mb-3 col-xs-10">
           <% id = presenter.id_for_scheme(scheme: scheme) %>
           <span class="bold"><%= scheme.description %>:</span>
           <%= id_for_display(id: id) %>
@@ -31,10 +31,10 @@
     %>
       <br>
       <div class="row">
-        <div class="form-group col-xs-6">
+        <div class="form-control mb-3 col-xs-6">
           <%= form.fields_for :identifiers, shib_id do |ident_fields| %>
             <%= ident_fields.hidden_field :identifier_scheme_id %>
-            <%= ident_fields.label :value, "#{shib.description} - entityID", class: "control-label" %>
+            <%= ident_fields.label :value, "#{shib.description} - entityID", class: "form-label" %>
             <%= ident_fields.text_field :value, class: "form-control", placeholder: _("Please enter your Shibboleth Entity ID") %>
           <% end %>
         </div>
@@ -43,7 +43,7 @@
 
   <% else %>
     <div class="row">
-       <div id="org-details-org-controls" class="form-group col-xs-10">
+       <div id="org-details-org-controls" class="form-control mb-3 col-xs-10">
          <%= render partial: "shared/org_selectors/external_only",
                 locals: {
                   form: form,
@@ -59,7 +59,7 @@
 <% else %>
   <% presenter.schemes.each do |scheme| %>
     <div class="row">
-      <div class="form-group col-xs-10">
+      <div class="form-control mb-3 col-xs-10">
         <% id = presenter.id_for_scheme(scheme: scheme) %>
         <span class="bold"><%= scheme.description %>:</span>
         <%= id_for_display(id: id) %>
diff --git a/app/views/orgs/_feedback_form.html.erb b/app/views/orgs/_feedback_form.html.erb
index dbd13889af..b9fe3dc21b 100644
--- a/app/views/orgs/_feedback_form.html.erb
+++ b/app/views/orgs/_feedback_form.html.erb
@@ -6,7 +6,7 @@
                            id: "edit_org_feedback_form" } ) do |f| %>
   <h2><%= _('Request Feedback') %></h2>
   <div class="row">
-    <div class="radio col-xs-8">
+    <div class="form-check col-xs-8">
       <%= f.label :feedback_enabled do %>
         <%= f.radio_button(:feedback_enabled, true) %>
         <%= _('On') %>
@@ -22,19 +22,19 @@
       <%= _('Request Expert Feedback - Message Displayed on Share Plan Tab:') %>
     </h3>
     <div class="row">
-      <div class="form-group col-xs-8" data-html="true">
-        <%= f.label :feedback_msg, _('Message'), class: "control-label" %>
+      <div class="form-control mb-3 col-xs-8" data-html="true">
+        <%= f.label :feedback_msg, _('Message'), class: "form-label" %>
         <%= f.text_area :feedback_msg, class: "form-control", spellcheck: true,
                         "aria-required" => true %>
       </div>
-      <div class="form-group col-xs-4">
+      <div class="form-control mb-3 col-xs-4">
         <h4><%= _('Sample Message') %></h4>
         <%= sanitize sample_message_for_org_feedback_form(org) %>
       </div>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-xs-8">
       <%= f.button(_('Save'), id:"save_org_submit", class: "btn btn-primary", type: "submit") %>
     </div>
   </div>
diff --git a/app/views/orgs/_profile_form.html.erb b/app/views/orgs/_profile_form.html.erb
index 06673fecd6..ade41ce1cf 100644
--- a/app/views/orgs/_profile_form.html.erb
+++ b/app/views/orgs/_profile_form.html.erb
@@ -20,14 +20,14 @@
                } %>
   <% else %>
     <div class="row">
-      <div class="form-group col-xs-8">
-        <%= f.label :name, _('Organisation full name'), class: "control-label" %>
+      <div class="form-control mb-3 col-sm-8">
+        <%= f.label :name, _('Organisation full name'), class: "form-label" %>
         <%= f.text_field :name, id: "org_name", class: "form-control", "aria-required": true %>
       </div>
     </div>
     <div class="row">
-      <div class="form-group col-xs-8">
-        <%= f.label :abbreviation, _('Organisation abbreviated name'), class: "control-label" %>
+      <div class="form-control mb-3 col-sm-8">
+        <%= f.label :abbreviation, _('Organisation abbreviated name'), class: "form-label" %>
         <%= f.text_field :abbreviation, id: "org_abbreviation", class: "form-control" %>
       </div>
     </div>
@@ -35,7 +35,7 @@
 
   <% if current_user.can_super_admin? %>
     <div class="row">
-      <div class="form-group col-xs-8">
+      <div class="form-control mb-3 col-sm-8">
         <%= f.label :managed do %>
           <%= f.check_box :managed, id: "org_managed", "aria-required": true,
                 title: _("A managed Org is one that can have its own Guidance and/or Templates. An unmanaged Org is one that was automatically created by the system when a user entered/selected it.") %>
@@ -50,8 +50,8 @@
      end %>
 
   <div class="row">
-    <div class="form-group col-xs-8">
-      <%= f.label :logo, _('Organization logo'), class: "control-label"  %>
+    <div class="form-control mb-3 col-sm-8">
+      <%= f.label :logo, _('Organization logo'), class: "form-label"  %>
 
       <% if org.logo.present? %>
         <div class="clearfix"></div>
@@ -63,7 +63,7 @@
             <%= _('Remove logo') %>
           <% end %>
           <strong> - <%= _('or') %> - </strong>
-          <span class="btn btn-default btn-file"><%= f.file_field :logo %></span>
+          <span class="btn btn-secondary btn-file"><%= f.file_field :logo %></span>
         </div>
       <% else %>
         <%= f.file_field :logo %>
@@ -74,7 +74,7 @@
   <hr>
 
   <div class="row">
-    <div class="col-xs-8">
+    <div class="col-sm-8">
       <em class="sr-only"><%= shared_links_tooltip %></em>
       <%= render(partial: '/shared/links',
                  locals: {
@@ -90,13 +90,13 @@
   <hr>
 
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <h3><%= _("Help Desk email") %></h3>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :helpdesk_email, _('Help Desk email'), class: "control-label" %>
+    <div class="form-control mb-3 col-sm-4">
+      <%= f.label :helpdesk_email, _('Help Desk email'), class: "form-label" %>
       <%= f.email_field :helpdesk_email, class: "form-control" %>
     </div>
   </div>
@@ -104,31 +104,31 @@
   <hr>
 
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <h3><%= _("Administrator contact") %></h3>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_email, _('Contact email'), class: "control-label" %>
+    <div class="form-control mb-3 col-sm-4">
+      <%= f.label :contact_email, _('Contact email'), class: "form-label" %>
       <%= f.email_field :contact_email, class: "form-control", aria: { required: true } %>
     </div>
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_name, _('Link text'), class: "control-label" %>
+    <div class="form-control mb-3 col-sm-4">
+      <%= f.label :contact_name, _('Link text'), class: "form-label" %>
       <%= f.text_field :contact_name, class: "form-control", aria: { required: true } %>
     </div>
   </div>
 
   <hr>
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <h3><%= _("Google Analytics Tracker") %></h3>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
+    <div class="form-control mb-3 col-sm-4">
       <%= f.fields_for :tracker do |t| %>
-        <%= t.label :code, _('Tracker Code'), class: "control-label" %>
+        <%= t.label :code, _('Tracker Code'), class: "form-label" %>
         <%= t.text_field :code, class: "form-control", aria: { required: false } %>
       <% end %>
     </div>
@@ -138,7 +138,7 @@
 
   <div class="row">
     <% if current_user.can_super_admin? %>
-      <fieldset class="col-xs-8">
+      <fieldset class="col-sm-8">
         <legend>
           <%= _('Organisation Types') %>
             &nbsp; <a href="#" aria-label="<%= _('Text') %>" data-toggle="tooltip" data-placement="right" title="<%= org_types_tooltip %>">
@@ -146,19 +146,19 @@
             <em class="sr-only"></em>
           </a>
         </legend>
-        <div class="checkbox">
+        <div class="form-check">
           <%= f.label :funder do %>
             <%= f.check_box :funder, { class: 'org_types', value: org.funder? }, "true", "false" %>
             <%= _('Funder') %>
           <% end %>
         </div>
-        <div class="checkbox">
+        <div class="form-check">
           <%= f.label :institution do %>
             <%= f.check_box :institution, { class: 'org_types', value: org.institution? }, "true", "false" %>
             <%= _('Institution') %>
           <% end %>
         </div>
-        <div class="checkbox">
+        <div class="form-check">
           <%= f.label :organisation do %>
             <%= f.check_box :organisation, { class: 'org_types', value: org.organisation? }, "true", "false" %>
             <%= _('Organisation') %>
@@ -166,7 +166,7 @@
         </div>
       </fieldset>
     <% else %>
-      <div class="col-xs-8">
+      <div class="col-sm-8">
         <dl>
           <dt>
             <%= _('Organisation type(s)') %>
@@ -193,7 +193,7 @@
   <% end %>
 
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <%= f.button(_('Save'), id:"save_org_details_submit", class: "btn btn-primary", type: "submit") %>
     </div>
   </div>
diff --git a/app/views/orgs/admin_edit.html.erb b/app/views/orgs/admin_edit.html.erb
index df5f67f0c8..c26674f2aa 100644
--- a/app/views/orgs/admin_edit.html.erb
+++ b/app/views/orgs/admin_edit.html.erb
@@ -6,7 +6,7 @@
       <%= _('Organisation details') %>
     </h1>
     <% if current_user.can_super_admin? %>
-      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-default pull-right' %>
+      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-secondary float-end' %>
     <% end %>
   </div>
 </div>
@@ -14,30 +14,30 @@
 <div class="row">
   <div class="col-md-12">
     <ul class="nav nav-tabs" role="tablist">
-      <li role="profile" class="active">
-        <a href="#profile" role="tab" aria-controls="profile" data-toggle="tab"><%= _('Profile information') %></a>
+      <li role="profile" class="nav-item">
+        <a href="#profile" class="nav-link active" role="tab" aria-controls="profile" data-bs-toggle="tab"><%= _('Profile information') %></a>
       </li>
 
-      <li role="feedback">
-        <a href="#feedback" role="tab" aria-controls="feedback" data-toggle="tab"><%= _('Request feedback') %></a>
+      <li class="nav-item" role="feedback">
+        <a href="#feedback" class="nav-link" role="tab" aria-controls="feedback" data-bs-toggle="tab"><%= _('Request feedback') %></a>
       </li>
 
-      <li role="form">
-        <a href="#departments" role="tab" aria-controls="form" data-toggle="tab"><%= _('Schools/Departments') %></a>
+      <li class="nav-item" role="form">
+        <a href="#departments" class="nav-link" role="tab" aria-controls="form" data-bs-toggle="tab"><%= _('Schools/Departments') %></a>
       </li>
 
       <% if current_user.can_super_admin? %>
-        <li role="merge">
-          <a href="#merge" role="tab" aria-controls="form" data-toggle="tab"><%= _('Merge') %></a>
+        <li class="nav-item" role="merge">
+          <a href="#merge" class="nav-link" role="tab" aria-controls="form" data-bs-toggle="tab"><%= _('Merge') %></a>
         </li>
       <% end %>
     </ul>
 
     <!-- render navigation tabs for the template-->
     <div class="tab-content">
-      <div role="tabpanel" class="tab-pane active" id="profile">
-        <div class="panel panel-default">
-          <div class="panel-body">
+      <div role="tabpanel" class="tab-pane show active" id="profile">
+        <div class="card card-default">
+          <div class="card-body">
             <div class="px-2">
               <%= render partial: 'orgs/profile_form',
                          locals: { org: org, method: method, url: url } %>
@@ -47,8 +47,8 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="feedback">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div>
               <%= render partial: 'orgs/feedback_form',
                          locals: { org: org } %>
@@ -58,8 +58,8 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="departments">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div>
               <%= render partial: 'orgs/departments',
                          locals: { org: org } %>
@@ -70,8 +70,8 @@
 
       <% if current_user.can_super_admin? %>
         <div role="tabpanel" class="tab-pane" id="merge">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <div>
                 <%= render partial: 'orgs/merge_form', locals: { org: org, analysis: nil } %>
               </div>
diff --git a/app/views/orgs/shibboleth_ds.html.erb b/app/views/orgs/shibboleth_ds.html.erb
index 64114ac85c..9da63c22b1 100644
--- a/app/views/orgs/shibboleth_ds.html.erb
+++ b/app/views/orgs/shibboleth_ds.html.erb
@@ -8,8 +8,8 @@
 <div class="row">
   <div class="col-md-12">
     <%= form_for 'shibboleth_ds', url: shibboleth_ds_path, namespace: 'shib-ds', html: {id: 'shibboleth_ds'} do |f| %>
-      <div class="form-group col-xs-8">
-        <%= f.label(:org_name, _('Look up your organisation here'), class: "control-label") %>
+      <div class="form-control mb-3 col-xs-8">
+        <%= f.label(:org_name, _('Look up your organisation here'), class: "form-label") %>
 
         <% if @orgs.length <= 10 %>
           <select id="org_id" name="org_id">
@@ -27,7 +27,7 @@
                                classes: '' } %>
         <% end %>
 
-        <%= f.button(_('Go'), class: "btn btn-default", type: "submit") %>
+        <%= f.button(_('Go'), class: "btn btn-secondary", type: "submit") %>
 
         <% if @orgs.length > 10 %>
           <p class="centered">
diff --git a/app/views/paginable/api_clients/_index.html.erb b/app/views/paginable/api_clients/_index.html.erb
index 798cff9e7e..71559ca9da 100644
--- a/app/views/paginable/api_clients/_index.html.erb
+++ b/app/views/paginable/api_clients/_index.html.erb
@@ -34,7 +34,7 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="api_client-<%= client.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
diff --git a/app/views/paginable/contributors/_index.html.erb b/app/views/paginable/contributors/_index.html.erb
index 0df8581325..51b9868aff 100644
--- a/app/views/paginable/contributors/_index.html.erb
+++ b/app/views/paginable/contributors/_index.html.erb
@@ -45,17 +45,19 @@
               <button class="btn btn-link dropdown-toggle"
                       type="button"
                       id="contributor-<%= contributor.id %>-actions"
-                      data-toggle="dropdown"
+                      data-bs-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="contributor-<%= contributor.id %>-actions">
-                <li><%= link_to _('Edit'),
-                        edit_plan_contributor_path(plan_id: @plan.id, id: contributor) %></li>
-                <li><%= link_to _('Remove'),
+                <li class="nav-item"><%= link_to _('Edit'),
+                        edit_plan_contributor_path(plan_id: @plan.id, id: contributor),
+                        class: 'dropdown-item nav-link px-3' %></li>
+                <li class="nav-item"><%= link_to _('Remove'),
                                 plan_contributor_path(@plan.id, contributor),
                                 data: { confirm: _("You are about to delete '%{contributor_name}'. Are you sure?") % { contributor_name: contributor.name } },
-                                method: :delete %>
+                                method: :delete,
+                                class: 'dropdown-item nav-link px-3' %>
                 </li>
               </ul>
             </div>
diff --git a/app/views/paginable/departments/_index.html.erb b/app/views/paginable/departments/_index.html.erb
index c1d8178f3a..e17227a330 100644
--- a/app/views/paginable/departments/_index.html.erb
+++ b/app/views/paginable/departments/_index.html.erb
@@ -18,7 +18,7 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="department-<%= department.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
@@ -33,4 +33,4 @@
       <% end %>
     </tbody>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/paginable/guidance_groups/_index.html.erb b/app/views/paginable/guidance_groups/_index.html.erb
index c1a99d1f4b..2076ab53f1 100644
--- a/app/views/paginable/guidance_groups/_index.html.erb
+++ b/app/views/paginable/guidance_groups/_index.html.erb
@@ -40,20 +40,20 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="guidance_group-<%= guidance_gr.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="guidance_group-<%= guidance_gr.id %>-actions">
-                <li><%= link_to _('Edit'), admin_edit_guidance_group_path(guidance_gr) %></li>
+                <li class="nav-item"><%= link_to _('Edit'), admin_edit_guidance_group_path(guidance_gr), class:'dropdown-item px-3' %></li>
                 <% if guidance_gr.published? %>
-                    <li><%= link_to _('Unpublish'),  admin_update_unpublish_guidance_group_path(guidance_gr), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Unpublish'),  admin_update_unpublish_guidance_group_path(guidance_gr), method: :put, class:'dropdown-item px-3' %></li>
                 <% else %>
-                    <li><%= link_to _('Publish'),  admin_update_publish_guidance_group_path(guidance_gr), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Publish'),  admin_update_publish_guidance_group_path(guidance_gr), method: :put, class:'dropdown-item px-3' %></li>
                 <% end %>
                 <% if allow_delete %>
-                  <li><%= link_to _('Remove'), admin_destroy_guidance_group_path(guidance_gr), data: {confirm: _("You are about to delete '%{guidance_group_name}'. This will affect guidance. Are you sure?") % { :guidance_group_name => guidance_gr.name }}, method: :delete %></li>
+                  <li class="nav-item"><%= link_to _('Remove'), admin_destroy_guidance_group_path(guidance_gr), data: {confirm: _("You are about to delete '%{guidance_group_name}'. This will affect guidance. Are you sure?") % { :guidance_group_name => guidance_gr.name }}, method: :delete, class:'dropdown-item px-3' %></li>
                 <% end %>
               </ul>
             </div>
diff --git a/app/views/paginable/guidances/_index.html.erb b/app/views/paginable/guidances/_index.html.erb
index 7f5214c02c..453d193498 100644
--- a/app/views/paginable/guidances/_index.html.erb
+++ b/app/views/paginable/guidances/_index.html.erb
@@ -46,20 +46,20 @@
                   class="btn btn-link dropdown-toggle"
                   type="button"
                   id="guidance-<%= guidance.id %>-actions"
-                  data-toggle="dropdown"
+                  data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="true">
                   <%= _('Actions') %><span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="guidance-<%= guidance.id %>-actions">
-                  <li><%= link_to _('Edit'), admin_edit_guidance_path(guidance) %></li>
+                  <li class="nav-item"><%= link_to _('Edit'), admin_edit_guidance_path(guidance), class:'dropdown-item px-3' %></li>
                   <!-- If the guidance has never been published or it has changed -->
                   <% if guidance.published? %>
-                    <li><%= link_to _('Unpublish'), admin_unpublish_guidance_path(guidance), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Unpublish'), admin_unpublish_guidance_path(guidance), method: :put, class:'dropdown-item px-3' %></li>
                   <% else %>
-                    <li><%= link_to _('Publish'), admin_publish_guidance_path(guidance), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Publish'), admin_publish_guidance_path(guidance), method: :put, class:'dropdown-item px-3' %></li>
                   <% end %>
-                  <li><%= link_to _('Remove'), admin_destroy_guidance_path(guidance),
-                  data: {confirm: _("You are about to delete '%{guidance_summary}'. Are you sure?") % { :guidance_summary => truncate(sanitize(guidance.text,tags: %w(br a)), length: 20 , omission: _('... (continued)'))} }, method: :delete %>
+                  <li class="nav-item"><%= link_to _('Remove'), admin_destroy_guidance_path(guidance),
+                  data: {confirm: _("You are about to delete '%{guidance_summary}'. Are you sure?") % { :guidance_summary => truncate(sanitize(guidance.text,tags: %w(br a)), length: 20 , omission: _('... (continued)'))} }, method: :delete, class:'dropdown-item px-3' %>
                   </li>
                 </ul>
               </div>
diff --git a/app/views/paginable/orgs/_index.html.erb b/app/views/paginable/orgs/_index.html.erb
index c7b0516814..3d086b07b3 100644
--- a/app/views/paginable/orgs/_index.html.erb
+++ b/app/views/paginable/orgs/_index.html.erb
@@ -24,15 +24,15 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="org-<%= org.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="org-<%= org.id %>-actions">
-                <li><%= link_to _('Edit'), admin_edit_org_path(org) %></li>
+                <li class="nav-item"><%= link_to _('Edit'), admin_edit_org_path(org), class:'dropdown-item px-3' %></li>
                 <% unless org.user_count > 0 || org.template_count > 0 || org.contributors.length > 0 || org.plans.length > 0 %>
-                  <li><%= link_to _('Remove'), super_admin_org_path(org), data: {confirm: _("You are about to delete '%{org_name}'. Are you sure?") % { org_name: org.name}}, method: :delete %></li>
+                  <li class="nav-item"><%= link_to _('Remove'), super_admin_org_path(org), data: {confirm: _("You are about to delete '%{org_name}'. Are you sure?") % { org_name: org.name}}, method: :delete, class:'dropdown-item px-3' %></li>
                 <% end %>
               </ul>
             </div>
diff --git a/app/views/paginable/plans/_privately_visible.html.erb b/app/views/paginable/plans/_privately_visible.html.erb
index ceb5476c41..9f3eb55fd1 100644
--- a/app/views/paginable/plans/_privately_visible.html.erb
+++ b/app/views/paginable/plans/_privately_visible.html.erb
@@ -51,31 +51,31 @@
           <td>
             <div class="dropdown">
               <button class="btn btn-link dropdown-toggle" type="button"
-                      id="plan-<%= plan.id %>-actions" data-toggle="dropdown"
+                      id="plan-<%= plan.id %>-actions" data-bs-toggle="dropdown" 
                       aria-haspopup="true" aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
 
               <ul class="dropdown-menu" aria-labelledby="plan-<%= plan.id %>-actions">
               <% if plan.editable_by?(current_user.id) then %>
-                <li><%= link_to _('Edit'), plan_path(plan) %></li>
+                <li class="nav-item"><%= link_to _('Edit'), plan_path(plan), class: 'dropdown-item  px-3' %></li>
 
                 <% if plan.administerable_by?(current_user.id) %>
-                  <li><%= link_to _('Share'), share_plan_path(plan) %></li>
+                  <li><%= link_to _('Share'), share_plan_path(plan), class: 'dropdown-item  px-3' %></li>
                 <% end %>
 
-                <li><%= link_to _('Download'), download_plan_path(plan) %></li>
-                <li><%= link_to(_('Copy'), duplicate_plan_path(plan), data: { method: :post }) %></li>
+                <li><%= link_to _('Download'), download_plan_path(plan), class: 'dropdown-item  px-3' %></li>
+                <li><%= link_to(_('Copy'), duplicate_plan_path(plan), class: 'dropdown-item  px-3', data: { method: :post }) %></li>
               <% else %>
-                <li><%= link_to _('View'), plan_path(plan) %></li>
+                <li><%= link_to _('View'), plan_path(plan), class: 'dropdown-item  px-3' %></li>
 
                 <% if !plan.reviewable_by?(current_user.id) %>
-                  <li><%= link_to _('Download'), download_plan_path(plan) %></li>
+                  <li><%= link_to _('Download'), download_plan_path(plan), class: 'dropdown-item  px-3' %></li>
                 <% end %>
               <% end %>
               <% role = my_plan_roles.first %>
               <% conf = (role.creator? && plan.publicly_visible?) ? _("Are you sure you wish to remove this public plan? This will remove it from the Public DMPs page but any collaborators will still be able to access it.") : _("Are you sure you wish to remove this plan? Any collaborators will still be able to access it.") %>
-              <li><%= link_to _('Remove'), deactivate_role_path(role), 'data-method': 'put', rel: 'nofollow', 'data-confirm': conf %></li>
+              <li><%= link_to _('Remove'), deactivate_role_path(role), 'class': 'dropdown-item  px-3', 'data-method': 'put', rel: 'nofollow', 'data-confirm': conf %></li>
             </ul>
           </div>
           </td>
diff --git a/app/views/paginable/research_outputs/_index.html.erb b/app/views/paginable/research_outputs/_index.html.erb
index 8b89fb7163..c4e912f563 100644
--- a/app/views/paginable/research_outputs/_index.html.erb
+++ b/app/views/paginable/research_outputs/_index.html.erb
@@ -43,17 +43,17 @@
               <button class="btn btn-link dropdown-toggle"
                       type="button"
                       id="research_output-<%= output.id %>-actions"
-                      data-toggle="dropdown"
+                      data-bs-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="research_output-<%= output.id %>-actions">
                 <li><%= link_to _('Edit'),
-                        edit_plan_research_output_path(plan_id: @plan.id, id: output.id) %></li>
+                        edit_plan_research_output_path(plan_id: @plan.id, id: output.id), class: 'dropdown-item' %></li>
                 <li><%= link_to _('Remove'),
                                 plan_research_output_path(@plan.id, output),
                                 data: { confirm: _("You are about to delete '%{research_output_title}'. Are you sure?") % { research_output_title: output.title } },
-                                method: :delete %>
+                                method: :delete, class: 'dropdown-item' %>
                 </li>
               </ul>
             </div>
diff --git a/app/views/paginable/templates/_customisable.html.erb b/app/views/paginable/templates/_customisable.html.erb
index da85873975..f22831323e 100644
--- a/app/views/paginable/templates/_customisable.html.erb
+++ b/app/views/paginable/templates/_customisable.html.erb
@@ -15,7 +15,7 @@
       <% customization = customizations.find{ |customization| customization.customization_of == template.family_id } %>
       <tr id="<%= dom_id(template) %>">
         <td>
-          <%= link_to_customizable_template "#{template.is_default ? '* ' : ''}#{template.title}", customization, template %>
+          <%= link_to_customizable_template "#{template.is_default ? '* ' : ''}#{template.title}", customization, template, false %>
         </td>
         <td>
           <%= template.org.name %>
@@ -25,14 +25,14 @@
             <% if customization.upgrade_customization? %>
               <% tooltip = _("Select 'Transfer customisation' in the Actions menu to review your customisation(s) and make any necessary changes. When you are done, you must return to the Actions menu and publish your customisation(s).") %>
               <%= _('Original funder template has changed!') %><em class="sr-only"><%= tooltip %></em>
-              &nbsp;&nbsp;<i class="fas fa-copy red" aria-hidden="true" data-toggle="tooltip" title="<%= tooltip %>"></i>
+              &nbsp;&nbsp;<i class="fas fa-copy red" aria-hidden="true" data-bs-toggle="tooltip" title="<%= tooltip %>"></i>
             <% else %>
               <% if customization.published? %>
                 <%= _('Published') %>
               <% elsif customization.draft? %>
                 <% tooltip = _('You have unpublished changes! Select "Publish changes" in the Actions menu when you are ready to make them available to users.') %>
                 <%= _('Published') %> <em class="sr-only"><%= tooltip %></em>
-              &nbsp;&nbsp;<i class="fas fa-pen-to-square red" aria-hidden="true" data-toggle="tooltip" title="<%= tooltip %>"></i>
+              &nbsp;&nbsp;<i class="fas fa-pen-to-square red" aria-hidden="true" data-bs-toggle="tooltip" title="<%= tooltip %>"></i>
               <% else %>
                 <%= _('Unpublished') %>
               <% end %>
@@ -47,26 +47,27 @@
         </td>
         <td>
           <div class="dropdown">
-            <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
               <%= _('Actions') %><span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
-              <li><%= link_to_customizable_template "", customization, template %></li>
+              <li><%= link_to_customizable_template "", customization, template, true %></li>
               <% if customization.present? && customization.created_at >= template.created_at %>
-                <li><%= link_to _('History'), history_org_admin_template_path(customization.id) %></li>
+                <li><%= link_to _('History'), history_org_admin_template_path(customization.id), class: 'dropdown-item px-3' %></li>
                 <% if customization.draft? || customization.published? %>
-                  <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(customization.id), 'data-method': 'patch' %></li>
+                  <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(customization.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                 <% end %>
                 <% if customization.draft? %>
-                  <li><%= link_to _('Publish changes'), publish_org_admin_template_path(customization.id), 'data-method': 'patch' %></li>
+                  <li><%= link_to _('Publish changes'), publish_org_admin_template_path(customization.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                 <% elsif !customization.published? %>
-                    <li><%= link_to _('Publish'), publish_org_admin_template_path(customization.id), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Publish'), publish_org_admin_template_path(customization.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                 <% end %>
                 <% if customization.removable? %>
                   <li>
                     <%= link_to _('Remove'), org_admin_template_path(id: customization.id),
                                   'data-method': 'delete', rel: 'nofollow',
-                                  'data-confirm': _('Are you sure you want to remove your customization of "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: customization.title} %>
+                                  'data-confirm': _('Are you sure you want to remove your customization of "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: customization.title},
+                                  class: 'dropdown-item px-3' %>
                   </li>
                 <% end %>
               <% end %>
diff --git a/app/views/paginable/templates/_organisational.html.erb b/app/views/paginable/templates/_organisational.html.erb
index 2376970062..921ca09e42 100644
--- a/app/views/paginable/templates/_organisational.html.erb
+++ b/app/views/paginable/templates/_organisational.html.erb
@@ -49,37 +49,39 @@
           <% if action_name != 'index' %>
             <td>
               <div class="dropdown">
-                <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                   <%= _('Actions') %><span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu">
-                  <li><%= link_to _('Edit'), edit_org_admin_template_path(template.id) %></li>
-                  <li><%= link_to _('History'), history_org_admin_template_path(template.id) %></li>
+                  <li><%= link_to _('Edit'), edit_org_admin_template_path(template.id), class: 'dropdown-item px-3' %></li>
+                  <li><%= link_to _('History'), history_org_admin_template_path(template.id), class: 'dropdown-item px-3' %></li>
                   <% if template.draft? || template.published? %>
-                    <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(template.id), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(template.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                   <% end %>
                   <% if template.draft? %>
-                    <li><%= link_to _('Publish changes'), publish_org_admin_template_path(template), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Publish changes'), publish_org_admin_template_path(template), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                   <% elsif !template.published? %>
-                    <li><%= link_to _('Publish'), publish_org_admin_template_path(template.id), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Publish'), publish_org_admin_template_path(template.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                   <% end %>
                   <li>
                     <%= link_to _('Copy'),
                         org_admin_template_copies_path(template.id),
-                        data: { method: 'post' }
+                        data: { method: 'post' },
+                        class: 'dropdown-item px-3'
                     %>
                   </li>
                   <% if template.removable? %>
                     <li>
                       <%= link_to _('Remove'), org_admin_template_path(id: template.id),
                                   'data-method': 'delete', rel: 'nofollow',
-                                  'data-confirm': _('Are you sure you want to remove "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: template.title} %>
+                                  'data-confirm': _('Are you sure you want to remove "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: template.title},
+                                  class: 'dropdown-item px-3' %>
                     </li>
                   <% end %>
                   <li><%= link_to template_export_org_admin_template_url(template, format: :pdf),
                                   title: export_as_pdf,
                                   target: '_blank',
-                                  class: 'has-new-window-popup-info' do %>
+                                  class: 'has-new-window-popup-info dropdown-item px-3' do %>
                           <%= export_as_pdf %>
                           <em class="sr-only"><%= _('(new window)') %></em>
                           <span class="new-window-popup-info"><%= _('Opens in new window') %></span>
@@ -87,7 +89,7 @@
                   </li>
                   <li>
                     <%= direct_link(template, true) %>
-                    <a href="" class="copy-link" data-toggle="modal" data-target="#link-modal"><%= _('Copy link') %></a>
+                    <a href="" class="copy-link dropdown-item px-3" data-bs-toggle="modal" data-bs-target="#link-modal"><%= _('Copy link') %></a>
                   </li>
                 </ul>
               </div>
diff --git a/app/views/paginable/templates/_publicly_visible.html.erb b/app/views/paginable/templates/_publicly_visible.html.erb
index 0a0af28673..6d6d6a2d2e 100644
--- a/app/views/paginable/templates/_publicly_visible.html.erb
+++ b/app/views/paginable/templates/_publicly_visible.html.erb
@@ -44,7 +44,7 @@
           <td class="text-center">
           <% if signed_in %>
             <%= direct_link(template) %>
-            <a href="" class="copy-link" data-toggle="modal" data-target="#link-modal" title="<%= _('Copy link to create a new plan') %>"><span class="fas fa-clipboard"></span></a>
+            <a href="" class="copy-link" data-bs-toggle="modal" data-bs-target="#link-modal" title="<%= _('Copy link to create a new plan') %>"><span class="fas fa-clipboard"></span></a>
           <% else %>
             <%= _('Requires login') %>
           <% end %>
diff --git a/app/views/phases/_edit_plan_answers.html.erb b/app/views/phases/_edit_plan_answers.html.erb
index df53921eb3..c27caf46cd 100644
--- a/app/views/phases/_edit_plan_answers.html.erb
+++ b/app/views/phases/_edit_plan_answers.html.erb
@@ -5,16 +5,16 @@
         <div class="row">
           <div class="col-md-8">
             <div id="sections-accordion-controls">
-              <div class="accordion-controls" data-parent="sections-accordion">
+              <div class="accordion-controls px-1" data-parent="sections-accordion">
                 <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
                 <span>|</span>
                 <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
               </div>
             </div>
           </div>
+          <div class="col-md-4">
           <div id="progress-data" data-sections="<%= sections_info(plan).to_json %>" data-remove="<%= remove_list(plan).to_json %>">
           </div>
-          <div class="col-md-4">
             <% if plan.present? && phase.present? %>
               <div class="progress">
                 <%= render partial: "/plans/progress",
@@ -25,19 +25,17 @@
         </div>
       </div>
     </div>
-    <div class="panel-group" id="sections-accordion" role="tablist"
+    <div class="accordion" id="sections-accordion" role="tablist"
          aria-multiselectable="true">
-    <% phase.sections.sort {|a,b| a.number <=> b.number }.each do |section| %>
-      <div class="panel panel-default">
-        <div class="heading-button" role="button" data-toggle="collapse"
+      <% phase.sections.sort {|a,b| a.number <=> b.number }.each do |section| %>
+      <div class="accordion-item w-100 my-3">
+        <h2 class="accordion-header" role="tab" id="heading-<%= section.id %>">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              id="section-panel-<%= section.id %>"
-             data-parent="sections-accordion"
+             data-bs-parent="sections-accordion"
              href="#collapse-<%= section.id %>"
              aria-expanded="false"
              aria-controls="collapse-<%= section.id %>">
-
-          <div class="panel-heading" role="tab" id="heading-<%= section.id %>">
-            <div class="panel-title pull-left">
               <%= section.title %>
               <% if plan.present? %>
                   <span class="section-progress-<%= section.id %>">
@@ -45,13 +43,12 @@
                                locals: { section: section, plan: plan } %>
                   </span>
               <% end %>
-            </div>
-            <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-            <div class="clearfix"></div>
-          </div>
-        </div>
-        <div id="collapse-<%= section.id %>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
-          <div class="panel-body"><!-- accordion body -->
+            </button>
+  
+        </h2>
+
+        <div id="collapse-<%= section.id %>" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
+          <div class="accordion-body card card-body"><!-- accordion-body -->
             <div class="section-description">
               <div class="display-readonly-textarea-content">
                 <%= sanitize section.description %>
@@ -114,10 +111,10 @@
                   <hr />
                 <% end %>
               <% end %> <!-- section.questions.each do -->
-            </div> <!-- panel-body -->
-          </div> <!-- panel-collapse -->
-        </div> <!-- panel panel-default -->
+          </div> <!-- accordion-body -->
+        </div> <!-- accordion-collapse -->
+      </div> <!-- accordion-item -->
       <% end %>   <!-- phase.sections.sort {|a,b| a.number <=> b.number }.each do -->
-    </div>   <!-- panel-group -->
-  </div> <!-- tab panel -->
+    </div> <!-- accordion -->
+  </div> <!-- tab card -->
 </div> <!-- tab panels -->
diff --git a/app/views/phases/_guidances_notes.html.erb b/app/views/phases/_guidances_notes.html.erb
index 8c6937e929..05c7f351ef 100644
--- a/app/views/phases/_guidances_notes.html.erb
+++ b/app/views/phases/_guidances_notes.html.erb
@@ -3,23 +3,23 @@
 <% active_nav = nil %>
 <div id="plan-guidance-tab">
   <!-- Nav tabs -->
-  <ul class="nav nav-pills nav-justified mb-10" role="tablist">
-      <% if guidances_active %>
-          <li role="presentation" class="active">
-              <a href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-toggle="pill">
-                  <%= _('Guidance') %>
-              </a>
-          </li>
-      <% end %>
-      <% if plan.present? %>
-          <li role="presentation" class="<%= 'active' if !guidances_active %>">
-              <a href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-toggle="pill">
-                  <span id="notes-title-<%= question.id %>">
-                      <%= render partial: '/notes/title', locals: { answer: answer } %>
-                  </span>
-              </a>
-          </li>
-      <% end %>
+  <ul class="nav nav-pills nav-justified mb-2" role="tablist">
+    <% if guidances_active %>
+      <li role="presentation" class="nav-item">
+        <a class="nav-link active" href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-bs-toggle="pill">
+          <%= _('Guidance') %>
+        </a>
+      </li>
+    <% end %>
+    <% if plan.present? %>
+      <li role="presentation" class="nav-item">
+        <a class="nav-link <%= 'active' if !guidances_active %>" href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-bs-toggle="pill">
+          <span id="notes-title-<%= question.id %>">
+            <%= render partial: '/notes/title', locals: { answer: answer } %>
+          </span>
+        </a>
+      </li>
+    <% end %>
   </ul>
   <div class="tab-content">
     <% if guidances_active %>
@@ -28,14 +28,14 @@
         <ul class="nav nav-tabs" role="tablist">
           <% tablist.each_with_index do |tab, i| %>
             <% active_nav ||= tab[:name] %>
-            <li role="presentation" <%= active_nav == tab[:name] ? "class=active" : "" %>>
+            <li role="presentation" class="nav-item">
               <a
-                data-target="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
+                data-bs-target="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 aria-controls="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 role="tab"
-                data-toggle="tab"
+                data-bs-toggle="tab"
                 tabindex="0"
-                class="view-plan-guidance">
+                class="<%= active_nav == tab[:name] ? "nav-link view-plan-guidance active" : "nav-link view-plan-guidance" %>">
                 <%= tab[:name] %>
               </a>
             </li>
@@ -44,34 +44,33 @@
         <div class="tab-content">
           <% tablist.each_with_index do |tab, i| %>
             <div id="<%= "guidance_per_question_#{question.id}_#{i}" %>" role="tabpanel" class="tab-pane <%= active_nav == tab[:name] ? 'active' : '' %>">
-                <div class="panel panel-default">
-                  <div class="panel-body">
-                    <% if tab[:annotations].present? %>
-                      <% tab[:annotations].each do |annotation| %>
-                        <%=
+              <div class="card card-default">
+                <div class="card-body">
+                  <% if tab[:annotations].present? %>
+                    <% tab[:annotations].each do |annotation| %>
+                      <%=
                           render partial: 'org_admin/annotations/show', locals: {
                             template: template,
                             example_answer: nil,
                             guidance: annotation,
                             for_plan: true }
                         %>
-                      <% end %>
-                      <% if tab[:groups].present? %>
-                        <hr />
-                      <% end %>
                     <% end %>
                     <% if tab[:groups].present? %>
-                      <%= render partial: 'guidance_groups/index_by_theme',
-                          locals: { question: question, guidance_groups_by_theme: tab[:groups] } %>
+                      <hr />
                     <% end %>
-                  </div>
+                  <% end %>
+                  <% if tab[:groups].present? %>
+                    <%= render partial: 'guidance_groups/index_by_theme',
+                          locals: { question: question, guidance_groups_by_theme: tab[:groups] } %>
+                  <% end %>
                 </div>
               </div>
+            </div>
           <% end %>
         </div>
       </div>
     <% end %>
-
     <% if plan.present? %>
       <div id="notes-<%= question.id %>" role="tabpanel" class="tab-pane <%= 'active' if !guidances_active %> notes">
         <%= render partial: '/notes/layout', locals: { plan: plan, question: question, answer: answer } %>
diff --git a/app/views/phases/_overview.html.erb b/app/views/phases/_overview.html.erb
index 656323b986..8f9fe1be6b 100644
--- a/app/views/phases/_overview.html.erb
+++ b/app/views/phases/_overview.html.erb
@@ -3,7 +3,7 @@
   <div class="col-xs-12">
     <p class='fontsize-h4'>
       <%= _('Instructions') %>
-      <a href="<%= edit_plan_path(plan_id, phase_id: phase.id) %>" class="btn btn-default pull-right"><%= _('Write plan') %></a>
+      <a href="<%= edit_plan_path(plan_id, phase_id: phase.id) %>" class="btn btn-secondary float-end"><%= _('Write plan') %></a>
     </p>
     <p class="text-justify">
         <div class="display-readonly-textarea-content">
diff --git a/app/views/plans/_download_form.html.erb b/app/views/plans/_download_form.html.erb
index 930d9b6a04..5100a71b5a 100644
--- a/app/views/plans/_download_form.html.erb
+++ b/app/views/plans/_download_form.html.erb
@@ -5,7 +5,7 @@
 
   <h2><%= _('Format') %></h2>
   <div class="row">
-    <div class="form-group col-xs-2">
+    <div class="form-control mb-3 col-sm-2">
       <%= select_tag :format, options_for_select(Settings::Template::VALID_FORMATS, :pdf),
                      class: 'form-control', "aria-labelledby": "format" %>
     </div>
@@ -15,8 +15,8 @@
     <h2><%= _("Download settings") %></h2>
     <%= hidden_field_tag 'export[form]', true %>
     <% if @phase_options.length > 1 %>
-      <div class="form-group">
-        <%= label_tag(:phase_id, _("Select phase to download")) %>
+      <div class="form-control mb-5">
+        <%= label_tag(:phase_id, _("Select phase to download"), class: 'form-label') %>
         <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0])) %>
       </div>
     <% else %>
@@ -24,35 +24,35 @@
     <% end %>
     <fieldset>
       <legend><%= _("Optional plan components") %></legend>
-      <div class="checkbox">
-        <%= label_tag 'export[project_details]' do %>
+      <div class="form-check">
+        <%= label_tag 'export[project_details]', class:'form-check-label' do %>
           <%= check_box_tag 'export[project_details]', true, download_coversheet_tickbox_checked %>
           <%= _('project details coversheet') %>
         <% end %>
       </div>
-      <div class="checkbox">
-        <%= label_tag 'export[question_headings]' do %>
+      <div class="form-check">
+        <%= label_tag 'export[question_headings]', class:'form-check-label' do %>
           <%= check_box_tag 'export[question_headings]', true, true %>
           <%= _('question text and section headings') %>
         <% end %>
       </div>
-      <div class="checkbox">
-        <%= label_tag 'export[unanswered_questions]' do %>
+      <div class="form-check">
+        <%= label_tag 'export[unanswered_questions]', class:'form-check-label' do %>
           <%= check_box_tag 'export[unanswered_questions]', true, true %>
           <%= _('unanswered questions') %>
         <% end %>
       </div>
       <% if @plan.research_outputs.any? %>
-        <div class="checkbox">
-          <%= label_tag 'export[research_outputs]' do %>
+        <div class="form-check">
+          <%= label_tag 'export[research_outputs]', class:'form-check-label' do %>
             <%= check_box_tag 'export[research_outputs]', true, true %>
             <%= _('research outputs') %>
           <% end %>
         </div>
       <% end %>
       <% if @plan.template.customization_of.present? %>
-        <div class="checkbox">
-          <%= label_tag 'export[custom_sections]' do %>
+        <div class="form-check">
+          <%= label_tag 'export[custom_sections]', class:'form-check-label' do %>
             <%= check_box_tag 'export[custom_sections]', true, false %>
             <%= _('supplementary section(s) not requested by funding organisation') %>
           <% end %>
@@ -61,63 +61,63 @@
     </fieldset>
   </div>
 
-  <div id="pdf-formatting">
+  <div id="pdf-formatting" class="py-3">
     <h2><%= _('PDF formatting') %></h2>
-    <div class="row">
-      <div class="col-xs-6">
-        <h3><%= _('Font') %></h3>
+    <div class="d-flex flex-row">
+      <div class="col-sm-6">
+        <h4><%= _('Font') %></h4>
       </div>
-      <div class="col-xs-6">
-        <h3><%= _('Margin (mm)') %></h3>
+      <div class="col-sm-6 px-2">
+        <h4><%= _('Margin (mm)') %></h4>
       </div>
     </div>
-    <div class="row">
-      <div class="form-group col-xs-4">
-        <%= label_tag "export[formatting][font_face]", _('Face'), class: 'control-label' %>
+    <div class="d-flex flex-row">
+      <div class="form-control mb-3 col-sm-4">
+        <%= label_tag "export[formatting][font_face]", _('Face'), class: 'form-label' %>
         <%= select_tag "export[formatting][font_face]",
             options_for_select(Settings::Template::VALID_FONT_FACES,
                                @export_settings.formatting[:font_face]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:font_face] %>
       </div>
-      <div class="form-group col-xs-2">
-        <%= label_tag "export[formatting][font_size]", _('Size') + " (pt)", class: 'control-label' %>
+      <div class="form-control mb-3 px-2 col-sm-2">
+        <%= label_tag "export[formatting][font_size]", _('Size') + " (pt)", class: 'form-label' %>
         <%= select_tag "export[formatting][font_size]",
             options_for_select(Settings::Template::VALID_FONT_SIZE_RANGE.to_a, @export_settings.formatting[:font_size]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:font_size] %>
       </div>
 
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][top]", _('Top'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][top]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:top]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:margin][:top] %>
       </div>
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][bottom]", _('Bottom'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][bottom]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:bottom]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:margin][:bottom] %>
       </div>
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][left]", _('Left'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][left]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:left]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:margin][:left] %>
       </div>
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][right]", _('Right'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][right]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:right]),
diff --git a/app/views/plans/_edit_details.html.erb b/app/views/plans/_edit_details.html.erb
index e6cc4a747a..54c84d2a6c 100644
--- a/app/views/plans/_edit_details.html.erb
+++ b/app/views/plans/_edit_details.html.erb
@@ -3,14 +3,14 @@
 <%= form_for plan, html: { method: :put,
                             class: 'form-horizontal edit_plan' } do |f| %>
   <div class="row">
-    <div class="col-md-8">
+    <div class="col-lg-8">
       <%= render partial: "plans/project_details",
                  locals: { form: f, plan: plan, orgs: orgs, org_partial: org_partial,
                            research_domains: @research_domains } %>
 
-      <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+      <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
     </div>
-    <div class="col-md-4">
+    <div class="col-lg-4">
       <h2><%= _('Select Guidance') %></h2>
       <%= render partial: "plans/guidance_selection",
                  locals: {
diff --git a/app/views/plans/_guidance_choices.html.erb b/app/views/plans/_guidance_choices.html.erb
index d25b3f7c26..f8b820a7f5 100644
--- a/app/views/plans/_guidance_choices.html.erb
+++ b/app/views/plans/_guidance_choices.html.erb
@@ -1,7 +1,7 @@
 <%# locals: choices, current_selections %>
 <% choices.each do |org, groups| %>
   <% if groups && groups.size == 1 %>
-    <li class="checkbox">
+    <li class="form-check">
       <%= check_box_tag "guidance_group_ids[]",
                         groups[0].id,
                         current_selections.include?(groups[0].id),
@@ -10,11 +10,11 @@
       <%= org.name %>
     </li>
   <% elsif groups %>
-    <li class="checkbox">
+    <li class="form-check">
       <%= org.name %>
       <ul>
         <% groups.each do |group| %>
-          <li class="checkbox">
+          <li class="form-check">
             <span class="sublist">└─ </span>
             <%= check_box_tag "guidance_group_ids[]",
                               group.id,
diff --git a/app/views/plans/_guidance_selection.html.erb b/app/views/plans/_guidance_selection.html.erb
index 57013276e0..9440e9f97f 100644
--- a/app/views/plans/_guidance_selection.html.erb
+++ b/app/views/plans/_guidance_selection.html.erb
@@ -16,25 +16,23 @@
 
   <% if all_guidance_groups.length > important_ggs.length %>
     <p><%= _('Find guidance from additional organisations below') %></p>
-    <%= link_to _('See the full list'), '#', data: { toggle: "modal", target: "#modal-full-guidances" }, class: 'modal-guidances-window' %>
+    <%= link_to _('See the full list'), '#', 'data-bs-toggle' => 'modal', 'data-bs-target' => '#modal-full-guidances', class: 'modal-guidances-window' %>
   <% end %>
 
   <br>
-  <%= form.button(_('Save'), class: "btn btn-default", type: "submit") %>
+  <%= form.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
 
 <% else %>
   <p><%= _("There is no additional guidance for this template.") %></p>
 <% end %>
 
 <% if all_guidance_groups.length > important_ggs.length %>
-  <div id="modal-full-guidances" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
+  <div id="modal-full-guidances"  class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content modal-dialog-scrollable">
         <div class="sign-in">
           <div class="modal-body">
-            <button type="button" class="close pull-right" data-dismiss="modal" aria-label="<%= _('Cancel') %>">
-              <span class="fas fa-times" aria-hidden="true">&nbsp;</span>
-            </button>
+            <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
             <h2><%= _('Select Guidance') %></h2>
             <p>
               <%= _('To help you write your plan, %{application_name} can show you guidance from a variety of organisations. Please choose up to 6 organisations of the following organisations who offer guidance relevant to your plan.') % { application_name: app_name } %>
diff --git a/app/views/plans/_navigation.html.erb b/app/views/plans/_navigation.html.erb
index 468321c9de..6cbf7dd8e8 100644
--- a/app/views/plans/_navigation.html.erb
+++ b/app/views/plans/_navigation.html.erb
@@ -1,48 +1,53 @@
 <% phases = plan.template.phases %>
 <ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" class="<%= (active_page?(plan_path(plan), true) ? 'active' : '') %>">
-    <a href="<%= plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Project Details') %></a>
+  <li role="presentation" class="nav-item <%= (active_page?(plan_path(plan), true) ? 'active' : '') %>">
+    <a href="<%= plan_path(plan) %>" role="tab" 
+    class="nav-link" aria-controls="content"><%= _('Project Details') %></a>
   </li>
-  <li role="contributors" class="<%= (active_page?(plan_contributors_path(plan)) ? "active" : "") %>">
+  <li role="contributors" class="nav-item <%= (active_page?(plan_contributors_path(plan)) ? "active" : "") %>">
     <%= link_to _("Contributors"), plan_contributors_path(plan), role: "tab",
-                aria: { controls: "content" } %>
-  </li>
-  <li role="presentation" class="<%= (active_page?(overview_plan_path(plan)) ? 'active' : '') %>">
-    <%= link_to(_('Plan overview'), overview_plan_path(plan), role: 'tab', 'aria-controls': 'content') %>
+                aria: { controls: "content" }, class: 'nav-link' %>
   </li>
+  <li role="presentation" class="nav-item <%= (active_page?(overview_plan_path(plan)) ? 'active' : '') %>">
+    <%= link_to _('Plan overview'), overview_plan_path(plan), role: 'tab', 
+                aria: { controls: "content" }, class: 'nav-link' %>
   <% phases.each do |phase| %>
-    <li role="presentation" class="<%= (active_page?(edit_plan_path(plan.id, phase_id: phase.id)) ? 'active' : '') %>">
-      <a href="<%= edit_plan_path(plan.id, phase_id: phase.id) %>" role="tab" aria-controls="content">
+    <li role="presentation" class="nav-item <%= (active_page?(edit_plan_path(plan.id, phase_id: phase.id)) ? 'active' : '') %>">
+      <a href="<%= edit_plan_path(plan.id, phase_id: phase.id) %>" role="tab" 
+         class="nav-link" aria-controls="content">
         <%= (phases.size > 1 ? phase.title : _('Write Plan')) %>
       </a>
     </li>
   <% end %>
   <% if Rails.configuration.x.madmp.enable_research_outputs %>
-    <li role="research_outputs" class="<%= (active_page?(plan_research_outputs_path(plan)) ? "active" : "") %>">
+    <li role="research_outputs" class="nav-item <%= (active_page?(plan_research_outputs_path(plan)) ? "active" : "") %>">
       <%= link_to _("Research Outputs"), plan_research_outputs_path(plan), role: "tab",
-                  aria: { controls: "content" } %>
+                  aria: { controls: "content" }, class: 'nav-link' %>
     </li>
   <% end %>
   <% if plan.administerable_by?(current_user.id) || (current_user.can_org_admin? && current_user.org.plans.include?(plan)) %>
-    <li role="presentation" class="<%= (active_page?(share_plan_path(plan)) ? 'active' : '') %>">
-      <a href="<%= share_plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Share') %></a>
+    <li role="presentation" class="nav-item <%= (active_page?(share_plan_path(plan)) ? 'active' : '') %>">
+      <a href="<%= share_plan_path(plan) %>" role="tab" 
+         class="nav-link" aria-controls="content"><%= _('Share') %></a>
     </li>
   <% end %>
   <% if (plan.administerable_by?(current_user.id) || (current_user.can_org_admin? && current_user.org.plans.include?(plan))) && plan.owner_and_coowners.include?(current_user) && plan.owner.org.feedback_enabled? %>
-    <li role="presentation" class="<%= (active_page?(request_feedback_plan_path(plan)) ? 'active' : '') %>">
-      <a href="<%= request_feedback_plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Request feedback') %></a>
+    <li role="presentation" class="nav-item <%= (active_page?(request_feedback_plan_path(plan)) ? 'active' : '') %>">
+      <a href="<%= request_feedback_plan_path(plan) %>" role="tab" 
+         class="nav-link" aria-controls="content"><%= _('Request feedback') %></a>
     </li>
   <% end %>
   <% if plan.readable_by?(current_user.id) %>
-    <li role="presentation" class="<%= (active_page?(download_plan_path(plan)) ? 'active' : '') %>">
-      <a href="<%= download_plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Download') %></a>
+    <li role="presentation" class="nav-item <%= (active_page?(download_plan_path(plan)) ? 'active' : '') %>">
+      <a href="<%= download_plan_path(plan) %>" role="tab"
+         class="nav-link" aria-controls="content"><%= _('Download') %></a>
     </li>
   <% end %>
 </ul>
 <div class="tab-content">
   <div id="content" role="tabpanel" class="tab-pane active">
-    <div class="panel panel-default">
-      <div class="panel-body">
+    <div class="card card-default">
+      <div class="card-body">
         <%= yield :plan_tab_body %>
       </div>
     </div>
diff --git a/app/views/plans/_overview_details.html.erb b/app/views/plans/_overview_details.html.erb
index 5c4b7531ca..cba5201573 100644
--- a/app/views/plans/_overview_details.html.erb
+++ b/app/views/plans/_overview_details.html.erb
@@ -26,33 +26,29 @@
     <% if plan.template.phases.size == 1 %>
       <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: plan.template.phases.first }) %>
     <% else %>
-      <div class="panel-group" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
+      <div class="accordion" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
         <% plan.template.phases.each do |p| %>
           <% questions_size = p.sections.map{|s| s.questions.size }.reduce(0){|sum,x| sum + x } %>
-          <div class="panel panel-default">
-            <div class="heading-button" role="button" data-toggle="collapse"
-                 data-parent="plan-overview-accordion"
+          <div class="accordion-item card card-default">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                 data-bs-parent="plan-overview-accordion"
                  href="#plan-overview-collapse-<%= p.id %>"
                  aria-expanded="false"
                  aria-controls="#plan-overview-collapse-<%= p.id %>">
 
-              <div class="panel-heading" role="tab" id="plan-overview-heading-<%= p.id %>">
-                <div class="panel-title">
-                  <div class="pull-left">
+              <div class="card-heading" role="tab" id="plan-overview-heading-<%= p.id %>">
+                <h2 class="accordion-header">
+                  <div class="float-start">
                     <%= _("%{phase_title} (%{sections_size} %{sections}, %{questions_size} %{questions})") % {
                       :phase_title => p.title, :sections_size => p.sections.size, :sections => n_('section', 'sections', p.sections.size),
                       :questions_size => questions_size,
                       :questions => n_('question', 'questions', questions_size) } %>
                   </div>
-                  <div class="pull-right">
-                    <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-                  </div>
-                  <div class="clearfix"></div>
-                </div>
+                </h2>
               </div>
-            </div>
-            <div id="plan-overview-collapse-<%= p.id %>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="plan-overview-heading-<%= p.id %>">
-              <div class="panel-body">
+            </button>
+            <div id="plan-overview-collapse-<%= p.id %>" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="plan-overview-heading-<%= p.id %>">
+              <div class="accordion-body card card-body">
                 <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: p }) %>
               </div>
             </div>
diff --git a/app/views/plans/_project_details.html.erb b/app/views/plans/_project_details.html.erb
index dd81a54ef5..3ca1e53ffc 100644
--- a/app/views/plans/_project_details.html.erb
+++ b/app/views/plans/_project_details.html.erb
@@ -9,20 +9,20 @@ ethics_description_tooltip = _("Description of the ethical issues")
 ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics commitee")
 %>
 
-<div class="form-group"><!-- title -->
-  <div class="col-md-12">
-    <%= form.label(:title, _('Project title'), class: 'control-label') %>
+<div class="form-control mb-3"><!-- title -->
+  <div class="col-lg-12">
+    <%= form.label(:title, _('Project title'), class: 'form-label') %>
   </div>
-  <div class="col-md-8">
+  <div class="col-lg-8">
     <em class="sr-only"><%= project_title_tooltip %></em>
     <%= form.text_field(:title, class: "form-control", "aria-required": true,
                                 'data-toggle': 'tooltip', spellcheck: true,
                                 title: project_title_tooltip) %>
   </div>
-  <div class="col-md-8">
-    <div class="checkbox">
+  <div class="col-lg-8">
+    <div class="form-check">
       <%= form.hidden_field :visibility %>
-      <%= form.label(:is_test, class: 'control-label') do %>
+      <%= form.label(:is_test, class: 'form-label') do %>
         <%= check_box_tag(:is_test, 1, plan.is_test?, "aria-label": "is_test") %>
         <%= _('mock project for testing, practice, or educational purposes') %>
       <% end %>
@@ -30,11 +30,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
   </div>
 </div>
 
-<div class="form-group"><!-- description -->
-  <div class="col-md-12">
-    <%= form.label(:description, _('Project abstract'), class: 'control-label', id: 'project-description-label') %>
+<div class="form-control mb-3"><!-- description -->
+  <div class="col-lg-12">
+    <%= form.label(:description, _('Project abstract'), class: 'form-label', id: 'project-description-label') %>
   </div>
-  <div class="col-md-8" data-toggle="tooltip" title="<%= project_abstract_tooltip %>">
+  <div class="col-lg-8" data-toggle="tooltip" title="<%= project_abstract_tooltip %>">
     <em class="sr-only"><%= project_abstract_tooltip %></em>
     <%= form.text_area :description, rows: 6, class: 'form-control tinymce',
                        spellcheck: true, aria: { required: false, labelledby: 'project-description-label' } %>
@@ -42,9 +42,9 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 </div>
 
 <% if Rails.configuration.x.madmp.enable_research_domain %>
-  <div class="form-group">
-    <div class="col-md-8">
-      <%= form.label(:research_domain_id, _("Research domain"), class: "control-label") %>
+  <div class="form-control mb-3">
+    <div class="col-lg-8">
+      <%= form.label(:research_domain_id, _("Research domain"), class: "form-label") %>
 
       <% options = research_domains.map { |rd| [rd.label, rd.id] } %>
       <%= form.select :research_domain_id, options_for_select(options, form.object.research_domain_id),
@@ -57,15 +57,15 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
   </div>
 <% end %>
 
-<div class="form-group"><!-- start / end dates -->
-  <div class="col-md-4">
-    <%= form.label(:start_date, _("Project Start"), class: "control-label") %>
+<div class="form-control mb-3"><!-- start / end dates -->
+  <div class="col-lg-4">
+    <%= form.label(:start_date, _("Project Start"), class: "form-label") %>
     <%= form.date_field :start_date, class: "form-control",
                                      data: { toggle: "tooltip" },
                                      title: _("The estimated date on which you will begin this project.") %>
   </div>
-  <div class="col-md-4">
-    <%= form.label(:end_date, _("Project End"), class: "control-label") %>
+  <div class="col-lg-4">
+    <%= form.label(:end_date, _("Project End"), class: "form-label") %>
     <%= form.date_field :end_date, class: "form-control",
                                    data: { toggle: "tooltip" },
                                    title: _("The estimated date on which you will complete this project.") %>
@@ -75,11 +75,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 <%# if DOI minting is enabled %>
 <% landing_page = plan.landing_page %>
 <% if Rails.configuration.x.doi&.active && landing_page.present? %>
-  <div class="form-group"><!-- identifier -->
-    <div class="col-md-12">
-      <%= form.label(:identifier, _('Landing page'), class: 'control-label') %>
+  <div class="form-control mb-3"><!-- identifier -->
+    <div class="col-lg-12">
+      <%= form.label(:identifier, _('Landing page'), class: 'form-label') %>
     </div>
-    <div class="col-md-8">
+    <div class="col-lg-8">
       <% if landing_page.value.starts_with?("http") %>
         <%= link_to landing_page.value, landing_page.value %>
       <% else %>
@@ -88,11 +88,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
     </div>
   </div>
 <% else %>
-  <div class="form-group">
-    <div class="col-md-12">
-      <%= form.label :id, _("ID"), class: "control-label" %>
+  <div class="form-control mb-3">
+    <div class="col-lg-12">
+      <%= form.label :id, _("ID"), class: "form-label" %>
     </div>
-    <div class="col-md-8">
+    <div class="col-lg-8">
       <em class="sr-only"><%= id_tooltip %></em>
       <%= form.text_field :identifier,
                           class: "form-control",
@@ -106,21 +106,21 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 
 <% if Rails.configuration.x.madmp.enable_ethical_issues %>
   <conditional>
-    <div class="form-group">
-      <div class="col-md-8">
-        <div class="checkbox">
-          <%= form.label(:ethical_issues, class: 'control-label', title: ethics_tooltip) do %>
+    <div class="form-control mb-3">
+      <div class="col-lg-8">
+        <div class="form-check">
+          <%= form.label(:ethical_issues, class: 'form-label', title: ethics_tooltip) do %>
             <%= form.check_box(:ethical_issues) %>
             <%= _('Research outputs may have ethical concerns') %>
           <% end %>
         </div>
       </div>
     </div>
-    <div class="form-group toggleable-field">
-      <div class="col-md-12">
-        <%= form.label(:ethical_issues_description, _('Describe any ethical concerns'), class: 'control-label', id: 'plan-ethical-description') %>
+    <div class="form-control mb-3 toggleable-field">
+      <div class="col-lg-12">
+        <%= form.label(:ethical_issues_description, _('Describe any ethical concerns'), class: 'form-label', id: 'plan-ethical-description') %>
       </div>
-      <div class="col-md-8" data-toggle="tooltip" title="<%= ethics_description_tooltip %>">
+      <div class="col-lg-8" data-toggle="tooltip" title="<%= ethics_description_tooltip %>">
         <em class="sr-only"><%= ethics_description_tooltip %></em>
         <%= form.text_area :ethical_issues_description,
                            rows: 6,
@@ -129,11 +129,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
                            aria: { required: false, labelledby: 'plan-ethical-description' } %>
       </div>
     </div>
-    <div class="form-group toggleable-field">
-      <div class="col-md-12">
-        <%= form.label(:ethical_issues_report, _('Ethical protocols'), class: 'control-label') %>
+    <div class="form-control mb-3 toggleable-field">
+      <div class="col-lg-12">
+        <%= form.label(:ethical_issues_report, _('Ethical protocols'), class: 'form-label') %>
       </div>
-      <div class="col-md-8">
+      <div class="col-lg-8">
         <em class="sr-only"><%= ethics_report_tooltip %></em>
         <%= form.url_field(:ethical_issues_report,
                            class: "form-control",
@@ -146,8 +146,8 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 <% end %>
 
 <conditional>
-  <div id="funder-org-controls" class="form-group">
-    <div class="col-md-8">
+  <div id="funder-org-controls" class="form-control mb-3">
+    <div class="col-lg-8">
       <%= form.fields_for :funder, Org.new do |funder_fields| %>
         <%= render partial: "shared/org_selectors/local_only",
                     locals: {
@@ -162,11 +162,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
     </div>
   </div>
 
-  <div class="form-group toggleable-field">
-    <div class="col-md-12">
-      <%= form.label(:funding_status, _("Funding status"), class: "control-label") %>
+  <div class="form-control mb-3 toggleable-field">
+    <div class="col-lg-12">
+      <%= form.label(:funding_status, _("Funding status"), class: "form-label") %>
     </div>
-    <div class="col-md-8">
+    <div class="col-lg-8">
      <% funding_statuses = Plan::FUNDING_STATUS.map { |status| [_(status[0].to_s.capitalize), _(status[0].to_s)] } %>
     <%= form.select :funding_status, options_for_select(funding_statuses, form.object.funding_status),
                             {
@@ -176,11 +176,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
                             { class: "form-control" } %>
     </div>
     <%= form.fields_for :grant, plan.grant do |grant_fields| %>
-      <div class="col-md-12">
-        <%= grant_fields.label(:value, _("Grant number/url"), class: "control-label") %>
+      <div class="col-lg-12">
+        <%= grant_fields.label(:value, _("Grant number/url"), class: "form-label") %>
       </div>
 
-      <div class="col-md-8">
+      <div class="col-lg-8">
         <%# If the OpenAire grant typeahead if enabled use it %>
         <% if Rails.configuration.x.open_aire.active %>
           <!-- Using the research_project.json source for typeahead -->
diff --git a/app/views/plans/_request_feedback_form.html.erb b/app/views/plans/_request_feedback_form.html.erb
index 777b419b20..b3949f0425 100644
--- a/app/views/plans/_request_feedback_form.html.erb
+++ b/app/views/plans/_request_feedback_form.html.erb
@@ -15,11 +15,11 @@
         <%= sanitize plan.owner.org.feedback_msg.to_s % { user_name: current_user.name(false), plan_name: plan.title, organisation_email: current_user.org.contact_email } %>
       </div>
       <p><%= _('You can continue to edit and download the plan in the interim.') %></p>
-      <div class="form-group col-xs-8">
+      <div class="form-control mb-3 col-xs-8">
         <%= link_to _('Request feedback'),
                      feedback_requests_path(plan_id: @plan.id),
                      data: { method: 'post' },
-                     class: "btn btn-default#{' disabled' if @plan.feedback_requested?}" %>
+                     class: "btn btn-secondary#{' disabled' if @plan.feedback_requested?}" %>
         <span><%= _("Feedback has been requested.") if @plan.feedback_requested? %></span>
       </div>
     <% end %>
diff --git a/app/views/plans/_share_form.html.erb b/app/views/plans/_share_form.html.erb
index e68cede35a..7151623d82 100644
--- a/app/views/plans/_share_form.html.erb
+++ b/app/views/plans/_share_form.html.erb
@@ -12,25 +12,25 @@
     <legend>
       <p class="form-control-static"><%= _('Public or organisational visibility is intended for finished plans. You must answer at least %{percentage}%% of the questions to enable these options. Note: test plans are set to private visibility by default.') % { :percentage => Rails.configuration.x.plans.default_percentage_answered } %></p>
     </legend>
-    <div class="form-group col-xs-8">
-      <div class="radio">
-        <%= label_tag :visibility_privately_visible do %>
+    <div class="form-control mb-3 col-xs-8">
+      <div class="form-check">
+        <%= label_tag :visibility_privately_visible, class:'form-check-label' do %>
           <%= f.radio_button :visibility, :privately_visible,
                              data: { url: visibility_plan_path(@plan),
                                      remote: true, method: :post } %>
           <%= _('Private: visible to me, specified collaborators and administrators at my organisation') %>
         <% end %>
       </div>
-      <div class="radio">
-        <%= label_tag :visibility_organisationally_visible do %>
+      <div class="form-check">
+        <%= label_tag :visibility_organisationally_visible, class:'form-check-label' do %>
           <%= f.radio_button :visibility, :organisationally_visible,
                              data: { url: visibility_plan_path(@plan),
                                      remote: true, method: :post } %>
           <%= _('Organisation: anyone at my organisation can view') %>
         <% end %>
       </div>
-      <div class="radio">
-        <%= label_tag :visibility_publicly_visible do %>
+      <div class="form-check">
+        <%= label_tag :visibility_publicly_visible, class:'form-check-label' do %>
           <%= f.radio_button :visibility, :publicly_visible,
                              data: { url: visibility_plan_path(@plan),
                                      remote: true, method: :post }  %>
@@ -63,7 +63,7 @@
                 <span><%= display_role(role) %></span>
             <% else %>
                 <% if administerable && role.user != current_user %>
-                  <div class="form-group col-xs-8">
+                  <div class="form-control mb-3 col-xs-8">
                     <%= fields_for role do |f| %>
                       <% options = [
                         ["#{display_role(administrator)}", administrator.access],
@@ -103,10 +103,10 @@
   <% new_role = Role.new %>
   <% new_role.plan = @plan %>
   <%= form_for new_role, url: {controller: :roles, action: :create }, html: {method: :post} do |f| %>
-    <div class="form-group col-xs-6">
+    <div class="form-control mb-3 col-xs-6">
       <%= f.hidden_field :plan_id %>
       <%= f.fields_for :user, new_role.user do |user| %>
-        <%= user.label :email, _('Email'), class: 'control-label'%>
+        <%= user.label :email, _('Email'), class: 'form-label'%>
          <em class="sr-only"><%= email_tooltip %></em>
         <%= user.email_field :email, class: "form-control", title: email_tooltip,
                                      aria: { required: true },
@@ -122,20 +122,20 @@
                     title: permissions_tooltip,
                     'data-placement':'right' do %>
       <%= content_tag :legend , _('Permissions') %>
-      <div class="form-group">
-        <div class="radio">
+      <div class="form-control mb-3">
+        <div class="form-check">
           <%= f.label :administrator_access do %>
             <%= f.radio_button :access, administrator.access, id: "role_administrator_access", "aria-required": true, required: true %>
             <%= _('Co-owner') %>
           <% end %>
         </div>
-        <div class="radio">
+        <div class="form-check">
           <%= f.label :editor_access do %>
             <%= f.radio_button :access, editor.access , id: "role_editor_access" %>
             <%= _('Editor') %>
           <% end %>
         </div>
-        <div class="radio">
+        <div class="form-check">
           <%= f.label :commenter_access do %>
             <%= f.radio_button :access, commenter.access, id: "role_commenter_access" %>
             <%= _('Read only') %>
@@ -144,7 +144,7 @@
       </div>
     <% end %>
     <div class="clearfix"></div>
-    <div class="form-group col-xs-2">
+    <div class="form-control mb-3 col-xs-2">
     <%= f.button(_('Submit'), class: "btn btn-primary", type: "submit") %>
     </div>
   <% end %>
diff --git a/app/views/plans/new.html.erb b/app/views/plans/new.html.erb
index d2d3ed23bb..d1b0af4de5 100644
--- a/app/views/plans/new.html.erb
+++ b/app/views/plans/new.html.erb
@@ -10,7 +10,7 @@
   <div class="col-md-12">
     <h1><%= _('Create a new plan') %></h1>
 
-    <p class="left-indent">
+    <p class="start-indent">
       <%= _("Before you get started, we need some information about your research project to set you up with the best DMP template for your needs.") %>
     </p>
   </div>
@@ -22,17 +22,15 @@
       <!-- Plan name section -->
       <h2 id="project-title"><span class="red" title="<%= required_project_title_tooltip %>">*<em class="sr-only"><%= required_project_title_tooltip %></em> </span><%= _('What research project are you planning?') %></h2>
       <div class="row">
-        <div class="form-group col-xs-6">
-          <em class="sr-only"><%= project_title_tooltip %></em>
+        <div class="form-control mb-3 col-md-8">
           <%= f.text_field(:title, class: 'form-control', 'aria-labelledby': 'project-title', 'aria-required': 'true', 'aria-label': 'project-title',
                 'data-toggle': 'tooltip',
                 'data-placement': 'bottom',
                 spellcheck: true,
                 title: project_title_tooltip ) %>
         </div>
-        <div class="col-md-1">&nbsp;</div>
-        <div class="form-group col-xs-5">
-          <div class="checkbox create-plan-mock">
+        <div class="form-control mb-3 col-md-6">
+          <div class="checkbox">
             <%= label_tag(:is_test) do %>
               <%= check_box_tag(:is_test, "1", false) %>
               <%= _('mock project for testing, practice, or educational purposes') %>
@@ -47,7 +45,7 @@
         <%= _('Select the primary research organisation') %>
       </h2>
       <div id="research-org-controls" class="row">
-        <div class="form-group col-md-6">
+        <div class="form-control mb-3 col-md-6">
            <em class="sr-only"><%= research_org_tooltip %></em>
            <% dflt = @orgs.include?(current_user.org) ? current_user.org : nil %>
            <%= f.fields_for :org, @plan.org do |org_fields| %>
@@ -61,9 +59,9 @@
                         } %>
           <% end %>
         </div>
-        <div class="col-md-1 pad-top-10 create-plan-or"><strong>- <%= _('or') %> -</strong></div>
-        <div class="form-group col-md-5 create-plan-checkbox">
-          <div class="checkbox">
+        <div class="col-md-3 text-center"><strong>- <%= _('or') %> -</strong></div>
+        <div class="form-control mb-3 col-md-3">
+          <div class="form-check">
             <% primary_research_org_message = _('No research organisation associated with this plan or my research organisation is not listed') %>
             <%= label_tag(:plan_no_org) do %>
               <%= check_box_tag(:plan_no_org, "0", false, class: "toggle-autocomplete") %>
@@ -76,7 +74,7 @@
       <!-- Funder selection -->
       <h2 id="funder-org"><span class="red" title="<%= required_primary_funding_tooltip %>">* <em class="sr-only"><%= required_primary_funding_tooltip %></em> </span><%= _('Select the primary funding organisation') %></h2>
       <div id="funder-org-controls" class="row">
-        <div class="form-group col-xs-6">
+        <div class="form-control mb-3 col-md-6">
           <em class="sr-only"><%= primary_funding_tooltip %></em>
           <%= f.fields_for :funder, @plan.funder = Org.new do |funder_fields| %>
             <%= render partial: "shared/org_selectors/local_only",
@@ -90,9 +88,9 @@
                         } %>
           <% end %>
         </div>
-        <div class="col-md-1 create-plan-or"><strong>- <%= _('or') %> -</strong></div>
-        <div class="form-group col-xs-5 create-plan-checkbox">
-          <div class="checkbox">
+        <div class="col-md-3 text-center"><strong>- <%= _('or') %> -</strong></div>
+        <div class="form-control mb-3 col-md-3">
+          <div class="form-check">
             <% primary_funding_message = _('No funder associated with this plan or my funder is not listed') %>
             <%= label_tag(:plan_no_funder) do %>
               <%= check_box_tag(:plan_no_funder, "0", false, class: "toggle-autocomplete") %>
@@ -106,12 +104,12 @@
       <div id="available-templates" style="visibility: none;">
         <%= hidden_field_tag 'template-option-target', template_options_path %>
         <h2 id="template-selection"><%= _('Which DMP template would you like to use?') %></h2>
-        <div class="form-group row">
-          <div class="col-xs-6">
+        <div class="form-control mb-3 row">
+          <div class="col-md-6">
             <%= select_tag(:plan_template_id, "<option value=\"\">#{_('Please select a template')}</option>", name: 'plan[template_id]',
                            class: 'form-control', 'aria-labelledby': 'template-selection') %>
           </div>
-          <div class="col-xs-6">
+          <div class="col-md-6">
             <span id="multiple-templates">
               <%= _('We found multiple DMP templates corresponding to your funder.') %>
             </span>
@@ -121,7 +119,7 @@
 
       <%= f.hidden_field(:visibility, value: @is_test ? 'is_test' : Rails.configuration.x.plans.default_visibility) %>
       <%= f.button(_('Create plan'), class: "btn btn-primary", type: "submit") %>
-      <%= link_to _('Cancel'), plans_path, class: 'btn btn-default' %>
+      <%= link_to _('Cancel'), plans_path, class: 'btn btn-secondary' %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/public_pages/plan_index.html.erb b/app/views/public_pages/plan_index.html.erb
index 5d5af35f21..dcb3c9ea98 100644
--- a/app/views/public_pages/plan_index.html.erb
+++ b/app/views/public_pages/plan_index.html.erb
@@ -4,11 +4,11 @@
     <h1><%= _('Public DMPs') %></h1>
     <!-- if the user has projects -->
     <% if @plans.count > 0 %>
-      <p class="left-indent">
+      <p class="start-indent">
         <%= _('Public DMPs are plans created using the %{application_name} service and shared publicly by their owners. They are not vetted for quality, completeness, or adherence to funder guidelines.') % {application_name: ApplicationService.application_name} %>
       </p>
     <% else %>
-      <p class="left-indent">
+      <p class="start-indent">
         <%= _("There are currently no public DMPs.")%>
       </p>
     <% end %>
diff --git a/app/views/public_pages/template_index.html.erb b/app/views/public_pages/template_index.html.erb
index 014d5db364..ebdab1d3ce 100644
--- a/app/views/public_pages/template_index.html.erb
+++ b/app/views/public_pages/template_index.html.erb
@@ -3,9 +3,9 @@
   <div class="col-md-12">
     <h1><%= _('DMP Templates') %></h1>
     <% if @templates.count > 0 %>
-      <p class="left-indent"><%= _('Templates are provided by a funder, an organisation, or a trusted party.') %></p>
+      <p class="start-indent"><%= _('Templates are provided by a funder, an organisation, or a trusted party.') %></p>
     <% else %>
-      <p class="left-indent"><%= _('There are currently no public Templates.')%></p>
+      <p class="start-indent"><%= _('There are currently no public Templates.')%></p>
     <% end %>
   </div>
 </div>
diff --git a/app/views/questions/_new_edit_question_datefield.html.erb b/app/views/questions/_new_edit_question_datefield.html.erb
index 923784b714..f7baf5995e 100644
--- a/app/views/questions/_new_edit_question_datefield.html.erb
+++ b/app/views/questions/_new_edit_question_datefield.html.erb
@@ -1,5 +1,5 @@
 <%# locals: { f, question, answer } %>
-<div class="form-group">
-    <%= f.label(:text, sanitize(question.text), class: 'control-label') %>
+<div class="form-control mb-3">
+    <%= f.label(:text, sanitize(question.text), class: 'form-label') %>
     <%= date_field_tag('answer[text]', strip_tags(answer.text || question.default_value), class: 'form-control') %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/questions/_new_edit_question_option_based.html.erb b/app/views/questions/_new_edit_question_option_based.html.erb
index b2aa141797..b399720b85 100644
--- a/app/views/questions/_new_edit_question_option_based.html.erb
+++ b/app/views/questions/_new_edit_question_option_based.html.erb
@@ -1,9 +1,9 @@
 <%# locals: { f, question, answer } %>
 <% options = question.question_options.by_number %>
 <% if question.question_format.checkbox? || question.question_format.multiselectbox? %>
-    <%= f.label(:question_option_ids, sanitize(question.text), class: 'control-label') %>
+    <%= f.label(:question_option_ids, sanitize(question.text), class: 'form-label') %>
     <% options.each do |op| %>
-        <div class="checkbox">
+        <div class="form-check">
             <label>
                 <%= f.check_box(:question_option_ids, { multiple: true, checked: answer.options_selected?(op.id) || (answer.question_options.empty? && op.is_default?) }, op.id, nil) %>
                 <%= sanitize op.text %>
@@ -11,9 +11,9 @@
         </div>
     <% end %>
 <% elsif question.question_format.radiobuttons? %>
-    <%= f.label(:question_option_ids, sanitize(question.text), class: 'control-label') %>
+    <%= f.label(:question_option_ids, sanitize(question.text), class: 'form-label') %>
     <% options.each do |op| %>
-        <div class="radio">
+        <div class="form-check">
             <label>
                 <%= f.radio_button :question_option_ids, op.id, { checked: answer.options_selected?(op.id) || (answer.question_options.empty? && op.is_default?), id: "answer_option_ids_#{op.id}" } %>
                 <%= sanitize op.text %>
@@ -29,17 +29,17 @@
                 "<option value=#{op.id}>#{op.text}</option>"
         end
     %>
-    <%= f.label(:question_option_ids, sanitize(question.text), class: 'control-label') %>
+    <%= f.label(:question_option_ids, sanitize(question.text), class: 'form-label') %>
     <%= select_tag('answer[question_option_ids]',
         options_html.html_safe,
         { multiple: question.question_format.multiselectbox?,
           include_blank: question.question_format.dropdown?,
           class: 'form-control' }) %>
 <% end %>
-<div class="form-group">
+<div class="form-control mb-3">
 <% if question.option_comment_display %><!-- Comment text area for option_based questions -->
     <% text = question.question_format.rda_metadata? ? answer.answer_hash['text'] : answer.text %>
-    <%= label_tag('answer[text]', _('Additional Information'), class: 'control-label') %>
+    <%= label_tag('answer[text]', _('Additional Information'), class: 'form-label') %>
     <% if readonly %>
       <div class="display-readonly-textarea-content">
         <%= sanitize("<p>#{text}</p>") %>
diff --git a/app/views/questions/_new_edit_question_textarea.html.erb b/app/views/questions/_new_edit_question_textarea.html.erb
index e8691555d4..f01f36a7e4 100644
--- a/app/views/questions/_new_edit_question_textarea.html.erb
+++ b/app/views/questions/_new_edit_question_textarea.html.erb
@@ -7,7 +7,7 @@
   rather cumbersome. As such, this workaround, simplifies the logic when a stale answer is found by rendering the html of the answer directly
   within a paragraph.
 %>
-<div class="form-group allow-break-words">
+<div class="form-control mb-3 allow-break-words">
     <div class="display-readonly-textarea-content" id="question-text-<%= question.id %>">
       <label for="answer-text-<%= question.id %>"><%= sanitize(question.text) %></label>
     </div>
@@ -18,4 +18,4 @@
     <% else %>
       <%= text_area_tag('answer[text]', answer.text || question.default_value, id: "answer-text-#{question.id}", class: "form-control tinymce_answer", aria: { labelledby: "question-text-#{question.id}" }) %>
     <% end %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/questions/_new_edit_question_textfield.html.erb b/app/views/questions/_new_edit_question_textfield.html.erb
index 171432fa90..c16741addf 100644
--- a/app/views/questions/_new_edit_question_textfield.html.erb
+++ b/app/views/questions/_new_edit_question_textfield.html.erb
@@ -1,5 +1,5 @@
 <%# locals: { f, question, answer } %>
-<div class="form-group">
-    <%= f.label(:text, sanitize(question.text), class: 'control-label') %>
+<div class="form-control mb-3">
+    <%= f.label(:text, sanitize(question.text), class: 'form-label') %>
     <%= text_field_tag('answer[text]', strip_tags(answer.text || question.default_value), class: 'form-control', spellcheck: true) %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/questions/_preview_question.html.erb b/app/views/questions/_preview_question.html.erb
index 39209d4366..2cc39ac51e 100644
--- a/app/views/questions/_preview_question.html.erb
+++ b/app/views/questions/_preview_question.html.erb
@@ -110,7 +110,7 @@
       <!-- button without action-->
       <%= link_to _('Save'), "#", class: "btn btn-primary", onclick: "event.preventDefault();" %>
 
-      <span class="label label-warning answer-status"><%= _('Not answered yet') %></span>
+      <span class="badge bg-warning text-dark answer-status"><%= _('Not answered yet') %></span>
 
     </div>
   </form>
diff --git a/app/views/research_outputs/_form.html.erb b/app/views/research_outputs/_form.html.erb
index 4e6dcb6373..6a6c15f51f 100644
--- a/app/views/research_outputs/_form.html.erb
+++ b/app/views/research_outputs/_form.html.erb
@@ -9,14 +9,14 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
 %>
 
 <%= form_with model: @research_output, url: path, method: method, local: true do |f| %>
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
-      <span class="col-md-3"><%= label(:output_type, _("Type"), class: "control-label") %></span>
-      <span class="col-md-5 output-type-description <%= research_output.other? ? "" : "hidden" %>">
-        <%= f.label(:output_type_description, _("Please describe the output type"), class: "control-label") %>
+      <span class="col-md-3"><%= label(:output_type, _("Type"), class: "form-label") %></span>
+      <span class="col-md-5 output-type-description <%= research_output.other? ? "" : "visually-hidden-focusable" %>">
+        <%= f.label(:output_type_description, _("Please describe the output type"), class: "form-label") %>
       </span>
     </div>
-    <div class="col-md-12">
+    <div class="col-md-3">
       <span class="col-md-3">
         <%= f.select :output_type, options_for_select(presenter.selectable_output_types, f.object.output_type),
                      {
@@ -28,35 +28,35 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
                        data: { remote: true, url: plan_output_type_selection_path(plan), method: :get }
                      } %>
       </span>
-      <span class="col-md-5 output-type-description <%= research_output.other? ? "" : "hidden" %>">
+      <span class="col-md-3 output-type-description <%= research_output.other? ? "" : "visually-hidden-focusable" %>">
         <%= f.text_field :output_type_description, class: "form-control",
                                                    aria: { required: research_output.other? } %>
       </span>
     </div>
   </div>
 
-  <div class="form-group row">
-    <div class="col-md-12">
-      <span class="col-md-6">
-        <%= f.label(:title, _("Title"), class: "control-label") %>
+  <div class="form-control mb-3 row">
+    <div class="d-flex justify-content-start col-md-12">
+      <span class="col pe-md-6">
+        <%= f.label(:title, _("Title"), class: "form-label") %>
       </span>
-      <span class="col-md-6">
-        <%= f.label(:abbreviation, _("Abbreviation"), class: "control-label") %>
+      <span class="col px-md-3">
+        <%= f.label(:abbreviation, _("Abbreviation"), class: "form-label") %>
       </span>
     </div>
-    <div class="col-md-12">
-      <span class="col-md-6">
+    <div class="d-flex justify-content-start col-md-12">
+      <span class="col px-md-6">
         <%= f.text_field :title, class: "form-control", aria: { required: true } %>
       </span>
-      <span class="col-md-2">
+      <span class="col px-md-4">
         <%= f.text_field :abbreviation, class: "form-control", title: abbrev_tooltip,
                                         maxlength: 10, data: { toggle: "tooltip" } %>
       </span>
     </div>
   </div>
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
-      <span class="col-md-12"><%= f.label(:description, _("Description"), class: "control-label", id: 'research-output-description') %></span>
+      <span class="col-md-12"><%= f.label(:description, _("Description"), class: "form-label", id: 'research-output-description') %></span>
     </div>
     <div class="col-md-12">
       <span class="col-md-8">
@@ -65,15 +65,15 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     </div>
   </div>
 
-  <div class="form-group row">
-    <div class="col-md-12">
+  <div class="form-control mb-3 row">
+    <div class="d-flex col-md-12">
       <span class="col-md-4">
         <%= f.label :sensitive_data do %>
           <%= f.check_box :sensitive_data, data: { toggle: "tooltip" } %>
           <%= _('May contain sensitive data?') %>
         <% end %>
       </span>
-      <span class="col-md-4">
+      <span class="col-md-8">
         <%= f.label :personal_data do %>
           <%= f.check_box :personal_data, data: { toggle: "tooltip" },
                           title: personal_data_tooltip %>
@@ -84,7 +84,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   </div>
 
   <% if Rails.configuration.x.madmp.enable_repository_selection && Repository.all.any? %>
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <div class="col-md-12">
         <span class="col-md-12">
           <h3><%= label_tag _("Intended repositories") %></h3>
@@ -92,7 +92,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
       </div>
     </div>
 
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <%= render partial: "layouts/modal_search/selections",
                 locals: {
                   namespace: "repositories",
@@ -108,14 +108,14 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   <% end %>
 
   <% if Rails.configuration.x.madmp.enable_metadata_standard_selection && MetadataStandard.all.any? %>
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <div class="col-md-12">
         <span class="col-md-12">
-          <h3><%= f.label(:metadata_standard, _("Metadata standards"), class: "control-label") %></h3>
+          <h3><%= f.label(:metadata_standard, _("Metadata standards"), class: "form-label") %></h3>
         </span>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <%= render partial: "layouts/modal_search/selections",
                 locals: {
                   namespace: "metadata_standards",
@@ -130,14 +130,14 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     </div>
   <% end %>
 
-  <div class="form-group row">
-    <div class="col-md-12">
-      <span class="col-md-4">
-        <%= f.label(:release_date, _("Anticipated release date"), class: "control-label") %>
+  <div class="form-control mb-3 row">
+    <div class="d-flex col-md-12">
+      <span class="col pe-md-4">
+        <%= f.label(:release_date, _("Anticipated release date"), class: "form-label") %>
         <%= f.date_field :release_date, class: "form-control" %>
       </span>
-      <span class="col-md-4">
-        <%= f.label(:access, _("Initial access level"), class: "control-label") %>
+      <span class="col px-md-4">
+        <%= f.label(:access, _("Initial access level"), class: "form-label") %>
         <%= f.select :access, options_for_select(presenter.selectable_access_types, f.object.access),
                               { selected: f.object.access },
                               { class: "form-control" } %>
@@ -146,19 +146,19 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   </div>
 
   <% if Rails.configuration.x.madmp.enable_license_selection && License.all.any? %>
-    <div class="form-group row license-selection">
+    <div class="form-control mb-3 row license-selection">
       <%= render partial: "research_outputs/licenses/form",
                 locals: { research_output: research_output, presenter: presenter } %>
     </div>
   <% end %>
 
-  <div class="form-group row file-details-section <%= presenter.byte_sizable? ? "" : "hidden" %>">
-    <div class="col-md-12">
+  <div class="form-control mb-3 row file-details-section <%= presenter.byte_sizable? ? "" : "d-none" %>">
+    <div class="d-flex col-md-12">
       <span class="col-md-3">
-        <%= f.label(:byte_size, _("Anticipated file size"), class: "control-label") %>
+        <%= f.label(:byte_size, _("Anticipated file size"), class: "form-label") %>
       </span>
     </div>
-    <div class="col-md-12">
+    <div class="d-flex justify-content-start col-md-12">
       <span class="col-md-2">
         <% file_size = presenter.converted_file_size(size: f.object.byte_size) %>
         <%= f.number_field "file_size", min: 1, step: 0.1, value: file_size[:size], class: "form-control", aria: { label: _("Anticipated file size") } %>
@@ -172,16 +172,16 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
       <div class="col-md-6">
-        <%= f.button(_("Save"), class: "btn btn-default", type: "submit") %>
+        <%= f.button(_("Save"), class: "btn btn-secondary", type: "submit") %>
         <% unless research_output.new_record? %>
           <%= link_to _("Remove"), plan_research_output_path(plan, research_output),
-                                   method: :delete, class: "btn btn-default" %>
+                                   method: :delete, class: "btn btn-secondary" %>
           <% end %>
           <%= link_to _("Cancel"), plan_research_outputs_path(plan),
-                                   class: "btn btn-default" %>
+                                   class: "btn btn-secondary" %>
       </div>
     </div>
   </div>
diff --git a/app/views/research_outputs/edit.html.erb b/app/views/research_outputs/edit.html.erb
index a85d3003cf..78002b889e 100644
--- a/app/views/research_outputs/edit.html.erb
+++ b/app/views/research_outputs/edit.html.erb
@@ -11,7 +11,7 @@
   <h2>
     <%= _("Editing %{research_output_title}") % { research_output_title: @research_output.title } %>
     <%= link_to _('View all research outputs'), plan_research_outputs_path(@plan),
-                                            class: "btn btn-default pull-right" %>
+                                            class: "btn btn-secondary float-end" %>
   </h2>
   <div class="row">
     <div class="col-md-12 research-output-form">
diff --git a/app/views/research_outputs/licenses/_form.html.erb b/app/views/research_outputs/licenses/_form.html.erb
index 6d4db22bd4..5fa570d01c 100644
--- a/app/views/research_outputs/licenses/_form.html.erb
+++ b/app/views/research_outputs/licenses/_form.html.erb
@@ -22,7 +22,7 @@ args[:data] = { remote: true, url: plan_license_selection_path(research_output.p
 %>
 <div class="col-md-12">
   <span class="col-md-4">
-    <%= label_tag _("Initial license"), _("Initial license"), class: "control-label" %>
+    <%= label_tag _("Initial license"), _("Initial license"), class: "form-label" %>
     <%= select_tag "research_output[license_id]", options_for_select(options, selected), args %>
   </span>
   <span class="col-md-4">
diff --git a/app/views/research_outputs/new.html.erb b/app/views/research_outputs/new.html.erb
index 4f461f01f4..e736ca010d 100644
--- a/app/views/research_outputs/new.html.erb
+++ b/app/views/research_outputs/new.html.erb
@@ -11,7 +11,7 @@
   <h2>
     <%= _("New research output") %>
     <%= link_to _('View all research outputs'), plan_research_outputs_path(@plan),
-                                            class: "btn btn-default pull-right" %>
+                                            class: "btn btn-secondary float-end" %>
   </h2>
   <div class="row">
     <div class="col-md-12 research-output-form">
diff --git a/app/views/research_outputs/repositories/_search_result.html.erb b/app/views/research_outputs/repositories/_search_result.html.erb
index 62490a8596..f15efab19e 100644
--- a/app/views/research_outputs/repositories/_search_result.html.erb
+++ b/app/views/research_outputs/repositories/_search_result.html.erb
@@ -31,7 +31,7 @@
   <div class="more-info more-info-<%= result.id %>">
     <%= link_to _("More info"), "#", class: "more-info-link" %>
 
-    <div class="info hidden">
+    <div class="info d-none">
       <% info = result.info.with_indifferent_access %>
       <dl>
         <dt><%= _("Repository URL") %></dt>
diff --git a/app/views/research_outputs/select_output_type.js.erb b/app/views/research_outputs/select_output_type.js.erb
index 65b501a38f..9588b0aebb 100644
--- a/app/views/research_outputs/select_output_type.js.erb
+++ b/app/views/research_outputs/select_output_type.js.erb
@@ -8,11 +8,11 @@ if (outputTypeForm.length > 0) {
   var outputTypeDescription = outputTypeForm.find('#research_output_output_type_description');
 
   <% if @research_output.other? %>
-    outputTypeSpans.removeClass('hidden');
+    outputTypeSpans.removeClass('d-none');
     outputTypeDescription.attr('aria-required', 'true');
   <% else %>
     outputTypeDescription.attr('aria-required', 'false');
-    outputTypeSpans.addClass('hidden');
+    outputTypeSpans.addClass('d-none');
     var selected = outputTypeSpans.parent().find('option:selected');
     selected.removeAttr("selected");
   <% end %>
@@ -21,9 +21,9 @@ if (outputTypeForm.length > 0) {
   var fileDetailsSection = outputTypeForm.find('.file-details-section');
 
   <% if presenter.byte_sizable? %>
-    fileDetailsSection.removeClass('hidden');
+    fileDetailsSection.removeClass('d-none');
   <% else %>
-    fileDetailsSection.addClass('hidden');
+    fileDetailsSection.addClass('d-none');
     var selected = fileDetailsSection.find('option:selected');
     selected.removeAttr("selected");
     var sizeField = fileDetailsSection.find('#research_output_file_size');
diff --git a/app/views/shared/_access_controls.html.erb b/app/views/shared/_access_controls.html.erb
index 603bce25b5..a4338486b2 100644
--- a/app/views/shared/_access_controls.html.erb
+++ b/app/views/shared/_access_controls.html.erb
@@ -1,31 +1,30 @@
-<div class="sign-in">
+<div class="sign-in border border-1">
   <ul class="nav nav-tabs" role="tablist">
-    <li role="presentation" class="active">
-      <a href="#sign-in-form" role="tab" aria-controls="sign-in-form" data-toggle="tab">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" href="#sign-in-form" role="tab" aria-controls="sign-in-form" data-bs-toggle="tab">
         <%= _('Sign in') %>
       </a>
     </li>
     <% unless active_page?(new_user_registration_path, true) %>
-      <li role="presentation">
-        <a href="#create-account-form" role="tab" aria-controls="create-account-form" data-toggle="tab">
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" href="#create-account-form" role="tab" aria-controls="create-account-form" data-bs-toggle="tab">
           <%= _('Create account') %>
         </a>
       </li>
     <% end %>
   </ul>
-
   <div class="tab-content">
-    <div id="sign-in-form" role="tabpanel" class="tab-pane active">
-      <div class="panel panel-default">
-        <div class="panel-body">
+    <div id="sign-in-form" role="tabpanel" class="tab-pane show active">
+      <div class="card">
+        <div class="card-body">
           <%= render :partial => 'shared/sign_in_form' %>
         </div>
       </div>
     </div>
     <% unless active_page?(new_user_registration_path, true) %>
       <div id="create-account-form" role="tabpanel" class="tab-pane">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card">
+          <div class="card-body">
             <%= render :partial => 'shared/create_account_form', locals: {orgs: orgs, org_partial: org_partial} %>
           </div>
         </div>
diff --git a/app/views/shared/_copy_link_modal.html.erb b/app/views/shared/_copy_link_modal.html.erb
index 7c454c70e7..4dbb73a5d4 100644
--- a/app/views/shared/_copy_link_modal.html.erb
+++ b/app/views/shared/_copy_link_modal.html.erb
@@ -1,16 +1,20 @@
 <div id="link-modal" class="modal fade" role="dialog">
   <div class="modal-dialog">
-    <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal">&times;</button>
-      <p class="modal-title fontsize-h4">
-        <%= _('Copy link') %>
-      </p>
-    </div>
-    <div class="modal-body">
-      <input type="text" id="link" readonly="readonly" style="width: 100%">
-    </div>
-    <div class="modal-footer">
-      <button id="copy-link-btn" class="btn btn-default"><%= _('Copy link') %></button>
+    <div class="modal-content">
+      <div class="modal-header">
+        <p class="modal-title fontsize-h4">
+          <%= _('Copy link') %>
+        </p>
+        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
+      </div>
+      <div class="modal-body">
+        <form>
+          <input type="text" id="link" readonly="readonly" style="width: 100%">
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button id="copy-link-btn" class="btn btn-secondary"><%= _('Copy link') %></button>
+      </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/shared/_create_account_form.html.erb b/app/views/shared/_create_account_form.html.erb
index 531d458251..9fd4afd56d 100644
--- a/app/views/shared/_create_account_form.html.erb
+++ b/app/views/shared/_create_account_form.html.erb
@@ -1,18 +1,18 @@
 <%= form_for resource, namespace: 'new', url: registration_path("user"), html: {autocomplete: "off", id: "create_account_form"} do |f| %>
 
-  <div class="form-group">
-    <%= f.label(:firstname, _('First Name'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:firstname, _('First Name'), class: "form-label") %>
     <%= f.text_field(:firstname, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group">
-    <%= f.label(:surname, _('Last Name'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:surname, _('Last Name'), class: "form-label") %>
     <%= f.text_field(:surname, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group">
-    <%= f.label(:email, _('Email'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:email, _('Email'), class: "form-label") %>
     <%= f.email_field(:email, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group" id="create-account-org-controls">
+  <div class="form-control mb-3" id="create-account-org-controls">
     <%= render partial: org_partial,
                locals: {
                  form: f,
@@ -21,19 +21,18 @@
                  required: true
                } %>
   </div>
-  <div class="form-group">
-    <%= f.label(:password, _('Password'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:password, _('Password'), class: "form-label") %>
     <%= f.password_field(:password, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group">
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" id="passwords_toggle_sign_up" class="passwords_toggle" /><%= _('Show password') %>
-      </label>
+  <div class="form-control mb-3">
+    <div class="form-check">
+        <input type="checkbox" id="passwords_toggle_sign_up" class="passwords_toggle" />
+        <%= label_tag('passwords_toggle_sign_up', _('Show password'), class: 'form-check-label') %>
     </div>
   </div>
-  <div class="form-group">
-    <div class="checkbox">
+  <div class="form-control mb-3">
+    <div class="form-check">
       <%= f.label(:accept_terms) do %>
         <%= f.check_box(:accept_terms, "aria-required": true) %>
         <%= _('I accept the') %>
@@ -42,10 +41,10 @@
     </div>
   </div>
   <% if Rails.configuration.x.recaptcha.enabled %>
-    <div class="form-group">
-      <%= label_tag(nil, _('Security check')) %>
+    <div class="form-control mb-3">
+      <%= label_tag(nil, _('Security check'), class: "form-label") %>
       <%= recaptcha_tags %>
     </div>
   <% end %>
-  <%= f.button(_('Create account'), class: "btn btn-default", type: "submit") %>
+  <%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
 <% end %>
diff --git a/app/views/shared/_create_plan_modal.html.erb b/app/views/shared/_create_plan_modal.html.erb
index a8b4b815bb..c3c27ae8b7 100644
--- a/app/views/shared/_create_plan_modal.html.erb
+++ b/app/views/shared/_create_plan_modal.html.erb
@@ -1,15 +1,19 @@
 <div id="create-modal" class="modal in" role="dialog">
   <div class="modal-dialog">
+    <div class="modal-content">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal">&times;</button>
-      <p class="modal-title fontsize-h4"><%= _('Create plan') %></p>
+      <p class="modal-title fontsize-h4">
+      <%= _('Create plan') %>
+      </p>
+      <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
     </div>
     <div class="modal-body">
       <p><%= _('Would you like to create a plan based on the "%{name}" template?') % { name: @template.title }%></p>
     </div>
     <div class="modal-footer">
       <%= direct_link(@template, false, _('Yes')) %>
-      <button class="btn btn-default" data-dismiss="modal"><%= _('No') %></button>
+      <button class="btn btn-secondary" data-bs-dismiss="modal"><%= _('No') %></button>
+    </div>
     </div>
   </div>
 </div>
diff --git a/app/views/shared/_links.html.erb b/app/views/shared/_links.html.erb
index 681af0352a..c954ba1a9d 100644
--- a/app/views/shared/_links.html.erb
+++ b/app/views/shared/_links.html.erb
@@ -3,7 +3,7 @@
                    data-max-number-links="<%= max_number_links %>"
                    data-turbo="false">
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-sm-12">
       <h3><%= title.present? ? title : _('Links') %>&nbsp;
         <small>(<%= _('Up to ') %>
           <span class="max-number-links">
@@ -19,26 +19,26 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-sm-12">
       <% links = [{ "link" => "", "text" => "" }] if links.length == 0 %>
       <% links.each_with_index do |l, i| %>
         <div class="link row">
-          <div class="col-xs-5">
-            <div class="form-group link-input">
-              <%= label_tag "link_link#{i}", _('URL'), class: "control-label" %>
+          <div class="col-sm-5">
+            <div class="form-control mb-3 link-input">
+              <%= label_tag "link_link#{i}", _('URL'), class: "form-label" %>
               <%= text_field_tag 'link_link', l['link'], class: "form-control",
                                                          id: "#{context}_link_link#{i}" %>
             </div>
           </div>
-          <div class="col-xs-5">
-            <div class="form-group link-input">
-              <%= label_tag "link_text#{i}", _('Link text'), class: "control-label" %>
+          <div class="col-sm-5">
+            <div class="form-control mb-3 link-input">
+              <%= label_tag "link_text#{i}", _('Link text'), class: "form-label" %>
               <%= text_field_tag 'link_text', l['text'], class: "form-control",
                                                          id: "#{context}link_text#{i}" %>
             </div>
           </div>
-          <div class="col-xs-2">
-            <div class="form-group">
+          <div class="col-sm-2">
+            <div class="form-control mb-3">
               <a href="#" class="delete" aria-label="<%= _('Remove this link') %>">
                 <i class="fas fa-circle-xmark fa-reverse" aria-hidden="true"></i>
               </a>
@@ -49,7 +49,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-sm-12">
       <a href="#" class="new<%= links.length >= max_number_links ? ' hide' : '' %>"><%= _('+ Add an additional URL') %></a>
     </div>
   </div>
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
index 699d3782bb..020227d612 100644
--- a/app/views/shared/_modal.html.erb
+++ b/app/views/shared/_modal.html.erb
@@ -7,7 +7,7 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <p class="modal-title fontesize-h4" id="modal-title">
           <%= title %>
         </p>
@@ -16,7 +16,7 @@
         <%= yield %>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/app/views/shared/_popover.html.erb b/app/views/shared/_popover.html.erb
index 433b69935f..734705ee2c 100644
--- a/app/views/shared/_popover.html.erb
+++ b/app/views/shared/_popover.html.erb
@@ -1,6 +1,6 @@
 <%# available locals: message, placement %>
 <% if message.present? %>
-  <a href="#" class="btn btn-default" data-toggle="tooltip"
+  <a href="#" class="btn btn-secondary" data-toggle="tooltip"
      title="<%= message %>" placement="<%= placement %>">
     <i class="fas fa-circle-question"></i>
     <em class="sr-only"><%= message %>></em>
diff --git a/app/views/shared/_search.html.erb b/app/views/shared/_search.html.erb
index ea756ca074..f8e5c9f52e 100644
--- a/app/views/shared/_search.html.erb
+++ b/app/views/shared/_search.html.erb
@@ -1,21 +1,23 @@
 <%# locals: { search_term } %>
 
 <%= form_tag(paginable_base_url(1), method: :get, remote: remote, class: 'form-inline paginable-action') do %>
-  <div class="form-group">
-    <div class="input-group">
-      <span class="input-group-addon" id="search-addon">
+  <div class="d-inline-flex flex-row mb-2 col-6">
+    <div class="d-inline-flex input-group col-6">
+      <span class="input-group-text" id="search-addon">
         <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
       </span>
       <%= text_field_tag(:search, search_term, class: 'form-control', 'aria-labelledby': 'search',
                         spellcheck: true, 'aria-describedby': 'search-addon', 'aria-required': true) %>
-
     </div>
+    <div class="d-inline-flex input-group col-6">
     <%# @filter_admin is only defined on the users_index page %>
     <% unless @filter_admin.nil?  %>
-      <%= label_tag(:filter_admin, _('Only Show Admins'), class: 'form-check-inline') %>
-      <%= check_box_tag( :filter_admin , "1", @filter_admin)%>
-      &nbsp
+      <div class="d-inline-flex align-items-center form-check ms-2">
+        <%= check_box_tag( :filter_admin , "1", @filter_admin, class: 'checkbox')%>
+        <%= label_tag(:filter_admin, _('Only Show Admins'), class: 'form-check-label') %>
+      </div>
     <% end %>
+      <%= submit_tag(_('Search'), class: 'btn btn-secondary ms-2') %>
+    </div>
   </div>
-  <%= submit_tag(_('Search'), class: 'btn btn-default', style: 'margin-top: 8px;') %>
 <% end %>
diff --git a/app/views/shared/_sign_in_form.html.erb b/app/views/shared/_sign_in_form.html.erb
index c4a29ec5d2..274b932588 100644
--- a/app/views/shared/_sign_in_form.html.erb
+++ b/app/views/shared/_sign_in_form.html.erb
@@ -1,35 +1,35 @@
-<%= form_for resource, as: 'user', namespace: 'signin', url: user_session_path, html: {id: "sign_in_form"} do |f| %>
-  <div class="form-group">
-    <%= f.label(:email, _('Email'), class: 'control-label') %>
-    <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
-  </div>
-  <div class="form-group">
-    <%= f.label(:password, _('Password'), class: 'control-label') %>
-    <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
-  </div>
-  <div>
-    <%= link_to _('Forgot password?'), new_password_path('user') %>
-  </div>
-  <div class="checkbox">
-    <%= label_tag 'remember_email' do %>
-      <%= check_box_tag 'remember_email' %>
-      <%= _('Remember email') %>
-    <% end %>
-  </div>
-  <%= f.button(_('Sign in'), class: "btn btn-default", type: "submit") %>
-
-  <% if Rails.configuration.x.shibboleth.enabled %>
-    <% if session['devise.shibboleth_data'].nil? %>
-      <p class="text-center fontsize-h4">- <%= _('or') %> -</p>
-      <div class="form-group">
-        <span class="center-block btn-group-justified">
-          <% target = (Rails.configuration.x.shibboleth.use_filtered_discovery_service ? shibboleth_ds_path : user_shibboleth_omniauth_authorize_path) %>
-          <%= link_to _('Sign in with your institutional credentials'), target, method: :post, class: 'btn btn-default' %>
-        </span>
-      </div>
-    <% else %>
-      <%= f.hidden_field :shibboleth_id, :value => session['devise.shibboleth_data']['uid'] %>
-    <% end %>
-  <% end %>
-
-<% end %>
+<%= form_for resource, as: 'user', namespace: 'signin', url: user_session_path, html: {id: "sign_in_form"} do |f| %>
+  <div class="form-control mb-3">
+    <%= f.label(:email, _('Email'), class: 'form-label') %>
+    <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
+  </div>
+  <div class="form-control mb-3">
+    <%= f.label(:password, _('Password'), class: 'form-label') %>
+    <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
+  </div>
+  <div>
+    <%= link_to _('Forgot password?'), new_password_path('user') %>
+  </div>
+  <div class="form-check mb-3">
+    <%= label_tag 'remember_email', class: 'form-check-label' do %>
+      <%= check_box_tag 'remember_email' %>
+      <%= _('Remember email') %>
+    <% end %>
+  </div>
+  <%= f.button(_('Sign in'), class: "btn btn-secondary", type: "submit") %>
+
+  <% if Rails.configuration.x.shibboleth.enabled %>
+    <% if session['devise.shibboleth_data'].nil? %>
+      <p class="text-center fontsize-h4">- <%= _('or') %> -</p>
+      <div class="form-control mb-3">
+        <span class="d-grid">
+          <% target = (Rails.configuration.x.shibboleth.use_filtered_discovery_service ? shibboleth_ds_path : user_shibboleth_omniauth_authorize_path) %>
+          <%= link_to _('Sign in with your institutional credentials'), target, method: :post, class: 'btn btn-secondary' %>
+        </span>
+      </div>
+    <% else %>
+      <%= f.hidden_field :shibboleth_id, :value => session['devise.shibboleth_data']['uid'] %>
+    <% end %>
+  <% end %>
+
+<% end %>
diff --git a/app/views/shared/_table_filter.html.erb b/app/views/shared/_table_filter.html.erb
index daf236c0aa..0f8341e87d 100644
--- a/app/views/shared/_table_filter.html.erb
+++ b/app/views/shared/_table_filter.html.erb
@@ -1,21 +1,21 @@
-<% remove_filter_tooltip = _('Remove the filter') %>
-
-<div class="tablefilter form-group pull-right">
-  <form>
-    <ul class="list-inline">
-      <li><%= label_tag :filter, _('Filter plans'), class: "sr-only" %></li>
-      <li><%= search_field_tag(:filter, nil, placeholder: placeholder, class: "form-control filter") %></li>
-      <li>
-          <a
-            class="clear_filter"
-            href="#"
-            data-toggle="tooltip"
-            title="<%= remove_filter_tooltip %>"
-            aria-label="<%= remove_filter_tooltip %>">
-              <i class="fas fa-times" aria-hidden="true"></i>
-              <em class="sr-only"><%= remove_filter_tooltip %></em>
-          </a>
-      </li>
-    </ul>
-  </form>
-</div>
+<% remove_filter_tooltip = _('Remove the filter') %>
+
+<div class="tablefilter form-control mb-3 float-end">
+  <form>
+    <ul class="list-inline">
+      <li><%= label_tag :filter, _('Filter plans'), class: "sr-only form-label" %></li>
+      <li><%= search_field_tag(:filter, nil, placeholder: placeholder, class: "form-control filter") %></li>
+      <li>
+          <a
+            class="clear_filter"
+            href="#"
+            data-toggle="tooltip"
+            title="<%= remove_filter_tooltip %>"
+            aria-label="<%= remove_filter_tooltip %>">
+              <i class="fas fa-times" aria-hidden="true"></i>
+              <em class="sr-only"><%= remove_filter_tooltip %></em>
+          </a>
+      </li>
+    </ul>
+  </form>
+</div>
diff --git a/app/views/static_pages/about_us.html.erb b/app/views/static_pages/about_us.html.erb
index fbc2f7a034..b931fa0d22 100644
--- a/app/views/static_pages/about_us.html.erb
+++ b/app/views/static_pages/about_us.html.erb
@@ -1,5 +1,5 @@
 <% title _('About %{application_name}') % { application_name: ApplicationService.application_name } %>
-<div class="row">
+<div class="row mt-5">
   <div class="col-md-12">
     <h1><%= _('About %{application_name}') % { application_name: ApplicationService.application_name } %></h1>
   </div>
diff --git a/app/views/static_pages/privacy.html.erb b/app/views/static_pages/privacy.html.erb
index 3445bcfa29..c5f7a853cc 100644
--- a/app/views/static_pages/privacy.html.erb
+++ b/app/views/static_pages/privacy.html.erb
@@ -1,5 +1,5 @@
 <% title _('Privacy statement') %>
-<div class="row">
+<div class="row mt-5 mb-3">
   <div class="col-md-12">
     <h1><%= _('Privacy statement') %></h1>
   </div>
diff --git a/app/views/static_pages/termsuse.html.erb b/app/views/static_pages/termsuse.html.erb
index 1481ed39ee..5c68453f60 100644
--- a/app/views/static_pages/termsuse.html.erb
+++ b/app/views/static_pages/termsuse.html.erb
@@ -1,5 +1,5 @@
 <% title _('Terms of use') %>
-<div class="row">
+<div class="row mt-5">
   <div class="col-md-12">
     <h1><%= _('Terms of use')%></h1>
   </div>
diff --git a/app/views/super_admin/api_clients/_form.html.erb b/app/views/super_admin/api_clients/_form.html.erb
index 27dbbf348d..02d33f2116 100644
--- a/app/views/super_admin/api_clients/_form.html.erb
+++ b/app/views/super_admin/api_clients/_form.html.erb
@@ -7,35 +7,35 @@ orgs = Org.where(is_other: false)
 <%= form_for @api_client, url: url, method: method,
                           html: { class: 'api_client' } do |f| %>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :name, _('Name'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :name, _('Name'), class: 'form-label' %>
       <%= f.text_field :name, class: 'form-control', aria: { required: true } %>
     </div>
-    <div class="form-group col-xs-4">
-      <%= f.label :homepage, _('Homepage'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :homepage, _('Homepage'), class: 'form-label' %>
       <%= f.url_field :homepage, class: 'form-control' %>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-8">
-      <%= f.label :description, _('Description'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-8">
+      <%= f.label :description, _('Description'), class: 'form-label' %>
       <%= f.text_area :description,
                       class: 'form-control api-client-text',
                       spellcheck: true %>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_email, _('Contact Name'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :contact_email, _('Contact Name'), class: 'form-label' %>
       <%= f.text_field :contact_name, class: 'form-control' %>
     </div>
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_email, _('Contact Email'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :contact_email, _('Contact Email'), class: 'form-label' %>
       <%= f.email_field :contact_email, class: 'form-control', aria: { required: true } %>
     </div>
   </div>
   <div class="row">
-    <div id="api-client-org-controls" class="form-group col-xs-8">
+    <div id="api-client-org-controls" class="form-control mb-3 col-xs-8">
       <%= render partial: "shared/org_selectors/local_only",
                  locals: { form: f, default_org: @api_client.org, orgs: orgs, required: false } %>
     </div>
@@ -43,19 +43,19 @@ orgs = Org.where(is_other: false)
 
   <% unless @api_client.new_record? %>
     <div class="row" id="api-client-credentials">
-      <div class="form-group col-xs-4">
-        <%= f.label :client_id, _('Client ID'), class: 'control-label' %>
+      <div class="form-control mb-3 col-xs-4">
+        <%= f.label :client_id, _('Client ID'), class: 'form-label' %>
         <%= f.email_field :client_id, class: 'form-control', disabled: true %>
       </div>
-      <div class="form-group col-xs-4">
-        <%= f.label :client_secret, _('Client Secret'), class: 'control-label' %>
+      <div class="form-control mb-3 col-xs-4">
+        <%= f.label :client_secret, _('Client Secret'), class: 'form-label' %>
         <%= f.email_field :client_secret, class: 'form-control', disabled: true %>
       </div>
     </div>
 
     <div class="row">
-      <div class="form-group col-xs-3">
-        <%= f.label :client_id, _('Last accessed on'), class: 'control-label' %>
+      <div class="form-control mb-3 col-xs-3">
+        <%= f.label :client_id, _('Last accessed on'), class: 'form-label' %>
         <% date = @api_client.last_access.present? ? @api_client.last_access.utc.to_s  : _("Never") %>
         <%= f.text_field :last_access, class: 'form-control', disabled: true,
                                        value: date %>
@@ -63,26 +63,26 @@ orgs = Org.where(is_other: false)
     </div>
   <% end %>
 
-  <div class="pull-right">
-    <%= f.button _('Save'), class: 'btn btn-default', type: 'submit' %>
+  <div class="float-end">
+    <%= f.button _('Save'), class: 'btn btn-secondary', type: 'submit' %>
 
     <% unless @api_client.new_record? %>
       <%= link_to _("Refresh client ID and secret"),
                   refresh_credentials_super_admin_api_client_path(@api_client),
-                  class: "btn btn-default", remote: true %>
+                  class: "btn btn-secondary", remote: true %>
 
       <%= link_to _("Email credentials to contact"),
                   email_credentials_super_admin_api_client_path(@api_client),
-                  class: "btn btn-default", remote: true %>
+                  class: "btn btn-secondary", remote: true %>
 
       <%= link_to(
             _('Delete'),
             super_admin_api_client_path(@api_client),
-            class: 'btn btn-default',
+            class: 'btn btn-secondary',
             method: :delete,
             data: { confirm: _('Are you sure you want to delete the API client: "%{name}"') % { name: @api_client.name }}) %>
     <% end %>
 
-    <%= link_to _('Cancel'), super_admin_api_clients_path, class: 'btn btn-default', role: 'button' %>
+    <%= link_to _('Cancel'), super_admin_api_clients_path, class: 'btn btn-secondary', role: 'button' %>
   </div>
 <% end %>
diff --git a/app/views/super_admin/api_clients/edit.html.erb b/app/views/super_admin/api_clients/edit.html.erb
index 7a5a5262b6..c5a58fdf70 100644
--- a/app/views/super_admin/api_clients/edit.html.erb
+++ b/app/views/super_admin/api_clients/edit.html.erb
@@ -2,7 +2,7 @@
 <h2>
    <%= _('Editing API Client') %>
    <%= link_to(_('View all API clients'), super_admin_api_clients_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h2>
 
 <%= render 'form' %>
diff --git a/app/views/super_admin/api_clients/index.html.erb b/app/views/super_admin/api_clients/index.html.erb
index 01801c75d0..9450416983 100644
--- a/app/views/super_admin/api_clients/index.html.erb
+++ b/app/views/super_admin/api_clients/index.html.erb
@@ -5,7 +5,7 @@
     <h1>
       <%= _('API Clients') %>
       <a href="<%= new_super_admin_api_client_path %>"
-         class="btn btn-primary pull-right"><%= _('Create Api Client') %></a>
+         class="btn btn-primary float-end"><%= _('Create Api Client') %></a>
     </h1>
     <p>Manage API access for external applications</p>
   </div>
diff --git a/app/views/super_admin/api_clients/new.html.erb b/app/views/super_admin/api_clients/new.html.erb
index dbdeb61bca..7d4d6cc29c 100644
--- a/app/views/super_admin/api_clients/new.html.erb
+++ b/app/views/super_admin/api_clients/new.html.erb
@@ -2,7 +2,7 @@
 <h2>
    <%= _('New API Client') %>
    <%= link_to(_('View all API clients'), super_admin_api_clients_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h2>
 
 <%= render 'form' %>
diff --git a/app/views/super_admin/notifications/_form.html.erb b/app/views/super_admin/notifications/_form.html.erb
index 50bbe62280..d99b0f700e 100644
--- a/app/views/super_admin/notifications/_form.html.erb
+++ b/app/views/super_admin/notifications/_form.html.erb
@@ -2,8 +2,8 @@
 
 <%= form_for @notification, url: url, html: { class: 'notification' } do |f| %>
   <div class="row">
-    <div class="form-group col-xs-10">
-      <%= f.label :title, _('Title'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-10">
+      <%= f.label :title, _('Title'), class: 'form-label' %>
       <%= f.text_field :title,
           class: 'form-control',
           value: @notification.title,
@@ -11,8 +11,8 @@
           "aria-required": true %>
     </div>
 
-    <div class="form-group col-xs-2">
-      <%= f.label :level, _('Level'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-2">
+      <%= f.label :level, _('Level'), class: 'form-label' %>
       <%= f.select :level,
           Notification.levels.keys.map { |l| [l.humanize, l] },
           { value: @notification.level },
@@ -22,30 +22,30 @@
   </div>
 
   <div class="row">
-    <div class="form-group col-xs-12">
+    <div class="form-control mb-3 col-sm-12">
       <%= f.check_box :dismissable, style: 'width: auto' %>
-      <%= f.label :dismissable, _('Dismissable'), class: 'control-label' %>
+      <%= f.label :dismissable, _('Dismissable'), class: 'form-label' %>
     </div>
   </div>
 
   <div class="row">
-    <div class="form-group col-xs-12">
+    <div class="form-control mb-3 col-sm-12">
       <%= f.check_box :enabled, style: 'width: auto' %>
-      <%= f.label :enabled, _('Active'), class: 'control-label' %>
+      <%= f.label :enabled, _('Active'), class: 'form-label' %>
     </div>
   </div>
 
   <div class="row">
-    <div class="form-group col-xs-6">
-      <%= f.label :starts_at, _('Start'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-6">
+      <%= f.label :starts_at, _('Start'), class: 'form-label' %>
       <%= f.date_field :starts_at,
           class: 'form-control',
           value: (@notification.starts_at || Date.today),
           min: Date.today %>
     </div>
 
-    <div class="form-group col-xs-6">
-      <%= f.label :expires_at, _('Expiration'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-6">
+      <%= f.label :expires_at, _('Expiration'), class: 'form-label' %>
       <%= f.date_field :expires_at,
         class: 'form-control',
         value: (@notification.expires_at || Date.tomorrow),
@@ -53,8 +53,8 @@
     </div>
   </div>
 
-  <div class="form-group">
-    <%= f.label :body, _('Body'), class: 'control-label' %>
+  <div class="form-control mb-3">
+    <%= f.label :body, _('Body'), class: 'form-label' %>
     <%= f.text_area :body,
         class: 'form-control notification-text',
         value: @notification.body,
@@ -62,14 +62,14 @@
         "aria-required": true %>
   </div>
 
-  <div class="pull-right">
-    <%= f.button _('Save'), class: 'btn btn-default', type: 'submit' %>
+  <div class="float-end">
+    <%= f.button _('Save'), class: 'btn btn-secondary', type: 'submit' %>
     <%= link_to(
           _('Delete'),
           super_admin_notification_path(@notification),
-          class: 'btn btn-default',
+          class: 'btn btn-secondary',
           method: :delete,
           data: { confirm: _('Are you sure you want to delete the notification "%{title}"') % { title: @notification.title }}) unless @notification.new_record? %>
-    <%= link_to _('Cancel'), super_admin_notifications_path, class: 'btn btn-default', role: 'button' %>
+    <%= link_to _('Cancel'), super_admin_notifications_path, class: 'btn btn-secondary', role: 'button' %>
   </div>
 <% end %>
diff --git a/app/views/super_admin/notifications/edit.html.erb b/app/views/super_admin/notifications/edit.html.erb
index 5810fac90f..d28069fb6b 100644
--- a/app/views/super_admin/notifications/edit.html.erb
+++ b/app/views/super_admin/notifications/edit.html.erb
@@ -4,7 +4,7 @@
 
    <%= _('Editing Notification') %>
    <%= link_to(_('View all notifications'), super_admin_notifications_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h1>
 
 <%= render 'form' %>
diff --git a/app/views/super_admin/notifications/index.html.erb b/app/views/super_admin/notifications/index.html.erb
index f0b174a052..1b70fdca22 100644
--- a/app/views/super_admin/notifications/index.html.erb
+++ b/app/views/super_admin/notifications/index.html.erb
@@ -1,14 +1,15 @@
 <% title _('Notifications') %>
 <div class="row">
-  <div class="col-xs-12">
+  <div class="col-sm-9">
     <h1 class="fontsize-h2"><%= _('Notifications') %></h1>
   </div>
+      <div class="col-sm-3">
+      <%= link_to _('+ Add New Notification'), new_super_admin_notification_path, class: 'btn btn-secondary float-end', role: 'button' %>
+    </div>
 </div>
+
 <div class="row">
   <div class="col-xs-12">
-    <div class="pull-right">
-      <%= link_to _('+ Add New Notification'), new_super_admin_notification_path, class: 'btn btn-default', role: 'button' %>
-    </div>
     <div class="table-responsive">
       <%= paginable_renderise(
         partial: '/paginable/notifications/index',
diff --git a/app/views/super_admin/notifications/new.html.erb b/app/views/super_admin/notifications/new.html.erb
index 8f1de38a64..cc202a55bb 100644
--- a/app/views/super_admin/notifications/new.html.erb
+++ b/app/views/super_admin/notifications/new.html.erb
@@ -2,7 +2,7 @@
 <h1 class="fontsize-h2">
    <%= _('New Notification') %>
    <%= link_to(_('View all notifications'), super_admin_notifications_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h1>
 
   <%= render 'form' %>
diff --git a/app/views/super_admin/orgs/_analysis.html.erb b/app/views/super_admin/orgs/_analysis.html.erb
index 42bad41c4a..abc8c37d9e 100644
--- a/app/views/super_admin/orgs/_analysis.html.erb
+++ b/app/views/super_admin/orgs/_analysis.html.erb
@@ -27,8 +27,8 @@ orcid = IdentifierScheme.find_by(name: 'orcid')
           %>
           <tr>
             <td class="text-center"><%= category.capitalize %></td>
-            <td class="text-right"><%= to_entries.length %></td>
-            <td class="text-right"><%= to_entries.length + mergeable_entries.length %></td>
+            <td class="text-end"><%= to_entries.length %></td>
+            <td class="text-end"><%= to_entries.length + mergeable_entries.length %></td>
           </tr>
         <% end %>
       </<tbody>
diff --git a/app/views/super_admin/orgs/index.html.erb b/app/views/super_admin/orgs/index.html.erb
index dd6d521cbc..e1bcf91b0e 100644
--- a/app/views/super_admin/orgs/index.html.erb
+++ b/app/views/super_admin/orgs/index.html.erb
@@ -5,7 +5,7 @@
     <h1>
       <%= _('Organisations') %>
       <a href="<%= new_super_admin_org_path %>"
-         class="btn btn-primary pull-right"><%= _('Create Organisation') %></a>
+         class="btn btn-primary float-end"><%= _('Create Organisation') %></a>
     </h1>
   </div>
 </div>
diff --git a/app/views/super_admin/orgs/new.html.erb b/app/views/super_admin/orgs/new.html.erb
index 8def3306dd..8c75d4bde3 100644
--- a/app/views/super_admin/orgs/new.html.erb
+++ b/app/views/super_admin/orgs/new.html.erb
@@ -4,7 +4,7 @@
       <%= _('New organisation')  %>
     </h1>
     <% if current_user.can_super_admin? %>
-      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-default pull-right' %>
+      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-secondary float-end' %>
     <% end %>
   </div>
 </div>
@@ -20,8 +20,8 @@
     <!-- render navigation tabs for the template-->
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active" id="profile">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div class="px-2">
               <%= render partial: 'orgs/profile_form',
                          locals: {
diff --git a/app/views/super_admin/themes/_form.html.erb b/app/views/super_admin/themes/_form.html.erb
index cd46e069f9..d239405111 100644
--- a/app/views/super_admin/themes/_form.html.erb
+++ b/app/views/super_admin/themes/_form.html.erb
@@ -1,21 +1,21 @@
 <% url = @theme.new_record? ? super_admin_themes_path : super_admin_theme_path(@theme) %>
 
  <%= form_for @theme, url: url, html: { class: 'theme' } do |f| %>
-   <div class="form-group">
-     <%= f.label(:title, _('Title'), class: 'control-label') %>
+   <div class="form-control mb-3">
+     <%= f.label(:title, _('Title'), class: 'form-label') %>
      <%= f.text_field(:title, class: "form-control", spellcheck: true, "aria-required": true) %>
    </div>
-   <div class="form-group">
+   <div class="form-control mb-3">
      <%= f.label(:description, _('Guidance')) %>
      <%= f.text_area(:description, class: "form-control", rows: 10, spellcheck: true) %>
    </div>
-   <div class="pull-right">
-     <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+   <div class="float-end">
+     <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
      <% unless @theme.new_record? %>
-       <%= link_to(_('Delete'), super_admin_theme_path(@theme), class: 'btn btn-default',
+       <%= link_to(_('Delete'), super_admin_theme_path(@theme), class: 'btn btn-secondary',
          rel: 'nofollow', 'data-method': 'delete',
          'data-confirm': _("Are you sure you want to delete the theme \"%{title}\"?") % { title: @theme.title }) %>
      <% end %>
-     <%= link_to(_('Cancel'), super_admin_themes_path, class: 'btn btn-default', role: 'button') %>
+     <%= link_to(_('Cancel'), super_admin_themes_path, class: 'btn btn-secondary', role: 'button') %>
    </div>
  <% end %>
diff --git a/app/views/super_admin/themes/edit.html.erb b/app/views/super_admin/themes/edit.html.erb
index 29a9f38392..9d9e0e4ab6 100644
--- a/app/views/super_admin/themes/edit.html.erb
+++ b/app/views/super_admin/themes/edit.html.erb
@@ -1,6 +1,6 @@
 <h1 class="fontsize-h2">
   <%= @theme.title %>
   <%= link_to(_('View all themes'), super_admin_themes_path,
-      class: 'btn btn-default pull-right', role: 'button') %>
+      class: 'btn btn-secondary float-end', role: 'button') %>
 </h1>
 <%= render partial: 'form' %>
diff --git a/app/views/super_admin/themes/index.html.erb b/app/views/super_admin/themes/index.html.erb
index 77557e6013..374eb983ef 100644
--- a/app/views/super_admin/themes/index.html.erb
+++ b/app/views/super_admin/themes/index.html.erb
@@ -6,8 +6,8 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <div class="pull-right">
-      <%= link_to(_('+ Add New Theme'), new_super_admin_theme_path, class: 'btn btn-default', role: 'button') %>
+    <div class="float-end">
+      <%= link_to(_('+ Add New Theme'), new_super_admin_theme_path, class: 'btn btn-secondary', role: 'button') %>
     </div>
     <div class="table-responsive">
       <%= paginable_renderise(
diff --git a/app/views/super_admin/themes/new.html.erb b/app/views/super_admin/themes/new.html.erb
index 40682eefd4..d21a981502 100644
--- a/app/views/super_admin/themes/new.html.erb
+++ b/app/views/super_admin/themes/new.html.erb
@@ -1,6 +1,6 @@
 <h1 class="fontsize-h2">
   <%= _("New theme") %>
   <%= link_to(_('View all themes'), super_admin_themes_path,
-      class: 'btn btn-default pull-right', role: 'button') %>
+      class: 'btn btn-secondary float-end', role: 'button') %>
 </h1>
 <%= render partial: 'form' %>
diff --git a/app/views/super_admin/users/_confirm_merge.html.erb b/app/views/super_admin/users/_confirm_merge.html.erb
index 4c0c5d1fc0..fd10e63262 100644
--- a/app/views/super_admin/users/_confirm_merge.html.erb
+++ b/app/views/super_admin/users/_confirm_merge.html.erb
@@ -3,14 +3,14 @@
 </p>
 
 <%= form_tag(merge_super_admin_user_path(@user), method: 'put', class: 'form-inline merge_form') do %>
-  <div class="form-group">
+  <div class="form-control mb-3">
     <div class="input-group">
-      <span class="input-group-addon" id="search-addon">
+      <span class="input-group-text" id="search-addon">
         <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
       </span>
     <%= select_tag(:merge_id, options_from_collection_for_select(@users, "id", "email"), class: "form-control") %>
     </div>
   </div>
-  <%= submit_tag( _("Merge"), class: 'btn btn-default', style: 'margin-top: 8px;', data: { confirm: "placeholder" }) %>
-  <%= link_to(_("Cancel"), edit_super_admin_user_path(@user), class: 'btn btn-default') %>
+  <%= submit_tag( _("Merge"), class: 'btn btn-secondary', style: 'margin-top: 8px;', data: { confirm: "placeholder" }) %>
+  <%= link_to(_("Cancel"), edit_super_admin_user_path(@user), class: 'btn btn-secondary') %>
 <% end %>
diff --git a/app/views/super_admin/users/edit.html.erb b/app/views/super_admin/users/edit.html.erb
index e95e0c89c0..8d1a3ab7ee 100644
--- a/app/views/super_admin/users/edit.html.erb
+++ b/app/views/super_admin/users/edit.html.erb
@@ -3,7 +3,7 @@
   <div class="col-md-12">
     <h1>
       <%= _('Editing profile for %{username}') % { username: @user.name(false) } %>
-      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-default pull-right', role: 'button') %>
+      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-secondary float-end', role: 'button') %>
     </h1>
   </div>
 </div>
@@ -11,22 +11,22 @@
 <div class="row">
   <div class="col-md-7">
     <%= form_for(@user, namespace: :superadmin, as: :user, url: super_admin_user_path(@user), html: {method: :put, id: 'super_admin_user_edit' }) do |f| %>
-      <div class="form-group col-xs-12">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
         <%= f.email_field(:email, class: "form-control", "aria-required": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:firstname, _('First name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:firstname, _('First name'), class: 'form-label') %>
         <%= f.text_field(:firstname, class: "form-control", "aria-required": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:surname, _('Last name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:surname, _('Last name'), class: 'form-label') %>
         <%= f.text_field(:surname, class: "form-control", "aria-required": true) %>
       </div>
 
-      <div class="form-group col-xs-12" id="super-admin-user-org-controls">
+      <div class="form-control mb-3 col-xs-12" id="super-admin-user-org-controls">
         <%= render partial: "shared/org_selectors/combined",
                locals: {
                  form: f,
@@ -36,9 +36,9 @@
       </div>
 
       <% if @departments.any? %>
-      <div class="form-group col-xs-12">
+      <div class="form-control mb-3 col-xs-12">
         <% dept_id = @user.department.nil? ? -1 : @user.department.id  %>
-        <%= f.label(:department_id, _('Department or school'), class: 'control-label') %>
+        <%= f.label(:department_id, _('Department or school'), class: 'form-label') %>
         <%= select_tag(:department_id,
             options_from_collection_for_select(@departments, "id", "name", dept_id),
             include_blank: true,
@@ -48,21 +48,21 @@
       <% end %>
 
       <% if Language.many? %>
-        <div class="form-group col-xs-12">
+        <div class="form-control mb-3 col-xs-12">
           <% lang_id = @user.language.nil? ? Language.id_for(I18n.default_locale) : @user.language.id %>
-          <%= f.label(:language_id, _('Language'), class: 'control-label') %>
+          <%= f.label(:language_id, _('Language'), class: 'form-label') %>
           <%= select_tag(:super_admin_user_language_id,
               options_from_collection_for_select(Language.sorted_by_abbreviation, "id", "name", lang_id),
               class: "form-control", name: 'user[language_id]') %>
         </div>
       <% end %>
 
-      <div class="form-group col-xs-12">
-        <%= f.button(_('Save'), class: 'btn btn-default', type: "submit", id: "personal_details_registration_form_submit") %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit", id: "personal_details_registration_form_submit") %>
 
         <%= link_to _('Archive'), archive_super_admin_user_path(id: @user.id),
             data: { method: :put, confirm: _("You are about to archive %{user_name}.  This will remove their personal information, but retain their plans, answers, and comments.  They will be unable to sign-in. Are you sure?") % {user_name: @user.name } },
-            class: 'btn btn-default', role: 'button' %>
+            class: 'btn btn-secondary', role: 'button' %>
       </div>
     <% end %>
 
@@ -75,8 +75,8 @@
     <% end %>
 
   </div>
-  <div class="col-xs-5">
-    <div class="row">
+  <div class="col-md-5">
+    <div class="row mx-3">
       <h2>
         <%= _('Merge Accounts') %>
       </h2>
@@ -85,15 +85,15 @@
           <%= sanitize _("First, search for a user by email, then select them from the list.") %>
         </p>
         <%= form_tag(search_super_admin_user_path(@user), method: 'get', remote: true, class: 'form-inline', id: 'merge_form') do %>
-          <div class="form-group">
+          <div class="form-control mb-3">
             <div class="input-group">
-              <span class="input-group-addon" id="search-addon">
+              <span class="input-group-text" id="search-addon">
                 <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
               </span>
             <%= text_field_tag(:email, nil, class: "form-control", placeholder: _("Email")) %>
             </div>
           </div>
-          <%= submit_tag( _("Search"), class: 'btn btn-default', style: 'margin-top: 8px;') %>
+          <%= submit_tag( _("Search"), class: 'btn btn-secondary', style: 'margin-top: 8px;') %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/usage/_template_statistics_accordion.html.erb b/app/views/usage/_template_statistics_accordion.html.erb
index b027446344..22501b0f79 100644
--- a/app/views/usage/_template_statistics_accordion.html.erb
+++ b/app/views/usage/_template_statistics_accordion.html.erb
@@ -1,29 +1,21 @@
 <%# locals: expanded %>
 
-<div class="panel panel-default">
-  <a href="#template_statistics" class="heading-button"
-     data-toggle="collapse" data-parent="usage-accordion"
-     data-target="#collapseTemplateStatistics"
-     aria-expanded="true" aria-controls="#collapseTemplateStatistics">
+ <div class="accordion-item w-100">
+ <h2 class="accordion-header" id="headingTemplateStatistics">
+      <button href="#template_statistics" type="button"
+             class="accordion-button collapsed" data-bs-toggle="collapse" 
+             data-bs-target="#collapseTemplateStatistics" aria-expanded="false" aria-controls="collapseTemplateStatistics">
+         <%= _('Statistics on your Templates') %>
+      </button>
+  </h2>
 
-    <div class="panel-heading" role="tab" id="headingTemplateStatistics">
-      <div class="panel-title pull-left">
-        <%= _('Statistics on your Templates') %>
-      </div>
-      <div class="pull-right">
-        <i class="fas fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  </a>
   <div id="collapseTemplateStatistics"
-       class="panel-collapse collapse <%='in' if expanded %>"
-       role="tabpanel" aria-labled-by="headingTemplateStatistics">
-    <div class="panel-body">
-
+       class="card collapse"
+       role="tabpanel" 
+       aria-labelledby="headingTemplateStatistics"
+       data-bs-parent="#usage-accordion">
+    <div class="accordion-body card card-body">
       <%= render partial: 'usage/template_statistics' %>
-
     </div>
   </div>
-
 </div>
diff --git a/app/views/usage/_total_usage.html.erb b/app/views/usage/_total_usage.html.erb
index e1c0e67023..b1e230934b 100644
--- a/app/views/usage/_total_usage.html.erb
+++ b/app/views/usage/_total_usage.html.erb
@@ -1,31 +1,29 @@
 <%# locals: user_count, plan_count, separators %>
 
-<div class="row mt-15 mb-15">
-  <div class="col-md-3">
-    <div class="col-xs-6">
+<div class="row">
+    <div class="col-md-2">
       <i class="fas fa-users f-large"></i>
       <p class="fontsize-h4"><%= user_count.to_i %> <%= _('Total users') %></p>
     </div>
-    <div class="col-xs-6">
+    <div class="col-md-2 pe-1">
       <i class="fas fa-files f-large"></i>
       <p class="fontsize-h4"><%= plan_count.to_i %> <%= _( 'Total plans') %></p>
       <%= form_tag('/usage', method: :get, id: :filter_plans_form) do |f| %>
-        <%= label_tag :filtered do %>
+        <%= label_tag :filtered, class: 'form-label' do %>
           <%= check_box_tag(:filtered, "true", @filtered)  %>
           <%=  _("Excluding Test Plans") %>
         <% end %>
       <% end %>
     </div>
-  </div>
   <% if @funder.present? %>
     <div class="col-md-3"></div>
   <% end %>
   <% unless current_user.can_super_admin? %>
     <div class="col-md-3"></div>
   <% end %>
-  <div class="col-md-3">
-    <form class="form-inline mt-10 mb-10 pull-right">
-      <label for="csv-field-sep">
+  <div class="col-md-2">
+    <form class="form-inline float-end">
+      <label for="csv-field-sep form-label">
         <%= _('csv download field separator') %>:
       </label>
       <%= select_tag "csv-field-sep", options_for_select(separators, separators[0]), {class: "single-char-select"} %>
@@ -33,14 +31,14 @@
   </div>
   <% if current_user.can_super_admin? %>
     <div class="col-md-3">
-      <%= link_to usage_global_statistics_path(sep: ",", filtered: @filtered), class: "stat btn btn-default #{'pull-right' if @funder.present?}", role: 'button', target: '_blank' do %>
+      <%= link_to usage_global_statistics_path(sep: ",", filtered: @filtered), class: "stat btn btn-secondary #{'float-end' if @funder.present?}", role: 'button', target: '_blank' do %>
         <%= _('Download global usage') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
   <% end %>
   <% unless @funder.present? %>
     <div class="col-md-3">
-      <%= link_to usage_org_statistics_path(sep: ",", filtered: @filtered), class: 'stat btn btn-default pull-right', role: 'button', target: '_blank' do %>
+      <%= link_to usage_org_statistics_path(sep: ",", filtered: @filtered), class: 'stat btn btn-secondary float-end', role: 'button', target: '_blank' do %>
         <%= _('Download Monthly Usage') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
diff --git a/app/views/usage/_user_statistics.html.erb b/app/views/usage/_user_statistics.html.erb
index e1471d7f36..c22cd30e26 100644
--- a/app/views/usage/_user_statistics.html.erb
+++ b/app/views/usage/_user_statistics.html.erb
@@ -14,12 +14,12 @@
 </div>
 
 <div class="row">
-  <div class="col-md-6">
-    <div class="pull-left">
+  <div class="col-md-6 pe-2">
+    <div class="float-start">
       <p class="bold fontsize-h4"><%= _('No. users joined during last year') %></p>
     </div>
-    <div class="pull-right">
-      <%= link_to usage_yearly_users_path(sep: ","), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
+    <div class="float-end">
+      <%= link_to usage_yearly_users_path(sep: ","), class: 'stat btn btn-secondary', role: 'button', target: '_blank' do %>
         <%= _('Download') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
@@ -29,12 +29,12 @@
                  locals: { data: @users_per_month } %>
     </div>
   </div>
-  <div class="col-md-6">
-    <div class="pull-left">
+  <div class="col-md-6 ps-2">
+    <div class="float-start">
       <p class="bold fontsize-h4"><%= _('No. plans during last year') %></p>
     </div>
-    <div class="pull-right">
-      <%= link_to usage_yearly_plans_path(sep: ",", filtered: @filtered), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
+    <div class="float-end">
+      <%= link_to usage_yearly_plans_path(sep: ",", filtered: @filtered), class: 'stat btn btn-secondary', role: 'button', target: '_blank' do %>
         <%= _('Download') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
@@ -52,18 +52,15 @@
 </div>
 <div class="row">
   <div class="col-md-12">
-      <div class="col-md-6">
-        <div class="pull-left">
+      <div class="col-md-6 float-start">
           <p class="bold fontsize-h4"><%= _('No. plans by template') %></p>
-        </div>
       </div>
 
-      <div class="col-md-6">
-        <div class="pull-right"">
+      <div class="col-md-6 float-end">
           <ul class="list-inline">
             <li>
               <%= form_for :usage, url: usage_plans_by_template_path, remote: true do |f| %>
-                <div class="form-group">
+                <div class="form-control mb-3">
                   <%= f.label :template_plans_range, _('Time period') %>
                   <ul class="list-inline">
                     <li>
@@ -73,21 +70,20 @@
                       <%= hidden_field_tag :filtered, @filtered %>
                     </li>
                     <li>
-                      <%= f.submit _('Go'), class: 'btn btn-default mt-25' %>
+                      <%= f.submit _('Go'), class: 'btn btn-secondary mt-25' %>
                     </li>
                   </ul>
                 </div>
               <% end %>
             </li>
             <li>
-              <div class="form-group">
-                <%= link_to usage_all_plans_by_template_path(sep: ",", filtered: @filtered), class: 'btn btn-default stat', role: 'button', target: '_blank' do %>
+              <div class="form-control mb-3">
+                <%= link_to usage_all_plans_by_template_path(sep: ",", filtered: @filtered), class: 'btn btn-secondary stat', role: 'button', target: '_blank' do %>
                   <%= _('Download all') %> <i class="fas fa-download" aria-hidden="true"></i>
                 <% end %>
              </div>
             </li>
           </ul>
-        </div>
       </div>
     </div>
   </div>
diff --git a/app/views/usage/_user_statistics_accordion.html.erb b/app/views/usage/_user_statistics_accordion.html.erb
index 621a38fdd1..b49c15d106 100644
--- a/app/views/usage/_user_statistics_accordion.html.erb
+++ b/app/views/usage/_user_statistics_accordion.html.erb
@@ -1,29 +1,21 @@
 <%# locals: expanded %>
+ <div class="accordion-item w-100 my-3">
+ <h2 class="accordion-header" id="headingUserStatistics">
+      <button href="#user_statistics" type="button"
+             class="accordion-button collapsed" data-bs-toggle="collapse" 
+             data-bs-target="#collapseUserStatistics" aria-expanded="false" aria-controls="collapseUserStatistics">
+        <%= _('Statistics on your Users') %>
+      </button>
+    </h2>
 
-<div class="panel panel-default">
-  <a href="#user_statistics" class="heading-button"
-     data-toggle="collapse" data-parent="usage-accordion"
-     data-target="#collapseUserStatistics"
-     aria-expanded="true" aria-controls="#collapseUserStatistics">
 
-    <div class="panel-heading" role="tab" id="headingUserStatistics">
-      <div class="panel-title pull-left">
-        <%= _('Statistics on your Users') %>
-      </div>
-      <div class="pull-right">
-        <i class="fas fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  </a>
   <div id="collapseUserStatistics"
-       class="panel-collapse collapse <%='in' if expanded %>"
-       role="tabpanel" aria-labled-by="headingUserStatistics">
-    <div class="panel-body">
-
+       class="card collapse"
+       role="tabpanel" 
+       aria-labelledby="headingUserStatistics"
+       data-bs-parent="#usage-accordion">
+    <div class="accordion-body card card-body">
       <%= render partial: 'usage/user_statistics' %>
-
     </div>
   </div>
-
 </div>
diff --git a/app/views/usage/index.html.erb b/app/views/usage/index.html.erb
index b9f6ca2e72..e506fa2289 100644
--- a/app/views/usage/index.html.erb
+++ b/app/views/usage/index.html.erb
@@ -14,7 +14,7 @@
 <% if @funder.present? %>
   <%= render partial: 'usage/template_statistics' %>
 <% else %>
-  <div class="panel-group usage-accordion" role="tablist" aria-multiselectable="true">
+  <div  id="usage-accordion" class="accordion" role="tablist" aria-multiselectable="true">
     <%= render partial: 'usage/user_statistics_accordion', locals: {expanded: true} %>
     <%= render partial: 'usage/template_statistics_accordion', locals: {expanded: false} %>
   </div>
diff --git a/app/views/users/_admin_grant_permissions.html.erb b/app/views/users/_admin_grant_permissions.html.erb
index ca0d33655d..01321daf10 100644
--- a/app/views/users/_admin_grant_permissions.html.erb
+++ b/app/views/users/_admin_grant_permissions.html.erb
@@ -2,18 +2,20 @@
   <div class="modal-content">
 
     <div class="modal-header">
-      <button type="button" class="close"
-              data-dismiss="modal"
+    <h2 class="modal-title"><%= _('Editing privileges for %{username}') % { username: user.name(false) } %></h2>
+      <button type="button" class="btn-close float-end"
+              data-bs-dismiss="modal"
               aria-label="Close">
-              <span aria-hidden="true">&times;</span></button>
-      <h2 class="modal-title"><%= _('Editing privileges for %{username}') % { username: user.name(false) } %></h2>
+      </button>
     </div>
 
     <%= form_for user, url: admin_update_permissions_user_path(user), html: { method: :put, remote: true, class: 'admin_update_permissions' } do |f| %>
       <div class="modal-body" style="text-align: left">
         <ul class="list-group">
-         <input type="checkbox" name="org_admin_privileges" id="org_admin_privileges" />
-          <%= label_tag :organisational_admin_privileges %>
+          <div class="col-md-8">
+            <input type="checkbox" name="org_admin_privileges" id="org_admin_privileges" />
+              <%= label_tag :organisational_admin_privileges, _('Organisational Admin Privileges'), class: 'form-check-label' %>
+          </div>
           <% perms.each do |perm| %>
             <% case perm.name when 'grant_permissions' %>
               <li class="list-group-item" style="border: none" title="<%= _('Allows the user to assign permissions to other users within the same organisation. Users can only assign permissions they own themselves') %>">
@@ -44,8 +46,10 @@
 
 
           <% if current_user.can_super_admin? %>
+          <div class="col-md-8">
             <input type="checkbox" name="super_admin_privileges" id="super_admin_privileges" />
-            <%= label_tag :super_admin_privileges %>
+            <%= label_tag :super_admin_privileges, _('Super Admin Privileges'), class: 'form-check-label' %>
+            </div>
             <% perms.each do |perm| %>
               <% case perm.name when 'add_organisations' %>
                 <li class="list-group-item" style="border: none" title="<%= _('Allows the user to create new organisations') %>">
diff --git a/app/views/users/_notification_preferences.html.erb b/app/views/users/_notification_preferences.html.erb
index 0178b17365..780a777132 100644
--- a/app/views/users/_notification_preferences.html.erb
+++ b/app/views/users/_notification_preferences.html.erb
@@ -8,42 +8,36 @@
     </p>
 
     <p class="form-control-static"><strong>All Users</strong></p>
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][users][new_comment]', true, @prefs[:users][:new_comment] %><%= _('A new comment has been added to my DMP')  %>
-      </label>
+    <div class="form-check">
+      <%= check_box_tag 'user[prefs][users][new_comment]', true, @prefs[:users][:new_comment] %>
+      <%= label_tag('user[prefs][users][new_comment]', _('A new comment has been added to my DMP'), class: 'form-check-label') %>
     </div>
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %><%= _('A plan has been shared with me')  %>
-      </label>
+    <div class="form-check">
+      <%= check_box_tag 'user[prefs][users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %>
+      <%= label_tag('user[prefs][users][added_as_coowner]', _('A plan has been shared with me'), class: 'form-check-label') %>
     </div>
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][users][admin_privileges]', true, @prefs[:users][:admin_privileges] %><%= _('Admin privileges granted to me')  %>
-      </label>
+    <div class="form-check">
+        <%= check_box_tag 'user[prefs][users][admin_privileges]', true, @prefs[:users][:admin_privileges] %>
+        <%= label_tag('user[prefs][users][admin_privileges]', _('Admin privileges granted to me'), class: 'form-check-label') %>
     </div>
     <% if @user.org.present? && @user.org.feedback_enabled %>
-      <div class="checkbox">
-        <label>
-          <%= check_box_tag 'user[prefs][users][feedback_requested]', true, @prefs[:users][:feedback_requested] %><%= _('Feedback has been requested for my DMP') %>
-        </label>
+      <div class="form-check">
+          <%= check_box_tag 'user[prefs][users][feedback_requested]', true, @prefs[:users][:feedback_requested] %>
+          <%= label_tag('user[prefs][users][feedback_requested]',  _('Feedback has been requested for my DMP'), class: 'form-check-label') %>
       </div>
-      <div class="checkbox">
-        <label>
-          <%= check_box_tag 'user[prefs][users][feedback_provided]', true, @prefs[:users][:feedback_provided] %><%= _('Feedback has been provided for my DMP')  %>
-        </label>
+      <div class="form-check">
+          <%= check_box_tag 'user[prefs][users][feedback_provided]', true, @prefs[:users][:feedback_provided] %>
+          <%= label_tag('user[prefs][users][feedback_provided]',  _('Feedback has been provided for my DMP') , class: 'form-check-label') %>
       </div>
     <% end %>
 
     <p class="form-control-static"><strong>DMP owners and co-owners</strong></p>
 
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %><%= _("My DMP's visibility has changed")  %>
-      </label>
+    <div class="form-check">
+        <%= check_box_tag 'user[prefs][owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %>
+        <%= label_tag('user[prefs][owners_and_coowners][visibility_changed]',  _("My DMP's visibility has changed"), class: 'form-check-label') %>
     </div>
 
-    <%= submit_tag _('Save'), class: 'btn btn-default' %>
+    <%= submit_tag _('Save'), class: 'btn btn-secondary' %>
   <% end %>
 <% end %>
diff --git a/app/views/users/admin_index.html.erb b/app/views/users/admin_index.html.erb
index 698f261eb6..92c9751104 100644
--- a/app/views/users/admin_index.html.erb
+++ b/app/views/users/admin_index.html.erb
@@ -19,7 +19,7 @@
   <div class="col-md-12">
     <%- # Only display Download Csv button for non super-admin users -%>
     <% if !current_user.can_super_admin? %>
-      <%= button_to _('Download users'), admin_index_users_path(format: 'csv'), class: 'btn btn-default pull-right', method: 'get' %>
+      <%= button_to _('Download users'), admin_index_users_path(format: 'csv'), class: 'btn btn-secondary float-end', method: 'get' %>
     <% end %>
     <div class="table-responsive">
       <%= paginable_renderise(
diff --git a/package.json b/package.json
index 92908f075d..b21d1db7cf 100644
--- a/package.json
+++ b/package.json
@@ -40,9 +40,7 @@
     "@rails/ujs": "^6.0.3-1",
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
-    "bootstrap": "^3.4.1",
-    "bootstrap-3-typeahead": "^4.0.2",
-    "bootstrap-sass": "3.4.1",
+    "bootstrap": "5.2.3",
     "bootstrap-select": "^1.13.18",
     "chart.js": "^3.8.0",
     "core-js": "^3.6.5",
@@ -55,7 +53,7 @@
     "jquery-ui-sass": "^0.0.1",
     "js-cookie": "^3.0.1",
     "number-to-text": "^0.3.8",
-    "popper.js": "^1.16.1",
+    "@popperjs/core": "^2.11.6",
     "rails-erb-loader": "^5.5.2",
     "regenerator-runtime": "^0.13.5",
     "sass": "^1.57.1",
diff --git a/yarn.lock b/yarn.lock
index eec53e3a4e..83149ad778 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1067,6 +1067,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.6":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rails/actioncable@^6.0.3-1":
   version "6.1.7"
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.7.tgz#8b4506925d3f7146a70941e4db7ce9dda99f99ae"
@@ -1523,25 +1528,15 @@ body-parser@^1.19.0:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
-bootstrap-3-typeahead@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bootstrap-3-typeahead/-/bootstrap-3-typeahead-4.0.2.tgz#cb1c969044856862096fc8c71cc21b3acbb50412"
-  integrity sha512-cy1RiQ8wC1p8mM9D+hqlIZAc3llE8ddrF6lw6AhfhbF1YvqA0OrztZYMfPxPlZp1crEXE53IwyYNxehuAIWvew==
-
-bootstrap-sass@3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.4.1.tgz#6843c73b1c258a0ac5cb2cc6f6f5285b664a8e9a"
-  integrity sha512-p5rxsK/IyEDQm2CwiHxxUi0MZZtvVFbhWmyMOt4lLkA4bujDA1TGoKT0i1FKIWiugAdP+kK8T5KMDFIKQCLYIA==
-
 bootstrap-select@^1.13.18:
   version "1.13.18"
   resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.18.tgz#4557119d58dc1159189977161c803962220e4dda"
   integrity sha512-V1IzK4rxBq5FrJtkzSH6RmFLFBsjx50byFbfAf8jYyXROWs7ZpprGjdHeoyq2HSsHyjJhMMwjsQhRoYAfxCGow==
 
-bootstrap@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
-  integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
+bootstrap@5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
+  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -3280,11 +3275,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"

From df752266dc5dd578597a3efb56f83a6eb878d29f Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Tue, 30 Jan 2024 12:56:29 -0700
Subject: [PATCH 03/31] Use selenium-webdriver gem / Remove webdrivers

According to https://github.com/titusfortner/webdrivers:
"If you can update to the latest version of Selenium (4.11+), please do so and stop requiring this gem."
---
 Gemfile                  |  2 +-
 Gemfile.lock             |  9 +++------
 spec/rails_helper.rb     |  4 +---
 spec/spec_helper.rb      | 11 -----------
 spec/support/capybara.rb |  5 -----
 5 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/Gemfile b/Gemfile
index 76fa7e71f3..cc16bb67a7 100644
--- a/Gemfile
+++ b/Gemfile
@@ -248,7 +248,7 @@ group :test do
   gem 'capybara'
 
   # Easy installation and use of web drivers to run system tests with browsers
-  gem 'webdrivers'
+  gem 'selenium-webdriver'
 
   # RSpec::CollectionMatchers lets you express expected outcomes on
   # collections of an object in an example.
diff --git a/Gemfile.lock b/Gemfile.lock
index 6635d71006..68c97fce60 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -460,7 +460,7 @@ GEM
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
-    selenium-webdriver (4.10.0)
+    selenium-webdriver (4.16.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
@@ -517,10 +517,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webdrivers (5.3.1)
-      nokogiri (~> 1.6)
-      rubyzip (>= 1.3.0)
-      selenium-webdriver (~> 4.0, < 4.11)
     webmock (3.19.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -542,6 +538,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  arm64-darwin-22
   x86_64-linux
 
 DEPENDENCIES
@@ -605,6 +602,7 @@ DEPENDENCIES
   rubocop
   rubocop-i18n
   rubocop-performance
+  selenium-webdriver
   shoulda
   spring
   spring-commands-rspec
@@ -613,7 +611,6 @@ DEPENDENCIES
   translation
   turbo-rails
   web-console
-  webdrivers
   webmock
   wicked_pdf
   wkhtmltopdf-binary
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index 2872869549..c41e68fda4 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -39,11 +39,9 @@
 # No need to run this during CI because we build the DB from the schema
 # ActiveRecord::Migration.maintain_test_schema!
 
-# Block all external HTTP requests except to the Google APIs URL so that WebDrivers can fetch
-# the latest Chromedrivers.
+# Block all external HTTP requests
 WebMock.disable_net_connect!(
   allow_localhost: true,
-  allow: %w[chromedriver.storage.googleapis.com]
 )
 
 # Configure RSpec
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index ddd7429517..c53a7e10ce 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -111,17 +111,6 @@
 
   # Enable Capybara webmocks if we are testing a feature
   config.before(:each) do |example|
-    if example.metadata[:type] == :feature
-      # Capybara::Webmock.start
-
-      # Allow Capybara to make localhost requests and also contact the
-      # google api chromedriver store
-      # WebMock.disable_net_connect!(
-      #   allow_localhost: true,
-      #   allow: %w[chromedriver.storage.googleapis.com]
-      # )
-    end
-
     # Ensure that there is always a default Language
     create(:language, abbreviation: 'en', default_language: true) unless Language.default.present?
   end
diff --git a/spec/support/capybara.rb b/spec/support/capybara.rb
index e8ac5b282d..ededee71dd 100644
--- a/spec/support/capybara.rb
+++ b/spec/support/capybara.rb
@@ -1,10 +1,5 @@
 # frozen_string_literal: true
 
-require 'webdrivers/chromedriver'
-
-# Cache for one hour
-Webdrivers.cache_time = 3600
-
 # Use Puma as the webserver for feature tests
 Capybara.server = :puma, { Silent: true }
 

From e0c62dac913ffad90c5e5bb7824d805734b8f8e1 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:18:29 -0700
Subject: [PATCH 04/31] Don't limit sign-in attempts on test environment

Without this modification, the selenium tests often trigger a 429 / Too Many Requests error. (Perhaps this should be applied to "/users/password" as well?)
---
 config/initializers/rack_attack.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
index 6a26816d6f..a9acbe74e8 100644
--- a/config/initializers/rack_attack.rb
+++ b/config/initializers/rack_attack.rb
@@ -21,5 +21,6 @@
 
 # Throttle attempts to a particular path. 4 POSTs to /users/sign_in every 30 seconds
 Rack::Attack.throttle "logins/ip", limit: 4, period: 30.seconds do |req|
-  req.post? && req.path == "/users/sign_in" && req.ip
+  # Don't apply sign-in rate-limiting to test environment 
+  req.post? && req.path == "/users/sign_in" && req.ip unless Rails.env.test?
 end

From de5afd5ca4bcca6230e1a20998c161c0b2aad59a Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:25:51 -0700
Subject: [PATCH 05/31] replace 'safe_email' with 'email' for Faker

Prior to this commit, the following deprecation warning was appearing in the terminal:
NOTE: Faker::Internet.safe_email is deprecated; use email instead. It will be removed on or after 2023-10.

More here: https://github.com/faker-ruby/faker/pull/2733
---
 spec/factories/orgs.rb   | 2 +-
 spec/factories/users.rb  | 2 +-
 spec/models/plan_spec.rb | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/spec/factories/orgs.rb b/spec/factories/orgs.rb
index a9f15f74b5..88bc858b0b 100644
--- a/spec/factories/orgs.rb
+++ b/spec/factories/orgs.rb
@@ -40,7 +40,7 @@
     region { Region.first || create(:region) }
     language { Language.default }
     is_other { false }
-    contact_email { Faker::Internet.safe_email }
+    contact_email { Faker::Internet.email }
     contact_name { Faker::Name.name }
     managed { true }
     trait :institution do
diff --git a/spec/factories/users.rb b/spec/factories/users.rb
index 765898e944..c91c756604 100644
--- a/spec/factories/users.rb
+++ b/spec/factories/users.rb
@@ -57,7 +57,7 @@
     language     { Language.default }
     firstname    { Faker::Name.unique.first_name }
     surname      { Faker::Name.unique.last_name }
-    email        { Faker::Internet.unique.safe_email }
+    email        { Faker::Internet.unique.email }
     password     { 'password' }
     accept_terms { true }
 
diff --git a/spec/models/plan_spec.rb b/spec/models/plan_spec.rb
index 2d9ef05a8e..08bcca6f5b 100644
--- a/spec/models/plan_spec.rb
+++ b/spec/models/plan_spec.rb
@@ -592,7 +592,7 @@
 
     context 'when org contact_email present' do
       before do
-        org.update!(contact_email: Faker::Internet.safe_email)
+        org.update!(contact_email: Faker::Internet.email)
       end
 
       it 'emails the admins' do

From d89c897f0c727ea4ef4f7464541383b97b8dd637 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:26:34 -0700
Subject: [PATCH 06/31] Small tweaks to fix existing tests

---
 spec/features/annotations/annotations_editing_spec.rb          | 2 +-
 spec/features/templates/templates_editings_spec.rb             | 2 +-
 .../templates/templates_upgrade_customisations_spec.rb         | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/spec/features/annotations/annotations_editing_spec.rb b/spec/features/annotations/annotations_editing_spec.rb
index e3b5b8d68f..0edfc4a25e 100644
--- a/spec/features/annotations/annotations_editing_spec.rb
+++ b/spec/features/annotations/annotations_editing_spec.rb
@@ -56,7 +56,7 @@
       expect { click_button 'Save' }.not_to change { Annotation.count }
     end
     expect(annotation.text).to eql('Foo bar')
-    expect(Annotation.order('created_at').last.text).to eql('Noo bar')
+    expect(Annotation.order('created_at').last.text).to eql('<p>Noo bar</p>')
     expect(page).not_to have_errors
   end
 
diff --git a/spec/features/templates/templates_editings_spec.rb b/spec/features/templates/templates_editings_spec.rb
index bc84511cd7..a56237f880 100644
--- a/spec/features/templates/templates_editings_spec.rb
+++ b/spec/features/templates/templates_editings_spec.rb
@@ -44,7 +44,7 @@
       click_button 'Save'
     end
     # Make sure annotation has been updated
-    expect(Question.find(template.question_ids.first).annotations.first.text).to eql('Foo bar')
+    expect(Question.find(template.question_ids.first).annotations.first.text).to eql('<p>Foo bar</p>')
     # Make sure blank records are not created for empty annotation form
     expect(Question.find(template.question_ids.first).annotations.count).to eql(1)
     expect(page).not_to have_errors
diff --git a/spec/features/templates/templates_upgrade_customisations_spec.rb b/spec/features/templates/templates_upgrade_customisations_spec.rb
index 4aa8eb9abc..9a5da195b0 100644
--- a/spec/features/templates/templates_upgrade_customisations_spec.rb
+++ b/spec/features/templates/templates_upgrade_customisations_spec.rb
@@ -76,8 +76,7 @@
       end
       expect(page).to have_css('#new_question_new_question')
       within('#new_question_new_question') do
-        expect(find('#new_question_question_text')).to be_present
-        fill_in :new_question_question_text, with: 'Text for this specific question'
+        tinymce_fill_in :new_question_question_text, with: 'Text for this specific question'
         expect { click_button('Save') }.to change { Question.count }.by(1)
       end
     end

From b1b38ecd83b4362a2f34bed8aa54f190047f54e4 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Wed, 31 Jan 2024 10:31:23 -0700
Subject: [PATCH 07/31] Remove duplicate `node-version:` from workflows

Prior to this commit, the GitHub Actions associated with these files were failing with the message, "Invalid workflow file
The workflow is not valid. .github/workflows/mysql.yml (Line: X, Col: Y): 'node-version' is already defined"
---
 .github/workflows/mysql.yml    | 1 -
 .github/workflows/postgres.yml | 1 -
 2 files changed, 2 deletions(-)

diff --git a/.github/workflows/mysql.yml b/.github/workflows/mysql.yml
index e561c8e8f6..69905aff98 100644
--- a/.github/workflows/mysql.yml
+++ b/.github/workflows/mysql.yml
@@ -27,7 +27,6 @@ jobs:
       with:
         node-version: '16.6.0'
         cache: 'yarn'
-        node-version: 16
 
     # Copy all of the example configs over
     - name: 'Setup the application'
diff --git a/.github/workflows/postgres.yml b/.github/workflows/postgres.yml
index c9ce8115b2..12ba62b8e7 100644
--- a/.github/workflows/postgres.yml
+++ b/.github/workflows/postgres.yml
@@ -46,7 +46,6 @@ jobs:
       with:
         node-version: '16.6.0'
         cache: 'yarn'
-        node-version: 16
 
     # Install the Postgres developer packages
     - name: 'Install Postgresql Packages'

From 620674de5633db93119108d19e264220a21e612e Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Tue, 6 Feb 2024 16:16:26 +0000
Subject: [PATCH 08/31] Minor fix for Copy link modal

---
 app/javascript/src/publicTemplates/show.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/javascript/src/publicTemplates/show.js b/app/javascript/src/publicTemplates/show.js
index 75b59d4d66..ecf1a0ce29 100644
--- a/app/javascript/src/publicTemplates/show.js
+++ b/app/javascript/src/publicTemplates/show.js
@@ -1,10 +1,8 @@
 $(() => {
   $('body').on('click', '.copy-link', (e) => {
     const link = $(e.currentTarget).siblings('.direct-link');
-
-    $('#link-modal').on('show.bs.modal', () => {
-      $('#link').val(link.attr('href'));
-    });
+    $('#link').val(link.attr('href'));
+    $('#link-modal').show();
   });
 
   $('body').on('click', '#copy-link-btn', () => {

From 1d35aec7be275e3c7edddf1f20edb4c316b765ea Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:26:17 -0700
Subject: [PATCH 09/31] Make rubocop happy

NOTE: Additional Rubocop offences currently exist in the codebase. These fixes only address the PR changes that correspond with this commit.
---
 config/initializers/rack_attack.rb | 2 +-
 spec/rails_helper.rb               | 2 +-
 spec/spec_helper.rb                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
index a9acbe74e8..c8ca0f574c 100644
--- a/config/initializers/rack_attack.rb
+++ b/config/initializers/rack_attack.rb
@@ -21,6 +21,6 @@
 
 # Throttle attempts to a particular path. 4 POSTs to /users/sign_in every 30 seconds
 Rack::Attack.throttle "logins/ip", limit: 4, period: 30.seconds do |req|
-  # Don't apply sign-in rate-limiting to test environment 
+  # Don't apply sign-in rate-limiting to test environment
   req.post? && req.path == "/users/sign_in" && req.ip unless Rails.env.test?
 end
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index c41e68fda4..98c265b5cf 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -41,7 +41,7 @@
 
 # Block all external HTTP requests
 WebMock.disable_net_connect!(
-  allow_localhost: true,
+  allow_localhost: true
 )
 
 # Configure RSpec
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index c53a7e10ce..2904a6894d 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -110,7 +110,7 @@
   end
 
   # Enable Capybara webmocks if we are testing a feature
-  config.before(:each) do |example|
+  config.before(:each) do
     # Ensure that there is always a default Language
     create(:language, abbreviation: 'en', default_language: true) unless Language.default.present?
   end

From b7b09d202de0624dedfceaa05fada3c6487efa82 Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Wed, 13 Mar 2024 15:30:27 +0000
Subject: [PATCH 10/31] Fix for issue 2. raised by Aaron. Changes in this PR:
 1) modal-search-result-selector class changed from 'hidden' to 'd-none' 2)
 changes to the related rspec tests for the above

---
 app/javascript/src/utils/modalSearch.js              |  4 ++--
 .../layouts/modal_search/_result.html.erb_spec.rb    | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/javascript/src/utils/modalSearch.js b/app/javascript/src/utils/modalSearch.js
index 2bc8bf1888..eca1eca6fe 100644
--- a/app/javascript/src/utils/modalSearch.js
+++ b/app/javascript/src/utils/modalSearch.js
@@ -16,8 +16,8 @@ $(() => {
 
           if (selectionsBlock.length > 0) {
             const clone = selectedBlock.clone();
-            clone.find('.modal-search-result-selector').addClass('hidden');
-            clone.find('.modal-search-result-unselector').removeClass('hidden');
+            clone.find('.modal-search-result-selector').addClass('d-none');
+            clone.find('.modal-search-result-unselector').removeClass('d-none');
             clone.find('.tags').remove();
             selectionsBlock.append(clone);
             selectedBlock.remove();
diff --git a/spec/views/layouts/modal_search/_result.html.erb_spec.rb b/spec/views/layouts/modal_search/_result.html.erb_spec.rb
index 6266872334..406594d652 100644
--- a/spec/views/layouts/modal_search/_result.html.erb_spec.rb
+++ b/spec/views/layouts/modal_search/_result.html.erb_spec.rb
@@ -43,8 +43,8 @@
              search_path: nil,
              search_method: nil
            }
-    expect(rendered.include?('modal-search-result-selector hidden')).to eql(true)
-    expect(rendered.include?('modal-search-result-unselector hidden')).to eql(false)
+    expect(rendered.include?('modal-search-result-selector d-none')).to eql(true)
+    expect(rendered.include?('modal-search-result-unselector d-none')).to eql(false)
   end
 
   it "hides the 'Select' button and shows the 'Remove' button when :selected is true" do
@@ -57,8 +57,8 @@
              search_path: nil,
              search_method: nil
            }
-    expect(rendered.include?('modal-search-result-selector hidden')).to eql(true)
-    expect(rendered.include?('modal-search-result-unselector hidden')).to eql(false)
+    expect(rendered.include?('modal-search-result-selector d-none')).to eql(true)
+    expect(rendered.include?('modal-search-result-unselector d-none')).to eql(false)
   end
 
   it "shows the 'Select' button and hides the 'Remove' button when :selected is false" do
@@ -71,7 +71,7 @@
              search_path: nil,
              search_method: nil
            }
-    expect(rendered.include?('modal-search-result-selector hidden')).to eql(false)
-    expect(rendered.include?('modal-search-result-unselector hidden')).to eql(true)
+    expect(rendered.include?('modal-search-result-selector d-none')).to eql(false)
+    expect(rendered.include?('modal-search-result-unselector d-none')).to eql(true)
   end
 end

From bd7bfc5bd563d6fff440ab6bd0dd853ffc7ebece Mon Sep 17 00:00:00 2001
From: John Pinto <jpinto@newington.ed.ac.uk>
Date: Thu, 14 Mar 2024 16:04:39 +0000
Subject: [PATCH 11/31] IssueID #3144 - Rspec fixes for Bootstrap 5 upgrade: 1:
 Added to  spec/rails_helper.rb: Capybara.default_max_wait_time = 10 2: Fix
 for SuperAdmins Orgs Super admin removes links      Failure/Error: all('.link
 a > .fa-circle-xmark').last.click Changed selectors in
 spec/features/super_admins/orgs_spec.rb & updated
 spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to
 links that were not visible and click by using Javascripts scripts. 3: Fixed
 errors in ./spec/features/questions/textarea_questions_spec.rb. Changed
 "(0/1) answered" -> "( 0 / 1)",         "(1/1) answered" -> "( 1 / 1)" 4: Fix
 for error in ./spec/features/annotations/annotations_editing_spec.rb Changed
 "Noo bar" -> "<p>Noo bar</p>". 5: Fixed error in
 ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1)
 answered" -> "(0 / 1)". 6: Fixed error in
 ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1)
 answered" -> "( 0 / 1)". 7: Fixed error in
 spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" ->
 "within('.tab-pane.active')" 8: Fixed errors in
 ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1)
 answered" -> "( 0 / 1)",         "(1/1) answered" -> "( 1 / 1)" 9: Fixed
 error in ./spec/features/templates/templates_editings_spec.rb. Changed "Foo
 bar" -. "<p>Foo bar</p>". 10: Fix for
 ./spec/features/questions/textfield_questions_spec.rb. Changed "(0/1)
 answered" -> "( 0 / 1)",         "(1/1) answered" -> "( 1 / 1)"

---
 .../annotations/annotations_editing_spec.rb    |  2 +-
 spec/features/feedback_requests_spec.rb        |  2 +-
 spec/features/modal_search_spec.rb             |  6 ++++--
 .../questions/checkbox_questions_spec.rb       |  4 ++--
 .../questions/dropdown_questions_spec.rb       |  2 +-
 .../questions/radiobuttons_questions_spec.rb   |  4 ++--
 .../questions/textarea_questions_spec.rb       |  4 ++--
 .../questions/textfield_questions_spec.rb      |  4 ++--
 spec/features/super_admins/orgs_spec.rb        |  8 ++++----
 .../templates/templates_editings_spec.rb       |  2 +-
 .../templates_upgrade_customisations_spec.rb   |  3 ++-
 spec/rails_helper.rb                           | 18 ++++++++++++++++++
 spec/support/helpers/links_helper.rb           | 11 ++++++++++-
 13 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/spec/features/annotations/annotations_editing_spec.rb b/spec/features/annotations/annotations_editing_spec.rb
index e3b5b8d68f..0edfc4a25e 100644
--- a/spec/features/annotations/annotations_editing_spec.rb
+++ b/spec/features/annotations/annotations_editing_spec.rb
@@ -56,7 +56,7 @@
       expect { click_button 'Save' }.not_to change { Annotation.count }
     end
     expect(annotation.text).to eql('Foo bar')
-    expect(Annotation.order('created_at').last.text).to eql('Noo bar')
+    expect(Annotation.order('created_at').last.text).to eql('<p>Noo bar</p>')
     expect(page).not_to have_errors
   end
 
diff --git a/spec/features/feedback_requests_spec.rb b/spec/features/feedback_requests_spec.rb
index 91da633e09..4d6eaccfdf 100644
--- a/spec/features/feedback_requests_spec.rb
+++ b/spec/features/feedback_requests_spec.rb
@@ -35,7 +35,7 @@
     end
 
     # Click "Request feedback" button within panel
-    within('div.panel') do
+    within('.tab-pane.active') do
       click_link 'Request feedback'
     end
 
diff --git a/spec/features/modal_search_spec.rb b/spec/features/modal_search_spec.rb
index 9bc7523aac..478d60719d 100644
--- a/spec/features/modal_search_spec.rb
+++ b/spec/features/modal_search_spec.rb
@@ -32,18 +32,20 @@
       fill_in 'research_output_search_term',	with: @model.name
       click_button 'Apply filter(s)'
       expect(page).to have_text(@model.description)
-
       # Select the repository and make sure it no longer appears in the search results
       click_link 'Select'
       expect(page).not_to have_text(@model.description)
 
+      # Using JS to click on button, as click_button '.modal-header button.btn-close' did not work.
+      modal_close_button = find('.modal-header button.btn-close')
       # Close the modal
-      click_button 'Close'
+      execute_script("arguments[0].click();", modal_close_button)
     end
 
     # Verify that the selection was added to the main page's dom
     expect(page).not_to have_text('Repository search')
     expect(page).to have_text(@model.description)
+    save_screenshot
     # Verify that we can remove the selection
     click_link 'Remove'
     expect(page).not_to have_text(@model.description)
diff --git a/spec/features/questions/checkbox_questions_spec.rb b/spec/features/questions/checkbox_questions_spec.rb
index 9e8a3b658b..50262f9022 100644
--- a/spec/features/questions/checkbox_questions_spec.rb
+++ b/spec/features/questions/checkbox_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
@@ -38,7 +38,7 @@
 
     # Expectations
     expect(page).to have_text 'Answered just now'
-    expect(page).to have_text '1/1 answered'
+    expect(page).to have_text '(1 / 1)'
     expect(Answer.where(question_id: @question.id)).to be_any
   end
 end
diff --git a/spec/features/questions/dropdown_questions_spec.rb b/spec/features/questions/dropdown_questions_spec.rb
index d9c5a52ca5..f157dd4621 100644
--- a/spec/features/questions/dropdown_questions_spec.rb
+++ b/spec/features/questions/dropdown_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
diff --git a/spec/features/questions/radiobuttons_questions_spec.rb b/spec/features/questions/radiobuttons_questions_spec.rb
index c41a51aec1..b913d58710 100644
--- a/spec/features/questions/radiobuttons_questions_spec.rb
+++ b/spec/features/questions/radiobuttons_questions_spec.rb
@@ -2,7 +2,7 @@
 
 require 'rails_helper'
 
-RSpec.describe 'Questions::Tadio button questions', type: :feature do
+RSpec.describe 'Questions::Radio button questions', type: :feature do
   before do
     @default_template  = create(:template, :default, :published)
     @phase             = create(:phase, template: @default_template)
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
diff --git a/spec/features/questions/textarea_questions_spec.rb b/spec/features/questions/textarea_questions_spec.rb
index 2b9ed8c874..34e3fcf84c 100644
--- a/spec/features/questions/textarea_questions_spec.rb
+++ b/spec/features/questions/textarea_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
@@ -39,7 +39,7 @@
 
     # Expectations
     expect(page).to have_text 'Answered just now'
-    expect(page).to have_text '1/1 answered'
+    expect(page).to have_text '(1 / 1)'
     expect(Answer.where(question_id: @question.id)).to be_any
   end
 end
diff --git a/spec/features/questions/textfield_questions_spec.rb b/spec/features/questions/textfield_questions_spec.rb
index 2d3476a9e4..7df6366f37 100644
--- a/spec/features/questions/textfield_questions_spec.rb
+++ b/spec/features/questions/textfield_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
@@ -39,7 +39,7 @@
 
     # Expectations
     expect(page).to have_text 'Answered just now'
-    expect(page).to have_text '1/1 answered'
+    expect(page).to have_text '(1 / 1)'
     expect(Answer.where(question_id: @question.id)).to be_any
   end
 end
diff --git a/spec/features/super_admins/orgs_spec.rb b/spec/features/super_admins/orgs_spec.rb
index 06f6a61b34..b250b8b9c6 100644
--- a/spec/features/super_admins/orgs_spec.rb
+++ b/spec/features/super_admins/orgs_spec.rb
@@ -27,9 +27,9 @@
     # Edit the first org in the table
     find('table .dropdown-toggle').click
     find('.dropdown-menu > li > a').click
-    nbr_links = all('.link').length
+    nbr_links = all('input[name="link_link"]').length
     add_link
-    expect(all('.link').length).to eql(nbr_links + 1)
+    expect(all('input[name="link_link"]').length).to eql(nbr_links + 1)
   end
 
   scenario 'Super admin removes links' do
@@ -39,8 +39,8 @@
     find('table .dropdown-toggle').click
     find('.dropdown-menu > li > a').click
     add_link
-    nbr_links = all('.link').length
+    nbr_links = all('input[name="link_link"]').length
     remove_link
-    expect(all('.link').length).to eql(nbr_links - 1)
+    expect(all('input[name="link_link"]').length).to eql(nbr_links - 1)
   end
 end
diff --git a/spec/features/templates/templates_editings_spec.rb b/spec/features/templates/templates_editings_spec.rb
index bc84511cd7..a56237f880 100644
--- a/spec/features/templates/templates_editings_spec.rb
+++ b/spec/features/templates/templates_editings_spec.rb
@@ -44,7 +44,7 @@
       click_button 'Save'
     end
     # Make sure annotation has been updated
-    expect(Question.find(template.question_ids.first).annotations.first.text).to eql('Foo bar')
+    expect(Question.find(template.question_ids.first).annotations.first.text).to eql('<p>Foo bar</p>')
     # Make sure blank records are not created for empty annotation form
     expect(Question.find(template.question_ids.first).annotations.count).to eql(1)
     expect(page).not_to have_errors
diff --git a/spec/features/templates/templates_upgrade_customisations_spec.rb b/spec/features/templates/templates_upgrade_customisations_spec.rb
index 4aa8eb9abc..014821ba9d 100644
--- a/spec/features/templates/templates_upgrade_customisations_spec.rb
+++ b/spec/features/templates/templates_upgrade_customisations_spec.rb
@@ -74,7 +74,8 @@
       within('.new-question-button') do
         click_link('Add Question')
       end
-      expect(page).to have_css('#new_question_new_question')
+
+      expect(page).to have_selector('#new_question_new_question')
       within('#new_question_new_question') do
         expect(find('#new_question_question_text')).to be_present
         fill_in :new_question_question_text, with: 'Text for this specific question'
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index 2872869549..94e29c02eb 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -82,3 +82,21 @@
   config.include Devise::Test::ControllerHelpers, type: :view
   config.include Pundit::Matchers, type: :policy
 end
+
+Capybara.register_driver :headless_chrome do |app|
+  options = Selenium::WebDriver::Chrome::Options.new
+  options.add_argument('--headless')
+  options.add_argument('--no-sandbox')
+  options.add_argument('--disable-dev-shm-usage')
+
+  Capybara::Selenium::Driver.new(
+    app,
+    browser: :chrome,
+    options: options
+  )
+end
+
+Capybara.javascript_driver = :headless_chrome
+Capybara.default_driver = :headless_chrome
+# Configure Capybara to wait longer for elements to appear
+Capybara.default_max_wait_time = 20
diff --git a/spec/support/helpers/links_helper.rb b/spec/support/helpers/links_helper.rb
index a4501227d5..8b27295757 100644
--- a/spec/support/helpers/links_helper.rb
+++ b/spec/support/helpers/links_helper.rb
@@ -6,6 +6,15 @@ def add_link
   end
 
   def remove_link
-    all('.link a > .fa-circle-xmark').last.click
+    # # Scroll the element into view
+    last_link = all('a.delete > .fas.fa-circle-xmark.fa-reverse', visible: false).last
+    scroll_to_element(last_link)
+    # Use Javascript to click link element, as it appears to be size 0
+    execute_script("arguments[0].click();", last_link);
+  end
+
+  def scroll_to_element(element)
+    script = 'arguments[0].scrollIntoView(true)'
+    execute_script(script, element.native)
   end
 end

From 07c2082fb1d5fcb0dd516134fbbe261443c7549a Mon Sep 17 00:00:00 2001
From: Marta Nicholson <marta.nicholson@ed.ac.uk>
Date: Mon, 25 Mar 2024 16:41:02 +0000
Subject: [PATCH 12/31] Update modal_search_spec.rb

---
 spec/features/modal_search_spec.rb | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spec/features/modal_search_spec.rb b/spec/features/modal_search_spec.rb
index 478d60719d..eac60978fc 100644
--- a/spec/features/modal_search_spec.rb
+++ b/spec/features/modal_search_spec.rb
@@ -45,7 +45,6 @@
     # Verify that the selection was added to the main page's dom
     expect(page).not_to have_text('Repository search')
     expect(page).to have_text(@model.description)
-    save_screenshot
     # Verify that we can remove the selection
     click_link 'Remove'
     expect(page).not_to have_text(@model.description)

From da4033b2be1a6ac4d4e59761104bbd63b84526db Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Fri, 27 Oct 2023 16:37:41 +0100
Subject: [PATCH 13/31] Issue #3144 - Upgrade to Bootstrap 5 This commit
 consists of the file changes required for the upgrade from Bootstrap 3 to 5. 
 A more detailed version is in CHANGELOG.md (and in wiki:
 https://github.com/DMPRoadmap/roadmap/wiki/Release-notes-for-Bootstrap-5-upgrade)

---
 CHANGELOG.md                                  | 150 ++++++++++++++-
 app/assets/stylesheets/application.scss       |  30 ++-
 .../stylesheets/blocks/_accessibility.scss    |   2 +-
 app/assets/stylesheets/blocks/_accordion.scss |  82 +++++++++
 app/assets/stylesheets/blocks/_buttons.scss   |  51 +++---
 app/assets/stylesheets/blocks/_cards.scss     |  55 ++++++
 app/assets/stylesheets/blocks/_dropdowns.scss |   7 +
 .../stylesheets/blocks/_font_awesomes.scss    |   4 +-
 app/assets/stylesheets/blocks/_footers.scss   |   7 +-
 app/assets/stylesheets/blocks/_forms.scss     |  21 +++
 app/assets/stylesheets/blocks/_html.scss      |  31 +++-
 app/assets/stylesheets/blocks/_index.scss     |   4 +-
 .../stylesheets/blocks/_input_groups.scss     |  13 +-
 .../blocks/_inverse_dropdowns.scss            |   3 +-
 app/assets/stylesheets/blocks/_labels.scss    |  15 +-
 app/assets/stylesheets/blocks/_lists.scss     |   6 +-
 app/assets/stylesheets/blocks/_logos.scss     |   7 +-
 .../stylesheets/blocks/_modal_dialogs.scss    |  39 ++--
 .../blocks/_modal_permissions.scss            |   6 +-
 .../stylesheets/blocks/_modal_search.scss     |   1 +
 app/assets/stylesheets/blocks/_navbars.scss   |  15 +-
 app/assets/stylesheets/blocks/_navs.scss      |  58 +++---
 .../stylesheets/blocks/_new_plans_form.scss   |   6 +-
 .../blocks/_notification_areas.scss           |   6 +-
 app/assets/stylesheets/blocks/_org_links.scss |   2 +-
 app/assets/stylesheets/blocks/_panels.scss    |  30 ---
 .../stylesheets/blocks/_profile_form.scss     |   6 +-
 app/assets/stylesheets/blocks/_spinner.scss   |  15 +-
 app/assets/stylesheets/blocks/_tables.scss    |  24 ++-
 .../stylesheets/blocks/_template_filters.scss |   6 +-
 app/assets/stylesheets/utils/_functions.scss  |   9 +
 app/assets/stylesheets/utils/_index.scss      |   1 +
 .../stylesheets/variables/_bootstrap.scss     |  14 +-
 .../stylesheets/variables/_colours.scss       |  15 +-
 .../customizable_template_link_helper.rb      |  20 +-
 app/javascript/application.js                 |   3 -
 .../orgAdmin/conditions/updateConditions.js   |  26 ++-
 app/javascript/src/orgAdmin/phases/newEdit.js |  66 +++----
 app/javascript/src/orgAdmin/phases/show.js    |   2 +-
 app/javascript/src/researchOutputs/form.js    |   6 +-
 app/javascript/src/utils/accordion.js         | 171 +++++++++++++-----
 app/javascript/src/utils/popoverHelper.js     |   8 -
 app/javascript/src/utils/requiredField.js     |   2 +-
 app/javascript/src/utils/sectionUpdate.js     |  15 +-
 app/javascript/src/utils/spinner.js           |   4 +-
 app/javascript/src/utils/tinymce.js           |   5 +-
 app/javascript/src/utils/tooltipHelper.js     |   4 +-
 app/views/answers/_new_edit.html.erb          |   8 +-
 app/views/answers/_status.html.erb            |  10 +-
 .../contact_us/contacts/_new_left.html.erb    |  18 +-
 app/views/contact_us/contacts/new.html.erb    |   4 +-
 app/views/contributors/_form.html.erb         |  33 ++--
 app/views/contributors/edit.html.erb          |   4 +-
 app/views/contributors/new.html.erb           |   2 +-
 app/views/devise/invitations/edit.html.erb    |  86 ++++-----
 app/views/devise/passwords/edit.html.erb      |  80 ++++----
 app/views/devise/passwords/new.html.erb       |  50 ++---
 .../devise/registrations/_api_token.html.erb  |  12 +-
 .../_password_confirmation.html.erb           |  22 +--
 .../registrations/_password_details.html.erb  |  25 ++-
 .../registrations/_personal_details.html.erb  |  36 ++--
 app/views/devise/registrations/edit.html.erb  |  28 +--
 .../_guidance_group_form.html.erb             |  10 +-
 .../guidance_groups/_index_by_theme.html.erb  |  41 ++---
 app/views/guidance_groups/_show.html.erb      |  21 +--
 app/views/guidance_groups/admin_edit.html.erb |   2 +-
 app/views/guidance_groups/admin_new.html.erb  |   2 +-
 .../guidances/_guidance_display.html.erb      |  85 +++++----
 app/views/guidances/new_edit.html.erb         |  14 +-
 app/views/kaminari/_last_page.html.erb        |   2 +-
 app/views/kaminari/_next_page.html.erb        |   2 +-
 app/views/kaminari/_page.html.erb             |   2 +-
 app/views/kaminari/_prev_page.html.erb        |   2 +-
 app/views/layouts/_branding.html.erb          |  91 +++++-----
 app/views/layouts/_footer.html.erb            |  32 ++--
 app/views/layouts/_header.html.erb            |   4 +-
 app/views/layouts/_navigation.html.erb        |  84 +++++----
 app/views/layouts/_paginable.html.erb         |   4 +-
 app/views/layouts/_signin_signout.html.erb    |  29 +--
 app/views/layouts/application.html.erb        |  10 +-
 app/views/layouts/modal_search/_form.html.erb |  27 +--
 .../layouts/modal_search/_result.html.erb     |   4 +-
 .../layouts/modal_search/_results.html.erb    |   4 +-
 .../layouts/modal_search/_selections.html.erb |   4 +-
 app/views/notes/_archive.html.erb             |   6 +-
 app/views/notes/_edit.html.erb                |   8 +-
 app/views/notes/_layout.html.erb              |   8 +-
 app/views/notes/_list.html.erb                |   4 +-
 app/views/notes/_new.html.erb                 |   6 +-
 app/views/notes/_show.html.erb                |   2 +-
 .../org_admin/annotations/_form.html.erb      |   4 +-
 app/views/org_admin/conditions/_add.html.erb  |   2 +-
 .../org_admin/conditions/_container.html.erb  |   8 +-
 app/views/org_admin/conditions/_form.html.erb |  14 +-
 .../conditions/_webhook_form.html.erb         |  24 ++-
 app/views/org_admin/departments/edit.html.erb |  14 +-
 app/views/org_admin/departments/new.html.erb  |  14 +-
 app/views/org_admin/phases/_form.html.erb     |  16 +-
 app/views/org_admin/phases/_index.html.erb    |  23 +--
 app/views/org_admin/phases/_phase.html.erb    |  12 +-
 app/views/org_admin/phases/container.html.erb |  16 +-
 app/views/org_admin/phases/preview.html.erb   |  10 +-
 app/views/org_admin/plans/index.html.erb      |   6 +-
 .../question_options/_option_fields.html.erb  |  18 +-
 app/views/org_admin/questions/_form.html.erb  |  45 +++--
 app/views/org_admin/questions/_index.html.erb |   4 +-
 app/views/org_admin/questions/_show.html.erb  |  75 ++++----
 app/views/org_admin/sections/_form.html.erb   |  20 +-
 app/views/org_admin/sections/_index.html.erb  |  71 ++++----
 .../org_admin/sections/_progress.html.erb     |   2 +-
 .../org_admin/sections/_section.html.erb      |  61 +++----
 .../sections/_section_group.html.erb          |   4 +-
 .../org_admin/shared/_theme_selector.html.erb |   7 +-
 app/views/org_admin/templates/_form.html.erb  |  30 +--
 .../org_admin/templates/_navigation.html.erb  |  12 +-
 .../org_admin/templates/container.html.erb    |   8 +-
 .../org_admin/templates/history.html.erb      |   2 +-
 app/views/org_admin/templates/index.html.erb  |  22 +--
 app/views/org_admin/templates/new.html.erb    |   6 +-
 app/views/org_admin/users/edit.html.erb       |  26 +--
 app/views/orgs/_external_identifiers.html.erb |  10 +-
 app/views/orgs/_feedback_form.html.erb        |  10 +-
 app/views/orgs/_profile_form.html.erb         |  52 +++---
 app/views/orgs/admin_edit.html.erb            |  36 ++--
 app/views/orgs/shibboleth_ds.html.erb         |   6 +-
 .../paginable/api_clients/_index.html.erb     |   2 +-
 .../paginable/contributors/_index.html.erb    |  12 +-
 .../paginable/departments/_index.html.erb     |   4 +-
 .../paginable/guidance_groups/_index.html.erb |  10 +-
 app/views/paginable/guidances/_index.html.erb |  12 +-
 app/views/paginable/orgs/_index.html.erb      |   6 +-
 .../plans/_privately_visible.html.erb         |  16 +-
 .../research_outputs/_index.html.erb          |   6 +-
 .../templates/_customisable.html.erb          |  21 ++-
 .../templates/_organisational.html.erb        |  22 ++-
 .../templates/_publicly_visible.html.erb      |   2 +-
 app/views/phases/_edit_plan_answers.html.erb  |  41 ++---
 app/views/phases/_guidances_notes.html.erb    |  67 ++++---
 app/views/phases/_overview.html.erb           |   2 +-
 app/views/plans/_download_form.html.erb       |  64 +++----
 app/views/plans/_edit_details.html.erb        |   6 +-
 app/views/plans/_guidance_choices.html.erb    |   6 +-
 app/views/plans/_guidance_selection.html.erb  |  14 +-
 app/views/plans/_navigation.html.erb          |  43 +++--
 app/views/plans/_overview_details.html.erb    |  26 ++-
 app/views/plans/_project_details.html.erb     |  96 +++++-----
 .../plans/_request_feedback_form.html.erb     |   4 +-
 app/views/plans/_share_form.html.erb          |  30 +--
 app/views/plans/new.html.erb                  |  34 ++--
 app/views/public_pages/plan_index.html.erb    |   4 +-
 .../public_pages/template_index.html.erb      |   4 +-
 .../_new_edit_question_datefield.html.erb     |   6 +-
 .../_new_edit_question_option_based.html.erb  |  14 +-
 .../_new_edit_question_textarea.html.erb      |   4 +-
 .../_new_edit_question_textfield.html.erb     |   6 +-
 .../questions/_preview_question.html.erb      |   2 +-
 app/views/research_outputs/_form.html.erb     |  80 ++++----
 app/views/research_outputs/edit.html.erb      |   2 +-
 .../research_outputs/licenses/_form.html.erb  |   2 +-
 app/views/research_outputs/new.html.erb       |   2 +-
 .../repositories/_search_result.html.erb      |   2 +-
 .../select_output_type.js.erb                 |   8 +-
 app/views/shared/_access_controls.html.erb    |  21 +--
 app/views/shared/_copy_link_modal.html.erb    |  28 +--
 .../shared/_create_account_form.html.erb      |  37 ++--
 app/views/shared/_create_plan_modal.html.erb  |  10 +-
 app/views/shared/_links.html.erb              |  22 +--
 app/views/shared/_modal.html.erb              |   4 +-
 app/views/shared/_popover.html.erb            |   2 +-
 app/views/shared/_search.html.erb             |  18 +-
 app/views/shared/_sign_in_form.html.erb       |  70 +++----
 app/views/shared/_table_filter.html.erb       |  42 ++---
 app/views/static_pages/about_us.html.erb      |   2 +-
 app/views/static_pages/privacy.html.erb       |   2 +-
 app/views/static_pages/termsuse.html.erb      |   2 +-
 .../super_admin/api_clients/_form.html.erb    |  46 ++---
 .../super_admin/api_clients/edit.html.erb     |   2 +-
 .../super_admin/api_clients/index.html.erb    |   2 +-
 .../super_admin/api_clients/new.html.erb      |   2 +-
 .../super_admin/notifications/_form.html.erb  |  36 ++--
 .../super_admin/notifications/edit.html.erb   |   2 +-
 .../super_admin/notifications/index.html.erb  |   9 +-
 .../super_admin/notifications/new.html.erb    |   2 +-
 app/views/super_admin/orgs/_analysis.html.erb |   4 +-
 app/views/super_admin/orgs/index.html.erb     |   2 +-
 app/views/super_admin/orgs/new.html.erb       |   6 +-
 app/views/super_admin/themes/_form.html.erb   |  14 +-
 app/views/super_admin/themes/edit.html.erb    |   2 +-
 app/views/super_admin/themes/index.html.erb   |   4 +-
 app/views/super_admin/themes/new.html.erb     |   2 +-
 .../super_admin/users/_confirm_merge.html.erb |   8 +-
 app/views/super_admin/users/edit.html.erb     |  40 ++--
 .../_template_statistics_accordion.html.erb   |  34 ++--
 app/views/usage/_total_usage.html.erb         |  20 +-
 app/views/usage/_user_statistics.html.erb     |  32 ++--
 .../usage/_user_statistics_accordion.html.erb |  34 ++--
 app/views/usage/index.html.erb                |   2 +-
 .../users/_admin_grant_permissions.html.erb   |  18 +-
 .../users/_notification_preferences.html.erb  |  44 ++---
 app/views/users/admin_index.html.erb          |   2 +-
 package.json                                  |   6 +-
 yarn.lock                                     |  28 +--
 202 files changed, 2249 insertions(+), 1787 deletions(-)
 create mode 100644 app/assets/stylesheets/blocks/_accordion.scss
 create mode 100644 app/assets/stylesheets/blocks/_cards.scss
 create mode 100644 app/assets/stylesheets/blocks/_forms.scss
 delete mode 100644 app/assets/stylesheets/blocks/_panels.scss
 create mode 100644 app/assets/stylesheets/utils/_functions.scss
 delete mode 100644 app/javascript/src/utils/popoverHelper.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6ab484e6c..3221f53694 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,155 @@
 # Changelog
 
-## V4.1.2 or V4.2.0
+## v4.2.0
+
+**Note this upgrade is mainly a migration from Bootstrap 3 to Bootstrap 5.** 
+
+Note that this will have a significant impact on any scss and html customizations you may have made to your fork of this project. 
+
+The following links will be helpful:
+
+[Get started with Bootstrap v5.2.3](https://getbootstrap.com/docs/5.2/getting-started/introduction/)<br>
+[Migrating to v4](https://getbootstrap.com/docs/4.0/migration)<br>
+[How to Migrate from Bootstrap Version 3 to 4](https://designmodo.com/migrate-bootstrap-4/)<br>
+[Migrating to v5](https://getbootstrap.com/docs/5.0/migration)<br>
+[How to Migrate from Bootstrap Version 4 to 5](https://designmodo.com/migrate-bootstrap-5/)<br>
+[Use Bootstrap 5 with Ruby on Rails 6 and webpack](https://medium.com/daily-web-dev/use-bootstrap-4-with-ruby-on-rails-6-and-webpack-fe7300604267)<br>
+[What happened to $grid-float-breakpoint in Bootstrap 4. And screen size breakpoint shift from 3 -> 4](
+https://bibwild.wordpress.com/2019/06/10/what-happened-to-grid-float-breakpoint-in-bootstrap-4-and-screen-size-breakpoint-shift-from-3-4/)<br>
+[What are media queries in Bootstrap 4?](https://www.educative.io/answers/what-are-media-queries-in-bootstrap-4)<br>
+   
+### Key changes
+    
+- Node  package changes:
+  * Changed version of `bootstrap "^3.4.1"` --> `"^5.2.3"`
+  * Added  `@popperjs/core.`
+  * Removed `bootstrap-3-typeahead, bootstrap-sass & popper.js`
+- Stylesheet changes
+  * In `app/assets/stylesheets/application.scss`:
+    + removed `bootstrap-sass` import <br>
+      and replaced with<br>
+       `@import "../../../node_modules/bootstrap/scss/bootstrap";`
+
+  * The order of the `import` statements have been changed to import the `blocks/` and `utils/` after the default bootstrap stylesheets
+
+  * In `app/assets/stylesheets/blocks/`:
+    + Replaced in relevant files:
+      + `@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as * ;`<br>
+         with <br>
+         `@use "../../../../node_modules/bootstrap/scss/bootstrap" as *;`
+    + Enclosed all division calculations using symbol `/` with `calc()` function,<br> 
+      e.g., replaced<br>
+         `padding-right: $grid-gutter-width / 2;`<br>
+      with<br>
+         `padding-right: calc($grid-gutter-width / 2);`<br>
+    + Replaced breaking media queries since Bootstrap 3:
+      - `@media (max-width: $grid-float-breakpoint-max) {}`<br>
+        with<br>
+        `@include media-breakpoint-down(md){}`
+    
+      - `@media (max-width: $grid-float-breakpoint-max) {}`<br>
+        with<br>
+        `@include media-breakpoint-down(md) {}`
+  *  Deleted `app/javascript/src/utils/popoverHelper.js`.
++ Mixins
+  - Media query mixins parameters have changed for a more logical approach.
+    * `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than lg).
++ Color system
+  -  All `lighten()`and `darken()` functions replaced. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount.
+     * Replaced `lighten()` by `tint-color()`.
+     * Replaced `darken()` by `shade-color()`.
+
+#### Components & HTML
+
+Note many of these Bootstrap changes has required us to rewrite or change some of the Javascript files.
+
+When we use a native DOM element in Javascript, we obtain it by applying get() to the Jquery element (cf., https://api.jquery.com/get/).
+We sometimes use the button native Dom element to programmatically click, as the Jquery button element with trigger('click') won't work because the trigger() function cannot be used to mimic native browser events, such as clicking (cf., https://learn.jquery.com/events/triggering-event-handlers/ )
+
++ Accordion & spinners
+  - Bespoke versions replaced by Bootstrap 5 accordion and spinner now. 
+  - Accordion
+    * Changed the default Bootstrap arrow icon for the accordion to use the fontawesome icons plus and minus icons. Created a several accordion specific colour variables:
+       <br>// Accordion colors
+       <br> `$color-accordion-button: $color-primary-text`;
+       <br> `$color-accordion-button-icon: $color-primary-text`;
+       <br> `$color-accordion-button-bg: $color-primary-background`;
+       <br> `$color-accordion-button-active-bg:  shade-color($color-accordion-button-bg, 30%)`;
+       <br>(See `app/assets/stylesheets/blocks/_accordion.scss` and `app/assets/stylesheets/variables/_colours.scss` for details.)
+    * The drag icon in `app/views/org_admin/sections/_section.html.erb` now appears after the plus (or minus) icon.
+  - The spinner block now uses class`d-none` instead of`hidden` to hide.
+  - In views with multiple accordion sections with "expand all" or "collapse all" links, we use the native Dom element of the accordion buttons to programmatically click, (cf. to note above).
++ Buttons
+  - Bootstrap dropped `btn-block` class for utilities. So we removed any styling using it.
+  - Close Buttons: Renamed `close` to`btn-close`.
+  - Renamed `btn-default` to `btn-secondary` and variable `$btn-default-color` changed to `$btn-secondary-color`.
++ Dropdowns 
+    - Dropdown list items with class `dropdown` have class `dropdown-item` added usually with`px-3` for positioning.
+    - Added new `dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
+    - Data attributes changes required by Bootstrap 5 (as used by accordion and dropdown buttons):
+       * `data-display` --> `data-bs-display`
+       * `data-parent` --> `data-bs-parent`
+       * `data-target` --> `data-bs-target`
+       * `data-toggle` --> `data-bs-toggle`
+    - Bootstrap 5 Popover added to some dropdown-menu items by adding attribute `data-bs-toggle="popover"`
++ Form 
+  - `form-group` class replaced with `form-control`.
+  - Form labels now require `form-label` or `form-check-label` to go with `form-control` and `form-check` respectively. So all obsolete `control-label` replaced by `form-label` and missing ones added.
+  - Dropped form-specific layout classes for our grid system. Use Bootstrap grid and utilities instead of `form-group`, `form-row`, or `form-inline`.
+  - `form-text` no longer sets display, allowing you to create inline or block help text as you wish just by changing the HTML element.
+  - Input group addons are now specific to their placement relative to an input. So `input-group-addon` and in our case we replaced with
+`input-group-addon`.
+  - Renamed `checkbox` and `radio` into `form-check`.
++ Images
+  - Renamed `img-responsive` to `img-fluid`.
++ Labels and badges
+   - Class `label` has been removed and replaced by `badge` to disambiguate from the `<label>` element.
+      * Renamed `label` class to `badge`
+      * Replaced `label-default` by `bg-secondary`
+      * Replaced `label-info` by `bg-info`
+      * Replaced `label-warning` by  `bg-warning .text-dark`
+      * Replaced `label-danger` by `bg-danger`
++ Links
+  - Links are underlined by default (not just on hover), unless they're part of specific components. So we had to add css to remove underline in many cases.
++ Modals
+  - To programmatically show or hide a Bootstrap modal, we have followed both these approaches:
+     * Either, get access to the Jquery modal element and call functions `modal('show')` or `modal('hide')`.
+     * Or, apply click() to the native Dom element of the button to trigger the modal (cf. to note above).
++ Navs & navbars
+  - Bootstrap rewrote component with flexbox. Dropped nearly all > selectors for simpler styling via un-nested classes.
+    Instead of HTML-specific selectors like .nav > li > a, we use separate classes for `navs, nav-items, and nav-links`. (Note because the `nav-link` class has not always been added as it comes with styles not appropriate for our styling for links.)
+    This makes your HTML more flexible while bringing along increased extensibility. So we have dropped  HTML-specific selectors and css in `_navs.scss`
+    e.g., 
+    <br>`.nav-tabs > li > a:hover` --> `nav-tabs nav-link:hover`,
+    <br>`.nav-pills > li > a:hover` -->`nav-pills .nav-link:hover`.
+    - Pages with css classes `nav` and`navbar` updated to work with Bootstrap 5. So `app/assets/stylesheets/blocks/_navbars.scss` and `app/assets/stylesheets/blocks/_navs.scss` updated.
+      * Replaced`nav navbar-nav` combination --> `navbar-nav`
+      * Replaced`navbar-toggle` --> `navbar-toggler`
+      * Replaced multiple spans in`navbar-toggle` button with class`icon-bar`<br>  --> single span with`toggler-icon`
+      * Lists with `nav navbar-nav` have class`nav-item` added to list elements.
+    - Note because the `nav-link` class include styling that is not appropriate in many places, we have not included it in those cases.
++ Notifications
+    - Notifications now use classes `d-block` and `d-none` to show and hide respectively.
++ Panels, thumbnails & wells (replacements)
+  - Bootstrap 5 dropped panels, thumbnails and wells. So pages with them updated with Bootstrap 5 replacements. 
+    * All views with css classes`panel, panel-body, panel-*` Have panel replaced by card to give `card, card_body, card-*`, etc. 
+    * As `panel-default` and some otherpanel css classes don't have card equivalents with same suffixes we have added these classes temporarily in `_cards.sccs`, e.g.,`.card-default`, etc.
++ Utilities
+  - Bootstrap renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
+    * Renamed `left-*` and `right-*` to `start-*` and `end-*`.
+    * Renamed `float-left` and `float-right` to `float-start` and `float-end`.
+    * Renamed `ml-*` and `mr-*` to `ms-*` and `me-*`.
+    * Renamed `pl-*` and `pr-*` to `ps-*` and `pe-*`.
+    * Renamed `text-left` and `text-right` to `text-start` and `text-end`.
+  - The `hidden` and `show` classes have been removed because they conflicted with jQuery's.
+    * Replaced `hidden` with `d-none`.
+  - Text utilities
+    * As Bootstrap 5.2 dropped class `text-justify` we have created a custom version based on comment https://github.com/twbs/bootstrap/pull/29793#issuecomment-1814683346
+    * `text-*` utilities do not add hover and focus states to links anymore. `link-*` helper classes can be used instead.
 
 ### Fixed 
-- Fixed rubocop errors after V4.1.1 release 
+- Fixed rubocop errors after V4.1.1 release
+
 ## V4.1.1
 
 ### Added
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 5e6d597552..523645353e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,12 +1,8 @@
 // Import locally defined variables. Load this before 'bootstrap'
-
 @use "variables";
 
-@use "blocks";
-@use "utils";
-
 // Pull in the webpacker managed copy of Bootstrap Stylesheets
-@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../../node_modules/bootstrap/scss/bootstrap";
 @import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
 
 // Pull in the webapcker managed copy of JQuery-UI Stylesheets
@@ -19,3 +15,27 @@ $fa-font-path: '.';
 // @import '@fortawesome/fontawesome-free/scss/brands';
 @import '@fortawesome/fontawesome-free/scss/regular';
 @import '@fortawesome/fontawesome-free/scss/solid';
+
+// Custom.scss
+// Option B: Include parts of Bootstrap
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "../../../node_modules/bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+// 4. Include any optional Bootstrap components as you like
+@import "../../../node_modules/bootstrap/scss/root";
+@import "../../../node_modules/bootstrap/scss/reboot";
+@import "../../../node_modules/bootstrap/scss/type";
+@import "../../../node_modules/bootstrap/scss/images";
+@import "../../../node_modules/bootstrap/scss/containers";
+@import "../../../node_modules/bootstrap/scss/grid";
+
+//Importing customised stylesheets after Bootstrap defaults
+@import "blocks";
+@import "utils";
diff --git a/app/assets/stylesheets/blocks/_accessibility.scss b/app/assets/stylesheets/blocks/_accessibility.scss
index d2dd003e0d..9bd2f3b9fd 100644
--- a/app/assets/stylesheets/blocks/_accessibility.scss
+++ b/app/assets/stylesheets/blocks/_accessibility.scss
@@ -38,7 +38,7 @@ div.skip a:focus {
 }
 
 /** Focus outline required for accessibility */
-a, input, select, .form-control {
+a, input, select, .form-control input, .form-control textarea {
   &:focus,
   &:hover,
   &:active {
diff --git a/app/assets/stylesheets/blocks/_accordion.scss b/app/assets/stylesheets/blocks/_accordion.scss
new file mode 100644
index 0000000000..2705314a6f
--- /dev/null
+++ b/app/assets/stylesheets/blocks/_accordion.scss
@@ -0,0 +1,82 @@
+@use '../variables/colours' as *;
+
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
+
+// An explanation of how we change the Bootstrap arrow icon for the accordion to use the fontawesome icons.
+// First we get the fontawesome plus.svg and minus.svg for use in background image from:
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg (in .accordion-button.collapsed::after)
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg
+// We then encode the svg.
+// Next the svg fill attribute is added with color set by a variable $color-accordion-button-icon in the _colours.scss.
+// This allows us to change color of symbols.
+// "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'
+// SVG we are using are encoded with fill added as fill='#{$color-accordion-button-icon}': 
+// After encoding # symbols in svg with the unicode %23. Hence the use of the replace function.
+// We could have done this without str-replace by adding encoded fill='%23{$color-accordion-button-icon}'.
+// Example of process for version Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free).
+// Get svgs
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg:
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+// Encode using a "URL-encoder for SVG" like  https://yoksel.github.io/url-encoder/
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E
+// Repeat for
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
+// Encode using a "URL-encoder for SVG"
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E?
+// We now use svgs as the background-image for the .accordion-button class as follows leaving a space.
+// After viewBox='0 0 448 512' we add fill='#{$color-accordion-button-icon}' as follows:
+// For node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg:
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E
+// node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg:
+// %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E??
+// Now add to scss with a str-replace javascript function (which replaces '#' with '%23' after evaluation of #{$color-accordion-button-icon}.
+// background-image: str-replace(url("data:image/svg+xml, ENCODED_SVG, , '#', '%23');
+
+// Change when fontawesome library upgraded. Using Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free). See above explanation on how it is done.
+.accordion-button::after, .accordion-button.collapsed::after {
+  background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E"), '#', '%23');
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"), '#', '%23');
+  transition: all 0.5s;
+}
+
+
+// // move fa-arrows-alt to right
+h2.accordion-header {
+  display: flex;
+  align-items: center;
+  color: $color-accordion-button;
+  background-color: $color-accordion-button-bg;
+  font-size: 1rem;
+}
+
+h2.accordion-header > a.i {
+  margin-left: auto; 
+}
+
+// Remove box-shadow and highlight from Accordion button
+a.accordion-button,
+a.accordion-button.collapsed,
+a.accordion-button:not(.collapsed),
+a.accordion-button:hover,
+a.accordion-button:active, 
+a.accordion-button:focus,
+a.accordion-button:focus-visible,
+button.accordion-button.collapsed,
+button.accordion-button:not(.collapsed),
+button.accordion-button,
+button.accordion-button:hover,
+button.accordion-button:active, 
+button.accordion-button:focus,
+button.accordion-button:focus-visible {
+  color: $color-accordion-button;
+  background-color: $color-accordion-button-bg;
+  text-decoration: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
diff --git a/app/assets/stylesheets/blocks/_buttons.scss b/app/assets/stylesheets/blocks/_buttons.scss
index ffc1d5ee69..46fd31b66e 100644
--- a/app/assets/stylesheets/blocks/_buttons.scss
+++ b/app/assets/stylesheets/blocks/_buttons.scss
@@ -1,10 +1,6 @@
 @use '../variables/colours' as *;
 // Bootstrap overrides
 
-.btn {
-  border-radius: 0px;
-}
-
 /* primary button */
 .btn-primary,
 .btn-primary:hover,
@@ -17,33 +13,37 @@
   border-color: $color-border-default;
   color: $color-primary-text;
   outline: none;
-  margin-top: 5px;
-  margin-bottom: 10px;
+  border-radius: 0rem;
+  margin-top: 4px;
+  margin-bottom: 5px;
 }
 
 /* default button */
-.btn-default,
-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active,
-.btn-default:visited,
-.btn-default:active:hover,
-.btn-default.active:hover {
+.btn-secondary,
+.btn-secondary:hover,
+.btn-secondary:focus,
+.btn-secondary:active,
+.btn-secondary:visited,
+.btn-secondary:active:hover,
+.btn-secondary.active:hover {
   background-color: $color-primary-background;
   border-color: $color-border-default;
   color: $color-primary-text;
   outline: none;
-  margin-top: 5px;
-  margin-bottom: 10px;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 0rem;
+  margin-top: 4px;
+  margin-bottom: 5px;
 }
 
 /* Popover button */
-.btn-default[data-toggle=tooltip],
-.btn-default:hover[data-toggle=tooltip],
-.btn-default:focus[data-toggle=tooltip],
-.btn-default:active[data-toggle=tooltip],
-.btn-default:visited[data-toggle=tooltip],
-.btn-default:active:hover[data-toggle=tooltip] {
+.btn-secondary[data-toggle=tooltip],
+.btn-secondary:hover[data-toggle=tooltip],
+.btn-secondary:focus[data-toggle=tooltip],
+.btn-secondary:active[data-toggle=tooltip],
+.btn-secondary:visited[data-toggle=tooltip],
+.btn-secondary:active:hover[data-toggle=tooltip] {
   color: $color-secondary-text;
   background-color: $color-secondary-background;
   border: none;
@@ -52,6 +52,13 @@
 }
 
 /* link button */
-.btn-link {
+.btn-link, .btn-close {
   color: $color-link-text;
+  border: $color-border-default;
+  border-radius: 0rem;
+}
+
+.btn:disabled {
+  background-color: tint-color($color-primary-background, 40%);
+  border: none;
 }
diff --git a/app/assets/stylesheets/blocks/_cards.scss b/app/assets/stylesheets/blocks/_cards.scss
new file mode 100644
index 0000000000..edb25d6e1f
--- /dev/null
+++ b/app/assets/stylesheets/blocks/_cards.scss
@@ -0,0 +1,55 @@
+@use '../variables/colours' as *;
+
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
+// Override Bootstrap 5 cards
+
+.card {
+  border-color: $color-border-default;
+  border-radius: 0rem;
+}
+.heading-button > .card-heading, .card > .card-heading {
+  background-color: $color-primary-background;
+  color: $color-primary-text;
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+
+.empty-section {
+  background-color: $color-muted-background !important;
+  cursor: 'auto' !important;
+}
+
+.card-title a {
+  display: block;
+  padding: 8px calc($grid-gutter-width / 2);
+  margin: -10px calc($grid-gutter-width / -2);
+  background-color: $color-primary-background;
+  color: $color-primary-text;
+}
+.card-title > a.reverse {
+  background-color: $color-secondary-background;
+  color: $color-secondary-text;
+}
+
+// Classes from Boostrap 3 panels (renamed card) - interim solution
+.card-default {
+  border-color: #ddd;
+  border-radius: 0rem;
+}
+.card-default > .card-heading {
+  color: #333333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+}
+.card-default > .card-heading + .card-collapse > .card-body {
+  border-top-color: #ddd;
+}
+.card-default > .card-heading .badge {
+  color: #f5f5f5;
+  background-color: #333333;
+}
+.card-default > .card-footer + .card-collapse > .card-body {
+  border-bottom-color: #ddd;
+}
diff --git a/app/assets/stylesheets/blocks/_dropdowns.scss b/app/assets/stylesheets/blocks/_dropdowns.scss
index 5459a7182a..0773c504df 100644
--- a/app/assets/stylesheets/blocks/_dropdowns.scss
+++ b/app/assets/stylesheets/blocks/_dropdowns.scss
@@ -40,3 +40,10 @@
 .nav-pills > li > a {
   border-radius: 0px;
 }
+
+/* custom styling for dropdown menus */
+.dropdown-menu {
+  border-radius: 0px;
+  border: 1px solid $color-border-default;
+  // box-shadow: 0px 0px 1px 1px $color-primary-background;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/blocks/_font_awesomes.scss b/app/assets/stylesheets/blocks/_font_awesomes.scss
index ddfc9d197d..57e6fba58f 100644
--- a/app/assets/stylesheets/blocks/_font_awesomes.scss
+++ b/app/assets/stylesheets/blocks/_font_awesomes.scss
@@ -1,6 +1,6 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 // Override FontAwesome icons
 
 /* FONTAWESOME STYLING */
diff --git a/app/assets/stylesheets/blocks/_footers.scss b/app/assets/stylesheets/blocks/_footers.scss
index 768fb83001..8e0b09c949 100644
--- a/app/assets/stylesheets/blocks/_footers.scss
+++ b/app/assets/stylesheets/blocks/_footers.scss
@@ -1,5 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-/* For sticky footer */
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 #footer-navbar {
   margin-bottom: 0px;
   position: absolute;
@@ -8,6 +9,6 @@
   border-radius:0px;
   z-index: 1;
   ul {
-    padding-right: $grid-gutter-width / 2;
+    padding-right: calc($grid-gutter-width / 2);
   }
 }
diff --git a/app/assets/stylesheets/blocks/_forms.scss b/app/assets/stylesheets/blocks/_forms.scss
new file mode 100644
index 0000000000..59dfd49f88
--- /dev/null
+++ b/app/assets/stylesheets/blocks/_forms.scss
@@ -0,0 +1,21 @@
+@use '../variables/colours' as *;
+
+.form-control {
+    border: 0px;
+}
+
+.form-control input, .form-control textarea, .form-control select{
+    border: 2px solid $color-border-light;
+}
+
+.form-check {
+    padding-left: 0rem;
+}
+
+.form-inline{
+    margin-bottom: 5px;
+}
+
+.form-check-label {
+    padding-left: 5px;
+}
diff --git a/app/assets/stylesheets/blocks/_html.scss b/app/assets/stylesheets/blocks/_html.scss
index 226b940dd3..ea5e89299b 100644
--- a/app/assets/stylesheets/blocks/_html.scss
+++ b/app/assets/stylesheets/blocks/_html.scss
@@ -4,6 +4,8 @@
 // blocks.
 
 html {
+  font-size: 0.9rem;
+  font-weight: 300;
   position: relative;
   min-height: 100%;
 }
@@ -11,6 +13,7 @@ html {
 /* For sticky footer */
 main {
   margin-bottom: 100px;
+  margin-top: 30px;
   @media (max-width: 768px) {
     margin-bottom: 420px;
   }
@@ -21,6 +24,15 @@ main {
 
 body{
   padding-bottom: 50px;
+
+  hr {
+    border-top: 1px solid #eeeeee;
+  }
+
+  .row {
+    --bs-gutter-x: 0rem;
+  }
+  
 }
 
 /* footer */
@@ -51,7 +63,7 @@ fieldset {
 
 legend {
   border: none;
-  font-size: 14px;
+  font-size: 14px; 
   font-weight: bold;
   margin-bottom: 5px;
   text-transform: capitalize;
@@ -65,3 +77,20 @@ h1, h2, h3, h4, h5, h6 {
   /* font-family: "GillSansLight"; */
   color: $color-heading-text;
 }
+
+
+.fas:not(.small) {
+  font-size: 1rem;
+}
+
+/** Added as Bootstrap 5.2 has dropped  .text-justify class. 
+So we added this based on comment 
+https://github.com/twbs/bootstrap/pull/29793#issuecomment-1814683346
+*/
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+
+
diff --git a/app/assets/stylesheets/blocks/_index.scss b/app/assets/stylesheets/blocks/_index.scss
index b850d43e6d..35ba43018a 100644
--- a/app/assets/stylesheets/blocks/_index.scss
+++ b/app/assets/stylesheets/blocks/_index.scss
@@ -1,12 +1,15 @@
 @use 'accessibility';
+@use 'accordion';
 @use 'alerts';
 @use 'autocomplete';
 @use 'buttons';
+@use 'cards';
 @use 'clearable_field';
 @use 'datepicker';
 @use 'display';
 @use 'dropdowns';
 @use 'font_awesomes';
+@use 'forms';
 @use 'footers';
 @use 'help_blocks';
 @use 'html';
@@ -23,7 +26,6 @@
 @use 'new_plans_form';
 @use 'new_window_popup';
 @use 'notification_areas';
-@use 'panels';
 @use 'profile_form';
 @use 'progress';
 @use 'project_details';
diff --git a/app/assets/stylesheets/blocks/_input_groups.scss b/app/assets/stylesheets/blocks/_input_groups.scss
index 88f19d1cec..f704bb6d84 100644
--- a/app/assets/stylesheets/blocks/_input_groups.scss
+++ b/app/assets/stylesheets/blocks/_input_groups.scss
@@ -1,5 +1,14 @@
 @use '../variables/colours' as *;
-.input-group-addon {
-  border-radius: 0px;
+.input-group-text {
+  border-radius: 0rem;
   background-color: $color-primary-background;
+  padding: 0.5rem;
+}
+
+.form-control {
+  border-radius: 0rem;
+}
+
+.input-group .form-control {
+  border: 2px solid $color-border-light;
 }
diff --git a/app/assets/stylesheets/blocks/_inverse_dropdowns.scss b/app/assets/stylesheets/blocks/_inverse_dropdowns.scss
index e7f48d5378..f39b41bfdd 100644
--- a/app/assets/stylesheets/blocks/_inverse_dropdowns.scss
+++ b/app/assets/stylesheets/blocks/_inverse_dropdowns.scss
@@ -1,4 +1,5 @@
-@use '../variables/bootstrap' as *;
+ @use '../variables/bootstrap' as *;
+ 
 /* For dark (inverse) navbars */
 .inverse-dropdown {
   background-color: $dropdown-inverse-bg !important;
diff --git a/app/assets/stylesheets/blocks/_labels.scss b/app/assets/stylesheets/blocks/_labels.scss
index 71d6b7fdb5..0830ac244a 100644
--- a/app/assets/stylesheets/blocks/_labels.scss
+++ b/app/assets/stylesheets/blocks/_labels.scss
@@ -1,6 +1,11 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 
 /* label stlying */
+label {
+  font-weight: 700;
+}
+
 .label {
   font-size: 85%;
   border-radius: 0px;
@@ -8,10 +13,14 @@
 
 /* RADIO BUTTONS */
 .radio label {
-  margin-right: $grid-gutter-width / 2;
+  margin-right: calc($grid-gutter-width / 2);
+}
+
+.radio label, .checkbox label {
+  font-weight: 400;
 }
 
 /* Remove mandatory * from check_box_tag in Admin search */
 .form-inline span.red {
-  visibility:hidden;
+  visibility: collapse;
 }
diff --git a/app/assets/stylesheets/blocks/_lists.scss b/app/assets/stylesheets/blocks/_lists.scss
index 1bd84f06b3..50e10d6546 100644
--- a/app/assets/stylesheets/blocks/_lists.scss
+++ b/app/assets/stylesheets/blocks/_lists.scss
@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // Overrides Bootstrap 3.0's lists
 
 /* list-group styling */
@@ -13,6 +15,6 @@
 
 /* LIST STYLING */
 span.sublist {
-  margin-left: $grid-gutter-width / -2;
+  margin-left: calc($grid-gutter-width / -2);
   margin-right: 25px;
 }
diff --git a/app/assets/stylesheets/blocks/_logos.scss b/app/assets/stylesheets/blocks/_logos.scss
index 33baedbbe1..7b9af2f22a 100644
--- a/app/assets/stylesheets/blocks/_logos.scss
+++ b/app/assets/stylesheets/blocks/_logos.scss
@@ -1,12 +1,13 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 
 /* HEADER LOGOS */
 .app-logo {
   height: 50px;
-  padding-right: $grid-gutter-width / 2;
+  padding-right: calc($grid-gutter-width / 2);
 }
 
 .org-logo {
   height: 100px;
-  padding-right: $grid-gutter-width / 2;
+  padding-right: calc($grid-gutter-width / 2);
 }
diff --git a/app/assets/stylesheets/blocks/_modal_dialogs.scss b/app/assets/stylesheets/blocks/_modal_dialogs.scss
index 051f8b8096..de6eeb405d 100644
--- a/app/assets/stylesheets/blocks/_modal_dialogs.scss
+++ b/app/assets/stylesheets/blocks/_modal_dialogs.scss
@@ -1,27 +1,30 @@
 @use '../variables/colours' as *;
 // Overrides Bootstrap 3.0's Modals
 
+.modal{
+  --bs-modal-border-radius: 0rem;
+}
+
 .modal-dialog {
   background-color: $color-secondary-background;
 }
 
+.modal-header > h2 {
+  font-size: 20px;
+}
 
 // Footer (for actions)
-.modal-footer {
-  // right align buttons
-  text-align: right;
-  // Properly space out buttons within modal to fix alignment issues
-  .btn + .btn {
-    margin-left: 5px;
-    // account for input[type="submit"] which gets the bottom margin like all other inputs
-    margin-bottom: 10px;
-  }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
-  // and override it for block buttons as well
-  .btn-block + .btn-block {
-    margin-left: 0;
-  }
-}
+// .modal-footer {
+//   // right align buttons
+//   text-align: right;
+//   // Properly space out buttons within modal to fix alignment issues
+//   .btn + .btn {
+//     margin-left: 5px;
+//     // account for input[type="submit"] which gets the bottom margin like all other inputs
+//     margin-bottom: 10px;
+//   }
+//   // but override that for button groups
+//   .btn-group .btn + .btn {
+//     margin-left: -1px;
+//   }
+// }
diff --git a/app/assets/stylesheets/blocks/_modal_permissions.scss b/app/assets/stylesheets/blocks/_modal_permissions.scss
index 9a5d277be6..c6afcd9b2b 100644
--- a/app/assets/stylesheets/blocks/_modal_permissions.scss
+++ b/app/assets/stylesheets/blocks/_modal_permissions.scss
@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 /* Overrides ul list */
 #modal-permissions ul {
   list-style-type: none;
@@ -12,5 +14,5 @@
 /* Overrides list-group-item */
 #modal-permissions .list-group-item {
   height: 30px;
-  padding: 5px $grid-gutter-width / 2;
+  padding: 5px calc($grid-gutter-width / 2);
 }
diff --git a/app/assets/stylesheets/blocks/_modal_search.scss b/app/assets/stylesheets/blocks/_modal_search.scss
index 5c842c7a23..6b9ebd4eb6 100644
--- a/app/assets/stylesheets/blocks/_modal_search.scss
+++ b/app/assets/stylesheets/blocks/_modal_search.scss
@@ -65,6 +65,7 @@
   border-radius: 25px;
   padding: 2px 5px;
   font-size: 1.3rem;
+  text-decoration: none;
 }
 .modal-search-result .modal-search-result-selector {
   background-color: $color-green;
diff --git a/app/assets/stylesheets/blocks/_navbars.scss b/app/assets/stylesheets/blocks/_navbars.scss
index f8851e6b5c..b79d58ab1c 100644
--- a/app/assets/stylesheets/blocks/_navbars.scss
+++ b/app/assets/stylesheets/blocks/_navbars.scss
@@ -1,5 +1,8 @@
 @use '../variables/bootstrap' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins";
+
 /* For org navbar custom height */
 #org-navbar {
   border-radius: 0px;
@@ -35,11 +38,11 @@
     color: $navbar-org-link-color;
     &:hover,
     &:focus {
-      color: darken($navbar-org-link-hover-color,10%)
+      color: shade-color($navbar-org-link-hover-color,10%)
     }
   }
   #org-navbar .org-links {
-    padding-top: $grid-gutter-width / 2;
+    padding-top: calc($grid-gutter-width / 2);
   }
   #org-navbar .org-a {
     line-height: 36px !important;
@@ -52,7 +55,7 @@
 
 // Branding navbar. This is defined as a clone of .navbar-branding with customizations
 .navbar-branding {
-  @extend .navbar-inverse;
+  @extend .navbar-inverse !optional;
   background-color: $navbar-branding-bg;
   border-color: $navbar-branding-border;
 
@@ -102,7 +105,7 @@
 
   .navbar-collapse,
   .navbar-form {
-    border-color: darken($navbar-branding-bg, 7%);
+    border-color: shade-color($navbar-branding-bg, 7%);
   }
 
   // Dropdowns
@@ -116,7 +119,7 @@
       }
     }
 
-    @media (max-width: $grid-float-breakpoint-max) {
+    @include media-breakpoint-down(lg) {
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {
diff --git a/app/assets/stylesheets/blocks/_navs.scss b/app/assets/stylesheets/blocks/_navs.scss
index 8849b77155..4b34d787a9 100644
--- a/app/assets/stylesheets/blocks/_navs.scss
+++ b/app/assets/stylesheets/blocks/_navs.scss
@@ -19,44 +19,58 @@ nav ul {
 }
 
 
-// Overrides Bootstrap 3.0's nav-tabs
+// Overrides Bootstrap 
 
 /* nav-tabs and nav-pills styling */
+
 .nav-tabs, .nav-pills {
   background-color: $color-primary-background;
   color: $color-primary-text;
-  border-bottom: 0px;
+  border-radius: 0px;
+}
+
+.nav-tabs .nav-item .nav-link, .nav-pills .nav-item .nav-link {
+  border-radius: 0px;
 }
-.nav-tabs > li > a, .nav-pills > li > a {
+
+.nav-link {
   color: $color-primary-text;
+  border-radius: 0px;
 }
-.nav-tabs > li > a:hover,
-.nav-tabs > li > a:focus,
-.nav-tabs > li > a.active,
-.nav-tabs > li > a.active:focus,
-.nav-tabs > li > a.active:hover {
+
+.nav-tabs .nav-link:hover,
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:focus,
+.nav-tabs .nav-link.active:hover {
   background-color: $color-secondary-background;
   color: $color-secondary-text;
   border: 1px solid $color-border-default;
   border-bottom-color: transparent; /* Only nav-tabs have a transparent border-bottom */
 }
-.nav-pills > li > a:hover,
-.nav-pills > li > a:focus,
-.nav-pills > li > a.active,
-.nav-pills > li > a:focus.active,
-.nav-pills > li > a:hover.active {
+
+.nav-pills .nav-link:hover,
+.nav-pills .nav-link:focus,
+.nav-pills .nav-link.active,
+.nav-pills .nav-link:focus.active,
+.nav-pills .nav-link:hover.active {
   background-color: $color-secondary-background;
   color: $color-secondary-text;
   border: 1px solid $color-border-default;
 }
-.nav-pills > li:last-child > a:hover,
-.nav-pills > li:last-child > a:focus,
-.nav-pills > li:last-child > a.active,
-.nav-pills > li:last-child > a.active:focus,
-.nav-pills > li:last-child > a.active:hover {
+
+.nav-pills li:first-child .nav-link:hover,
+.nav-pills li:first-child .nav-link:focus,
+.nav-pills li:first-child .nav-link.active,
+.nav-pills li:first-child .nav-link.active:focus,
+.nav-pills li:first-child .nav-link.active:hover,
+.nav-pills li:last-child .nav-link:hover,
+.nav-pills li:last-child .nav-link:focus,
+.nav-pills li:last-child .nav-link.active,
+.nav-pills li:last-child .nav-link.active:focus,
+.nav-pills li:last-child .nav-link.active:hover {
   border-right: 0px;
+  background-color: $color-secondary-background;
+  color: $color-secondary-text;
 }
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  border-radius: 0px;
-}
+
diff --git a/app/assets/stylesheets/blocks/_new_plans_form.scss b/app/assets/stylesheets/blocks/_new_plans_form.scss
index 34b8928596..f1394be173 100644
--- a/app/assets/stylesheets/blocks/_new_plans_form.scss
+++ b/app/assets/stylesheets/blocks/_new_plans_form.scss
@@ -1,9 +1,11 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // TODO: Refactor this. Instead of writing specific CSS rules for particular objects,
 // we should provide utility classes which can provide the desired style to this object
 #new_plan {
   .create-plan-or {
-    padding: 5px 0 0 $grid-gutter-width / 2;
+    padding: 5px 0 0 calc($grid-gutter-width / 2);
   }
   .create-plan-checkbox {
     margin-left: -40px;
diff --git a/app/assets/stylesheets/blocks/_notification_areas.scss b/app/assets/stylesheets/blocks/_notification_areas.scss
index 5570785be5..1bb63f5629 100644
--- a/app/assets/stylesheets/blocks/_notification_areas.scss
+++ b/app/assets/stylesheets/blocks/_notification_areas.scss
@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+@import "../../../../node_modules/bootstrap/scss/mixins";
 
 .notification-area--floating {
   position: fixed;
@@ -9,7 +11,7 @@
   width: 90vw;
 
   // Non-mobile settings
-  @media (min-width: #{$screen-sm-min}) {
+  @include media-breakpoint-up(sm) {
     right: 4rem;
     width: 300px;
   }
diff --git a/app/assets/stylesheets/blocks/_org_links.scss b/app/assets/stylesheets/blocks/_org_links.scss
index 3ce92c4b23..ca5b7dd02d 100644
--- a/app/assets/stylesheets/blocks/_org_links.scss
+++ b/app/assets/stylesheets/blocks/_org_links.scss
@@ -1,6 +1,6 @@
 // TODO: Refactor this. Instead of writing specific CSS rules for particular objects,
 // we should provide utility classes which can provide the desired style to this object
 .remove-org-link i {
-  margin-left: $grid-gutter-width / -2;
+  margin-left: calc($grid-gutter-width / -2);
   margin-top: $grid-gutter-width;
 }
diff --git a/app/assets/stylesheets/blocks/_panels.scss b/app/assets/stylesheets/blocks/_panels.scss
deleted file mode 100644
index ca7197aa96..0000000000
--- a/app/assets/stylesheets/blocks/_panels.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-// Override Bootstrap 3.0's Panels
-
-.panel-default {
-  border-color: $color-border-default;
-}
-.heading-button > .panel-heading, .panel-default > .panel-heading {
-  background-color: $color-primary-background;
-  color: $color-primary-text;
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-}
-
-.empty-section {
-  background-color: $color-muted-background !important;
-  cursor: 'auto' !important;
-}
-
-.panel-title a {
-  display: block;
-  padding: 8px $grid-gutter-width / 2;
-  margin: -10px $grid-gutter-width / -2;
-  background-color: $color-primary-background;
-  color: $color-primary-text;
-}
-.panel-title > a.reverse {
-  background-color: $color-secondary-background;
-  color: $color-secondary-text;
-}
diff --git a/app/assets/stylesheets/blocks/_profile_form.scss b/app/assets/stylesheets/blocks/_profile_form.scss
index 19a26e017f..2883d74994 100644
--- a/app/assets/stylesheets/blocks/_profile_form.scss
+++ b/app/assets/stylesheets/blocks/_profile_form.scss
@@ -1,9 +1,11 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // TODO: Refactor this. Instead of writing specific CSS rules for particular objects,
 // we should provide utility classes which can provide the desired style to this object
 .org-logo-controls {
   display: inline-block;
-  margin-left: $grid-gutter-width / 2;
+  margin-left: calc($grid-gutter-width / 2);
   input { display: inline-block; }
   strong { margin: 0 10px; }
 }
diff --git a/app/assets/stylesheets/blocks/_spinner.scss b/app/assets/stylesheets/blocks/_spinner.scss
index a812084c90..6897b2ac1e 100644
--- a/app/assets/stylesheets/blocks/_spinner.scss
+++ b/app/assets/stylesheets/blocks/_spinner.scss
@@ -1,10 +1,9 @@
+
 .spinner-border {
-  position: fixed;
-  top: 48%;
-  left: 43%;
+  animation: spinner-border 1.5s linear infinite !important;
+  position: fixed !important;
+  top: 48% !important;
+  left: 43%  !important;
+  width: 2rem !important;
+  height: 2rem !important;
 }
-
-.spinner-border img {
-  height: 80px;
-  width: 80px;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/blocks/_tables.scss b/app/assets/stylesheets/blocks/_tables.scss
index 32e3a2038c..bc8f91dd1b 100644
--- a/app/assets/stylesheets/blocks/_tables.scss
+++ b/app/assets/stylesheets/blocks/_tables.scss
@@ -1,11 +1,21 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // This file contains overrides to the core Bootstrap 3.x styling
-.table { border: 1px solid $color-border-default; }
-.table thead > tr > th { border-bottom: none; }
-.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid $color-border-default; }
+.table { 
+  border: 1px solid $color-border-default;   
+}
+
+.table thead > tr > th { 
+  border-bottom: none;
+ }
+
+.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { 
+  border: 1px solid $color-border-default; 
+}
 
-thead th {
+.table thead th {
   background-color: $color-border-default;
   color: $color-primary-text;
 }
@@ -16,7 +26,7 @@ thead th.table-scope {
 
   a {
     color: $color-secondary-text;
-    padding: 2px ($grid-gutter-width / 2) 2px 2px;
+    padding: 2px calc($grid-gutter-width / 2) 2px 2px;
   }
 }
 
@@ -35,7 +45,7 @@ th.download-column {
 /* Fix issues with dropdwon within tables being cut off */
 .table-responsive > .table {
   width: 100%;
-  margin-bottom: $grid-gutter-width / 2;
+  margin-bottom: calc($grid-gutter-width / 2);
   overflow: auto;
 }
 
diff --git a/app/assets/stylesheets/blocks/_template_filters.scss b/app/assets/stylesheets/blocks/_template_filters.scss
index ed78964bba..1d20649327 100644
--- a/app/assets/stylesheets/blocks/_template_filters.scss
+++ b/app/assets/stylesheets/blocks/_template_filters.scss
@@ -1,6 +1,8 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 .template-table-filters .navbar-nav > li > a {
   color: $color-secondary-text;
-  padding: 5px ($grid-gutter-width / 2) 5px 5px;
+  padding: 5px calc($grid-gutter-width / 2) 5px 5px;
 }
diff --git a/app/assets/stylesheets/utils/_functions.scss b/app/assets/stylesheets/utils/_functions.scss
new file mode 100644
index 0000000000..50d6bbb27c
--- /dev/null
+++ b/app/assets/stylesheets/utils/_functions.scss
@@ -0,0 +1,9 @@
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
diff --git a/app/assets/stylesheets/utils/_index.scss b/app/assets/stylesheets/utils/_index.scss
index b323b19921..ec7573c8c0 100644
--- a/app/assets/stylesheets/utils/_index.scss
+++ b/app/assets/stylesheets/utils/_index.scss
@@ -5,3 +5,4 @@
 @use 'font_size';
 @use 'icons';
 @use 'margins';
+@use 'functions';
diff --git a/app/assets/stylesheets/variables/_bootstrap.scss b/app/assets/stylesheets/variables/_bootstrap.scss
index d8fbbb4a4b..29ac8f9524 100644
--- a/app/assets/stylesheets/variables/_bootstrap.scss
+++ b/app/assets/stylesheets/variables/_bootstrap.scss
@@ -10,23 +10,19 @@
 // NOTE: We need to stick to the !default format below, to ensure variables can be set in
 // other files for individual deployments.
 
-// Forms
-$input-border-radius: 0px !default;
-
-
-// Navbar
-$navbar-border-radius: 0px !default;
 
 // Buttons
-$btn-border-radius-base: 0px !default;
+$btn-border-radius-base: 0rem !default;
 
 $btn-primary-color: $color-primary-text !default;
 
-$btn-default-color: $color-primary-text !default;
+$btn-secondary-color: $color-primary-text !default;
 
 // Panels
-$panel-border-radius: 0px !default;
+$panel-border-radius: 0rem !default;
 
+// Links
+$link-decoration: none !default;
 
 // from colors:
 
diff --git a/app/assets/stylesheets/variables/_colours.scss b/app/assets/stylesheets/variables/_colours.scss
index 041d394803..6219d2aebb 100644
--- a/app/assets/stylesheets/variables/_colours.scss
+++ b/app/assets/stylesheets/variables/_colours.scss
@@ -25,11 +25,12 @@ $color-primary-background: $color-grey;
 $color-secondary-background: $color-white;
 $color-muted-background: $color-muted;
 $color-navbar-background: $color-grey-darkest;
-$color-navbar-background-active: darken($color-navbar-background, 10%) ;
+$color-navbar-background-active: shade-color($color-navbar-background, 10%) ;
 $color-footer-background: $color-navbar-background;
 $color-tooltip-background: $color-primary-background;
 $color-icon-bar-background: $color-white;
 
+
 // Text
 $color-primary-text: $color-white;
 $color-secondary-text: $color-grey;
@@ -38,7 +39,7 @@ $color-navbar-text: $color-grey-light;
 $color-navbar-text-hover: $color-white;
 $color-navbar-text-disabled: $color-grey-darker;
 $color-link-text: $color-blue-alice-darkest;
-$color-navbar-link-text: lighten($color-navbar-text, 15%);
+$color-navbar-link-text: tint-color($color-navbar-text, 15%);
 $color-org-navbar-links: $color-grey-light;
 $color-org-navbar-links-hover: $color-grey-darker;
 $color-dropdown-inverse-text: $color-grey-lighter;
@@ -54,7 +55,7 @@ $color-text-black: $color-black;
 $color-border-default: $color-grey;
 $color-border-light: #ddd;
 $color-dropdown-inverse-border: #080808;
-$color-navbar-border: darken($color-navbar-background, 10%);
+$color-navbar-border: shade-color($color-navbar-background, 10%);
 
 // Shadow colors
 $color-shadow-dark: $color-black;
@@ -64,3 +65,11 @@ $color-fa: $color-grey;
 
 // Focus colors
 $color-focus-outline: $color-blue-alice-darkest;
+
+// Accordion colors
+$color-accordion-button: $color-primary-text;
+$color-accordion-button-icon: $color-primary-text;
+$color-accordion-button-bg: $color-primary-background;
+$color-accordion-button-active-bg:  shade-color($color-accordion-button-bg, 30%);
+
+
diff --git a/app/helpers/customizable_template_link_helper.rb b/app/helpers/customizable_template_link_helper.rb
index d8b72e8353..524f007e98 100644
--- a/app/helpers/customizable_template_link_helper.rb
+++ b/app/helpers/customizable_template_link_helper.rb
@@ -5,24 +5,28 @@ module CustomizableTemplateLinkHelper
   # Link to the appropriate customizable template.
   # Default link name set if name not set which can be overwritten.
   # rubocop:disable Metrics/AbcSize, Metrics/PerceivedComplexity
-  def link_to_customizable_template(name, customization, template)
+  def link_to_customizable_template(name, customization, template, dropdown=true)
     name = nil unless name.present?
+    link_css =  dropdown ? 'dropdown-item px-3' : 'px-3'
+
+    if customization.present? 
 
-    if customization.present?
       if customization.created_at < template.created_at
-        name = _('Transfer customisation') if name.blank?
+        name = name.blank? ? _('Transfer customisation') : name
         link_to name,
                 org_admin_template_customization_transfers_path(customization.id),
-                data: { method: 'post' }
+                data: { method: 'post' },
+                class: link_css
       else
-        name = _('Edit customisation') if name.blank?
-        link_to name, org_admin_template_path(id: customization.id)
+        name = name.blank? ? _('Edit customisation') : name
+        link_to name, org_admin_template_path(id: customization.id), class: link_css
       end
     else
-      name = _('Customise') if name.blank?
+      name = name.blank? ? _('Customise') : name
       link_to name,
               org_admin_template_customizations_path(template.id),
-              'data-method': 'post'
+              'data-method': 'post',
+              class: link_css
     end
   end
   # rubocop:enable Metrics/AbcSize, Metrics/PerceivedComplexity
diff --git a/app/javascript/application.js b/app/javascript/application.js
index dff19b9c41..ccad6aa6a5 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -12,7 +12,6 @@ import 'regenerator-runtime/runtime';
 
 // Pull in Bootstrap JS functionality
 import 'bootstrap';
-import 'bootstrap-3-typeahead';
 import 'bootstrap-select';
 
 // Uncomment to copy all static images under ../images to the output folder and reference
@@ -29,10 +28,8 @@ import './src/utils/modalSearch';
 import './src/utils/outOfFocus';
 import './src/utils/paginable';
 import './src/utils/panelHeading';
-import './src/utils/popoverHelper';
 import './src/utils/requiredField';
 import './src/utils/tabHelper';
-import './src/utils/tooltipHelper';
 
 // Specific functions from the Utilities files that will be made available to
 // the js.erb templates in the `window.x` statements below
diff --git a/app/javascript/src/orgAdmin/conditions/updateConditions.js b/app/javascript/src/orgAdmin/conditions/updateConditions.js
index 17b9194f6a..2e65989cfb 100644
--- a/app/javascript/src/orgAdmin/conditions/updateConditions.js
+++ b/app/javascript/src/orgAdmin/conditions/updateConditions.js
@@ -10,22 +10,26 @@ export default function updateConditions(id) {
   // display conditions already saved
   if (addLogicButton.length > 0) {
     if (addLogicButton.attr('data-loaded').toString() === 'true') {
-      addLogicButton.trigger('click');
+      // Get the native Dom element from the Jquery button element.
+      // We are getting native DOM element by applying get() from the Jquery element (cf., https://api.jquery.com/get/).
+      addLogicButton.get(0).click();
     }
   }
-
-  // set up selectpicker select boxes for condition options
+  // set up form-select select boxes for condition options
   const setSelectPicker = () => {
-    $('.selectpicker.narrow').selectpicker({ width: 120 });
-    $('.selectpicker.regular').selectpicker({ width: 150 });
+    // $('.form-select.narrow').selectpicker({ width: 120 });
+    // $('.form-select.regular').selectpicker({ width: 150 });
   };
 
   // test if a webhook is selected and set up if so
   const allowWebhook = (selectObject, webhook = false) => { // webhook false => new condition
     const condition = $(selectObject).closest('.condition-partial');
+
     if (webhook === false) {
       if ($(selectObject).val() === 'add_webhook') { // condition type is webhook
-        condition.find('.pseudo-webhook-btn').trigger('click');
+        // Retreive 'data-bs-target' for modal and create Jquery element
+        const associatedModal = $(condition.find('.pseudo-webhook-btn').attr('data-bs-target'));
+        associatedModal.modal('show');
       } else { // condition type is remove
         condition.find('.remove-dropdown').show();
         condition.find('.webhook-replacement').hide();
@@ -57,9 +61,11 @@ export default function updateConditions(id) {
       // display edit email section
       condition.find('.remove-dropdown').hide();
       condition.find('.webhook-replacement').show();
-      condition.find('.webhook-replacement').on('click', (event) => {
+      $(condition.find('.webhook-replacement')).on('click', (event) => {
         event.preventDefault();
-        condition.find('.pseudo-webhook-btn').trigger('click');
+        // Retreive 'data-bs-target' for modal and create Jquery element
+        const associatedModal1 = $(condition.find('.pseudo-webhook-btn').attr('data-bs-target'));
+        associatedModal1.modal('show');
       });
     }
   };
@@ -78,7 +84,7 @@ export default function updateConditions(id) {
   // webhook form
   const webhookForm = (webhooks = false, selectObject = false) => {
     if (selectObject === false) {
-      $('.selectpicker.action-type').each((idx, selectObject2) => {
+      $('.form-select.action-type').each((idx, selectObject2) => {
         webhookSelected(selectObject2, webhooks[idx]);
       });
     } else {
@@ -109,7 +115,7 @@ export default function updateConditions(id) {
       addDiv.html(e.detail[0].add_link);
       conditionList.attr('data-loaded', 'false');
       setSelectPicker();
-      const selectObject = conditionList.find('.selectpicker.action-type').last();
+      const selectObject = conditionList.find('.form-select.action-type').last();
       webhookForm(undefined, selectObject);
     }
   });
diff --git a/app/javascript/src/orgAdmin/phases/newEdit.js b/app/javascript/src/orgAdmin/phases/newEdit.js
index 7904ed124b..1872452104 100644
--- a/app/javascript/src/orgAdmin/phases/newEdit.js
+++ b/app/javascript/src/orgAdmin/phases/newEdit.js
@@ -1,5 +1,5 @@
 // import 'bootstrap-sass/assets/javascripts/bootstrap/collapse';
-import { Tinymce } from '../../utils/tinymce.js';
+import { Tinymce } from '../../utils/tinymce';
 import { isObject, isString } from '../../utils/isType';
 import getConstant from '../../utils/constants';
 import { addAsterisks } from '../../utils/requiredField';
@@ -46,14 +46,14 @@ $(() => {
   });
 
   const getQuestionPanel = (target) => {
-    let panelBody;
+    let cardBody;
     if (isObject(target)) {
-      panelBody = target.closest('.question_container');
-      if (!isObject(panelBody) || !isString(panelBody.attr('id'))) {
-        panelBody = target.closest('.panel-body').find('.new-question');
+      cardBody = target.closest('.question_container');
+      if (!isObject(cardBody) || !isString(cardBody.attr('id'))) {
+        cardBody = target.closest('.card-body').find('.new-question');
       }
     }
-    return panelBody;
+    return cardBody;
   };
   const initSection = (selector) => {
     if (isString(selector)) {
@@ -61,7 +61,7 @@ $(() => {
       // For some reason the toolbar options are retained after the call to Tinymce.init() on
       // the views/notifications/edit.js file. Tried 'Object.assign' instead of '$.extend' but it
       // made no difference
-      const prefix = 'collapseSection'
+      const prefix = 'collapseSection';
       let sectionId = selector;
       if (sectionId.startsWith(prefix)) {
         sectionId = `sc_${sectionId.replace(prefix, '')}_section_description`
@@ -90,69 +90,69 @@ $(() => {
 
   // Attach handlers for the Section expansion
   $(parentSelector).on('ajax:before', 'a.ajaxified-section[data-remote="true"]', (e) => {
-    const panelBody = $(e.target).parent().find('.panel-body');
-    return panelBody.attr('data-loaded') === 'false';
+    const accordionBody = $(e.target).parents('.accordion-item').find('.accordion-collapse').find('.accordion-body');
+    return accordionBody.attr('data-loaded') === 'false';
   });
 
   $(parentSelector).on('ajax:success', 'a.ajaxified-section[data-remote="true"]', (e) => {
-    const panelBody = $(e.target).parent().find('.panel-body');
-    const panel = panelBody.parent();
-    if (isObject(panelBody)) {
+    const accordionBody = $(e.target).parents('.accordion-item').find('.accordion-collapse').find('.accordion-body');
+    const accordionCollapse = accordionBody.parents('.accordion-collapse');
+    if (isObject(accordionBody)) {
       // Display the section's html
-      panelBody.attr('data-loaded', 'true');
-      panelBody.html(e.detail[0].html);
+      accordionBody.attr('data-loaded', 'true');
+      accordionBody.append(e.detail[0].html);
 
       // Wire up the section
-      initSection(`${panel.attr('id')}`);
+      initSection(`${accordionCollapse.attr('id')}`);
     }
   });
 
   // Attach handlers for the Question show/edit/new
   $(parentSelector).on('ajax:before', 'a.ajaxified-question[data-remote="true"]', (e) => {
-    const panelBody = getQuestionPanel($(e.target));
-    if (isObject(panelBody)) {
+    const cardBody = getQuestionPanel($(e.target));
+    if (isObject(cardBody)) {
       // Release any Tinymce editors that have been loaded
-      panelBody.find('.question').each((idx, el) => {
+      cardBody.find('.question').each((idx, el) => {
         Tinymce.destroyEditorById($(el).attr('id'));
       });
     }
   });
   $(parentSelector).on('ajax:success', 'a.ajaxified-question[data-remote="true"]', (e) => {
     const target = $(e.target);
-    const panelBody = getQuestionPanel(target);
-    if (isObject(panelBody)) {
-      const id = panelBody.attr('id');
+    const cardBody = getQuestionPanel(target);
+    if (isObject(cardBody)) {
+      const id = cardBody.attr('id');
       // Display the section's html
-      panelBody.html(e.detail[0].html);
+      cardBody.html(e.detail[0].html);
       initQuestion(id);
       updateConditions(id);
-      if (panelBody.is('.new-question')) {
+      if (cardBody.is('.new-question')) {
         target.hide();
       }
     }
   });
   $(parentSelector).on('ajax:error', 'a.ajaxified-question[data-remote="true"]', (e) => {
-    const panelBody = getQuestionPanel($(e.target));
-    if (isObject(panelBody)) {
-      panelBody.html(`<div class="pull-right alert alert-warning" role="alert">${getConstant('AJAX_UNABLE_TO_LOAD_TEMPLATE_SECTION')}</div>`);
+    const cardBody = getQuestionPanel($(e.target));
+    if (isObject(cardBody)) {
+      cardBody.html(`<div class="float-end alert alert-warning" role="alert">${getConstant('AJAX_UNABLE_TO_LOAD_TEMPLATE_SECTION')}</div>`);
     }
   });
   // When we cancel the new question we just remove the form and its Tinymce editors
   $(parentSelector).on('click', '.cancel-new-question', (e) => {
     e.preventDefault();
     const target = $(e.target);
-    const panel = target.closest('.question_container');
-    panel.find('.question').each((idx, el) => {
+    const card = target.closest('.question_container');
+    card.find('.question').each((idx, el) => {
       Tinymce.destroyEditorById($(el).attr('id'));
     });
-    panel.html('');
-    panel.closest('.panel-body').find('.new-question-button a.ajaxified-question[data-remote="true"]').show();
+    card.html('');
+    card.closest('.card-body').find('.new-question-button a.ajaxified-question[data-remote="true"]').show();
   });
 
   // Handle the section that has focus on initial page load
-  const currentSection = $('.section-group .in');
-  if (currentSection.length > 0) {
-    initSection(`${currentSection.attr('id')}`);
+  const currentUpdatedSection = $('.accordion-collapse.collapse.show');
+  if (currentUpdatedSection.length > 0) {
+    initSection(`${currentUpdatedSection.attr('id')}`);
   }
   // Handle the new section
   // initSection('#new_section_section_description');
diff --git a/app/javascript/src/orgAdmin/phases/show.js b/app/javascript/src/orgAdmin/phases/show.js
index f7f7f96095..57af3b2634 100644
--- a/app/javascript/src/orgAdmin/phases/show.js
+++ b/app/javascript/src/orgAdmin/phases/show.js
@@ -29,7 +29,7 @@ $(() => {
   // Initialize the draggable-sections element as a jQuery sortable.
   // Read the docs here for more info: http://api.jqueryui.com/sortable/
   $('.draggable-sections').sortable({
-    handle: 'i.fa-up-down-left-right',
+    handle: 'i.fa-arrows-alt',
     axis: 'y',
     cursor: 'move',
     // Remove the placeholder object from the DOM once the item has been placed
diff --git a/app/javascript/src/researchOutputs/form.js b/app/javascript/src/researchOutputs/form.js
index c3df1eb317..c57035f3c6 100644
--- a/app/javascript/src/researchOutputs/form.js
+++ b/app/javascript/src/researchOutputs/form.js
@@ -18,11 +18,11 @@ $(() => {
       const info = $(link).siblings('div.info');
 
       if (info.length > 0) {
-        if (info.hasClass('hidden')) {
-          info.removeClass('hidden');
+        if (info.hasClass('d-none')) {
+          info.removeClass('d-none');
           link.text(`${getConstant('LESS_INFO')}`);
         } else {
-          info.addClass('hidden');
+          info.addClass('d-none');
           link.text(`${getConstant('MORE_INFO')}`);
         }
       }
diff --git a/app/javascript/src/utils/accordion.js b/app/javascript/src/utils/accordion.js
index 253893bbd9..fdb7da12d1 100644
--- a/app/javascript/src/utils/accordion.js
+++ b/app/javascript/src/utils/accordion.js
@@ -9,53 +9,138 @@
  *      <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
  *    </div>
  *
- * Your accordion should follow the Boostrap 3.x layout:
+ * Your accordion should follow the Boostrap 5.x layout:
  * ------------------------------------------------------------
- *    <div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
- *      <div class="panel panel-default">
- *        <div class="panel-heading" role="tab" id="headingA">
- *          <h2 class="panel-title">
- *            <a role="button" data-toggle="collapse" data-parent="accordion"
- *                   href="#collapseA" aria-controls="collapseA" aria-expanded="false">
- *              Section A
- *            </a>
- *          </h2>
+n*
+ *  <div class="accordion" id="accordionDefault">
+ *
+ *    <div class="accordion-item">
+ *      <h2 class="accordion-header" id="headingDefaultOne">
+ *        <button
+ *          class="accordion-button"
+ *          type="button"
+ *          data-bs-toggle="collapse"
+ *          data-bs-target="#collapseDefaultOne"
+ *          aria-expanded="false"
+ *          aria-controls="collapseDefaultOne"
+ *        >
+ *          Accordion Item #1
+ *        </button>
+ *      </h2>
+ *
+ *      <div
+ *        id="collapseDefaultOne"
+ *        class="accordion-collapse collapse show"
+ *        aria-labelledby="headingDefaultOne"
+ *        data-bs-parent="#accordionDefault"
+ *      >
+ *        <div class="accordion-body">
+ *          Accordion Body #1
+ *        </div>
+ *      </div>
+ *
+ *    </div>
+ *
+ *    <div class="accordion-item">
+ *      <h2 class="accordion-header" id="headingDefaultTwo">
+ *        <button
+ *          class="accordion-button collapsed"
+ *          type="button"
+ *          data-bs-toggle="collapse"
+ *          data-bs-target="#collapseDefaultTwo"
+ *          aria-expanded="false"
+ *          aria-controls="collapseDefaultTwo"
+ *        >
+ *          Accordion Item #2
+ *        </button>
+ *      </h2>
+ *
+ *      <div
+ *        id="collapseDefaultTwo"
+ *        class="accordion-collapse collapse"
+ *        aria-labelledby="headingDefaultTwo"
+ *        data-bs-parent="#accordionDefault"
+ *      >
+ *        <div class="accordion-body">
+ *          Accordion Body #2
  *        </div>
- *        <div id="collapseA" class="panel-collapse collapse" role="tabpanel"
- *          aria-labelledby="headingA">
- *          <div class="panel-body">
- *            This is test section A.
- *          </div>
+ *      </div>
+ *
+ *    </div>
+ *
+ *    <div class="accordion-item">
+ *      <h2 class="accordion-header" id="headingDefaultThree">
+ *        <button
+ *          class="accordion-button collapsed"
+ *          type="button"
+ *          data-bs-toggle="collapse"
+ *          data-bs-target="#collapseDefaultThree"
+ *          aria-expanded="false"
+ *          aria-controls="collapseDefaultThree"
+ *        >
+ *          Accordion Item #3
+ *        </button>
+ *      </h2>
+ *
+ *      <div
+ *        id="collapseDefaultThree"
+ *        class="accordion-collapse collapse"
+ *        aria-labelledby="headingDefaultThree"
+ *        data-bs-parent="#accordionDefault"
+ *      >
+ *        <div class="accordion-body">
+ *          Accordion Body #3
  *        </div>
  *      </div>
+ *
  *    </div>
+ *
+ *  </div>
+ *
  */
-$(() => {
-  $('body').on('click', '.accordion-controls a', (e) => {
-    e.preventDefault();
-    const currentTarget = $(e.currentTarget);
-    const target = $(e.target);
-    const direction = target.attr('data-toggle-direction');
-    const parentTargetName = currentTarget.parent().attr('data-parent');
-    if (direction) {
-      // Selects all .panel elements where the parent is currentTarget.attr('data-parent') and
-      // after gets the immediately children whose class selector is panel-collapse
-      const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
-      $(parentTarget).find('.panel').find('.panel-collapse').each((i, el) => {
-        const panelCollapse = $(el);
-        // Expands or collapses the panel according to the
-        // direction passed (e.g. show --> expands, hide --> collapses)
-        if (direction === 'show') {
-          if (!panelCollapse.find('.panel-body').attr('data-loaded') || !panelCollapse.hasClass('in')) {
-            panelCollapse.prev()[0].click();
-          }
-        } else {
-          panelCollapse.collapse(direction);
+
+$(() => $('body').on('click', '.accordion-controls a[data-toggle-direction]', (e) => {
+  e.preventDefault();
+  const currentTarget = $(e.currentTarget);
+  const target = $(e.target);
+  const direction = target.attr('data-toggle-direction');
+  const parentTargetName = currentTarget.parent().attr('data-parent');
+
+  if (direction) {
+    // Selects all .accordion-item elements where the parent is
+    // currentTarget.attr('data-parent') and
+    // after gets the immediate children whose class selector is accordion-item
+    const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
+    parentTarget.children('.accordion-item').each((i, el) => {
+      // We use $() to get Jquery HTML element from native Dom element
+      const accordionItem = $(el);
+      // Not these are Jquery HTML elements, again using $()
+      const accordionHeader = $(accordionItem.children('.accordion-header').get(0));
+      const accordionButton = $(accordionHeader.children('.accordion-button').get(0));
+      const accordionCollapse = $(accordionItem.children('.accordion-collapse').get(0));
+      // Expands or collapses according to the
+      // direction passed (e.g. show --> expands, hide --> collapses)
+      if (direction === 'show') {
+        // To check if element with class .accordion-body has attribute data-loaded
+        // we use the native Dom element so we can use hasAttribute()
+        // and getAttribute() methods.
+        const accordionBodyNativeDomEl = accordionCollapse.children('.accordion-body').get(0);
+        if (accordionBodyNativeDomEl.hasAttribute('data-loaded')
+          && accordionBodyNativeDomEl.getAttribute('data-loaded') === 'false') {
+          // We need the native om element of the button to
+          // to trigger click as the jquery trigger('click')
+          // does not work for rails-ujs
+          const accordionButtonNativeDomEl = accordionHeader.children('.accordion-button').get(0);
+          accordionButtonNativeDomEl.click();
         }
-        // Sets icon at panel-title accordingly
-        panelCollapse.prev().find('i.fa')
-          .removeClass('fa-plus fa-minus').addClass(direction === 'show' ? 'fa-minus' : 'fa-plus');
-      });
-    }
-  });
-});
+        accordionButton.removeClass('collapsed');
+        accordionCollapse.addClass('show');
+      }
+
+      if (direction === 'hide') {
+        accordionButton.addClass('collapsed');
+        accordionCollapse.removeClass('show');
+      }
+    });
+  }
+}));
diff --git a/app/javascript/src/utils/popoverHelper.js b/app/javascript/src/utils/popoverHelper.js
deleted file mode 100644
index 68770bb450..0000000000
--- a/app/javascript/src/utils/popoverHelper.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'bootstrap/js/popover';
-
-$(() => {
-  $('[data-toggle="popover"]').popover({
-    animated: 'fade',
-    placement: 'right',
-  });
-});
diff --git a/app/javascript/src/utils/requiredField.js b/app/javascript/src/utils/requiredField.js
index 6bb826a509..6b4995e65a 100644
--- a/app/javascript/src/utils/requiredField.js
+++ b/app/javascript/src/utils/requiredField.js
@@ -17,7 +17,7 @@ export const addAsterisk = (el) => {
 
     // Else place the asterisk before the corresponding label
     } else {
-      const label = target.closest('.form-group').find('label');
+      const label = target.prev();
       if (isObject(label)) {
         $(label[0]).before(asterisk);
       }
diff --git a/app/javascript/src/utils/sectionUpdate.js b/app/javascript/src/utils/sectionUpdate.js
index d31ce3331a..a6bec9c0df 100644
--- a/app/javascript/src/utils/sectionUpdate.js
+++ b/app/javascript/src/utils/sectionUpdate.js
@@ -2,19 +2,24 @@
 export const updateSectionProgress = (id, numSecAnswers, numSecQuestions) => {
   const progressDiv = $(`#section-panel-${id}`).find('.section-status');
   progressDiv.html(`(${numSecAnswers} /  ${numSecQuestions})`);
-  const heading = progressDiv.closest('.panel-heading');
+
+  /**
+   // THIS CODE MAY BE OBSOLETE.
+   // RETAINING IT TILL SURE.
+  const heading = progressDiv.closest('.card-heading');
   if (numSecQuestions === 0) { // disable section if empty
     if (heading.parent().attr('aria-expanded') === 'true') {
       heading.parent().trigger('click');
     }
     heading.addClass('empty-section');
-    heading.closest('.panel').find(`#collapse-${id}`).hide();
-    heading.closest('.panel').find('i.fa-plus, i.fa-minus').removeClass('fa-plus').removeClass('fa-minus');
+    heading.closest('.card').find(`#collapse-${id}`).hide();
+    heading.closest('.card').find('i.fa-plus, i.fa-minus').removeClass('fa-plus').removeClass('fa-minus');
   } else if (heading.hasClass('empty-section')) { // enable section if questions re-added
     heading.removeClass('empty-section');
-    heading.closest('.panel').find('i[aria-hidden="true"]').addClass('fa-plus');
-    heading.closest('.panel').find(`#collapse-${id}`).css('display', '');
+    heading.closest('.card').find('i[aria-hidden="true"]').addClass('fa-plus');
+    heading.closest('.card').find(`#collapse-${id}`).css('display', '');
   }
+  */
 };
 
 // given a question id find the containing div
diff --git a/app/javascript/src/utils/spinner.js b/app/javascript/src/utils/spinner.js
index 9298e9f009..6102b10c76 100644
--- a/app/javascript/src/utils/spinner.js
+++ b/app/javascript/src/utils/spinner.js
@@ -5,9 +5,9 @@ const toggleSpinner = (visible) => {
 
   if (spinnerBlock.length > 0) {
     if (visible) {
-      spinnerBlock.removeClass('hidden');
+      spinnerBlock.removeClass('d-none');
     } else {
-      spinnerBlock.addClass('hidden');
+      spinnerBlock.addClass('d-none');
     }
   }
 };
diff --git a/app/javascript/src/utils/tinymce.js b/app/javascript/src/utils/tinymce.js
index 3c7eb73c47..de778da215 100644
--- a/app/javascript/src/utils/tinymce.js
+++ b/app/javascript/src/utils/tinymce.js
@@ -16,6 +16,7 @@ import 'tinymce/plugins/lists';
 import 'tinymce/plugins/autoresize';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/autolink';
 
 // Other dependencies
 import { isObject, isString, isUndefined } from './isType';
@@ -27,7 +28,7 @@ export const defaultOptions = {
   statusbar: true,
   menubar: false,
   toolbar: 'bold italic | bullist numlist | link | table',
-  plugins: 'table autoresize link advlist lists',
+  plugins: 'table autoresize link advlist lists autolink',
   browser_spellcheck: true,
   advlist_bullet_styles: 'circle,disc,square', // Only disc bullets display on htmltoword
   target_list: false,
@@ -37,7 +38,7 @@ export const defaultOptions = {
   autoresize_bottom_margin: 10,
   branding: false,
   extended_valid_elements: 'iframe[tooltip] , a[href|target=_blank]',
-  paste_as_text: true,
+  paste_as_text: false,
   paste_block_drop: true,
   paste_merge_formats: true,
   paste_tab_spaces: 4,
diff --git a/app/javascript/src/utils/tooltipHelper.js b/app/javascript/src/utils/tooltipHelper.js
index f67edd2192..cfcfae0a08 100644
--- a/app/javascript/src/utils/tooltipHelper.js
+++ b/app/javascript/src/utils/tooltipHelper.js
@@ -1,8 +1,6 @@
-import 'bootstrap/js/tooltip';
-
 $(() => {
   // When using a tooltip on a tinymce textarea, add the HTML attributes for the tooltips to
-  // the parent `<div class="form-group">`. TODO: this does not work on focus though since tinymce
+  // the parent `<div class="form-control">`. TODO: this does not work on focus though since tinymce
   // uses an iframe and we can't detect when the editor window gains focus. It only works on hover.
   //
   // If the content of the tooltip contains HTML, then add `data-html="true"` to the element
diff --git a/app/views/answers/_new_edit.html.erb b/app/views/answers/_new_edit.html.erb
index f3804a2e68..24e47f10cc 100644
--- a/app/views/answers/_new_edit.html.erb
+++ b/app/views/answers/_new_edit.html.erb
@@ -65,17 +65,17 @@
     <% elsif question.question_format.date? %>
         <%= render(partial: 'questions/new_edit_question_datefield', locals: { f: f, question: question, answer: answer, locking: locking, readonly: readonly }) %>
     <% end %>
-    <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+    <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
   </fieldset>
   <!--Example Answer area -->
   <% if template.present? && template.org.present? %>
     <% question.example_answers([base_template_org.id, template.org.id]).each do |annotation| %>
       <% if annotation.present? && annotation.org.present? && annotation.text.present? %>
-        <div class="panel panel-default">
-          <span class="label label-default">
+        <div class="card card-default">
+          <span class="badge bg-secondary">
             <%="#{annotation.org.abbreviation} "%><%=_('example answer')%>
           </span>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="display-readonly-textarea-content"><%= sanitize annotation.text %></div>
           </div>
         </div>
diff --git a/app/views/answers/_status.html.erb b/app/views/answers/_status.html.erb
index 9d25e9ef83..cb1994395f 100644
--- a/app/views/answers/_status.html.erb
+++ b/app/views/answers/_status.html.erb
@@ -6,14 +6,14 @@
   helpdesk_email = Rails.configuration.x.organisation.helpdesk_email
   email_subject = _('Plan writing error related to %{tool_name}') %{ :tool_name => tool_name }
 %>
-<span class="label label-warning status" style="display:none;" data-status="saving">
+<span class="badge bg-warning text-dark status" style="display:none;" data-status="saving">
   <%= _("Saving...Please do not refresh or go to another page!") %>
   <br><br>
   <%= sanitize(_("If you stuck on this message, please save your plan to a separate file and contact us at %{helpdesk_email} .") % {
       helpdesk_email: mail_to(helpdesk_email, helpdesk_email,subject: email_subject)
     }) %>
 </span>
-<span class="label label-danger status" style="display: none;" data-status="error-saving">
+<span class="badge bg-danger status" style="display: none;" data-status="error-saving">
 <%= sanitize(_("Sorry, we had trouble saving your data. Please contact us at %{helpdesk_email} .") % {
       helpdesk_email: mail_to(helpdesk_email, helpdesk_email,subject: email_subject)
     }) %>
@@ -21,19 +21,19 @@
 <%= _("Save your plan content to a separate file now. You will LOSE them after refreshing or closing this page.") %>
 </span>
 <% if answer.answered? %>
-    <span class="label label-info status" data-status="saved-at">
+    <span class="badge bg-info status" data-status="saved-at">
       <%= _('Answered')%> <time class="timeago" datetime="<%= answer.updated_at.iso8601 %>"></time>
       <%= _(' by %{user_name}') %{ :user_name => answer.user.name } if answer.user.present? %>
     </span><br>
     <% n_question_to_remove = answer_remove_list(answer).size %>
     <% if n_question_to_remove > 0 %>
-      <span class="label label-info status" data-status="saved-at">
+      <span class="badge bg-info status" data-status="saved-at">
         <%= _('This answer removes ') + n_question_to_remove.to_s + _(' questions from your plan.') %>
       </span>
     <% end %>
     <% email_list = email_trigger_list(answer) %>
     <% unless email_list.blank? %>
-      <span class="label label-info status" data-status="saved-at">
+      <span class="badge bg-info status" data-status="saved-at">
         <%= _('This answer triggers email(s) to ') + email_list %>
       </span>
     <% end %>
diff --git a/app/views/contact_us/contacts/_new_left.html.erb b/app/views/contact_us/contacts/_new_left.html.erb
index 3e67a5ce7b..03bd430060 100644
--- a/app/views/contact_us/contacts/_new_left.html.erb
+++ b/app/views/contact_us/contacts/_new_left.html.erb
@@ -1,7 +1,7 @@
 <%= form_for @contact, url: contacts_path do |f| %>
 <% if ContactUs.require_name %>
-    <div class="form-group">
-        <%= f.label(:name, _('Name'), class: 'control-label') %>
+    <div class="form-control mb-3">
+        <%= f.label(:name, _('Name'), class: 'form-label') %>
         <%= f.text_field(:name,
             class: "form-control",
             value: current_user.nil? ? '' : current_user.name(false),
@@ -9,8 +9,8 @@
             "aria-required": true) %>
     </div>
 <% end %>
-    <div class="form-group">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
+    <div class="form-control mb-3">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
         <%= f.email_field(:email,
             class: "form-control",
             value: current_user.nil? ? '' : current_user.email,
@@ -18,7 +18,7 @@
             "aria-required": true) %>
     </div>
 <% if ContactUs.require_subject %>
-    <div class="form-group">
+    <div class="form-control mb-3">
         <%= f.label(:subject, _('Subject')) %>
         <%= f.text_field(:subject,
             class: "form-control",
@@ -26,7 +26,7 @@
             "aria-required": true) %>
     </div>
 <% end %>
-    <div class="form-group">
+    <div class="form-control mb-3">
         <%= f.label(:message, _('Message')) %>
         <%= f.text_area(:message,
             class: "form-control",
@@ -35,10 +35,10 @@
             "aria-required": true) %>
     </div>
 <% if !user_signed_in? && Rails.configuration.x.recaptcha.enabled then %>
-    <div class="form-group">
-        <%= label_tag(nil, _('Security check')) %>
+    <div class="form-control mb-3">
+        <%= label_tag(nil, _('Security check'), class: "form-label") %>
         <%= recaptcha_tags %>
     </div>
 <% end %>
-    <%= f.button(_('Submit'), class: "btn btn-default", type: "submit") %>
+    <%= f.button(_('Submit'), class: "btn btn-secondary", type: "submit") %>
 <% end %>
diff --git a/app/views/contact_us/contacts/new.html.erb b/app/views/contact_us/contacts/new.html.erb
index 08abc711f0..407deb4fa9 100644
--- a/app/views/contact_us/contacts/new.html.erb
+++ b/app/views/contact_us/contacts/new.html.erb
@@ -1,5 +1,5 @@
 <% title _('Contact Us') %>
-<div class="row">
+<div class="row mt-5">
   <div class="col-md-12">
     <h1><%= _("Contact Us") %></h1>
     <p>
@@ -17,7 +17,7 @@
       <%= render :partial => "contact_us/contacts/new_left" %>
   </div><!-- Left column container -->
   <div class="col-md-6"><!-- Right column container -->
-    <div class="pull-right">
+    <div class="float-end">
       <%= render :partial => "contact_us/contacts/new_right" %>
     </div>
  </div><!-- Right column container -->
diff --git a/app/views/contributors/_form.html.erb b/app/views/contributors/_form.html.erb
index 4c9ef30562..e95c8d1c5f 100644
--- a/app/views/contributors/_form.html.erb
+++ b/app/views/contributors/_form.html.erb
@@ -5,32 +5,32 @@ phone_tooltip = _("Phone numbers should only include numbers and dashes ('-').")
 roles_tooltip = _("Select each role that applies to the contributor.")
 %>
 
-<div class="form-group row"><!-- name -->
+<div class="form-control mb-3 row"><!-- name -->
   <div class="col-md-12">
-    <%= form.label(:name, _("Name"), class: "control-label") %>
+    <%= form.label(:name, _("Name"), class: "form-label") %>
   </div>
   <div class="col-md-6">
     <%= form.text_field :name, class: "form-control", spellcheck: true %>
   </div>
 </div>
 
-<div class="form-group row"><!-- email -->
+<div class="form-control mb-3 row"><!-- email -->
   <div class="col-md-12">
-    <%= form.label(:email, _("Email"), class: "control-label") %>
+    <%= form.label(:email, _("Email"), class: "form-label") %>
   </div>
   <div class="col-md-4">
     <%= form.email_field :email, class: "form-control" %>
   </div>
 </div>
 
-<div class="form-group row"><!-- orcid -->
+<div class="form-control mb-3 row"><!-- orcid -->
   <% orcid = ContributorPresenter.orcid(contributor: contributor) %>
   <%= form.fields_for :identifiers, orcid do |orcid_fields| %>
     <%= orcid_fields.hidden_field :id %>
     <%= orcid_fields.hidden_field :identifier_scheme_id,
                                   value: orcid.identifier_scheme_id %>
     <div class="col-md-12">
-      <%= orcid_fields.label(:value, _("ORCID"), class: "control-label") %>
+      <%= orcid_fields.label(:value, _("ORCID"), class: "form-label") %>
     </div>
     <div class="col-md-4">
       <%= orcid_fields.text_field :value, class: "form-control" %>
@@ -39,9 +39,9 @@ roles_tooltip = _("Select each role that applies to the contributor.")
 </div>
 
 <% if Rails.configuration.x.application.display_contributor_phone_number %><!-- phone: only show if property set true -->
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
-      <%= form.label(:phone, _("Phone number"), class: "control-label") %>
+      <%= form.label(:phone, _("Phone number"), class: "form-label") %>
     </div>
     <div class="col-md-3">
       <em class="sr-only"><%= phone_tooltip %></em>
@@ -54,7 +54,7 @@ roles_tooltip = _("Select each role that applies to the contributor.")
   </div>
 <% end %>
 
-<div class="form-group row" id="contributor-org-controls"><!-- org -->
+<div class="form-control mb-3 row" id="contributor-org-controls"><!-- org -->
   <div class="col-md-8">
     <%= render partial: org_partial,
                locals: { form: form,
@@ -65,18 +65,18 @@ roles_tooltip = _("Select each role that applies to the contributor.")
   </div>
 </div>
 
-<div class="form-group row">
+<div class="form-control mb-3 row">
   <div class="col-md-12">
     <fieldset>
       <legend>
         <span class="red">*</span> <%= _("Roles") %>
       </legend>
       <p><%= roles_tooltip.html_safe %></p>
-
+        <div class="row">
       <% roles = ContributorPresenter.roles_for_radio(contributor: contributor) %>
       <% roles.each do |hash| %>
         <div class="col-md-3">
-          <div class="checkbox">
+          <div class="form-check">
             <%= form.check_box hash.keys.first.to_sym,
                                value: hash.values.first,
                                data: { toggle: "tooltip" },
@@ -86,18 +86,19 @@ roles_tooltip = _("Select each role that applies to the contributor.")
           </div>
         </div>
       <% end %>
+      </div>
     </fieldset>
   </div>
 </div>
 
-<div class="form-group row">
+<div class="form-control mb-3 row">
   <div class="col-md-6">
-    <%= form.button(_("Save"), class: "btn btn-default", type: "submit") %>
+    <%= form.button(_("Save"), class: "btn btn-secondary", type: "submit") %>
     <% unless contributor.new_record? %>
       <%= link_to _("Remove"), plan_contributor_path(plan, contributor),
-                               method: :delete, class: "btn btn-default" %>
+                               method: :delete, class: "btn btn-secondary" %>
       <% end %>
       <%= link_to _("Cancel"), plan_contributors_path(plan),
-                               class: "btn btn-default" %>
+                               class: "btn btn-secondary" %>
   </div>
 </div>
diff --git a/app/views/contributors/edit.html.erb b/app/views/contributors/edit.html.erb
index 59c4b37706..6387e19c21 100644
--- a/app/views/contributors/edit.html.erb
+++ b/app/views/contributors/edit.html.erb
@@ -10,9 +10,9 @@
 <% content_for :plan_tab_body do %>
   <h2>
     <%= _("Editing contributor") %>
-    <%= link_to _('View all contributors'), plan_contributors_path(@plan),
-                                            class: "btn btn-default pull-right" %>
   </h2>
+      <%= link_to _('View all contributors'), plan_contributors_path(@plan),
+                                            class: "btn btn-secondary float-end" %>
   <div class="row">
     <div class="col-md-12">
       <%= form_for @contributor, url: plan_contributor_path(@plan, @contributor),
diff --git a/app/views/contributors/new.html.erb b/app/views/contributors/new.html.erb
index 85c0454d2f..a4b0fd502b 100644
--- a/app/views/contributors/new.html.erb
+++ b/app/views/contributors/new.html.erb
@@ -11,7 +11,7 @@
   <h2>
     <%= _("New contributor") %>
     <%= link_to _('View all contributors'), plan_contributors_path(@plan),
-                                            class: "btn btn-default pull-right" %>
+                                            class: "btn btn-secondary float-end" %>
   </h2>
   <div class="row">
     <div class="col-md-12">
diff --git a/app/views/devise/invitations/edit.html.erb b/app/views/devise/invitations/edit.html.erb
index 586af8dff6..744c37e8e3 100644
--- a/app/views/devise/invitations/edit.html.erb
+++ b/app/views/devise/invitations/edit.html.erb
@@ -1,43 +1,43 @@
-<% title _('Create an account to view the plan') %>
-<div class="row">
-  <div class="col-md-12">
-    <h1><%= _("Create an account to view the plan") %></h1>
-    <p><%= _("You will need to create an account in order to accept your invitation to view the data management plan (DMP).") %></p>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <%= form_for resource, as: resource_name, url: invitation_path(resource_name), html: {method: :put, id: "invitation_create_account_form"} do |f| %>
-      <%= devise_error_messages! %>
-      <%= f.hidden_field :invitation_token %>
-      <div class="form-group">
-        <%= f.label(:password, _('New password'), class: 'control-label') %>
-        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'control-label') %>
-        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:firstname, _('First name'), class: 'control-label') %>
-        <%= f.text_field(:firstname, class: "form-control", "aria-required": true,
-                         spellcheck: true, value: @user.firstname) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:surname, _('Last name'), class: 'control-label') %>
-        <%= f.text_field(:surname, class: "form-control", "aria-required": true, value: @user.surname) %>
-      </div>
-      <div class="form-group" id="invite-org-controls">
-        <%= render partial: @org_partial,
-                   locals: {
-                     form: f,
-                     orgs: @all_orgs,
-                     default_org: nil,
-                     required: true
-                   } %>
-      </div>
-      <%= f.button(_('Create account'), class: "btn btn-default", type: "submit") %>
-    <% end %>
-  </div>
-</div>
+<% title _('Create an account to view the plan') %>
+<div class="row">
+  <div class="col-md-12">
+    <h1><%= _("Create an account to view the plan") %></h1>
+    <p><%= _("You will need to create an account in order to accept your invitation to view the data management plan (DMP).") %></p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <%= form_for resource, as: resource_name, url: invitation_path(resource_name), html: {method: :put, id: "invitation_create_account_form"} do |f| %>
+      <%= devise_error_messages! %>
+      <%= f.hidden_field :invitation_token %>
+      <div class="form-control mb-3">
+        <%= f.label(:password, _('New password'), class: 'form-label') %>
+        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'form-label') %>
+        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:firstname, _('First name'), class: 'form-label') %>
+        <%= f.text_field(:firstname, class: "form-control", "aria-required": true,
+                         spellcheck: true, value: @user.firstname) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:surname, _('Last name'), class: 'form-label') %>
+        <%= f.text_field(:surname, class: "form-control", "aria-required": true, value: @user.surname) %>
+      </div>
+      <div class="form-control mb-3" id="invite-org-controls">
+        <%= render partial: @org_partial,
+                   locals: {
+                     form: f,
+                     orgs: @all_orgs,
+                     default_org: nil,
+                     required: true
+                   } %>
+      </div>
+      <%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index b658a735bd..40b0805d8a 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -1,40 +1,40 @@
-<% title _('Change your password') %>
-<div class="row">
-  <div class="col-md-12">
-    <h1><%= _('Change your password') %></h1>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: {method: :put, id: "user_reset_password_form"}) do |f| %>
-      <%= devise_error_messages! %>
-      <%= f.hidden_field :reset_password_token %>
-
-      <div class="form-group">
-        <%= f.label(:password, _('New password'), class: 'control-label') %>
-        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="form-group">
-        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'control-label') %>
-        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
-      </div>
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" id="passwords_toggle" class="passwords_toggle"/><%= _('Show passwords') %>
-        </label>
-      </div>
-      
-      <% if Rails.configuration.x.recaptcha.enabled %>
-        <div class="form-group">
-          <%= label_tag(nil, _('Security check')) %>
-          <%= recaptcha_tags %>
-        </div>
-      <% end %>
-
-      <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
-
-      <%= render "devise/shared/links" %>
-    <% end %>
-  </div>
-</div>
+<% title _('Change your password') %>
+<div class="row">
+  <div class="col-md-12">
+    <h1><%= _('Change your password') %></h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: {method: :put, id: "user_reset_password_form"}) do |f| %>
+      <%= devise_error_messages! %>
+      <%= f.hidden_field :reset_password_token %>
+
+      <div class="form-control mb-3">
+        <%= f.label(:password, _('New password'), class: 'form-label') %>
+        <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-control mb-3">
+        <%= f.label(:password_confirmation, _('Password confirmation'), class: 'form-label') %>
+        <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
+      </div>
+      <div class="form-check">
+        <label class="form-check-label">
+          <input type="checkbox" id="passwords_toggle" class="passwords_toggle"/><%= _('Show passwords') %>
+        </label>
+      </div>
+      
+      <% if Rails.configuration.x.recaptcha.enabled %>
+        <div class="form-control mb-3">
+          <%= label_tag(nil, _('Security check'), class: 'form-label') %>
+          <%= recaptcha_tags %>
+        </div>
+      <% end %>
+
+      <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
+
+      <%= render "devise/shared/links" %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 3b08103ac5..925bacad5a 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,25 +1,25 @@
-<% title _('Forgot your password?') %>
-<div class="row">
-  <div class="col-md-12">
-    <% unless @user.errors[:email].empty? %>
-      <p class="alert alert-error"><%= _('The email address you entered is not registered.') %></p>
-    <% end %>
-    
-    <h1><%= _('Forgot your password?') %></h1>
-
-    <p class="left-indent"><%= _('Please enter your email below and we will send you instructions on how to reset your password.') %></p>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <%= form_for resource, as: 'user', url: user_password_path, html: {method: :post, id: "user_request_reset_password_form"} do |f| %>
-      <div class="form-group">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
-        <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
-      </div>
-
-      <%= f.button(_('Send'), class: "btn btn-default", type: "submit") %>
-    <% end %>
-  </div>
-</div>
\ No newline at end of file
+<% title _('Forgot your password?') %>
+<div class="row">
+  <div class="col-md-12">
+    <% unless @user.errors[:email].empty? %>
+      <p class="alert alert-error"><%= _('The email address you entered is not registered.') %></p>
+    <% end %>
+    
+    <h1><%= _('Forgot your password?') %></h1>
+
+    <p class="start-indent"><%= _('Please enter your email below and we will send you instructions on how to reset your password.') %></p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <%= form_for resource, as: 'user', url: user_password_path, html: {method: :post, id: "user_request_reset_password_form"} do |f| %>
+      <div class="form-control mb-3">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
+        <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
+      </div>
+
+      <%= f.button(_('Send'), class: "btn btn-secondary", type: "submit") %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/registrations/_api_token.html.erb b/app/views/devise/registrations/_api_token.html.erb
index 704be320b1..e308692b99 100644
--- a/app/views/devise/registrations/_api_token.html.erb
+++ b/app/views/devise/registrations/_api_token.html.erb
@@ -2,24 +2,24 @@
 
 <% api_wikis = Rails.configuration.x.application.api_documentation_urls %>
 <div id="api-token" class="col-xs-12">
-  <div class="form-group col-xs-8">
-    <%= label_tag(:api_token, _('Access token'), class: 'control-label') %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= label_tag(:api_token, _('Access token'), class: 'form-label') %>
     <% if user.api_token.present? %>
       <%= user.api_token %>
     <% else %>
       <%= _("Click the button below to generate an API token") %>
     <% end %>
   </div>
-  <div class="form-group col-xs-12">
-    <%= label_tag(:api_information, _('Documentation'), class: 'control-label') %>
+  <div class="form-control mb-3 col-xs-12">
+    <%= label_tag(:api_information, _('Documentation'), class: 'form-label') %>
     <br>
     <%= _('See the <a href="%{api_v0_wiki}">documentation for v0</a> for more details on the original API which includes access to statistics, the full text of plans and the ability to connect users with departments.').html_safe % { api_v0_wiki: api_wikis[:v0] } %></a>
     <br><br>
     <%= _('See the <a href="%{api_v1_wiki}">documentation for v1</a> for more details on the API that supports the <a href="%{rda_standard_url}">RDA Common metadata standard for DMPs.</a>').html_safe % { api_v1_wiki: api_wikis[:v1], rda_standard_url: 'https://github.com/RDA-DMP-Common/RDA-DMP-Common-Standard' } %></a>
   </div>
-  <div class="form-group col-xs-8">
+  <div class="form-control mb-3 col-xs-8">
     <%= link_to _("Regenerate token"),
                 refresh_token_user_path(user),
-                class: "btn btn-default", remote: true %>
+                class: "btn btn-secondary", remote: true %>
   </div>
 </div>
diff --git a/app/views/devise/registrations/_password_confirmation.html.erb b/app/views/devise/registrations/_password_confirmation.html.erb
index 26768c409f..f11b6aa782 100644
--- a/app/views/devise/registrations/_password_confirmation.html.erb
+++ b/app/views/devise/registrations/_password_confirmation.html.erb
@@ -7,22 +7,22 @@
       <div id="confirmation" class="modal-body">
         <div id="email-change">
           <p><%= _('Your email address is also your login id and therefore an important part of your account information. For your safety we require you to confirm your password to make this change.') %></p>
-          <div class="form-group">
-            <%= f.label :current_password, _('Password'), class: 'control-label', for: 'current_password' %>
+          <div class="form-control mb-3">
+            <%= f.label :current_password, _('Password'), class: 'form-label', for: 'current_password' %>
             <%= f.password_field :current_password, class: 'form-control', id: 'current_password' %>
-            <%= f.password_field :password, class: 'hide' %>
+            <%= f.password_field :password, class: 'd-none' %>
           </div>
         </div>
 
-        <div id="org-change" class="hide">
+        <div id="org-change" class="d-none">
           <p>
             <%= _('Are you sure you want to change your organisational affiliation? Doing so will remove your administrative privileges.') %>
           </p>
-          <div class="form-group">
-            <label class="control-label"><%= _('Organisation') %></label>
+          <div class="form-control mb-3">
+            <label class="form-label"><%= _('Organisation') %></label>
           </div>
-          <div class="checkbox">
-            <label>
+          <div class="form-check">
+            <label class="form-check-label">
               <input type="checkbox" id="confirm_org_change" />
               <%= _('Yes, I understand that I will lose my administrative privileges') %>
             </label>
@@ -31,10 +31,10 @@
       </div>
 
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" id="pwd-cancel-confirmation"
-                data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-secondary" id="pwd-cancel-confirmation"
+                data-bs-dismiss="modal">Cancel</button>
         <button type="button" class="btn btn-primary" id="pwd-confirmation"
-                data-dismiss="modal">Continue</button>
+                data-bs-dismiss="modal">Continue</button>
       </div>
     </div>
   </div>
diff --git a/app/views/devise/registrations/_password_details.html.erb b/app/views/devise/registrations/_password_details.html.erb
index e1afd03e9a..83159a3fed 100644
--- a/app/views/devise/registrations/_password_details.html.erb
+++ b/app/views/devise/registrations/_password_details.html.erb
@@ -4,30 +4,29 @@
 
   <%= hidden_field_tag :skip_personal_details, "true" %>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:current_password, _('Current password'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:current_password, _('Current password'), class: 'form-label') %>
     <%= f.password_field(:current_password,  class: "form-control", "aria-required": true ) %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:password, _('New password'),  class: 'control-label') %> 
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:password, _('New password'),  class: 'form-label') %> 
     <%= f.password_field(:password,  class: "form-control", "aria-required": true , id: 'user_new_password') %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:password_confirmation, _('Password confirmation'),  class: 'form-label') %>
     <%= f.password_field(:password_confirmation, class: "form-control", "aria-required": true,  ) %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <div class="checkbox">
-      <label>
-         <input type="checkbox" id="passwords_toggle" class="passwords_toggle" /><%= _('Show passwords') %>
-      </label>
+  <div class="form-control mb-3 col-sm-8">
+    <div class="form-check">
+        <input type="checkbox" id="passwords_toggle" class="passwords_toggle" />
+        <%= label_tag('passwords_toggle', _('Show passwords'), class: 'form-check-label') %>
     </div>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
   </div>
 <% end %>
diff --git a/app/views/devise/registrations/_personal_details.html.erb b/app/views/devise/registrations/_personal_details.html.erb
index 6e2ab54c67..7dd7840985 100644
--- a/app/views/devise/registrations/_personal_details.html.erb
+++ b/app/views/devise/registrations/_personal_details.html.erb
@@ -6,24 +6,24 @@
   <p class="form-control-static"><%= _('You can edit any of the details below.') %></p>
   <%= hidden_field_tag :unlink_flag, "false", id: 'unlink_flag' %>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:email, _('Email'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:email, _('Email'), class: 'form-label') %>
     <%= f.email_field(:email, class: "form-control", "aria-required": true, value: @user.email) %>
     <%= hidden_field_tag :original_email, @user.email %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:firstname, _('First name'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:firstname, _('First name'), class: 'form-label') %>
     <%= f.text_field(:firstname, class: "form-control", "aria-required": true, value: @user.firstname) %>
   </div>
 
-  <div class="form-group col-xs-8">
-    <%= f.label(:surname, _('Last name'), class: 'control-label') %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.label(:surname, _('Last name'), class: 'form-label') %>
     <%= f.text_field(:surname, class: "form-control", "aria-required": true, value: @user.surname) %>
   </div>
 
   <% org_admin = (current_user.can_org_admin? && !current_user.can_super_admin?) %>
-  <div class="form-group col-xs-8" id="profile-org-controls" <%= "data-toggle=\"tooltip\" title=\"#{_('Changing your organisation will result in the loss of your administrative privileges.')}\"" if org_admin %>>
+  <div class="form-control mb-3 col-sm-8" id="profile-org-controls" <%= "data-toggle=\"tooltip\" title=\"#{_('Changing your organisation will result in the loss of your administrative privileges.')}\"" if org_admin %>>
     <%= render partial: org_partial,
                locals: {
                  form: f,
@@ -38,9 +38,9 @@
 
     <% departments = current_user.org.departments.order(:name) %>
     <% if departments.count > 0 %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <% dept_id = current_user.department.nil? ? -1 : current_user.department.id  %>
-      <%= f.label(:department_id, _('Department or school'), class: 'control-label') %>
+      <%= f.label(:department_id, _('Department or school'), class: 'form-label') %>
       <%= select_tag("user[department_id]",
           options_from_collection_for_select(departments, "id", "name", dept_id),
           include_blank: true,
@@ -50,9 +50,9 @@
     <% end %>
 
   <% if Language.many? %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <% lang_id = current_user.language.nil? ? Language.default.id : current_user.language.id %>
-      <%= f.label(:language_id, _('Language'), class: 'control-label') %>
+      <%= f.label(:language_id, _('Language'), class: 'form-label') %>
       <%= select_tag("user[language_id]",
           options_from_collection_for_select(@languages, "id", "name", lang_id),
           class: "form-control") %>
@@ -60,22 +60,22 @@
   <% end %>
 
   <% if current_user.can_org_admin? %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <label><%= _('My privileges') %></label>
       <p><%= (current_user.can_super_admin? ? _('Super Admin') : _('Organisational Admin')) %></p>
     </div>
   <% end %>
 
   <% @identifier_schemes.each do |scheme| %>
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <% if scheme.name.downcase == 'shibboleth' %>
-        <label class='control-label'>
+        <label class='form-label'>
           <span class="aria-only" aria-hidden="false"><%= _('Institutional credentials') %></span>
         </label>
       <% elsif scheme.name.downcase == 'orcid' %>
-        <%= label_tag(:scheme_name, 'ORCID', class: 'control-label') %>
+        <%= label_tag(:scheme_name, 'ORCID', class: 'form-label') %>
       <% else %>
-        <%= label_tag(:scheme_name, scheme.name.capitalize, class: 'control-label') %>
+        <%= label_tag(:scheme_name, scheme.name.capitalize, class: 'form-label') %>
       <% end %>
 
       <div class='identifier-scheme'>
@@ -86,8 +86,8 @@
     </div>
   <% end %>
 
-  <div class="form-group col-xs-8">
-    <%= f.button(_('Save'), class: 'btn btn-default', type: "submit", id: "personal_details_registration_form_submit") %>
+  <div class="form-control mb-3 col-sm-8">
+    <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit", id: "personal_details_registration_form_submit") %>
   </div>
 
   <%= render partial: 'password_confirmation', locals: {f: f} %>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index f83d208068..487547d944 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -8,53 +8,53 @@
 <div class="row">
   <div class="col-md-12">
       <ul class="nav nav-tabs" role="tablist">
-        <li role="personal-details" class="nav-item active">
-          <a href="#personal-details" role="tab" class="nav-link"
-             aria-controls="personal-details" data-toggle="tab"><%= _('Personal Details') %></a>
+        <li role="personal-details" class="nav-item">
+          <a href="#personal-details" role="tab" class="nav-link active"
+             aria-controls="personal-details" data-bs-toggle="tab"><%= _('Personal Details') %></a>
         </li>
         <li role="password-details" class="nav-item">
           <a href="#password-details" role="tab" class="nav-link"
-             aria-controls="password-details" data-toggle="tab"><%= _('Password') %></a>
+             aria-controls="password-details" data-bs-toggle="tab"><%= _('Password') %></a>
         </li>
         <% if @user.can_use_api? %>
           <li role="api-details" class="nav-item">
             <a href="#api-details" role="tab" class="nav-link"
-               aria-controls="api-details" data-toggle="tab"><%= _('API Access') %></a>
+               aria-controls="api-details" data-bs-toggle="tab"><%= _('API Access') %></a>
           </li>
         <% end %>
         <li role="notification-preferences" class="nav-item">
           <a href="#notification-preferences" role="tab" class="nav-link"
-             aria-controls="notification-preferences" data-toggle="tab"><%= _('Notification Preferences') %></a>
+             aria-controls="notification-preferences" data-bs-toggle="tab"><%= _('Notification Preferences') %></a>
         </li>
       </ul>
 
       <div class="tab-content">
         <div id="personal-details" role="tabpanel" class="tab-pane active">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <%= render partial: 'devise/registrations/personal_details', locals: {orgs: @orgs, org_partial: @org_partial} %>
             </div>
           </div>
         </div>
         <div id="password-details" role="tabpanel" class="tab-pane">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <%= render partial: 'devise/registrations/password_details' %>
             </div>
           </div>
         </div>
         <% if @user.can_use_api? %>
           <div id="api-details" role="tabpanel" class="tab-pane">
-            <div class="panel panel-default">
-              <div class="panel-body">
+            <div class="card card-default">
+              <div class="card-body">
                 <%= render partial: 'devise/registrations/api_token', locals: { user: @user } %>
               </div>
             </div>
           </div>
         <% end %>
         <div id="notification-preferences" role="tabpanel" class="tab-pane">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <%= render partial: 'users/notification_preferences' %>
             </div>
           </div>
diff --git a/app/views/guidance_groups/_guidance_group_form.html.erb b/app/views/guidance_groups/_guidance_group_form.html.erb
index b5bd06bd25..71bd58271e 100644
--- a/app/views/guidance_groups/_guidance_group_form.html.erb
+++ b/app/views/guidance_groups/_guidance_group_form.html.erb
@@ -4,26 +4,26 @@ name_tip = _('Add an appropriate name for your guidance group. This name will te
 published_tip = _("Check this box when you are ready for guidance associated with this group to appear on user's plans.")
 subset_tip = _("If the guidance is only meant for a subset of users e.g. those in a specific college or institute, check this box.  Users will be able to select to display this subset guidance when answering questions in the 'create plan' wizard.")
 %>
- <div class="form-group col-xs-8">
-  <%= form.label(:name, _('Name'), class: "control-label") %>
+ <div class="form-control mb-3 col-xs-8">
+  <%= form.label(:name, _('Name'), class: "form-label") %>
   <%= form.text_field :name, class: "form-control", spellcheck: true, aria: { required: true },
                              data: { toggle: 'tooltip' }, title: name_tip %>
 </div>
 
  <div class='form-input col-xs-8'>
   <%= form.check_box :published, data: { toggle: 'tooltip' }, title: published_tip %>
-  <%= form.label(:published, _("Published"), class: "control-label") %>
+  <%= form.label(:published, _("Published"), class: "form-label") %>
 </div>
 <%# Only display the optional subset flag if allowed. Otherwise default to 'false' %>
 <% if allow_subset_flag %>
   <div class='form-input col-xs-8'>
     <%= form.check_box :optional_subset, data: { toggle: 'tooltip' }, title: subset_tip %>
-    <%= form.label(:optional_subset, _("Optional subset"), class: "control-label") %><%= _(' (e.g. School/ Department) ') %>
+    <%= form.label(:optional_subset, _("Optional subset"), class: "form-label") %><%= _(' (e.g. School/ Department) ') %>
   </div>
 <% else %>
   <%= form.hidden_field :optional_subset, value: "0" %>
 <% end %>
-<div class="form-group col-xs-8">
+<div class="form-control mb-3 col-xs-8">
   <%= form.hidden_field :org_id %>
   <%= form.submit _('Save'), class: "btn btn-primary" %>
   <%= link_to _('Cancel'), admin_index_guidance_path, class: "btn btn-primary", role: 'button' %>
diff --git a/app/views/guidance_groups/_index_by_theme.html.erb b/app/views/guidance_groups/_index_by_theme.html.erb
index bbaa2b991e..bae531f6c1 100644
--- a/app/views/guidance_groups/_index_by_theme.html.erb
+++ b/app/views/guidance_groups/_index_by_theme.html.erb
@@ -1,12 +1,12 @@
 <%# locals{ guidance_groups_by_theme } %>
 <% parent_id = guidance_groups_by_theme.object_id %>
-<div id="<%= parent_id %>" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="<%= parent_id %>" class="d-flex flex-column" role="tablist" aria-multiselectable="true">
   <% guidance_groups_by_theme.each_pair do |guidance_group, theme_hash| %>
     <% guidances_output = [] %>
     <%# Do not show expand/collapse all links if there is only one item in theme_hash %>
     <% if theme_hash.length > 1 %>
-    <div id="guidance-accordion-controls">
-      <div class="accordion-controls" data-parent="<%= parent_id %>">
+  <div id="guidance-accordion-controls">
+      <div class="accordion-controls px-1" data-parent="<%= parent_id %>">
         <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
           <span>|</span>
         <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
@@ -17,27 +17,24 @@
       <% question_guidance_id = "#{question.object_id}-#{guidances.object_id}" %>
       <%# if guidances with this theme have not been output %>
       <% if (guidances.map(&:id) - guidances_output).any? %>
-        <div class="panel panel-default">
-          <div
-            class="heading-button"
-            role="button"
-            data-toggle="collapse"
-            href="<%= "##{question_guidance_id}" %>"
+        <div class="accordion-item my-1 card card-default">
+          <h2 class="accordion-header" id="<%= "headingGuidance-#{question_guidance_id}" %>">
+            <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            href="<%= "#collapseGuidance-#{question_guidance_id}" %>"
             aria-expanded="false"
-            aria-controls="<%= "##{question_guidance_id}" %>">
-            <div class="panel-heading" role="tab" id="<%= "panel-heading-#{question_guidance_id}" %>">
-              <h2 class="panel-title">
+            aria-controls="<%= "#collapseGuidance-#{question_guidance_id}" %>">
                 <%= theme.title %>
-                <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-              </h2>
-            </div>
-          </div>
+            </button>
+           </h2>
           <div
-            id="<%= "#{question_guidance_id}" %>"
-            class="panel-collapse collapse"
+            id="<%= "collapseGuidance-#{question_guidance_id}" %>"
+            class="accordion-collapse collapse"
             role="tabpanel"
-            aria-labelledby="<%= "panel-heading-#{question_guidance_id}" %>">
-            <div class="panel-body">
+            aria-labelledby="<%= "headingGuidance-#{question_guidance_id}" %>">
+            <div class="accordion-body card card-body">
               <% multiple = false %>
               <% guidances.each do |guidance| %>
                 <% if multiple %>
@@ -45,8 +42,8 @@
                 <% end %>
                 <p>
                   <% unless guidances_output.include?(guidance.id) %>
-                    <div class="display-readonly-textarea-content">
-                      <%= sanitize(guidance.text) %>
+                    <div class="display-readonly-textarea-content allow-break-words">
+                      <%= sanitize guidance.text %>
                     </div>
                     <% guidances_output << guidance.id %>
                     <% multiple = true %>
diff --git a/app/views/guidance_groups/_show.html.erb b/app/views/guidance_groups/_show.html.erb
index 7154800d11..e910a57234 100644
--- a/app/views/guidance_groups/_show.html.erb
+++ b/app/views/guidance_groups/_show.html.erb
@@ -1,8 +1,8 @@
 <%# locals: { group, question, guidance_accordion_id }%>
-<div id="guidance-<%= guidance_accordion_id %>-accordion" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="guidance-<%= guidance_accordion_id %>-accordion" class="card-group" role="tablist" aria-multiselectable="true">
   <% if group.keys.length > 1 %>
     <div id="guidance-accordion-controls">
-      <div class="accordion-controls" data-parent="guidance-<%= guidance_accordion_id %>-accordion">
+      <div class="accordion-controls px-1" data-parent="guidance-<%= guidance_accordion_id %>-accordion">
         <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
         <span>|</span>
         <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
@@ -10,23 +10,22 @@
     </div>
   <% end %>
   <% group.keys.each_with_index do |theme, i| %>
-    <div class="panel panel-default">
-      <div class="heading-button" role="button" data-toggle="collapse"
-           data-parent="<%= question.id %>-guidance"
+    <div class="accordion-item card card-default">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+           data-bs-parent="#<%= question.id %>-guidance"
            href="#collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>"
            aria-expanded="false"
            aria-controls="#collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>">
 
-        <div class="panel-heading" role="tab" id="heading-<%= i %>">
-          <h2 class="panel-title">
+        <div class="card-heading" role="tab" id="heading-<%= i %>">
+          <h2 class="accordion-header">
             <%= theme %>
-            <i class="fas fa-plus pull-right" aria-hidden="true"></i>
           </h2>
         </div>
-      </div>
-      <div id="collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>" class="panel-collapse collapse" role="tabpanel"
+      </button>
+      <div id="collapse-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>" class="accordion-collapse collapse" role="tabpanel"
          aria-labelledby="heading-guidance-<%= question.id %>-<%= guidance_accordion_id %>-<%= i %>">
-        <div class="panel-body">
+        <div class="accordion-body card card-body">
           <% group[theme].each do |guidance| %>
             <%= sanitize guidance %>
           <% end %>
diff --git a/app/views/guidance_groups/admin_edit.html.erb b/app/views/guidance_groups/admin_edit.html.erb
index 6a1413d984..650a51e7f0 100644
--- a/app/views/guidance_groups/admin_edit.html.erb
+++ b/app/views/guidance_groups/admin_edit.html.erb
@@ -3,7 +3,7 @@
   <div class="col-md-12">
     <h1><%= _('Guidance group') %></h1>
     <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id),
-                                        class: 'btn btn-default pull-right' %>
+                                        class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
diff --git a/app/views/guidance_groups/admin_new.html.erb b/app/views/guidance_groups/admin_new.html.erb
index 1f99bb0a19..457c59b2a0 100644
--- a/app/views/guidance_groups/admin_new.html.erb
+++ b/app/views/guidance_groups/admin_new.html.erb
@@ -3,7 +3,7 @@
   <div class="col-md-12">
     <h1><%= _('Guidance group') %></h1>
     <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id),
-                                        class: 'btn btn-default pull-right' %>
+                                        class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
diff --git a/app/views/guidances/_guidance_display.html.erb b/app/views/guidances/_guidance_display.html.erb
index 6208b8a36d..0e74aec60f 100644
--- a/app/views/guidances/_guidance_display.html.erb
+++ b/app/views/guidances/_guidance_display.html.erb
@@ -1,44 +1,41 @@
-<!--this block displays all guidance related with the question. question is passed as an argument-->
-
-<div class="question-guidance">
-  <div class="accordion" id="<%= question.id %>-guidance">
-    <% if !question.guidance_annotation(current_user.org).nil? && question.guidance_annotation(current_user.org) != "" %>
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= question.id%>">
-            <div class="accordion_heading_text">
-            <%= question.section.phase.template.org.abbreviation %> <%= _('Guidance')%>
-            </div>
-            <span class="plus-laranja"> </span></a>
-        </div>
-        <div id="collapse-guidance-<%= question.id%>" class="guidance-accordion-body collapse">
-          <div class="accordion-inner">
-            <div class="display-readonly-textarea-content">
-               <%= sanitize question.guidance_annotation(current_user.org).text %>
-            </div>
-          </div>
-        </div>
-      </div>
-    <% end %>
-
-    <% question.guidance_for_org(current_user.org).each_pair do |title,guidance| %>
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-guidance-link" data-toggle="collapse" data-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= guidance.id%>-<%= question.id %>">
-            <div class="accordion_heading_text">
-            <%= title %>
-            </div>
-            <span class="plus-laranja"> </span></a>
-        </div>
-        <div id="collapse-guidance-<%= guidance.id%>-<%= question.id %>" class="guidance-accordion-body collapse">
-          <div class="accordion-inner">
-            <div class="display-readonly-textarea-content">
-              <%= sanitize guidance.text %>
-            </div>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-
-</div>
+<!--this block displays all guidance related with the question. question is passed as an argument-->
+<div class="question-guidance">
+  <div class="accordion" id="<%= question.id %>-guidance">
+    <% if !question.guidance_annotation(current_user.org).nil? && question.guidance_annotation(current_user.org) != "" %>
+      <div class="accordion-item w-100 my-3">
+        <h2 class="accordion-header">
+          <a class="accordion-guidance-link" data-bs-toggle="collapse" data-bs-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= question.id%>">
+            <div class="accordion_heading_text">
+              <%= question.section.phase.template.org.abbreviation %> <%= _('Guidance')%>
+            </div>
+          </h2>
+          <div id="collapse-guidance-<%= question.id%>" 
+                 class="guidance-accordion-body accordion-collapse collapse">
+            <div class="accordion-body card card-body">
+              <div class="display-readonly-textarea-content">
+                <%= sanitize question.guidance_annotation(current_user.org).text %>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% end %>
+      <% question.guidance_for_org(current_user.org).each_pair do |title,guidance| %>
+        <div class="accordion-item w-100 my-3">
+          <h2 class="accordion-header" role="tab">
+            <div class="accordion-guidance-link" data-bs-toggle="collapse" data-bs-parent="#<%= question.id %>-guidance" href="#collapse-guidance-<%= guidance.id%>-<%= question.id %>">
+              <div class="accordion_heading_text">
+                <%= title %>
+              </div>
+            </h2>
+            <div id="collapse-guidance-<%= guidance.id%>-<%= question.id %>" 
+        class="guidance-accordion-body accordion-collapse collapse">
+              <div class="accordion-body card card-body">
+                <div class="display-readonly-textarea-content">
+                  <%= sanitize guidance.text %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
diff --git a/app/views/guidances/new_edit.html.erb b/app/views/guidances/new_edit.html.erb
index 8b26be6a19..e2109152e1 100644
--- a/app/views/guidances/new_edit.html.erb
+++ b/app/views/guidances/new_edit.html.erb
@@ -14,15 +14,15 @@ end
 <div class="row">
   <div class="col-xs-12">
     <h1><%= _('Guidance') %></h1>
-    <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id), class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all guidance'), admin_index_guidance_path(current_user.org_id), class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 <div class="row">
   <div class="col-xs-12">
     <%= form_for(@guidance, url: url, html: { method: method , id: 'new_edit_guidance'}) do |f| %>
-      <div class="form-group" data-toggle="tooltip" title="<%= guidance_text_tooltip %>">
+      <div class="form-control mb-3" data-toggle="tooltip" title="<%= guidance_text_tooltip %>">
         <em class="sr-only"><%= guidance_text_tooltip %></em>
-        <%= f.label :text, class: 'control-label' %>
+        <%= f.label :text, class: 'form-label' %>
         <%= f.text_area :text, rows: 10, class: "form-control", spellcheck: true,
                         aria: { required: true } %>
       </div>
@@ -30,13 +30,13 @@ end
                  locals: { f: f, all_themes: Theme.all.order("title"), as_radio: false, required: true,
                            in_error: @guidance.errors[:themes].present?,
                            popover_message: _('Select one or more themes that are relevant to this guidance. This will display your generic organisation-level guidance, or any Schools/Departments for which you create guidance groups, across all templates that have questions with the corresponding theme tags.') } %>
-      <div class="form-group">
-        <%= f.label _('Guidance group'), for: :guidance_group_id, class: 'control-label' %>
+      <div class="form-control mb-3">
+        <%= f.label _('Guidance group'), for: :guidance_group_id, class: 'form-label' %>
         <%= f.collection_select(:guidance_group_id,
                 GuidanceGroup.where(org_id: current_user.org_id).order("name ASC"),
                 :id, :name, {prompt: false}, {multiple: false, 'data-toggle': 'tooltip', title: _('Select which group this guidance relates to.'), class: 'form-control', 'aria-required': true})%>
       </div>
-      <div class="checkbox">
+      <div class="form-check">
         <%= f.label :published do %>
           <%= f.check_box :published,
                           as: :check_boxes,
@@ -45,7 +45,7 @@ end
           <%= _('Published?') %>
         <% end %>
       </div>
-      <div class="form-group clear-fix">
+      <div class="form-control mb-3 clear-fix">
         <%= f.submit _('Save'), name: "edit_guidance_submit", class: "btn btn-primary" %>
         <%= link_to _('Cancel'), admin_index_guidance_path, class: "btn btn-primary", role: 'button' %>
       </div>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index 687ae85887..7f18a6f979 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="last">
+<span class="last px-1">
   <%= link_to_unless current_page.last?, _('Last'), url, remote: remote, class: 'paginable-action' %>
 </span>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index ad9b2ce3e7..1b588316d3 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="next">
+<span class="next px-1">
   <%= link_to_unless current_page.last?, _('Next'), url, rel: 'next', remote: remote, class: 'paginable-action' %>
 </span>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index adb0b14396..2aeab0b472 100644
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -7,6 +7,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page<%= ' current' if page.current? %>">
+<span class="page<%= ' current' if page.current? %> px-1">
   <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: 'paginable-action'} %>
 </span>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index b4d39bd219..4780356110 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="prev">
+<span class="prev px-1">
   <%= link_to_unless current_page.first?, _('Previous'), url, rel: 'prev', remote: remote, class: 'paginable-action' %>
 </span>
diff --git a/app/views/layouts/_branding.html.erb b/app/views/layouts/_branding.html.erb
index cbcaf31595..62ff6493f8 100644
--- a/app/views/layouts/_branding.html.erb
+++ b/app/views/layouts/_branding.html.erb
@@ -1,24 +1,27 @@
-<nav id="org-navbar" class="navbar navbar-default" role="navigation">
+<nav id="org-navbar" class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header" >
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#org-navbar-menu" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <% if user_signed_in? && !current_user.org.nil? %>
-        <% if current_user.org.logo.present? %>
+    <% if user_signed_in? && !current_user.org.nil? %>
+      <% if current_user.org.logo.present? %>
+        <div class="navbar-header d-sm-flex justify-content-sm-between">
           <%= image_tag(logo_url_for_org(current_user.org),
-                                alt: current_user.org.name,
-                                class: "org-logo",
-                                title: current_user.org.name) %>
+                        alt: current_user.org.name,
+                        class: "org-logo me-sm-auto",
+                        title: current_user.org.name) %>
+        </div>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                   data-bs-target="#org-navbar-menu" aria-controls="org-navbar-menu" 
+                   aria-expanded="false" aria-label="Toggle navigation">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="navbar-toggler-icon"></span>
+        </button>
         <% else %>
+         <div class="navbar-header d-sm-flex justify-content-sm-between">
           <p id="banner-org-name" class="fontsize-h4"><%= current_user.org.name %></p>
+         </div>
         <% end %>
       <% end %>
-    </div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="org-navbar-menu">
@@ -28,13 +31,13 @@
       i = 1
       %>
       <% if user_signed_in? && (links.any? || current_user.org.contact_email.present?) %>
-        <ul class="nav navbar-nav">
+        <ul class="navbar-nav me-auto">
           <% links.each do |link| %>
             <% if link.present? && i <= max_number_links %>
               <% if i.odd? %>
-                </li><li class="org-links">
+                </li><li class="org-links nav-item">
               <% end %>
-              <%= link_to link['link'], :target=>'_blank', :class => 'org-a has-new-window-popup-info' do %>
+              <%= link_to link['link'], :target=>'_blank', :class => 'org-a has-new-window-popup-info nav-link' do %>
                 <i class="fas fa-globe" aria-hidden="true">&nbsp;</i>
                 <%= link['text'].blank? ? link['link'] : link['text'] %>
                 <em class="sr-only"> (new window)</em>
@@ -44,10 +47,10 @@
             <% end %>
           <% end %>
           <% if i.odd? %>
-            </li><li class="org-links">
+            </li><li class="org-links nav-item">
           <% end %>
           <% if !current_user.org.contact_email.blank? %>
-            <%= mail_to current_user.org.contact_email, :class => 'org-a' do %>
+            <%= mail_to current_user.org.contact_email, :class => 'org-a nav-link' do %>
               <i class="fas fa-envelope" aria-hidden="true">&nbsp;</i>
               <%= current_user.org.contact_name ? current_user.org.contact_name : current_user.org.contact_email %>
             <% end %>
@@ -56,64 +59,66 @@
       <% end %>
 
       <!-- Navigation for organisation admin -->
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="navbar-nav ms-auto">
         <!-- if org admin -->
         <% if current_user.can_org_admin? %>
-          <li class="dropdown navbar-default" id="admin-dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="admin-menu" href="#">
+          <li class="dropdown" id="admin-dropdown">
+            <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" data-bs-display="static" 
+               role="button" aria-haspopup="true" aria-expanded="false" id="admin-menu" href="#">
               <i class="fas fa-lock" aria-hidden="true">&nbsp;</i>
               <%= _('Admin') %>
               <span class="caret"></span>
             </a>
-            <ul class="dropdown-menu" aria-labelledby="admin-menu">
+            <ul class="dropdown-menu dropdown-menu-end" 
+                data-bs-popper="static" aria-labelledby="admin-menu">
               <% if current_user.can_org_admin? %>
-                <li <%= 'class=active' if active_page?(org_admin_plans_path) %>>
-                  <%= link_to _('Plans'), org_admin_plans_path %>
+                <li class="nav-item <%= 'class=active' if active_page?(org_admin_plans_path) %>">
+                  <%= link_to _('Plans'), org_admin_plans_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
               <% if current_user.can_modify_templates? %>
                 <% template_path = current_user.can_super_admin? ? org_admin_templates_path : organisational_org_admin_templates_path %>
-                  <li <%= 'class=active' if active_page?(template_path) %>>
-                    <%= link_to _('Templates'), template_path %>
+                  <li class="nav-item <%= 'class=active' if active_page?(template_path) %>">
+                    <%= link_to _('Templates'), template_path, class: 'nav-link dropdown-item  px-3' %>
                   </li>
               <% end %>
               <% if current_user.can_modify_guidance? %>
-                  <li <%= 'class=active' if active_page?(admin_index_guidance_path(current_user.org_id)) %>>
-                    <%= link_to _('Guidance'), admin_index_guidance_path(current_user.org_id) %>
+                  <li class="nav-item <%= 'class=active' if active_page?(admin_index_guidance_path(current_user.org_id)) %>">
+                    <%= link_to _('Guidance'), admin_index_guidance_path(current_user.org_id), class: 'nav-link dropdown-item  px-3' %>
                   </li>
               <% end %>
               <% if current_user.can_super_admin? %>
-                  <li <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>>
-                    <%= link_to _('Organisations'), super_admin_orgs_path %>
+                  <li class="nav-item <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>">
+                    <%= link_to _('Organisations'), super_admin_orgs_path, class: 'nav-link dropdown-item  px-3' %>
                   </li>
               <% else %>
                 <% if current_user.can_modify_org_details? %>
-                    <li <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>>
-                      <%= link_to _('Organisation details'), admin_edit_org_path(current_user.org_id) %>
+                    <li class="nav-item <%= 'class=active' if active_page?(admin_edit_org_path(current_user.org_id)) %>">
+                      <%= link_to _('Organisation details'), admin_edit_org_path(current_user.org_id), class: 'nav-link dropdown-item  px-3' %>
                     </li>
                 <% end %>
               <% end %>
               <% if current_user.can_grant_permissions? %>
-                  <li <%= 'class=active' if active_page?(admin_index_users_path) %>>
-                    <%= link_to _('Users'), admin_index_users_path, class: 'main_nav_last_li' %>
+                  <li class="nav-item <%= 'class=active' if active_page?(admin_index_users_path) %>">
+                    <%= link_to _('Users'), admin_index_users_path, class: 'main_nav_last_li nav-link dropdown-item  px-3' %>
                   </li>
               <% end %>
               <% if current_user.can_super_admin? %>
-                <li <%= 'class=active' if active_page?(super_admin_themes_path) %>>
-                  <%= link_to(_('Themes'), super_admin_themes_path) %>
+                <li class="nav-item <%= 'class=active' if active_page?(super_admin_themes_path) %>">
+                  <%= link_to _('Themes'), super_admin_themes_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
               <% if current_user.can_org_admin? || current_user.can_super_admin? %>
-                <li <%= 'class=active' if active_page?(usage_index_path) %>>
-                  <%= link_to(_('Usage'), usage_index_path) %>
+                <li class="nav-item <%= 'class=active' if active_page?(usage_index_path) %>">
+                  <%= link_to _('Usage'), usage_index_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
               <% if current_user.can_super_admin? %>
-                <li <%= 'class=active' if active_page?(super_admin_api_clients_path) %>>
-                  <%= link_to(_('Api Clients'), super_admin_api_clients_path) %>
+                <li class="nav-item <%= 'class=active' if active_page?(super_admin_api_clients_path) %>">
+                  <%= link_to _('Api Clients'), super_admin_api_clients_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
-                <li <%= 'class=active' if active_page?(super_admin_notifications_path) %>>
-                  <%= link_to _('Notifications'), super_admin_notifications_path %>
+               <li class="nav-item <%= 'class=active' if active_page?(super_admin_notifications_path) %>">
+                  <%= link_to _('Notifications'), super_admin_notifications_path, class: 'nav-link dropdown-item  px-3' %>
                 </li>
               <% end %>
             </ul>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index 753406faa3..85d2060a31 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -5,27 +5,27 @@
 %>
 
 <!-- footer container -->
-<div id="footer-navbar" class="navbar-inverse navbar-fixed-bottom" role="navigation">
+<div id="footer-navbar" class="navbar navbar-expand-md navbar-branding navbar-fixed-bottom" role="navigation">
   <div class="container-fluid">
-    <ul class="nav navbar-nav">
-      <li><%= link_to sanitize("&copy; 2004 - #{Time.now.year} #{Rails.configuration.x.organisation.name}"), "#{Rails.configuration.x.organisation.url}"%></li>
-      <li>•</li>
-      <li><a href="<%= about_us_path %>"><%= _('About') %></a></li>
-      <li><a href="<%= contact_us %>"><%= _('Contact us') %></a></li>
-      <li><a href="<%= terms_path %>"><%= _('Terms of use') %></a></li>
-      <li><a href="<%= privacy_path %>"><%= _('Privacy statement') %></a></li>
-      <li><a href="https://github.com/DMPRoadmap/roadmap"><%= _('GitHub') %></a></li>
+    <ul class="navbar-nav">
+      <li class="nav-item"><%= link_to sanitize("&copy; 2004 - #{Time.now.year} #{Rails.configuration.x.organisation.name}"), "#{Rails.configuration.x.organisation.url}", class: 'nav-link' %></li>
+      <li class="nav-item">•</li>
+      <li class="nav-item"><a class="nav-link" href="<%= about_us_path %>"><%= _('About') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="<%= contact_us %>"><%= _('Contact us') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="<%= terms_path %>"><%= _('Terms of use') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="<%= privacy_path %>"><%= _('Privacy statement') %></a></li>
+      <li class="nav-item"><a class="nav-link" href="https://github.com/DMPRoadmap/roadmap"><%= _('GitHub') %></a></li>
     </ul>
-    <ul class="nav navbar-nav navbar-right">
-      <li>
-        <%= link_to("http://www.cdlib.org/services/uc3/", title: "University of California Curation Center", target: '_blank', class: 'has-new-window-popup-info')  do %>
-          <%= image_tag("uc3_logo_white.png", class: "img-responsive", alt: 'University of California Curation Center (opens in a new window)') %>
+    <ul class="navbar-nav navbar-right">
+      <li class="nav-item">
+        <%= link_to("http://www.cdlib.org/services/uc3/", title: "University of California Curation Center", target: '_blank', class: 'nav-link has-new-window-popup-info')  do %>
+          <%= image_tag("uc3_logo_white.png", class: "img-fluid", alt: 'University of California Curation Center (opens in a new window)') %>
           <span class="new-window-popup-info"><%= _('Opens in new window') %></span>
         <% end %>
       </li>
-      <li>
-        <%= link_to("http://www.dcc.ac.uk/", title: "Digital Curation Centre", target: '_blank', class: 'has-new-window-popup-info')  do %>
-          <%= image_tag("dcc_logo_white.png", class: "img-responsive", alt: 'Digital Curation Centre (opens in a new window)') %>
+      <li class="nav-item">
+        <%= link_to("http://www.dcc.ac.uk/", title: "Digital Curation Centre", target: '_blank', class: 'nav-link has-new-window-popup-info')  do %>
+          <%= image_tag("dcc_logo_white.png", class: "img-fluid", alt: 'Digital Curation Centre (opens in a new window)') %>
           <span class="new-window-popup-info"><%= _('Opens in new window') %></span>
         <% end %>
       </li>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 293f92465e..5520d6c6a2 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,5 +1,5 @@
-<!-- header information (bootstrap 3 column layout) -->
-<div class="main-nav">
+<!-- header information (bootstrap column layout) -->
+<div class="main-nav pb-3">
   <%= render partial: "layouts/navigation" %>
 </div>
 <div class="org-branding">
diff --git a/app/views/layouts/_navigation.html.erb b/app/views/layouts/_navigation.html.erb
index 95e0798168..32326ccfae 100644
--- a/app/views/layouts/_navigation.html.erb
+++ b/app/views/layouts/_navigation.html.erb
@@ -1,63 +1,71 @@
-<nav id="app-navbar" class="navbar navbar-inverse">
+<nav id="app-navbar" class="navbar navbar-expand-md navbar-branding">
   <div class="container-fluid" >
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-menu" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
+    <div class="navbar-header d-sm-flex justify-content-sm-between">
+      <!-- Brand and toggle get grouped for better mobile display -->
       <%= link_to(image_tag("logo.png",
                             alt: "#{ApplicationService.application_name} #{_('logo')}",
-                            class: "app-logo",
+                            class: "app-logo me-sm-auto",
                             title: ApplicationService.application_name),
                   root_path) %>
     </div>
+   
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
+            data-bs-target="#app-navbar-menu" aria-controls="app-navbar-menu" 
+            aria-expanded="false" aria-label="Toggle navigation">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="navbar-toggler-icon"></span>
+    </button>
+
 
     <!-- Collect the nav links, forms, and other content for toggling -->
+  
     <div class="collapse navbar-collapse" id="app-navbar-menu">
-      <ul class="nav navbar-nav">
+      <ul class="navbar-nav">
         <% if user_signed_in? %>
-          <li <%= 'class=active' if active_page?(plans_path, true)%>>
-            <%= link_to _('My Dashboard'), plans_path %>
+          <li class="nav-item <%= ' active' if active_page?(plans_path, true) %>">
+            <%= link_to _('My Dashboard'), plans_path, class: 'nav-link' %>
           </li>
-          <li <%= 'class=active' if active_page?(new_plan_path, true) %>>
-            <%= link_to _('Create plans'), new_plan_path %>
+          <li class="nav-item <%= ' active' if active_page?(new_plan_path, true) %>">
+            <%= link_to _('Create plans'), new_plan_path, class: 'nav-link' %>
           </li>
-            <li class="dropdown <%= 'active' if active_page?(public_plans_path, true) || active_page?(public_templates_path, true) %>" id="reference-dropdown">
-              <a href="#" class="dropdown-toggle" role="button" id="reference-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-book" aria-hidden="true">&nbsp;</i>
-                <%= _("Reference") %>
-                <span class="caret"></span>
-              </a>
-              <ul class="dropdown-menu inverse-dropdown" aria-labelledby="reference-menu">
-                <li <%= 'class=active' if active_page?(public_plans_path) %>>
-                  <%= link_to _('Public DMPs'), public_plans_path %>
-                </li>
-                <li <%= 'class=active' if active_page?(public_templates_path) %>>
-                  <%= link_to _('DMP Templates'), public_templates_path %>
-              </ul>
+          <li class="dropdown <%= ' active' if active_page?(public_plans_path, true) || active_page?(public_templates_path, true) %>" id="reference-dropdown">
+            <a href="#" class="dropdown-toggle nav-link" role="button" id="reference-menu" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
+              <i class="fas fa-book" aria-hidden="true">&nbsp;</i>
+              <%= _("Reference") %>
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end" 
+                data-bs-popper="static" aria-labelledby="reference-menu">
+              <li class="nav-item <%= ' active' if active_page?(public_plans_path) %>">
+                <%= link_to _('Public DMPs'), public_plans_path, class: 'dropdown-item  px-3' %>
+              </li>
+              <li class="nav-item <%= ' active' if active_page?(public_templates_path) %>">
+                <%= link_to _('DMP Templates'), public_templates_path, class: 'dropdown-item  px-3' %>
+              </li>
+            </ul>
           </li>
         <% else %>
-          <li <%= 'class=active' if active_page?(root_path, true) || active_page?(plans_path, true) %>>
-            <%= link_to _('Home'), root_path %>
+          <li class="nav-item <%= ' active' if active_page?(root_path, true) || active_page?(plans_path, true) %>">
+            <%= link_to _('Home'), root_path, class: 'nav-link' %>
           </li>
-          <li <%= 'class=active' if active_page?(public_plans_path, true) %>>
-            <%= link_to _('Public DMPs'), public_plans_path %>
+          <li class="nav-item <%= ' active' if active_page?(public_plans_path, true) %>">
+            <%= link_to _('Public DMPs'), public_plans_path, class: 'nav-link' %>
           </li>
-          <li <%= 'class=active' if active_page?(public_templates_path, true) %>>
-            <%= link_to _('DMP Templates'), public_templates_path %>
+          <li class="nav-item <%= ' active' if active_page?(public_templates_path, true) %>">
+            <%= link_to _('DMP Templates'), public_templates_path, class: 'nav-link' %>
           </li>
         <% end %>
         <!-- help page -->
-        <li <%= 'class=active' if active_page?(help_path, true) %>>
-          <%= link_to _('Help'), help_path %>
+        <li class="nav-item <%= ' active' if active_page?(help_path, true) %>">
+          <%= link_to _('Help'), help_path, class: 'nav-link' %>
         </li>
       </ul>
-      <ul class="nav navbar-nav navbar-right">
-          <%= render "layouts/signin_signout" %>
+
+      <ul class="navbar-nav ms-auto">
+        <%= render "layouts/signin_signout" %>
       </ul>
+      
+      
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
 </nav>
diff --git a/app/views/layouts/_paginable.html.erb b/app/views/layouts/_paginable.html.erb
index 5afb3f7c56..17393fc135 100644
--- a/app/views/layouts/_paginable.html.erb
+++ b/app/views/layouts/_paginable.html.erb
@@ -26,7 +26,7 @@
     </div>
     <div class="row">
       <div class="col-md-12">
-        <div class="pull-left">
+        <div class="float-start">
           <% if total > Kaminari.config.default_per_page %>
             <% if searchable? %>
                 <ul class="list-inline">
@@ -50,7 +50,7 @@
             <% end %>
           <% end %>
         </div>
-        <div class="pull-right">
+        <div class="float-end">
           <% if paginable? %>
               <%= paginate(scope, params: paginable_params, remote: remote) %>
           <% end %>
diff --git a/app/views/layouts/_signin_signout.html.erb b/app/views/layouts/_signin_signout.html.erb
index 56ad183de7..98be5cc4b8 100644
--- a/app/views/layouts/_signin_signout.html.erb
+++ b/app/views/layouts/_signin_signout.html.erb
@@ -1,15 +1,21 @@
 <!-- language dropdown -->
 <% if Language.many? %>
-  <li class="dropdown" id="change-language">
-    <a href="#" class="dropdown-toggle" role="button" id="language-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <li class="dropdown nav-item" id="change-language">
+    <a href="#" class="dropdown-toggle nav-link" role="button" id="language-menu" data-bs-toggle="dropdown"
+       data-bs-display="static" aria-haspopup="true" aria-expanded="false">
       <i class="fas fa-language" aria-hidden="true">&nbsp;</i>
       <%= _('Language') %>
       <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu inverse-dropdown" aria-labelledby="language-menu">
+    <ul class="dropdown-menu dropdown-menu-end" 
+        data-bs-popper="static" aria-labelledby="language-menu">
       <% languages.each do |l| %>
-        <li <%= 'class=active' if I18n.locale == l.abbreviation %>>
-          <%= link_to l.name, locale_path(l.abbreviation), method: :patch %>
+        <li>
+          <% if I18n.locale == l.abbreviation %>
+            <%= link_to l.name, locale_path(l.abbreviation), method: :patch, class: 'active dropdown-item  px-3' %>
+          <% else %>
+            <%= link_to l.name, locale_path(l.abbreviation), method: :patch, class: 'dropdown-item  px-3' %>
+          <% end %>
         </li>
       <% end %>
     </ul>
@@ -18,25 +24,26 @@
 
 <!-- Sign in / out -->
 <% if user_signed_in? %>
-  <li class="dropdown" id="signin-signout">
-    <a href="#" class="dropdown-toggle" role="button" id="user-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <li class="dropdown nav-item" id="signin-signout">
+    <a href="#" class="dropdown-toggle nav-link" role="button" id="user-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <i class="fas fa-user" aria-hidden="true">&nbsp;</i>
       <%= current_user.name(false) %>
       <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu inverse-dropdown" aria-labelledby="user-menu">
+    <ul class="dropdown-menu dropdown-menu-end" 
+        data-bs-popper="static" aria-labelledby="user-menu">
       <li>
-        <%= link_to '<i class="fas fa-square-pen" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Edit profile'), edit_user_registration_path %>
+        <%= link_to '<i class="fas fa-square-pen" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Edit profile'), edit_user_registration_path, class: 'dropdown-item' %>
       </li>
       <li>
-        <%= link_to '<i class="fas fa-right-to-bracket" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Logout'), destroy_user_session_path, method: :delete %>
+        <%= link_to '<i class="fas fa-right-to-bracket" aria-hidden="true">&nbsp;</i>&nbsp;'.html_safe + _('Logout'), destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
       </li>
     </ul>
   </li>
 <% else %>
   <% if !active_page?(root_path, true) %>
     <li>
-      <a href="<%= root_path %>">
+      <a href="<%= root_path %>" class="nav-link">
         <i class="fas fa-right-to-bracket" aria-hidden="true">&nbsp;</i>
         <%= _('Sign in') %>
       </a>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index fe98bb3b93..687385e6a9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -86,7 +86,7 @@
       <main class="container" id="maincontent">
         <div id="notification-area"
              class="notification-area alert <%= has_alert ? 'alert-warning ' : 'alert-info ' %>
-                    <%= (has_alert or has_notice) ? 'show' : 'hide' %>"
+                    <%= (has_alert or has_notice) ? 'd-block' : 'd-none' %>"
              role="<%= (has_notice ? 'status' : (has_alert ? 'alert' : '')) %>">
           <i class="fas <%= has_alert ? ' fa-circle-xmark' : ' fa-circle-check' %>" aria-hidden="true"></i>
           <span class="aria-only"><%= has_alert ? _('Error:') : _('Notice:') %></span>
@@ -97,11 +97,9 @@
         <%= yield %>
 
 
-        <%# Generic UJS/Ajax spinner. Bootstrap 5+ has built in spinner for this class, so update when
-            we upgrade to remove the img tag %>
-        <div class="spinner-border hidden" role="status">
-          <%spinner_msg = _("Loading...") %>
-          <%= image_tag("spinner.gif", alt: spinner_msg) %>
+        <%# Updated with Bootstrap 5 built in spinner %>
+        <div class="spinner-border d-none" role="status">
+          <span class="visually-hidden"><%spinner_msg = _("Loading...") %></span>
         </div>
 
       </main>
diff --git a/app/views/layouts/modal_search/_form.html.erb b/app/views/layouts/modal_search/_form.html.erb
index cf4501d08b..f0cca4c6c9 100644
--- a/app/views/layouts/modal_search/_form.html.erb
+++ b/app/views/layouts/modal_search/_form.html.erb
@@ -32,30 +32,29 @@ no_results_msg = _("No results matched your filter criteria.")
      aria-labelledby="modal-search-label"
      aria-hidden="true">
 
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
 
       <div class="modal-header">
-        <%= button_tag "X", type: "button", class: "close",
-                       data: { dismiss: "modal" },
-                       aria: { label: _("Close") } %>
-
-        <h3 id="modal-search-label" class="modal-title">
+              <h3 id="modal-search-label" class="modal-title">
           <%= _("%{topic} search") % { topic: label } %>
         </h3>
+
+        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
+
       </div>
 
       <div class="modal-body">
         <%# Search filters %>
         <%= form_with model: model_instance, url: search_path, method: search_method, local: false,
                       id: "modal-search-#{namespace}-filters" do |f| %>
-          <div class="form-group row">
-            <div class="col-md-10">
+          <div class="form-control mb-3 row">
+            <div class="d-flex justify-content-between col-md-10">
               <%= yield :"filters-#{namespace}" %>
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="form-control mb-3 row">
             <div class="col-md-10">
               <span class="col-md-10">
                 <%= f.text_field :search_term,
@@ -65,7 +64,7 @@ no_results_msg = _("No results matched your filter criteria.")
               </span>
               <div class="col-md-3">
                 <%= f.button _("Apply filter(s)"),
-                             class: "btn btn-default",
+                             class: "btn btn-secondary",
                              type: "submit" %>
               </div>
             </div>
@@ -73,18 +72,12 @@ no_results_msg = _("No results matched your filter criteria.")
         <% end %>
 
         <%# Search Results %>
-        <div id="modal-search-<%= namespace %>-results" class="form-group row modal-search-results">
+        <div id="modal-search-<%= namespace %>-results" class="form-control mb-3 row modal-search-results">
           <div class="col-md-12">
             <div class="col-md-12"><%= no_results_msg %></div>
           </div>
         </div>
       </div>
-
-      <div class="modal-footer">
-        <%= button_tag _("Close"), type: "button", class: "close",
-                       data: { dismiss: "modal" } %>
-      </div>
-
     </div>
   </div>
 </div>
diff --git a/app/views/layouts/modal_search/_result.html.erb b/app/views/layouts/modal_search/_result.html.erb
index b7c4a5f736..2240fbafae 100644
--- a/app/views/layouts/modal_search/_result.html.erb
+++ b/app/views/layouts/modal_search/_result.html.erb
@@ -18,10 +18,10 @@ Locals:
     <%= result[item_name_attr] %>
 
     <%= link_to _("Select"), '#',
-                class: "modal-search-result-selector #{selected ? 'hidden' : ''}",
+                class: "modal-search-result-selector #{selected ? 'd-none' : ''}",
                 title: _("Click to select %{item_name}") % { item_name: title } %>
     <%= link_to _("Remove"), '#',
-                class: "modal-search-result-unselector #{selected ? '' : 'hidden'}",
+                class: "modal-search-result-unselector #{selected ? '' : 'd-none'}",
                 title: _("Click to remove %{item_name}") % { item_name: title } %>
   </div>
 
diff --git a/app/views/layouts/modal_search/_results.html.erb b/app/views/layouts/modal_search/_results.html.erb
index c237b76644..f0fc332237 100644
--- a/app/views/layouts/modal_search/_results.html.erb
+++ b/app/views/layouts/modal_search/_results.html.erb
@@ -24,7 +24,7 @@ no_results_msg = _("No results matched your filter criteria.")
   <% if results.any? %>
     <div class="col-md-12 modal-search-results-pagination">
       <%= page_entries_info results %>
-      <span class="float-right">
+      <span class="float-end">
         <%= paginate results, remote: true, method: :post %>
       </span>
     </div>
@@ -49,7 +49,7 @@ no_results_msg = _("No results matched your filter criteria.")
 <% if results.any? && !selected %>
   <div class="col-md-9">&nbsp;</div>
   <div class="col-md-3">
-    <span class="float-right">
+    <span class="float-end">
       <%= paginate results, remote: true, method: :post %>
     </span>
   </div>
diff --git a/app/views/layouts/modal_search/_selections.html.erb b/app/views/layouts/modal_search/_selections.html.erb
index 2ace4f1fec..4ddc1587d7 100644
--- a/app/views/layouts/modal_search/_selections.html.erb
+++ b/app/views/layouts/modal_search/_selections.html.erb
@@ -29,7 +29,7 @@ locals:
 </div>
 <div class="col-md-12">
   <div class="col-md-12">
-    <%= button_tag button_label, type: "button", class: "btn btn-default",
-                   data: { toggle: "modal", target: "#modal-search-#{namespace}" } %>
+    <%= button_tag button_label, type: "button", class: "btn btn-secondary",
+                   'data-bs-toggle' => "modal", 'data-bs-target' => "#modal-search-#{namespace}" %>
   </div>
 </div>
diff --git a/app/views/notes/_archive.html.erb b/app/views/notes/_archive.html.erb
index 2075a78f69..f6d7afd2aa 100644
--- a/app/views/notes/_archive.html.erb
+++ b/app/views/notes/_archive.html.erb
@@ -6,9 +6,9 @@
     <%= render partial: "notes/show", locals: { note: note }, formats: [:html] %>
 
     <p><%= _('Are you sure you want to remove this comment?')%></p>
-    <div class="pull-right">
-      <%= f.button(_('Remove'), class: "btn btn-default", type: "submit") %>
-      <%= f.button(_('Cancel'), class: "btn btn-default", type: "button") %>
+    <div class="float-end">
+      <%= f.button(_('Remove'), class: "btn btn-secondary", type: "submit") %>
+      <%= f.button(_('Cancel'), class: "btn btn-secondary", type: "button") %>
     </div>
   <% end %>
 <% end %>
\ No newline at end of file
diff --git a/app/views/notes/_edit.html.erb b/app/views/notes/_edit.html.erb
index ce86331dec..13768990ba 100644
--- a/app/views/notes/_edit.html.erb
+++ b/app/views/notes/_edit.html.erb
@@ -1,14 +1,14 @@
 <%# locals: { note } %>
 <% if !note.nil? %>
     <%= form_for(note, url: note_path(note), method: :put) do |f| %>
-        <div class="form-group">
+        <div class="form-control mb-3">
             <%= f.label(:text, _('Edit comment to share with collaborators')) %>
             <%= f.text_area(:text, class: 'form-control', id: "note-#{note.id}",
                             spellcheck: true) %>
         </div>
-        <div class="pull-right">
-            <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
-            <%= f.button(_('Cancel'), class: "btn btn-default", type: "button") %>
+        <div class="float-end">
+            <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
+            <%= f.button(_('Cancel'), class: "btn btn-secondary", type: "button") %>
         </div>
     <% end %>
 <% end %>
diff --git a/app/views/notes/_layout.html.erb b/app/views/notes/_layout.html.erb
index 814e5082e3..0eed9eb069 100644
--- a/app/views/notes/_layout.html.erb
+++ b/app/views/notes/_layout.html.erb
@@ -1,7 +1,7 @@
 <%# locals: { plan, question, answer } %>
 <% notes = answer.non_archived_notes %>
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card card-default">
+  <div class="card-body">
     <div class="row">
       <div class="col-md-12">
         <%= render partial: "/notes/list", locals: { question_id: question.id, notes: notes, plan: plan }, formats: [:html] %>
@@ -17,8 +17,8 @@
       </div>
       <div class="row">
         <div class="col-md-12">
-          <div class="pull-right">
-            <%= link_to(_('Add Comment'), "#note_new#{question.id}", class: "btn btn-default note_new_link", role: "button", style: "visibility: hidden") %>
+          <div class="float-end">
+            <%= link_to(_('Add Comment'), "#note_new#{question.id}", class: "btn btn-secondary note_new_link", role: "button", style: "visibility: hidden") %>
           </div>
         </div>
       </div>
diff --git a/app/views/notes/_list.html.erb b/app/views/notes/_list.html.erb
index 8c8e5f6149..e1e567f4b3 100644
--- a/app/views/notes/_list.html.erb
+++ b/app/views/notes/_list.html.erb
@@ -5,11 +5,11 @@
             <div class="col-md-12">
                 <ul class="list-group">
                     <li class="list-group-item">
-                        <div class="pull-left allow-break-words"><!-- note info -->
+                        <div class="float-start allow-break-words"><!-- note info -->
                             <%= render partial: "notes/show", locals: {note: note }, formats: [:html] %>
                         </div>
                         <% if plan.commentable_by?(current_user.id) %>
-                        <div class="pull-right"><!-- note actions -->
+                        <div class="float-end"><!-- note actions -->
                             <ul class="list-inline">
                                   <% if current_user.id == note.user_id %>
                                       <li><%= link_to(_('Edit'), "#note_edit#{note.id}", class: 'note_edit_link') %></li>
diff --git a/app/views/notes/_new.html.erb b/app/views/notes/_new.html.erb
index fc1e90abf0..336c5581a5 100644
--- a/app/views/notes/_new.html.erb
+++ b/app/views/notes/_new.html.erb
@@ -4,12 +4,12 @@
   <%= f.hidden_field :question_id, value: question.id %>
   <%= f.hidden_field :answer_id, value: answer.id %>
   <%= f.hidden_field :plan_id, value: plan.id %>
-  <div class="form-group">
+  <div class="form-control mb-3">
     <%= f.label(:text, _('Add comments to share with collaborators')) %>
     <%= f.text_area(:text, class: 'form-control note', id: "note-#{question.id}",
                     spellcheck: true) %>
   </div>
-  <div class="pull-right">
-    <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+  <div class="float-end">
+    <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
   </div>
 <% end %>
diff --git a/app/views/notes/_show.html.erb b/app/views/notes/_show.html.erb
index 3a0fd7101d..95eca19594 100644
--- a/app/views/notes/_show.html.erb
+++ b/app/views/notes/_show.html.erb
@@ -8,7 +8,7 @@
           </div>
         </li>
         <li>
-            <span class="label label-info">
+            <span class="badge bg-info">
                 <%= "#{user.name} " %> <time class="timeago" datetime="<%= note.updated_at.iso8601 %>"></time>
             </span>
         </li>
diff --git a/app/views/org_admin/annotations/_form.html.erb b/app/views/org_admin/annotations/_form.html.erb
index 12489bdb36..93e03e94f4 100644
--- a/app/views/org_admin/annotations/_form.html.erb
+++ b/app/views/org_admin/annotations/_form.html.erb
@@ -1,7 +1,7 @@
 <fieldset class="annotation_fields" id="<%= unique_dom_id(f.object, "fields") %>">
-  <div class="form-group col-md-10">
+  <div class="form-control mb-3 col-md-10">
     <% lbl = f.object.type.humanize.downcase == 'example answer' ? _('Example answer') : _('Guidance') %>
-    <%= f.label(:type, lbl, class: "control-label") %>
+    <%= f.label(:type, lbl, class: "form-label") %>
     <div data-toggle="tooltip" title="<%= tooltip_for_annotation_text(f.object) %>">
       <em class="sr-only"><%= tooltip_for_annotation_text(f.object) %></em>
       <%= f.text_area(:text, class: 'question', spellcheck: true,
diff --git a/app/views/org_admin/conditions/_add.html.erb b/app/views/org_admin/conditions/_add.html.erb
index 37cf0825d0..85126c6dd6 100644
--- a/app/views/org_admin/conditions/_add.html.erb
+++ b/app/views/org_admin/conditions/_add.html.erb
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-md-12 mt-2">
     <%= link_to _('Add condition'), new_org_admin_question_condition_path(question_id: question.id, condition_no: condition_no), remote: true, class: "add-condition" %> 
   </div>
 </div>
diff --git a/app/views/org_admin/conditions/_container.html.erb b/app/views/org_admin/conditions/_container.html.erb
index bd54fbb5f3..03e4b96af6 100644
--- a/app/views/org_admin/conditions/_container.html.erb
+++ b/app/views/org_admin/conditions/_container.html.erb
@@ -1,13 +1,13 @@
 <div id="condition-container">
-  <div class="condition-list" data-loaded="false">
+  <div class="condition-list" data-bs-loaded="false">
     <div class="row">
-      <div class="col-md-3 bold">
+      <div class="col-md-3 mb-2 bold">
         <%= label(:text, _('Option'), class: "control-label")%>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 mb-2">
         <%= label(:text, _('Action'), class: "control-label") %>
       </div>
-      <div class="col-md-3 bold">
+      <div class="col-md-3 mb-2 bold">
         <%= _('Remove')%>
       </div>
       <div class="col-md-3">
diff --git a/app/views/org_admin/conditions/_form.html.erb b/app/views/org_admin/conditions/_form.html.erb
index 45c67d2f2c..8a48a3fc5c 100644
--- a/app/views/org_admin/conditions/_form.html.erb
+++ b/app/views/org_admin/conditions/_form.html.erb
@@ -1,4 +1,4 @@
-<div class="row condition-partial">
+<div class="row condition-partial mb-3">
   <%
    action_type_arr = [["removes", :remove], ["adds notification", :add_webhook]]
    name_start = "conditions[]condition_" + condition_no.to_s
@@ -10,16 +10,16 @@
       grouped_options_for_select(remove_question_collection)
     multiple = (question.question_format.multiselectbox? || question.question_format.checkbox?)
   %>
-  <div class="col-md-3">
+  <div class="col-md-3 pe-2">
     <%= select_tag(:question_option, options_from_collection_for_select(question.question_options.sort_by(&:number), "id", "text",
-        condition_exists ? condition[:question_option_id] : question.question_options.sort_by(&:number)[0]), {class: 'selectpicker regular', 'data-style': 'bg-white px-4 py-3', multiple: multiple, name: name_start + "[question_option][]"}) %>
+        condition_exists ? condition[:question_option_id] : question.question_options.sort_by(&:number)[0]), {class: 'form-select regular', 'data-bs-style': 'dropdown-toggle bg-white px-4 py-3', name: name_start + "[question_option][]"}) %>
   </div>
-  <div class="col-md-3">
-    <%= select_tag(:action_type, options_for_select(action_type_arr, type_default), {name: name_start + "[action_type]", class: 'action-type selectpicker narrow', 'data-style': 'bg-white px-4 py-3'}) %>
+  <div class="col-md-3 pe-2">
+    <%= select_tag(:action_type, options_for_select(action_type_arr, type_default), {name: name_start + "[action_type]", class: 'action-type form-select narrow', 'data-bs-style': 'dropdown-toggle bg-white px-4 py-3'}) %>
   </div>
-  <div class="col-md-3">
+  <div class="col-md-3 pe-2">
     <div class="remove-dropdown">
-      <%= select_tag(:remove_question_id, remove_question_group, {name: name_start + "[remove_question_id][]", class: 'selectpicker regular', multiple: true, 'data-style': 'bg-white px-4 py-3'}) %>
+      <%= select_tag(:remove_question_id, remove_question_group, {name: name_start + "[remove_question_id][]", class: 'form-select regular', multiple: true, 'data-bs-style': 'dropdown-toggle bg-white px-4 py-3'}) %>
     </div>
     <div class="webhook-replacement display-off my-auto text-center">
       <%= link_to _('Edit email'), '#' %>
diff --git a/app/views/org_admin/conditions/_webhook_form.html.erb b/app/views/org_admin/conditions/_webhook_form.html.erb
index 8230e61b63..8871af47c4 100644
--- a/app/views/org_admin/conditions/_webhook_form.html.erb
+++ b/app/views/org_admin/conditions/_webhook_form.html.erb
@@ -1,44 +1,42 @@
 <div class="modal fade" id= "<%= condition_no %>modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
   aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header text-center">
         <h4 class="modal-title w-100 font-weight-bold"><%= _('Send email') %></h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Close') %>"></button>
       </div>
       <div class="modal-body mx-3">
         <div class="md-form mb-5 prefix grey-text">
           <i class="fa-solid fa-user"></i>
-          <%= label_tag name_start + "[webhook-name]", _('Name'), {'data-error': 'wrong', 'data-success': 'right'} %>
+          <%= label_tag name_start + "[webhook-name]", _('Name'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
           <%= text_field_tag name_start + "[webhook-name]", nil, class: 'form-control validate' %>
         </div>
 
         <div class="md-form mb-5 prefix grey-text">
         <i class="fa-solid fa-envelope"></i> <!-- mdbootstrap should have treatment for bad input for this -->
-          <%= label_tag name_start + "[webhook-email]", _('Email'), {'data-error': 'wrong', 'data-success': 'right'} %>
-          <%= email_field_tag name_start + "[webhook-email]", nil, placeholder: _('recipient_email@example.com'), class: 'form-control validate' %>
+          <%= label_tag name_start + "[webhook-email]", _('Email'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
+          <%= email_field_tag name_start + "[webhook-email]", nil, { placeholder: _('recipient_email@example.com'), class: 'form-control validate'} %>
         </div>
 
         <div class="md-form mb-5 prefix grey-text">
           <i class="fa-solid fa-tag"></i>
-          <%= label_tag name_start + "[webhook-subject]", _('Subject'), {'data-error': 'wrong', 'data-success': 'right'} %>
+          <%= label_tag name_start + "[webhook-subject]", _('Subject'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
           <%= text_field_tag name_start + "[webhook-subject]", nil, class: 'form-control validate' %>
         </div>
 
         <div class="md-form prefix grey-text">
           <i class="fa-solid fa-pencil"></i>
-          <%= label_tag name_start + "[webhook-message]", _('Message'), {'data-error': 'wrong', 'data-success': 'right'} %>
-          <%= text_area_tag name_start + "[webhook-message]", nil, placeholder: _('Email content'), class: 'form-control md-textarea', rows: 4 %>
+          <%= label_tag name_start + "[webhook-message]", _('Message'), {'data-error': 'wrong', 'data-success': 'right', class: 'form-label'} %>
+          <%= text_area_tag name_start + "[webhook-message]", nil, { placeholder: _('Email content'), class: 'form-control md-textarea', rows: 4 } %>
         </div>
       </div>
       <div class="modal-footer d-flex justify-content-center">
-        <button class="btn btn-default discard" data-dismiss="modal"><%= _('Discard ') %><i class="fa-solid fa-trash-can"></i></button>
-        <button class="btn btn-default" ><%= _('Save ') %><i class="fa-solid fa-paper-plane"></i></button>
+        <button class="btn btn-secondary discard" data-bs-dismiss="modal"><%= _('Discard ') %><i class="fa-solid fa-trash-can"></i></button>
+        <button class="btn btn-secondary" ><%= _('Save ') %><i class="fa-solid fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
 </div>
 
-<a href="" class="pseudo-webhook-btn" data-toggle="modal" data-target="#<%= condition_no %>modalContactForm"></a>
+<a href="" class="pseudo-webhook-btn" data-bs-toggle="modal" data-bs-target="#<%= condition_no %>modalContactForm"></a>
diff --git a/app/views/org_admin/departments/edit.html.erb b/app/views/org_admin/departments/edit.html.erb
index 06aafff09f..bd72b783d4 100644
--- a/app/views/org_admin/departments/edit.html.erb
+++ b/app/views/org_admin/departments/edit.html.erb
@@ -2,7 +2,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= _('Edit the School/Department') %></h1>
-    <%= link_to _('View all departments'), departments_url, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all departments'), departments_url, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
@@ -10,19 +10,19 @@
   <div class="col-md-12">
     <%= form_for :department, url: org_department_path(org_id: @org_id, id: @department.id), html: { method: :put, id: 'edit_department_form' } do |f| %>
         <%= f.hidden_field :org_id, value: @org_id %>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Name'), for: :name, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Name'), for: :name, class: "form-label" %>
           <%= f.text_field :name, as: :string, class: "form-control", spellcheck: true, 'aria-required': true, 'data-toggle': 'tooltip', title: _('Add the name of a school/department.') %>
         </div>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Abbreviated name or code'), for: :code, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Abbreviated name or code'), for: :code, class: "form-label" %>
           <%= f.text_field :code, as: :string, class: "form-control", 'aria-required': false, 'data-toggle': 'tooltip', title: _('Add the abbreviated name or code for the school/department.') %>
         </div>
         <!-- submit buttons -->
-        <div class="form-group col-xs-8">
+        <div class="form-control mb-3 col-xs-8">
           <%= f.submit _('Save'), name: "draft", class: "btn btn-primary" %>
           <%= link_to _('Cancel'), departments_url, class: "btn btn-primary", role: 'button' %>
         </div>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/departments/new.html.erb b/app/views/org_admin/departments/new.html.erb
index 0911ab5db1..5812f88fd0 100644
--- a/app/views/org_admin/departments/new.html.erb
+++ b/app/views/org_admin/departments/new.html.erb
@@ -2,7 +2,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= _('Create a School/Department') %></h1>
-    <%= link_to _('View all departments'), departments_url, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all departments'), departments_url, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
@@ -10,19 +10,19 @@
   <div class="col-md-12">
     <%= form_for :department, url: org_departments_path(@org_id), html: { method: :post, id: 'create_department_form' } do |f| %>
         <%= f.hidden_field :org_id, value: @org_id %>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Name'), for: :name, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Name'), for: :name, class: "form-label" %>
           <%= f.text_field :name, as: :string, class: "form-control", spellcheck: true, 'aria-required': true, 'data-toggle': 'tooltip', title: _('Add the name of a school/department.') %>
         </div>
-        <div class="form-group col-xs-8">
-          <%= f.label _('Abbreviated name or code'), for: :code, class: "control-label" %>
+        <div class="form-control mb-3 col-xs-8">
+          <%= f.label _('Abbreviated name or code'), for: :code, class: "form-label" %>
           <%= f.text_field :code, as: :string, class: "form-control", 'aria-required': false, 'data-toggle': 'tooltip', title: _('Add the abbreviated name or code for the school/department.') %>
         </div>
         <!-- submit buttons -->
-        <div class="form-group col-xs-8">
+        <div class="form-control mb-3 col-xs-8">
           <%= f.submit _('Save'), name: "draft", class: "btn btn-primary" %>
           <%= link_to _('Cancel'), departments_url, class: "btn btn-primary", role: 'button' %>
         </div>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/phases/_form.html.erb b/app/views/org_admin/phases/_form.html.erb
index 66a8a8a57a..6bc5c766bc 100644
--- a/app/views/org_admin/phases/_form.html.erb
+++ b/app/views/org_admin/phases/_form.html.erb
@@ -1,26 +1,26 @@
 <% title_tooltip = _('Enter a title for the phase e.g. initial DMP, full DMP... This is what users will see in the tabs when completing a plan. If you only have one phase, call it something generic e.g. Glasgow DMP') %>
 
 <%= f.hidden_field :template_id, value: template.id%>
-<div class="form-group col-md-10">
-  <%= f.label(:title, _('Title') ,class: "control-label") %>
+<div class="form-control mb-3 col-md-10">
+  <%= f.label(:title, _('Title') ,class: "form-label") %>
   <em class="sr-only"><%= title_tooltip %></em>
   <%= f.text_field(:title, class: "form-control", spellcheck: true, 'aria-required': true, 'data-toggle': 'tooltip', title: title_tooltip ) %>
 </div>
 
-<div class="form-group">
+<div class="form-control mb-3">
   <div class="col-md-10">
-    <%= f.label(:number, _('Order of display'), class: "control-label") %>
+    <%= f.label(:number, _('Order of display'), class: "form-label") %>
   </div>
   <div class="col-md-4">
     <%= f.number_field(:number, in: 1..5, class: "form-control", 'aria-required': true, 'data-toggle': 'tooltip', title: _('This allows you to order the phases of your template.')) %>
   </div>
 </div>
 
-<div class="form-group col-md-10" data-toggle="tooltip" title="<%= _("Enter a basic description. This will be presented to users on the 'Admin Plan' tab, above the summary of the sections and questions which they will be asked to answer.") %>">
-  <%= f.label(:description, _('Description'), class: "control-label") %>
+<div class="form-control mb-3 col-md-10" data-toggle="tooltip" title="<%= _("Enter a basic description. This will be presented to users on the 'Admin Plan' tab, above the summary of the sections and questions which they will be asked to answer.") %>">
+  <%= f.label(:description, _('Description'), class: "form-label") %>
   <%= f.text_area(:description, class: "phase", spellcheck: true) %>
 </div>
 
-<div class="form-group col-md-4 pull-right">
-  <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+<div class="form-control mb-3 col-md-4 float-end">
+  <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
 </div>
diff --git a/app/views/org_admin/phases/_index.html.erb b/app/views/org_admin/phases/_index.html.erb
index 6dfdb99e6f..ffc9fd0792 100644
--- a/app/views/org_admin/phases/_index.html.erb
+++ b/app/views/org_admin/phases/_index.html.erb
@@ -2,7 +2,7 @@
   <div class="col-md-12">
     <% if template_hash[:template][:phases].present? && template_hash[:template][:phases].length > 1 %>
       <div id="sections-accordion-controls">
-        <div class="accordion-controls" data-parent="phases_accordion">
+        <div class="accordion-controls px-1" data-parent="phases_accordion">
           <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
           <span>|</span>
           <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
@@ -13,31 +13,28 @@
 </div>
 <div class="row">
   <div class="col-md-12">
-    <div class="panel-group" id="phases_accordion" role="tablist">
+    <div class="accordion" id="phases_accordion" role="tablist">
       <!-- If template has phases-->
       <% if template_hash[:template][:phases].present? %>
         <% i = 0 %>
         <% template_hash[:template][:phases].each do |phase_no, phase_hash| %>
           <% phase = phase_hash[:data] %>
-            <div class="panel panel-default">
-              <div class="heading-button" role="button" data-toggle="collapse"
-                   data-parent="phases_accordion"
+            <div class="card card-default">
+              <div class="heading-button" role="button" data-bs-toggle="collapse"
+                   data-bs-parent="#phases_accordion"
                    href="#collapsePhase<%= phase.id %>"
+                   role="button"
                    aria-expanded="<%= i == 0 ? 'true' : 'false' %>"
                    aria-controls="#collapsePhase<%= phase.id %>">
 
-                <div class="panel-heading" role="tab" id="<%= "headingPhase#{phase.id}" %>">
-                  <div class="panel-title pull-left">
+                <div class="card-heading" role="tab" id="<%= "headingPhase#{phase.id}" %>">
+                  <div class="card-title float-start">
                     <%= phase.title %>
                   </div>
-                  <div class="pull-right">
-                    <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-                  </div>
-                  <div class="clearfix"></div>
                 </div>
               </div>
-              <div id="<%= "collapsePhase#{phase.id}" %>" class="panel-collapse collapse<%= i == 0 ? 'in' : '' %>" role="tabpanel" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="true"' : '' %>>
-                <div class="panel-body">
+              <div id="<%= "collapsePhase#{phase.id}" %>" class="accordion-collapse collapse<%= i == 0 ? 'show' : 'hide' %>" role="tabcard" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="false"' : '' %>>
+                <div class="card-body">
                   <%= render partial: 'org_admin/templates/show_phases_sections', locals: { phase: phase, phase_hash: phase_hash, template: template, current: current } %>
                 </div>
               </div>
diff --git a/app/views/org_admin/phases/_phase.html.erb b/app/views/org_admin/phases/_phase.html.erb
index 70ae5b8c21..530fe9512a 100644
--- a/app/views/org_admin/phases/_phase.html.erb
+++ b/app/views/org_admin/phases/_phase.html.erb
@@ -4,22 +4,22 @@
     <div>
       <h3>
         <%= phase.title %>
-        <div class="pull-right">
+        <div class="float-end">
           <% if template.customization_of.present? && template.latest? %>
-            <%= link_to _('Customise phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
+            <%= link_to _('Customise phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-secondary", role: 'button' } %>
           <% elsif modifiable %>
-            <%= link_to _('Edit phase'), edit_org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
+            <%= link_to _('Edit phase'), edit_org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-secondary", role: 'button' } %>
           <% else %>
-            <%= link_to _('Show phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
+            <%= link_to _('Show phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-secondary", role: 'button' } %>
           <% end %>
           <% if template.latest? && phase.modifiable %>
             <%= link_to _('Delete phase'), org_admin_template_phase_path(template.id, phase.id),
                         data: { confirm: _("You are about to delete the '%{phase_title}' phase. This will remove all of the sections and questions listed below. Are you sure?") % { phase_title: phase.title },
-                                length: 20, omission: _('... (continued)') }, method: :delete, class: 'btn btn-default', role: 'button' %>
+                                length: 20, omission: _('... (continued)') }, method: :delete, class: 'btn btn-secondary', role: 'button' %>
           <% end %>
         </div>
       </h3>
-      <p class="pull-left">
+      <p class="float-start">
         <div class="display-readonly-textarea-content">
           <%= sanitize phase.description %>
         </div>
diff --git a/app/views/org_admin/phases/container.html.erb b/app/views/org_admin/phases/container.html.erb
index 00533e9630..10503be72d 100644
--- a/app/views/org_admin/phases/container.html.erb
+++ b/app/views/org_admin/phases/container.html.erb
@@ -4,7 +4,7 @@
   <div class="col-md-12">
     <h1><%= template.title %></h1>
     <% referrer = template.customization_of.present? ? customisable_org_admin_templates_path : organisational_org_admin_templates_path %>
-    <%= link_to _('View all templates'), referrer, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all templates'), referrer, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 <div class="row">
@@ -14,16 +14,16 @@
                locals: local_assigns.merge({ modifiable: modifiable }) %>
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <% # locals: { phase, template, edit, current_section } %>
-            <div class="pull-left">
+            <div class="float-start">
               <h2><%= _('Phase details')%></h2>
             </div>
-            <div class="pull-right">
+            <div class="float-end">
               <%= link_to(_('Preview'),
                           preview_org_admin_template_phase_path(template, phase),
-                          class: 'btn btn-default phase_preview_link', role: 'button') %>
+                          class: 'btn btn-secondary phase_preview_link', role: 'button') %>
             </div>
             <div class="clearfix"></div>
             <div class="row">
@@ -41,7 +41,7 @@
                   <div class="col-sm-6">
                     <% if phase.sections.many? %>
                       <div id="sections-accordion-controls">
-                        <div class="accordion-controls"
+                        <div class="accordion-controls px-1"
                              data-parent="sections_accordion">
                           <a href="#" data-toggle-direction="show">
                             <%= _('expand all') %>
@@ -56,7 +56,7 @@
                   </div>
 
                   <div class="col-sm-6">
-                    <div class='text-right text-muted'>
+                    <div class='text-end text-muted'>
                       <% if template.latest? && (modifiable || template.customization_of.present?) %>
                         <i class="fas fa-circle-info small"></i>
                         <%= _("Drag arrows to rearrange sections.") %>
diff --git a/app/views/org_admin/phases/preview.html.erb b/app/views/org_admin/phases/preview.html.erb
index 00467e55e2..191f856416 100644
--- a/app/views/org_admin/phases/preview.html.erb
+++ b/app/views/org_admin/phases/preview.html.erb
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= @template.title %></h1>
-    <div class="pull-right">
+    <div class="float-end">
       <ul class="list-inline">
         <% if @template.latest? %>
           <% if @template.customization_of.present? %>
@@ -34,16 +34,16 @@
 <div class="row">
   <div class="col-md-12">
     <ul class="nav nav-tabs" role="tablist">
-      <li role="presentation" class="active">
-        <%= link_to _('Write plan'), '#', class: 'preview-tab' %>
+      <li role="presentation" class=" nav-item active">
+        <%= link_to _('Write plan'), '#', class: 'nav-link preview-tab' %>
       </li>
     </ul>
 
     <!-- render phase below -->
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <%= render partial: '/phases/edit_plan_answers',
                   locals: {
                     plan: nil,
diff --git a/app/views/org_admin/plans/index.html.erb b/app/views/org_admin/plans/index.html.erb
index 2b16861c5d..2689adab13 100644
--- a/app/views/org_admin/plans/index.html.erb
+++ b/app/views/org_admin/plans/index.html.erb
@@ -9,8 +9,8 @@
   <div class="col-md-12">
     <% if @feedback_plans.length > 0 %>
       <h2><%= _('Notifications') %></h2>
-      <div class="panel panel-default">
-        <div class="panel-body notifications">
+      <div class="card card-default">
+        <div class="card-body notifications">
           <table class="table">
             <thead>
               <th scope="col"><%= _('Plan') %></th>
@@ -41,7 +41,7 @@
                            tags: %w{ span em }),
                   org_admin_download_plans_path(format: :csv),
                   target: '_blank',
-                  class: 'btn btn-default pull-right has-new-window-popup-info' %>
+                  class: 'btn btn-secondary float-end has-new-window-popup-info' %>
       <% end %>
       <div class="table-responsive">
         <%= paginable_renderise(
diff --git a/app/views/org_admin/question_options/_option_fields.html.erb b/app/views/org_admin/question_options/_option_fields.html.erb
index 1de4ee4710..50656fc1ae 100644
--- a/app/views/org_admin/question_options/_option_fields.html.erb
+++ b/app/views/org_admin/question_options/_option_fields.html.erb
@@ -1,11 +1,11 @@
 <div class="row">
-  <div class="col-md-3 bold">
+  <div class="col-md-3 bold mb-2">
     <%= _('Order')%>
   </div>
-  <div class="col-md-3">
-    <%= f.label(:text, _('Text'), class: "control-label") %>
+  <div class="col-md-3 mb-2">
+    <%= f.label(:text, _('Text'), class: "form-label") %>
   </div>
-  <div class="col-md-3 bold">
+  <div class="col-md-3 bold mb-2">
     <%= _('Default')%>
   </div>
   <div class="col-md-3">
@@ -20,18 +20,18 @@
   <%= f.fields_for :question_options, options_q do |op| %>
     <% i = i + 1 %>
     <% options_q.number = i %>
-    <div class="row" data-attribute="question_option">
-      <div class="col-md-3">
+    <div class="row mb-2" data-attribute="question_option">
+      <div class="col-md-3 pe-2">
         <%= op.number_field :number, min: 1, class: 'form-control', readonly: true %>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 pe-2">
         <% if i == 1 %>
           <%= op.text_field :text, as: :string, class: 'form-control', spellcheck: true, 'aria-required': true %>
         <% else %>
           <%= op.text_field :text, as: :string, class: 'form-control', spellcheck: true %>
         <% end %>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 pe-2">
         <%= op.check_box :is_default %>
       </div>
       <% if i > 1 %>
@@ -44,7 +44,7 @@
   <% end %>
 <% end %>
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-md-12 mt-2">
     <a href="#" class="new_question_option"><%= _('Add option') %></a>
   </div>
 </div>
diff --git a/app/views/org_admin/questions/_form.html.erb b/app/views/org_admin/questions/_form.html.erb
index 64a222b92e..f966845301 100644
--- a/app/views/org_admin/questions/_form.html.erb
+++ b/app/views/org_admin/questions/_form.html.erb
@@ -11,21 +11,21 @@
   <% current_format = question.question_format.present? ? question.question_format : QuestionFormat.find_by(formattype: QuestionFormat.formattypes[:textarea]) %>
   <div class="row">
     <!--Question number -->
-    <div class="form-group col-md-4">
-      <%= f.label(:number, _('Question Number'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-4">
+      <%= f.label(:number, _('Question Number'), class: "form-label") %>
       <%= f.number_field(:number, in: 1..50, class: "form-control",
                                   "aria-required": true) %>
     </div>
 
     <!--Question text -->
-    <div class="form-group col-md-10">
-      <%= f.label(:text, _('Question text'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-10">
+      <%= f.label(:text, _('Question text'), class: "form-label") %>
       <%= f.text_area(:text, class: "question", spellcheck: true, "aria-required": true) %>
     </div>
 
     <!-- Question format -->
-    <div class="form-group col-md-4">
-      <%= f.label(:question_format_id, _('Answer format'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-4">
+      <%= f.label(:question_format_id, _('Answer format'), class: "form-label") %>
         <%= f.select :question_format_id,
           options_from_collection_for_select(question_formats,
           :id,
@@ -40,36 +40,35 @@
     </div>
 
     <!--display form to enter option for option_based questions -->
-    <div class="form-group col-md-10" data-attribute="question_options" style="<%= current_format.option_based? ? '' : 'display:none;' %>">
+    <div class="form-control mb-3 col-md-10" data-attribute="question_options" style="<%= current_format.option_based? ? '' : 'display:none;' %>">
       <div class="col-md-offset-2">
         <%= render "/org_admin/question_options/option_fields", f: f, q: question %>
         <!--display for selecting comment box when multiple choice is being used-->
       </div>
       <% if question.id != nil && question.question_options[0].text != nil %>
-        <%= link_to _('Add Conditions'), org_admin_question_open_conditions_path(question_id: question.id, conditions: conditions), class: "add-logic btn btn-default", 'data-loaded': (conditions.size > 0).to_s, remote: true %>
+        <%= link_to _('Add Conditions'), org_admin_question_open_conditions_path(question_id: question.id, conditions: conditions), class: "add-logic btn btn-secondary", 'data-loaded': (conditions.size > 0).to_s, remote: true %>
         <div id="content" class="col-md-offset-2">
           <p>
             <%= render partial: 'org_admin/conditions/container', locals: { f: f, question: question, conditions: conditions } %>
           </p>
         </div>
       <% else %>
-        <div class="form-group" data-toggle="tooltip", title="<%= _('Save this question before adding conditions.') %>" >
-          <%= link_to _('Add Conditions'), '#', class: "add-logic btn btn-default disabled" %>
+        <div class="form-control mb-3" data-toggle="tooltip", title="<%= _('Save this question before adding conditions.') %>" >
+          <%= link_to _('Add Conditions'), '#', class: "add-logic btn btn-secondary disabled" %>
         </div>
       <% end %>
     </div>
 
     <% comment_disp = current_format.option_based? || current_format.rda_metadata? %>
-    <div class="form-group col-md-10" data-attribute="option_comment"
+    <div class="form-check mb-3 col-md-10" data-attribute="option_comment"
          style="<%=comment_disp ? '' : 'display:none;'%>">
-      <label>
-        <%= f.check_box :option_comment_display, as: :check_boxes %><%= _('Display additional comment area.') %>
-      </label>
+        <%= f.check_box :option_comment_display, as: :check_boxes %>
+        <%= f.label(:option_comment_display, _('Display additional comment area'), class: 'form-check-label') %>
     </div>
 
   <!--Question default_value -->
-    <div class="form-group col-md-10" data-attribute="default_value" style="<%= current_format.textfield? || current_format.textarea? ? '' : 'display: none;' %>">
-      <%= f.label(:default_value, _('Default answer'), class: "control-label") %>
+    <div class="form-control mb-3 col-md-10" data-attribute="default_value" style="<%= current_format.textfield? || current_format.textarea? ? '' : 'display: none;' %>">
+      <%= f.label(:default_value, _('Default answer'), class: "form-label") %>
       <div class="" data-toggle="tooltip" title="<%= question_default_value_tooltip %>">
         <em class="sr-only"><%= question_default_value_tooltip %></em>
         <span data-attribute="textfield" style="<%= current_format.textfield? ? '' : 'display:none;' %>">
@@ -89,20 +88,20 @@
       <% end %>
     <% end %>
     <!-- Themes -->
-    <div class="form-group col-md-10">
+    <div class="form-control mb-3 col-md-10">
       <%= render partial: 'org_admin/shared/theme_selector',
                  locals: { f: f, all_themes: Theme.all.order("title"), as_radio: false,
                            popover_message: _('Select one or more themes that are relevant to this question. This will allow similarly themed organisation-level guidance to appear alongside your question.') } %>
     </div>
-    <div class="form-group col-md-10">
-      <div class="pull-right">
-        <%= f.submit _('Save'), class: "btn btn-default", role:'button' %>
+    <div class="form-control mb-3 col-md-10">
+      <div class="float-end">
+        <%= f.submit _('Save'), class: "btn btn-secondary", role:'button' %>
         <% if question.id.present? %>
             <% href = org_admin_template_phase_section_question_path(template_id: template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id) %>
-            <%= link_to _('Delete'), href, method: :delete, class: "btn btn-default", role:'button', 'data-confirm': _("You are about to delete question #%{question_number}. Are you sure?") % { question_number: question.number } %>
-          <%= link_to _('Cancel'), href, class: "btn btn-default ajaxified-question", method: 'get', remote: true %>
+            <%= link_to _('Delete'), href, method: :delete, class: "btn btn-secondary", role:'button', 'data-confirm': _("You are about to delete question #%{question_number}. Are you sure?") % { question_number: question.number } %>
+          <%= link_to _('Cancel'), href, class: "btn btn-secondary ajaxified-question", method: 'get', remote: true %>
         <% else %>
-          <%= link_to _('Cancel'), '#', class: "btn btn-default cancel-new-question" %>
+          <%= link_to _('Cancel'), '#', class: "btn btn-secondary cancel-new-question" %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/org_admin/questions/_index.html.erb b/app/views/org_admin/questions/_index.html.erb
index 5e6e3282ab..0fb7e6efb7 100644
--- a/app/views/org_admin/questions/_index.html.erb
+++ b/app/views/org_admin/questions/_index.html.erb
@@ -10,8 +10,8 @@
   <% end %>
 <% end %>
 <% if template.latest? && section.modifiable? %>
-  <div class="pull-right new-question-button">
-    <%= link_to(_('Add Question'), new_org_admin_template_phase_section_question_path(template_id: template.id, phase_id: section.phase.id, section_id: section.id), { class: 'btn btn-default ajaxified-question', role: "button", remote: true }) %>
+  <div class="float-end new-question-button">
+    <%= link_to(_('Add Question'), new_org_admin_template_phase_section_question_path(template_id: template.id, phase_id: section.phase.id, section_id: section.id), { class: 'btn btn-secondary ajaxified-question', role: "button", remote: true }) %>
   </div>
 
   <div class="row">
diff --git a/app/views/org_admin/questions/_show.html.erb b/app/views/org_admin/questions/_show.html.erb
index 2de1aeda85..55a9069ce6 100644
--- a/app/views/org_admin/questions/_show.html.erb
+++ b/app/views/org_admin/questions/_show.html.erb
@@ -91,11 +91,11 @@
         </dl>
       </div>
 
-      <div class="col-md-4">
+      <div class="ps-4 col-md-4">
         <% has_org_themed_guidance = false %>
         <% themes_q = question.themes %>
         <% if !themes_q.nil? %>
-          <div class="panel-group" id="<%= question.id %>-guidance">
+          <div class="d-flex flex-column" id="<%= question.id %>-guidance">
             <% ggs = GuidanceGroup.where(org_id: current_user.org.id) %>
             <h4><%= _("Themed Guidance") %></h4>
 
@@ -124,40 +124,37 @@
                       ) %>
                     <% if theme_guidances.length > 0 %>
                       <% theme_guidances.each do |guidance| %>
-                        <div class="panel panel-default">
-                          <div class="heading-button"
-                               role="button"
-                               data-toggle="collapse"
-                               href="#collapseGuidance-<%= guidance.id%>-<%= question.id %>"
-                               aria-expanded="false"
-                               aria-controls="#collapseGuidance-<%= guidance.id%>-<%= question.id %>">
-
-                            <div class="panel-heading"
-                                        role="tab"
-                                        id="#headingGuidance-<%= guidance.id%>-<%= question.id %>">
-                              <div class="panel-title">
-                                  <i class="fas fa-plus pull-left" aria-hidden="true"></i>
-                                &nbsp;<%= theme.title %>
-                                <% if ggs.length > 1 %>
-                                  &nbsp;(<%= guidance_group.name %>)
-                                <% end %>
-                              </div>
-                              <div class="clearfix"></div>
-                            </div>
-                          </div>
-                          <div id="collapseGuidance-<%= guidance.id%>-<%= question.id %>"
-                               class="panel-collapse collapse"
-                               role="tabpanel"
-                               aria-labelledby="headingGuidance-<%= guidance.id%>-<%= question.id %>">
-                            <div class="panel-body allow-break-words">
-                              <div class="display-readonly-textarea-content">
-                                <%= sanitize guidance.text %>
+                        <div class="accordion my-1 card card-default">
+                          <div class="accordion-item w-100">
+                              <h2 class="accordion-header" 
+                                  id="#headingGuidance-<%= guidance.id%>-<%= question.id %>">
+                                <button class="accordion-button collapsed"
+                                     type="button"
+                                     data-bs-toggle="collapse"
+                                     href="#collapseGuidance-<%= guidance.id%>-<%= question.id %>"
+                                     aria-expanded="false"
+                                     aria-controls="#collapseGuidance-<%= guidance.id%>-<%= question.id %>">
+                                     <%= theme.title %>
+                                     <% if ggs.length > 1 %>
+                                        &nbsp;(<%= guidance_group.name %>)
+                                    <% end %>
+                                </button>
+                              </h2>
+                            
+                              <div id="collapseGuidance-<%= guidance.id%>-<%= question.id %>"
+                                 class="accordion-collapse collapse"
+                                 role="tabpanel"
+                                 aria-labelledby="headingGuidance-<%= guidance.id%>-<%= question.id %>">
+                                <div class="accordion-body card card-body allow-break-words">
+                                   <div class="display-readonly-textarea-content">
+                                      <%= sanitize guidance.text %>
+                                   </div>
+                                </div>
                               </div>
-                            </div>
+                           </div>
                         </div>
-                      </div>
+                      <% end %>
                     <% end %>
-                   <% end %>
                   <% end %>
                 <% end %>
               <% end %>
@@ -204,18 +201,18 @@
                                locals: { f: annotation_fields } %>
                   <% end %>
                 <% end %>
-                <div class="form-group col-md-10">
-                  <div class="pull-right">
-                    <%= f.submit _('Save'), class: "btn btn-default", role: 'button' %>
+                <div class="form-control mb-3 col-md-10">
+                  <div class="float-end">
+                    <%= f.submit _('Save'), class: "btn btn-secondary", role: 'button' %>
                   </div>
                 </div>
               <% end %>
             <% end %>
           <% end %>
           <% if section.modifiable? %>
-            <div class="form-group col-md-10">
-              <div class="pull-right">
-                <%= link_to _('Edit'), edit_org_admin_template_phase_section_question_path(template_id: question.section.phase.template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id), class: "btn btn-default ajaxified-question", remote: true %>
+            <div class="form-control mb-3 col-md-10">
+              <div class="float-end">
+                <%= link_to _('Edit'), edit_org_admin_template_phase_section_question_path(template_id: question.section.phase.template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id), class: "btn btn-secondary ajaxified-question", remote: true %>
               </div>
             </div>
           <% end %>
diff --git a/app/views/org_admin/sections/_form.html.erb b/app/views/org_admin/sections/_form.html.erb
index 23e7d2664a..557173982b 100644
--- a/app/views/org_admin/sections/_form.html.erb
+++ b/app/views/org_admin/sections/_form.html.erb
@@ -1,24 +1,24 @@
 <% description_tooltip = _("Enter a basic description. This could be a summary of what is covered in the section or instructions on how to answer. This text will be displayed in the coloured banner once a section is opened to edit.") %>
 
 <%= form_for(section, url: url, namespace: section.id.present? ? "sc_#{section.id}" : 'new_section', html: { method: method }) do |f| %>
-  <div class="form-group col-md-10">
-    <%= f.label(:title, _('Title') ,class: "control-label") %>
+  <div class="form-control mb-3 col-md-10">
+    <%= f.label(:title, _('Title') ,class: "form-label") %>
     <%= f.text_field(:title, { class: "form-control", placeholder: _('Enter a title for the section'), 'data-toggle': 'tooltip', title: _('Enter a title for the section'), spellcheck: true, 'aria-required': true} ) %>
   </div>
 
-  <div class="form-group col-md-10" data-toggle="tooltip" title="<%= description_tooltip %>">
+  <div class="form-control mb-3 col-md-10" data-toggle="tooltip" title="<%= description_tooltip %>">
     <em class="sr-only"><%= description_tooltip %></em>
-    <%= f.label(:description, _('Description'), class: "control-label") %>
-    <%= f.text_area(:description, class: "section") %>
+    <%= f.label(:description, _('Description'), class: "form-label") %>
+    <%= f.text_area(:description, class: "section", spellcheck: true) %>
   </div>
 
-  <div class="form-group col-md-10">
-    <div class="pull-right">
-      <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+  <div class="form-control mb-3 col-md-10">
+    <div class="float-end">
+      <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
       <% if section.id.present? %>
         <%= link_to _('Delete'), org_admin_template_phase_section_path(template_id: template.id, phase_id: section.phase.id, id: section), 'data-method': 'delete', rel: 'nofollow',
-            'data-confirm': _("You are about to delete '%{section_title}'. This will affect questions linked to this section. Are you sure?") % { :section_title => section.title }, class: 'btn btn-default', role:'button' %>
+            'data-confirm': _("You are about to delete '%{section_title}'. This will affect questions linked to this section. Are you sure?") % { :section_title => section.title }, class: 'btn btn-secondary', role:'button' %>
       <% end %>
     </div>
   </div>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/org_admin/sections/_index.html.erb b/app/views/org_admin/sections/_index.html.erb
index ef6816c6f4..2377492590 100644
--- a/app/views/org_admin/sections/_index.html.erb
+++ b/app/views/org_admin/sections/_index.html.erb
@@ -1,9 +1,7 @@
 <%# locals modifiable %>
-
 <!-- Accordion for sections -->
 <div class="row">
   <div class="col-md-12">
-
     <div class="draggable-sections" data-url="<%=
       sort_org_admin_template_phase_path(template, phase)
      %>">
@@ -14,7 +12,6 @@
                            current_section: current_section,
                            panel_id: "section-#{prefix_section.id}",
                            modifiable: modifiable } if prefix_section %>
-
       <%# If we are working with a modifiable phase then allow the core sections to be reordered %>
       <% if phase.modifiable? %>
         <% sections.each do |s| %>
@@ -27,7 +24,7 @@
                                modifiable: s.modifiable } %>
         <% end %>
       <% else %>
-          <%= render partial: "org_admin/sections/section_group",
+        <%= render partial: "org_admin/sections/section_group",
                      locals: { sections: sections,
                                phase: phase,
                                template: template,
@@ -35,8 +32,7 @@
                                panel_id: "baseline-sections",
                                modifiable: modifiable } %>
       <% end %>
-
-      <% suffix_sections.each do |s| %>
+         <% suffix_sections.each do |s| %>
         <%= render partial: "org_admin/sections/section_group",
                    locals: { sections: Array(s),
                              phase: phase,
@@ -45,39 +41,42 @@
                              current_section: current_section,
                              modifiable: true } %>
       <% end %>
-
-    </div>
-
-    <% if template.latest? && (modifiable || template.customization_of.present?) %>
-      <div class="panel panel-default">
-        <a href="#new_section" class="heading-button"
-           data-toggle="collapse" data-parent="sections-accordion"
-           data-target="#collapseSectionNew"
-           aria-expanded="false"
-           aria-controls="#collapseSectionNew">
-
-          <div class="panel-heading" role="tab" id="headingSectionNew">
-            <div class="panel-title pull-left">
-              <%= _('Add a new section') %>
-            </div>
-            <div class="pull-right">
-              <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-            </div>
-            <div class="clearfix"></div>
-          </div>
-        </a>
-        <div
-          id="collapseSectionNew" class="panel-collapse collapse" role="tabpanel"
+      </div>
+      <%# locals modifiable %>
+      <!-- Accordion for sections -->
+      <div class="row">
+        <div class="col-md-12">
+          <% if template.latest? && (modifiable || template.customization_of.present?) %>
+            <div class="accordion section-group sections_accordion"
+         data-modifiable="<%= modifiable %>"
+         role="tablist">
+              <div class="accordion-item w-100 my-3 section">
+                <h2 class="accordion-header" role="tab" id="headingSectionNew">
+                  <a href="#new_section" 
+                  class="accordion-button collapsed"
+                  role="button"
+                  data-bs-toggle="collapse" 
+                  data-bs-parent="sections_accordion"
+                  data-bs-target="#collapseSectionNew"
+                  aria-expanded="false"
+                  aria-controls="#collapseSectionNew">
+                    <%= _('Add a new section') %>
+                  </a>
+                </h2>
+                <div
+          id="collapseSectionNew" class="accordion-collapse collapse" role="tabpanel"
           aria-labelledby="<%= "headingSectionNew" %>">
-           <div class="panel-body">
-             <%= render partial: 'org_admin/sections/new',
+                  <div class="accordion-body card card-body">
+                    <%= render partial: 'org_admin/sections/new',
                         locals: {
                           template: template,
                           phase: phase } %>
-           </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
   </div>
-
-</div>
diff --git a/app/views/org_admin/sections/_progress.html.erb b/app/views/org_admin/sections/_progress.html.erb
index d02cbac485..f64e8237b1 100644
--- a/app/views/org_admin/sections/_progress.html.erb
+++ b/app/views/org_admin/sections/_progress.html.erb
@@ -2,6 +2,6 @@
 <!-- Partial template for showing the progress for a section, i.e. the valid answers -->
 <% num_section_questions = section.questions.size() %>
 <% num_section_answers = section.num_answered_questions(plan) %>
-<span class="right section-status">
+<span class="right section-status mx-1">
   (<%= num_section_answers %> / <%= num_section_questions %>)
 </span>
\ No newline at end of file
diff --git a/app/views/org_admin/sections/_section.html.erb b/app/views/org_admin/sections/_section.html.erb
index 65d4456661..03a5108229 100644
--- a/app/views/org_admin/sections/_section.html.erb
+++ b/app/views/org_admin/sections/_section.html.erb
@@ -1,39 +1,30 @@
-<div class="panel panel-default section" data-section-id="<%= section.id %>">
+<div class="accordion-item w-100 my-3 section" data-section-id="<%= section.id %>">
+  <h2 class="accordion-header" role="tab" id="<%= "headingSection#{section.id}" %>">
+    <a
+      href="<%= header_path_for_section(section, phase, template) %>"
+      role="button"
+      data-remote="true"
+      class="accordion-button collapsed ajaxified-section"
+      data-bs-toggle="collapse"
+      data-bs-parent="<%= data_parent %>"
+      data-bs-target="#collapseSection<%= section.id %>"
+      aria-expanded="false"
+      aria-controls="#collapseSection<%= section.id %>">
+      <%= section.title %>
+    </a>
+    <% if local_assigns[:draggable] %>
+      <i class="fas fa-arrows-alt px-3" aria-hidden="true"
+         title="Drag to reposition">
+      </i>
+    <% end %>
+  </h2>
+ 
 
-  <a
-    href="<%= header_path_for_section(section, phase, template) %>"
-    data-remote="true"
-    class="heading-button ajaxified-section"
-    data-toggle="collapse"
-    data-parent="<%= data_parent %>"
-    data-target="#collapseSection<%= section.id %>"
-    aria-expanded="false"
-    aria-controls="#collapseSection<%= section.id %>">
-
-    <div class="panel-heading" role="tab" id="<%= "headingSection#{section.id}" %>">
-      <div class="panel-title pull-left">
-        <%= section.title %>
-      </div>
-      <div class="pull-right">
-        <% plussign = "fa-plus" %>
-        <% plussign = "fa-minus" if current_section.present? && section.id == current_section.id %>
-        <i class="fas <%= plussign %> pull-right" aria-hidden="true" title="Click to expand"></i>
-        <% if local_assigns[:draggable] %>
-          <i class="fas fa-up-down-left-right pull-right" aria-hidden="true"
-             title="Drag to reposition">
-          </i>
-        <% end %>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  </a>
-
-  <div
-  id="<%= "collapseSection#{section.id}" %>"
-  class="panel-collapse collapse<%= " in" if current_section.present? && section.id == current_section.id %>"
-  role="tabpanel"
-  aria-labelledby="<%= "headingSection#{section.id}" %>">
-    <div class="panel-body" data-loaded="<%= current_section.present? && section.id == current_section.id %>">
+  <div id="<%= "collapseSection#{section.id}" %>"
+       class="accordion-collapse collapse <%= "show" if current_section.present? && section.id == current_section.id %>"
+      role="tabpanel"
+      aria-labelledby="<%= "headingSection#{section.id}" %>">
+    <div class="accordion-body card card-body" data-loaded="<%= current_section.present? && section.id == current_section.id %>">
       <%# This is AJAX loaded on demand unless section_id is specified in the URL %>
       <% if current_section.present? && section.id == current_section.id %>
         <% partial = "org_admin/sections/#{section.modifiable? ? 'edit' : 'show'}" %>
diff --git a/app/views/org_admin/sections/_section_group.html.erb b/app/views/org_admin/sections/_section_group.html.erb
index 37a960ab59..62fb041dea 100644
--- a/app/views/org_admin/sections/_section_group.html.erb
+++ b/app/views/org_admin/sections/_section_group.html.erb
@@ -1,5 +1,5 @@
 <!-- TODO: Move this away from using ID attr -->
-<div class="panel-group section-group sections_accordion"
+<div class="accordion section-group sections_accordion"
      data-modifiable="<%= modifiable %>"
      id="<%= panel_id %>"
      role="tablist">
@@ -12,4 +12,4 @@
                          data_parent: panel_id,
                          draggable: draggable_for_section?(section) } %>
   <% end%>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/shared/_theme_selector.html.erb b/app/views/org_admin/shared/_theme_selector.html.erb
index b3813408b3..540c68fc23 100644
--- a/app/views/org_admin/shared/_theme_selector.html.erb
+++ b/app/views/org_admin/shared/_theme_selector.html.erb
@@ -3,7 +3,7 @@
 <% required ||= false %>
 <% in_error ||= false %>
 
-<div class="form-group">
+<div class="form-control mb-3">
   <% if all_themes.length > 0 %>
     <%
       cntr = 0
@@ -17,7 +17,7 @@
         <%= render partial: 'shared/popover',
                    locals: { message: popover_message, placement: 'right' }%>
       </legend>
-
+      <div class="row">
       <div class="col-md-<%= col_size %>">
         <% all_themes.each do |theme| %>
           <% if cntr >= per_col %>
@@ -25,7 +25,7 @@
             <div class="col-md-<%= col_size %>">
             <% cntr = 0 %>
           <% end %>
-          <div class="checkbox">
+          <div class="form-check">
             <% namespace = f.object.class.name.downcase %>
             <% id = f.object.id.present? ? f.object.id : 'new' %>
             <input id="<%= id %>_<%= namespace %>_theme_ids_<%= theme.id %>"
@@ -38,6 +38,7 @@
           <% cntr += 1 %>
         <% end %>
       </div>
+      </div>
     </fieldset>
   <% else %>
     <p><%= _('No themes have been defined. Please contact your administrator for assistance.') %></p>
diff --git a/app/views/org_admin/templates/_form.html.erb b/app/views/org_admin/templates/_form.html.erb
index abf6569b17..0f2514b8cb 100644
--- a/app/views/org_admin/templates/_form.html.erb
+++ b/app/views/org_admin/templates/_form.html.erb
@@ -1,24 +1,24 @@
 <% description_tooltip = _('Enter a description that helps you to differentiate between templates e.g. if you have ones for different audiences') %>
 
-<div class="form-group col-xs-8">
-  <%= f.label(:title, _('Title'), class: "control-label") %>
+<div class="form-control mb-3 col-xs-8">
+  <%= f.label(:title, _('Title'), class: "form-label") %>
   <%= f.text_field(:title, class: "form-control", spellcheck: true, "aria-required": true) %>
 </div>
 
-<div class="form-group col-xs-8" data-toggle="tooltip" title="<%=  description_tooltip %>">
+<div class="form-control mb-3 col-xs-8" data-toggle="tooltip" title="<%=  description_tooltip %>">
   <em class="sr-only"><%= description_tooltip %></em>
-  <%= f.label(:description, _('Description'), class: "control-label") %>
+  <%= f.label(:description, _('Description'), class: "form-label") %>
   <%= f.text_area(:description, class: "template", spellcheck: true) %>
 </div>
 
 <% if current_user.org.funder? && !current_user.org.funder_only? %>
   <!-- If the Org is a funder and another org type then allow then to set the visibility -->
-  <div class="form-group col-xs-8">
-    <%= f.label _('Visibility'), class: 'control-label' %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= f.label _('Visibility'), class: 'form-label' %>
     <%= render partial: 'shared/popover',
                locals: { message: _('Checking this box prevents the template from appearing in the public list of templates.'),
                          placement: 'right' }%>
-    <div class="checkbox">
+    <div class="form-check">
       <%= f.label(:visibility) do %>
         <%= f.check_box(:visibility, checked: f.object.visibility == 'organisationally_visible') %>
 
@@ -34,8 +34,8 @@
   <%= f.hidden_field :visibility, value: visibility %>
 <% end %>
 
-<div class="form-group col-xs-8">
-  <%= label_tag(:status, _('Status'), class: "control-label") %>
+<div class="form-control mb-3 col-xs-8">
+  <%= label_tag(:status, _('Status'), class: "form-label") %>
     <p class="form-control-static">
       <% if f.object.published? %>
         <%= _('Published') %>
@@ -48,14 +48,14 @@
 </div>
 
 <% if f.object.id.present? %>
-  <div class="form-group col-xs-8">
-    <%= label_tag(:created_at, _('Created at'), class: "control-label") %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= label_tag(:created_at, _('Created at'), class: "form-label") %>
     <p class="form-control-static">
       <%= l f.object.created_at.to_date, formats: :short %>
     </p>
   </div>
-  <div class="form-group col-xs-8">
-    <%= label_tag(:updated, _('Last updated'), class: "control-label") %>
+  <div class="form-control mb-3 col-xs-8">
+    <%= label_tag(:updated, _('Last updated'), class: "form-label") %>
     <p class="form-control-static">
       <%= l f.object.updated_at.to_date, formats: :short %>
     </p>
@@ -84,6 +84,6 @@
   <%= hidden_field_tag('template-links', ActiveSupport::JSON.encode(f.object.links)) %>
 <% end %>
 
-<div class="form-group col-xs-8">
-  <%= f.button(_('Save'), class: 'btn btn-default', type: "submit") %>
+<div class="form-control mb-3 col-xs-8">
+  <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit") %>
 </div>
diff --git a/app/views/org_admin/templates/_navigation.html.erb b/app/views/org_admin/templates/_navigation.html.erb
index 3c87adfc71..a0168710f1 100644
--- a/app/views/org_admin/templates/_navigation.html.erb
+++ b/app/views/org_admin/templates/_navigation.html.erb
@@ -1,17 +1,17 @@
 <ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" <%= active_page?(template_details_path(template), true) ? ' class=active' : '' %>>
-    <%= link_to(_('Template details'), template_details_path(template), { 'aria-controls': 'show_template', role: 'tab' }) %>
+  <li role="presentation" class="nav-item <%= active_page?(template_details_path(template), true) ? 'active' : '' %>">
+    <%= link_to(_('Template details'), template_details_path(template), { 'aria-controls': 'show_template', role: 'tab', class:'nav-link' }) %>
   </li>
   <% template.phases.each do |phase| %><%# TODO when phase is modifiable and show is accessed, it does not get active tab %>
     <% phase_path = (modifiable && !template.customization_of.present?) ? edit_org_admin_template_phase_path(template.id, phase.id) : org_admin_template_phase_path(template.id, phase.id) %>
-    <li role="presentation" <%= active_page?(phase_path) ? ' class=active' : '' %>>
-      <%= link_to(phase.title, phase_path, { 'aria-controls': "#{phase.id}", role: 'tab' }) %>
+    <li role="presentation" class="nav-item <%= active_page?(phase_path) ? 'active' : '' %>">
+      <%= link_to(phase.title, phase_path, { 'aria-controls': "#{phase.id}", role: 'tab', class:'nav-link' }) %>
     </li>
   <% end %>
   <!-- Add another phase button -->
   <% if template_modifiable?(template) %>
-    <li role="presentation" <%= active_page?(new_org_admin_template_phase_path(template.id)) ? ' class=active' : '' %>>
-      <%= link_to(_('Add new phase'), new_org_admin_template_phase_path(template.id), { 'aria-controls': 'add_phase', role: 'tab' }) %>
+    <li role="presentation" class="nav-item <%= active_page?(new_org_admin_template_phase_path(template.id)) ? 'active' : '' %>">
+      <%= link_to(_('Add new phase'), new_org_admin_template_phase_path(template.id), { 'aria-controls': 'add_phase', role: 'tab', class:'nav-link' }) %>
     </li>
   <% end %>
 </ul>
diff --git a/app/views/org_admin/templates/container.html.erb b/app/views/org_admin/templates/container.html.erb
index ff6136e8c0..51ff29e886 100644
--- a/app/views/org_admin/templates/container.html.erb
+++ b/app/views/org_admin/templates/container.html.erb
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-md-12">
     <h1><%= template.id.present? ? template.title : _('New Template') %></h1>
-    <%= link_to _('View all templates'), referrer, class: 'btn btn-default pull-right' %>
+    <%= link_to _('View all templates'), referrer, class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 <div class="row">
@@ -12,12 +12,12 @@
     <%= render partial: "org_admin/templates/navigation", locals: local_assigns.merge({ modifiable: modifiable }) %>
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <%= render partial: partial_path, locals: local_assigns.merge({ referrer: referrer, modifiable: modifiable }) %>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/templates/history.html.erb b/app/views/org_admin/templates/history.html.erb
index da311ea07b..605b41efd0 100644
--- a/app/views/org_admin/templates/history.html.erb
+++ b/app/views/org_admin/templates/history.html.erb
@@ -2,7 +2,7 @@
   <div class="col-md-12">
     <h1>
       <%= templates.first.customization_of.present? ? _('Template Customisation History') : _('Template History') %>
-      <div class="pull-right">
+      <div class="float-end">
         <%= link_to _('View all templates'), referrer, class: "btn btn-primary" %>
       </div>
     </h1>
diff --git a/app/views/org_admin/templates/index.html.erb b/app/views/org_admin/templates/index.html.erb
index 9de826dfe5..a6cd4235f7 100644
--- a/app/views/org_admin/templates/index.html.erb
+++ b/app/views/org_admin/templates/index.html.erb
@@ -10,7 +10,7 @@
         <%= _('If you would like to modify one of the templates below, you must first change your organisation affiliation.') %>
       </p>
     </div>
-    <div class="col-md-6">
+    <div class="form-control col-md-6">
       <%= form_for current_user, url: user_org_swaps_path(current_user),
                                  namespace: 'superadmin',
                                  method: "post",
@@ -22,7 +22,7 @@
                         orgs: @orgs,
                         required: false
                       } %>
-        <%= f.submit _('Change affiliation'), class: 'btn btn-default' %>
+        <%= f.submit _('Change affiliation'), class: 'btn btn-secondary' %>
       <% end %>
     </div>
   <% end %>
@@ -39,15 +39,15 @@
     <ul class="nav nav-tabs" role="tablist">
 
       <% if current_user.can_super_admin? %>
-        <li role="presentation" class="<%= action_name == 'index' ? 'active' : '' %>">
-          <%= link_to(_('All Templates'), org_admin_templates_path, { role: 'tab' }) %>
+        <li role="presentation" class="<%= action_name == 'index' ? 'nav-item active' : 'nav-item' %>">
+          <%= link_to(_('All Templates'), org_admin_templates_path, { class: 'nav-link' }) %>
         </li>
       <% end %>
 
       <li role="presentation"
-          class="<%= action_name == 'organisational' ? 'active' : '' %>">
+          class="<%= action_name == 'organisational' ? 'nav-item active' : 'nav-item' %>">
 
-        <%= link_to(organisational_org_admin_templates_path, { role: 'tab' }) do %>
+        <%= link_to(organisational_org_admin_templates_path, { class: 'nav-link' }) do %>
           <% if current_user.can_super_admin? %>
             <% _('%{org_name} Templates') % { org_name: current_user.org.name } %>
           <% else %>
@@ -59,17 +59,17 @@
 
       <% if !current_user.org.funder_only? %>
         <li role="presentation"
-            class="<%= action_name == 'customisable' ? 'active' : '' %>">
+            class="<%= action_name == 'customisable' ? 'nav-item active' : 'nav-item' %>">
           <%= link_to(_('Customisable Templates'),
-              customisable_org_admin_templates_path, { role: 'tab' }) %>
+              customisable_org_admin_templates_path, { class: 'nav-link' }) %>
         </li>
       <% end %>
     </ul>
 
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body template-scope">
+        <div class="card card-default">
+          <div class="card-body template-scope">
             <h2><%= @title %></h2>
             <div class="template-table-filters">
               <% filter_path = "/paginable/templates/#{action_name}/#{1}" %>
@@ -118,4 +118,4 @@
       <%= _('Create a template') %>
     </a>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/org_admin/templates/new.html.erb b/app/views/org_admin/templates/new.html.erb
index 3fc20468d0..92cd1a6994 100644
--- a/app/views/org_admin/templates/new.html.erb
+++ b/app/views/org_admin/templates/new.html.erb
@@ -3,7 +3,7 @@
     <h1><%= @template.id.present? ? template.title : _('New Template') %></h1>
     <%= link_to _('View all templates'),
         org_admin_templates_path,
-        class: 'btn btn-default pull-right' %>
+        class: 'btn btn-secondary float-end' %>
   </div>
 </div>
 
@@ -15,8 +15,8 @@
 
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div class="template_edit">
               <%= form_for([:org_admin, @template]) do |f| %>
                 <%= render 'form', { f: f }%>
diff --git a/app/views/org_admin/users/edit.html.erb b/app/views/org_admin/users/edit.html.erb
index e144293b34..83a9ae2616 100644
--- a/app/views/org_admin/users/edit.html.erb
+++ b/app/views/org_admin/users/edit.html.erb
@@ -2,7 +2,7 @@
   <div class="col-md-12">
     <h1>
       <%= _('Editing profile for %{username}') % { username: @user.name(false) } %>
-      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-default pull-right', role: 'button') %>
+      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-secondary float-end', role: 'button') %>
     </h1>
   </div>
 </div>
@@ -10,25 +10,25 @@
 <div class="row">
   <div class="col-md-7">
     <%= form_for(@user, namespace: :orgadmin, as: :user, url: org_admin_user_path(@user), html: {method: :put, id: 'org_admin_user_edit' }) do |f| %>
-      <div class="form-group col-xs-12">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
         <%= f.email_field(:email, class: "form-control", "disabled": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:firstname, _('First name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:firstname, _('First name'), class: 'form-label') %>
         <%= f.text_field(:firstname, class: "form-control", "disabled": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:surname, _('Last name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:surname, _('Last name'), class: 'form-label') %>
         <%= f.text_field(:surname, class: "form-control", "disabled": true) %>
       </div>
 
       <% if @departments.any? %>
-      <div class="form-group col-xs-12">
+      <div class="form-control mb-3 col-xs-12">
         <% dept_id = @user.department.nil? ? -1 : @user.department.id  %>
-        <%= f.label(:department_id, _('Department or school'), class: 'control-label') %>
+        <%= f.label(:department_id, _('Department or school'), class: 'form-label') %>
         <%= select_tag(:department_id,
             options_from_collection_for_select(@departments, "id", "name", dept_id),
             include_blank: true,
@@ -38,9 +38,9 @@
       <% end %>
 
       <% if Language.many? %>
-        <div class="form-group col-xs-12">
+        <div class="form-control mb-3 col-xs-12">
           <% lang_id = @user.language.nil? ? Language.id_for(I18n.default_locale) : @user.language.id %>
-          <%= f.label(:language_id, _('Language'), class: 'control-label') %>
+          <%= f.label(:language_id, _('Language'), class: 'form-label') %>
           <%= select_tag(:org_admin_user_language_id,
               options_from_collection_for_select(Language.sorted_by_abbreviation, "id", "name", lang_id),
               disabled: true,
@@ -48,10 +48,10 @@
         </div>
       <% end %>
 
-      <div class="form-group col-xs-12">
+      <div class="form-control mb-3 col-xs-12">
         <!-- Hide save button if no departments for org -->
         <% if @departments.any? %>
-          <%= f.button(_('Save'), class: 'btn btn-default', type: "submit", id: "personal_details_registration_form_submit") %>
+          <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit", id: "personal_details_registration_form_submit") %>
         <% end %>
       </div>
     <% end %>
diff --git a/app/views/orgs/_external_identifiers.html.erb b/app/views/orgs/_external_identifiers.html.erb
index 2422e44948..010180c216 100644
--- a/app/views/orgs/_external_identifiers.html.erb
+++ b/app/views/orgs/_external_identifiers.html.erb
@@ -14,7 +14,7 @@
     end
     schemes.each do |scheme| %>
       <div class="row">
-        <div class="form-group col-xs-10">
+        <div class="form-control mb-3 col-xs-10">
           <% id = presenter.id_for_scheme(scheme: scheme) %>
           <span class="bold"><%= scheme.description %>:</span>
           <%= id_for_display(id: id) %>
@@ -31,10 +31,10 @@
     %>
       <br>
       <div class="row">
-        <div class="form-group col-xs-6">
+        <div class="form-control mb-3 col-xs-6">
           <%= form.fields_for :identifiers, shib_id do |ident_fields| %>
             <%= ident_fields.hidden_field :identifier_scheme_id %>
-            <%= ident_fields.label :value, "#{shib.description} - entityID", class: "control-label" %>
+            <%= ident_fields.label :value, "#{shib.description} - entityID", class: "form-label" %>
             <%= ident_fields.text_field :value, class: "form-control", placeholder: _("Please enter your Shibboleth Entity ID") %>
           <% end %>
         </div>
@@ -43,7 +43,7 @@
 
   <% else %>
     <div class="row">
-       <div id="org-details-org-controls" class="form-group col-xs-10">
+       <div id="org-details-org-controls" class="form-control mb-3 col-xs-10">
          <%= render partial: "shared/org_selectors/external_only",
                 locals: {
                   form: form,
@@ -59,7 +59,7 @@
 <% else %>
   <% presenter.schemes.each do |scheme| %>
     <div class="row">
-      <div class="form-group col-xs-10">
+      <div class="form-control mb-3 col-xs-10">
         <% id = presenter.id_for_scheme(scheme: scheme) %>
         <span class="bold"><%= scheme.description %>:</span>
         <%= id_for_display(id: id) %>
diff --git a/app/views/orgs/_feedback_form.html.erb b/app/views/orgs/_feedback_form.html.erb
index dbd13889af..b9fe3dc21b 100644
--- a/app/views/orgs/_feedback_form.html.erb
+++ b/app/views/orgs/_feedback_form.html.erb
@@ -6,7 +6,7 @@
                            id: "edit_org_feedback_form" } ) do |f| %>
   <h2><%= _('Request Feedback') %></h2>
   <div class="row">
-    <div class="radio col-xs-8">
+    <div class="form-check col-xs-8">
       <%= f.label :feedback_enabled do %>
         <%= f.radio_button(:feedback_enabled, true) %>
         <%= _('On') %>
@@ -22,19 +22,19 @@
       <%= _('Request Expert Feedback - Message Displayed on Share Plan Tab:') %>
     </h3>
     <div class="row">
-      <div class="form-group col-xs-8" data-html="true">
-        <%= f.label :feedback_msg, _('Message'), class: "control-label" %>
+      <div class="form-control mb-3 col-xs-8" data-html="true">
+        <%= f.label :feedback_msg, _('Message'), class: "form-label" %>
         <%= f.text_area :feedback_msg, class: "form-control", spellcheck: true,
                         "aria-required" => true %>
       </div>
-      <div class="form-group col-xs-4">
+      <div class="form-control mb-3 col-xs-4">
         <h4><%= _('Sample Message') %></h4>
         <%= sanitize sample_message_for_org_feedback_form(org) %>
       </div>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-xs-8">
       <%= f.button(_('Save'), id:"save_org_submit", class: "btn btn-primary", type: "submit") %>
     </div>
   </div>
diff --git a/app/views/orgs/_profile_form.html.erb b/app/views/orgs/_profile_form.html.erb
index 06673fecd6..ade41ce1cf 100644
--- a/app/views/orgs/_profile_form.html.erb
+++ b/app/views/orgs/_profile_form.html.erb
@@ -20,14 +20,14 @@
                } %>
   <% else %>
     <div class="row">
-      <div class="form-group col-xs-8">
-        <%= f.label :name, _('Organisation full name'), class: "control-label" %>
+      <div class="form-control mb-3 col-sm-8">
+        <%= f.label :name, _('Organisation full name'), class: "form-label" %>
         <%= f.text_field :name, id: "org_name", class: "form-control", "aria-required": true %>
       </div>
     </div>
     <div class="row">
-      <div class="form-group col-xs-8">
-        <%= f.label :abbreviation, _('Organisation abbreviated name'), class: "control-label" %>
+      <div class="form-control mb-3 col-sm-8">
+        <%= f.label :abbreviation, _('Organisation abbreviated name'), class: "form-label" %>
         <%= f.text_field :abbreviation, id: "org_abbreviation", class: "form-control" %>
       </div>
     </div>
@@ -35,7 +35,7 @@
 
   <% if current_user.can_super_admin? %>
     <div class="row">
-      <div class="form-group col-xs-8">
+      <div class="form-control mb-3 col-sm-8">
         <%= f.label :managed do %>
           <%= f.check_box :managed, id: "org_managed", "aria-required": true,
                 title: _("A managed Org is one that can have its own Guidance and/or Templates. An unmanaged Org is one that was automatically created by the system when a user entered/selected it.") %>
@@ -50,8 +50,8 @@
      end %>
 
   <div class="row">
-    <div class="form-group col-xs-8">
-      <%= f.label :logo, _('Organization logo'), class: "control-label"  %>
+    <div class="form-control mb-3 col-sm-8">
+      <%= f.label :logo, _('Organization logo'), class: "form-label"  %>
 
       <% if org.logo.present? %>
         <div class="clearfix"></div>
@@ -63,7 +63,7 @@
             <%= _('Remove logo') %>
           <% end %>
           <strong> - <%= _('or') %> - </strong>
-          <span class="btn btn-default btn-file"><%= f.file_field :logo %></span>
+          <span class="btn btn-secondary btn-file"><%= f.file_field :logo %></span>
         </div>
       <% else %>
         <%= f.file_field :logo %>
@@ -74,7 +74,7 @@
   <hr>
 
   <div class="row">
-    <div class="col-xs-8">
+    <div class="col-sm-8">
       <em class="sr-only"><%= shared_links_tooltip %></em>
       <%= render(partial: '/shared/links',
                  locals: {
@@ -90,13 +90,13 @@
   <hr>
 
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <h3><%= _("Help Desk email") %></h3>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :helpdesk_email, _('Help Desk email'), class: "control-label" %>
+    <div class="form-control mb-3 col-sm-4">
+      <%= f.label :helpdesk_email, _('Help Desk email'), class: "form-label" %>
       <%= f.email_field :helpdesk_email, class: "form-control" %>
     </div>
   </div>
@@ -104,31 +104,31 @@
   <hr>
 
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <h3><%= _("Administrator contact") %></h3>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_email, _('Contact email'), class: "control-label" %>
+    <div class="form-control mb-3 col-sm-4">
+      <%= f.label :contact_email, _('Contact email'), class: "form-label" %>
       <%= f.email_field :contact_email, class: "form-control", aria: { required: true } %>
     </div>
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_name, _('Link text'), class: "control-label" %>
+    <div class="form-control mb-3 col-sm-4">
+      <%= f.label :contact_name, _('Link text'), class: "form-label" %>
       <%= f.text_field :contact_name, class: "form-control", aria: { required: true } %>
     </div>
   </div>
 
   <hr>
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <h3><%= _("Google Analytics Tracker") %></h3>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
+    <div class="form-control mb-3 col-sm-4">
       <%= f.fields_for :tracker do |t| %>
-        <%= t.label :code, _('Tracker Code'), class: "control-label" %>
+        <%= t.label :code, _('Tracker Code'), class: "form-label" %>
         <%= t.text_field :code, class: "form-control", aria: { required: false } %>
       <% end %>
     </div>
@@ -138,7 +138,7 @@
 
   <div class="row">
     <% if current_user.can_super_admin? %>
-      <fieldset class="col-xs-8">
+      <fieldset class="col-sm-8">
         <legend>
           <%= _('Organisation Types') %>
             &nbsp; <a href="#" aria-label="<%= _('Text') %>" data-toggle="tooltip" data-placement="right" title="<%= org_types_tooltip %>">
@@ -146,19 +146,19 @@
             <em class="sr-only"></em>
           </a>
         </legend>
-        <div class="checkbox">
+        <div class="form-check">
           <%= f.label :funder do %>
             <%= f.check_box :funder, { class: 'org_types', value: org.funder? }, "true", "false" %>
             <%= _('Funder') %>
           <% end %>
         </div>
-        <div class="checkbox">
+        <div class="form-check">
           <%= f.label :institution do %>
             <%= f.check_box :institution, { class: 'org_types', value: org.institution? }, "true", "false" %>
             <%= _('Institution') %>
           <% end %>
         </div>
-        <div class="checkbox">
+        <div class="form-check">
           <%= f.label :organisation do %>
             <%= f.check_box :organisation, { class: 'org_types', value: org.organisation? }, "true", "false" %>
             <%= _('Organisation') %>
@@ -166,7 +166,7 @@
         </div>
       </fieldset>
     <% else %>
-      <div class="col-xs-8">
+      <div class="col-sm-8">
         <dl>
           <dt>
             <%= _('Organisation type(s)') %>
@@ -193,7 +193,7 @@
   <% end %>
 
   <div class="row">
-    <div class="form-group col-xs-8">
+    <div class="form-control mb-3 col-sm-8">
       <%= f.button(_('Save'), id:"save_org_details_submit", class: "btn btn-primary", type: "submit") %>
     </div>
   </div>
diff --git a/app/views/orgs/admin_edit.html.erb b/app/views/orgs/admin_edit.html.erb
index df5f67f0c8..c26674f2aa 100644
--- a/app/views/orgs/admin_edit.html.erb
+++ b/app/views/orgs/admin_edit.html.erb
@@ -6,7 +6,7 @@
       <%= _('Organisation details') %>
     </h1>
     <% if current_user.can_super_admin? %>
-      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-default pull-right' %>
+      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-secondary float-end' %>
     <% end %>
   </div>
 </div>
@@ -14,30 +14,30 @@
 <div class="row">
   <div class="col-md-12">
     <ul class="nav nav-tabs" role="tablist">
-      <li role="profile" class="active">
-        <a href="#profile" role="tab" aria-controls="profile" data-toggle="tab"><%= _('Profile information') %></a>
+      <li role="profile" class="nav-item">
+        <a href="#profile" class="nav-link active" role="tab" aria-controls="profile" data-bs-toggle="tab"><%= _('Profile information') %></a>
       </li>
 
-      <li role="feedback">
-        <a href="#feedback" role="tab" aria-controls="feedback" data-toggle="tab"><%= _('Request feedback') %></a>
+      <li class="nav-item" role="feedback">
+        <a href="#feedback" class="nav-link" role="tab" aria-controls="feedback" data-bs-toggle="tab"><%= _('Request feedback') %></a>
       </li>
 
-      <li role="form">
-        <a href="#departments" role="tab" aria-controls="form" data-toggle="tab"><%= _('Schools/Departments') %></a>
+      <li class="nav-item" role="form">
+        <a href="#departments" class="nav-link" role="tab" aria-controls="form" data-bs-toggle="tab"><%= _('Schools/Departments') %></a>
       </li>
 
       <% if current_user.can_super_admin? %>
-        <li role="merge">
-          <a href="#merge" role="tab" aria-controls="form" data-toggle="tab"><%= _('Merge') %></a>
+        <li class="nav-item" role="merge">
+          <a href="#merge" class="nav-link" role="tab" aria-controls="form" data-bs-toggle="tab"><%= _('Merge') %></a>
         </li>
       <% end %>
     </ul>
 
     <!-- render navigation tabs for the template-->
     <div class="tab-content">
-      <div role="tabpanel" class="tab-pane active" id="profile">
-        <div class="panel panel-default">
-          <div class="panel-body">
+      <div role="tabpanel" class="tab-pane show active" id="profile">
+        <div class="card card-default">
+          <div class="card-body">
             <div class="px-2">
               <%= render partial: 'orgs/profile_form',
                          locals: { org: org, method: method, url: url } %>
@@ -47,8 +47,8 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="feedback">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div>
               <%= render partial: 'orgs/feedback_form',
                          locals: { org: org } %>
@@ -58,8 +58,8 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="departments">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div>
               <%= render partial: 'orgs/departments',
                          locals: { org: org } %>
@@ -70,8 +70,8 @@
 
       <% if current_user.can_super_admin? %>
         <div role="tabpanel" class="tab-pane" id="merge">
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default">
+            <div class="card-body">
               <div>
                 <%= render partial: 'orgs/merge_form', locals: { org: org, analysis: nil } %>
               </div>
diff --git a/app/views/orgs/shibboleth_ds.html.erb b/app/views/orgs/shibboleth_ds.html.erb
index 64114ac85c..9da63c22b1 100644
--- a/app/views/orgs/shibboleth_ds.html.erb
+++ b/app/views/orgs/shibboleth_ds.html.erb
@@ -8,8 +8,8 @@
 <div class="row">
   <div class="col-md-12">
     <%= form_for 'shibboleth_ds', url: shibboleth_ds_path, namespace: 'shib-ds', html: {id: 'shibboleth_ds'} do |f| %>
-      <div class="form-group col-xs-8">
-        <%= f.label(:org_name, _('Look up your organisation here'), class: "control-label") %>
+      <div class="form-control mb-3 col-xs-8">
+        <%= f.label(:org_name, _('Look up your organisation here'), class: "form-label") %>
 
         <% if @orgs.length <= 10 %>
           <select id="org_id" name="org_id">
@@ -27,7 +27,7 @@
                                classes: '' } %>
         <% end %>
 
-        <%= f.button(_('Go'), class: "btn btn-default", type: "submit") %>
+        <%= f.button(_('Go'), class: "btn btn-secondary", type: "submit") %>
 
         <% if @orgs.length > 10 %>
           <p class="centered">
diff --git a/app/views/paginable/api_clients/_index.html.erb b/app/views/paginable/api_clients/_index.html.erb
index 798cff9e7e..71559ca9da 100644
--- a/app/views/paginable/api_clients/_index.html.erb
+++ b/app/views/paginable/api_clients/_index.html.erb
@@ -34,7 +34,7 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="api_client-<%= client.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
diff --git a/app/views/paginable/contributors/_index.html.erb b/app/views/paginable/contributors/_index.html.erb
index 0df8581325..51b9868aff 100644
--- a/app/views/paginable/contributors/_index.html.erb
+++ b/app/views/paginable/contributors/_index.html.erb
@@ -45,17 +45,19 @@
               <button class="btn btn-link dropdown-toggle"
                       type="button"
                       id="contributor-<%= contributor.id %>-actions"
-                      data-toggle="dropdown"
+                      data-bs-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="contributor-<%= contributor.id %>-actions">
-                <li><%= link_to _('Edit'),
-                        edit_plan_contributor_path(plan_id: @plan.id, id: contributor) %></li>
-                <li><%= link_to _('Remove'),
+                <li class="nav-item"><%= link_to _('Edit'),
+                        edit_plan_contributor_path(plan_id: @plan.id, id: contributor),
+                        class: 'dropdown-item nav-link px-3' %></li>
+                <li class="nav-item"><%= link_to _('Remove'),
                                 plan_contributor_path(@plan.id, contributor),
                                 data: { confirm: _("You are about to delete '%{contributor_name}'. Are you sure?") % { contributor_name: contributor.name } },
-                                method: :delete %>
+                                method: :delete,
+                                class: 'dropdown-item nav-link px-3' %>
                 </li>
               </ul>
             </div>
diff --git a/app/views/paginable/departments/_index.html.erb b/app/views/paginable/departments/_index.html.erb
index c1d8178f3a..e17227a330 100644
--- a/app/views/paginable/departments/_index.html.erb
+++ b/app/views/paginable/departments/_index.html.erb
@@ -18,7 +18,7 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="department-<%= department.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
@@ -33,4 +33,4 @@
       <% end %>
     </tbody>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/paginable/guidance_groups/_index.html.erb b/app/views/paginable/guidance_groups/_index.html.erb
index c1a99d1f4b..2076ab53f1 100644
--- a/app/views/paginable/guidance_groups/_index.html.erb
+++ b/app/views/paginable/guidance_groups/_index.html.erb
@@ -40,20 +40,20 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="guidance_group-<%= guidance_gr.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="guidance_group-<%= guidance_gr.id %>-actions">
-                <li><%= link_to _('Edit'), admin_edit_guidance_group_path(guidance_gr) %></li>
+                <li class="nav-item"><%= link_to _('Edit'), admin_edit_guidance_group_path(guidance_gr), class:'dropdown-item px-3' %></li>
                 <% if guidance_gr.published? %>
-                    <li><%= link_to _('Unpublish'),  admin_update_unpublish_guidance_group_path(guidance_gr), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Unpublish'),  admin_update_unpublish_guidance_group_path(guidance_gr), method: :put, class:'dropdown-item px-3' %></li>
                 <% else %>
-                    <li><%= link_to _('Publish'),  admin_update_publish_guidance_group_path(guidance_gr), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Publish'),  admin_update_publish_guidance_group_path(guidance_gr), method: :put, class:'dropdown-item px-3' %></li>
                 <% end %>
                 <% if allow_delete %>
-                  <li><%= link_to _('Remove'), admin_destroy_guidance_group_path(guidance_gr), data: {confirm: _("You are about to delete '%{guidance_group_name}'. This will affect guidance. Are you sure?") % { :guidance_group_name => guidance_gr.name }}, method: :delete %></li>
+                  <li class="nav-item"><%= link_to _('Remove'), admin_destroy_guidance_group_path(guidance_gr), data: {confirm: _("You are about to delete '%{guidance_group_name}'. This will affect guidance. Are you sure?") % { :guidance_group_name => guidance_gr.name }}, method: :delete, class:'dropdown-item px-3' %></li>
                 <% end %>
               </ul>
             </div>
diff --git a/app/views/paginable/guidances/_index.html.erb b/app/views/paginable/guidances/_index.html.erb
index 7f5214c02c..453d193498 100644
--- a/app/views/paginable/guidances/_index.html.erb
+++ b/app/views/paginable/guidances/_index.html.erb
@@ -46,20 +46,20 @@
                   class="btn btn-link dropdown-toggle"
                   type="button"
                   id="guidance-<%= guidance.id %>-actions"
-                  data-toggle="dropdown"
+                  data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="true">
                   <%= _('Actions') %><span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="guidance-<%= guidance.id %>-actions">
-                  <li><%= link_to _('Edit'), admin_edit_guidance_path(guidance) %></li>
+                  <li class="nav-item"><%= link_to _('Edit'), admin_edit_guidance_path(guidance), class:'dropdown-item px-3' %></li>
                   <!-- If the guidance has never been published or it has changed -->
                   <% if guidance.published? %>
-                    <li><%= link_to _('Unpublish'), admin_unpublish_guidance_path(guidance), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Unpublish'), admin_unpublish_guidance_path(guidance), method: :put, class:'dropdown-item px-3' %></li>
                   <% else %>
-                    <li><%= link_to _('Publish'), admin_publish_guidance_path(guidance), method: :put %></li>
+                    <li class="nav-item"><%= link_to _('Publish'), admin_publish_guidance_path(guidance), method: :put, class:'dropdown-item px-3' %></li>
                   <% end %>
-                  <li><%= link_to _('Remove'), admin_destroy_guidance_path(guidance),
-                  data: {confirm: _("You are about to delete '%{guidance_summary}'. Are you sure?") % { :guidance_summary => truncate(sanitize(guidance.text,tags: %w(br a)), length: 20 , omission: _('... (continued)'))} }, method: :delete %>
+                  <li class="nav-item"><%= link_to _('Remove'), admin_destroy_guidance_path(guidance),
+                  data: {confirm: _("You are about to delete '%{guidance_summary}'. Are you sure?") % { :guidance_summary => truncate(sanitize(guidance.text,tags: %w(br a)), length: 20 , omission: _('... (continued)'))} }, method: :delete, class:'dropdown-item px-3' %>
                   </li>
                 </ul>
               </div>
diff --git a/app/views/paginable/orgs/_index.html.erb b/app/views/paginable/orgs/_index.html.erb
index c7b0516814..3d086b07b3 100644
--- a/app/views/paginable/orgs/_index.html.erb
+++ b/app/views/paginable/orgs/_index.html.erb
@@ -24,15 +24,15 @@
                 class="btn btn-link dropdown-toggle"
                 type="button"
                 id="org-<%= org.id %>-actions"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="org-<%= org.id %>-actions">
-                <li><%= link_to _('Edit'), admin_edit_org_path(org) %></li>
+                <li class="nav-item"><%= link_to _('Edit'), admin_edit_org_path(org), class:'dropdown-item px-3' %></li>
                 <% unless org.user_count > 0 || org.template_count > 0 || org.contributors.length > 0 || org.plans.length > 0 %>
-                  <li><%= link_to _('Remove'), super_admin_org_path(org), data: {confirm: _("You are about to delete '%{org_name}'. Are you sure?") % { org_name: org.name}}, method: :delete %></li>
+                  <li class="nav-item"><%= link_to _('Remove'), super_admin_org_path(org), data: {confirm: _("You are about to delete '%{org_name}'. Are you sure?") % { org_name: org.name}}, method: :delete, class:'dropdown-item px-3' %></li>
                 <% end %>
               </ul>
             </div>
diff --git a/app/views/paginable/plans/_privately_visible.html.erb b/app/views/paginable/plans/_privately_visible.html.erb
index ceb5476c41..9f3eb55fd1 100644
--- a/app/views/paginable/plans/_privately_visible.html.erb
+++ b/app/views/paginable/plans/_privately_visible.html.erb
@@ -51,31 +51,31 @@
           <td>
             <div class="dropdown">
               <button class="btn btn-link dropdown-toggle" type="button"
-                      id="plan-<%= plan.id %>-actions" data-toggle="dropdown"
+                      id="plan-<%= plan.id %>-actions" data-bs-toggle="dropdown" 
                       aria-haspopup="true" aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
 
               <ul class="dropdown-menu" aria-labelledby="plan-<%= plan.id %>-actions">
               <% if plan.editable_by?(current_user.id) then %>
-                <li><%= link_to _('Edit'), plan_path(plan) %></li>
+                <li class="nav-item"><%= link_to _('Edit'), plan_path(plan), class: 'dropdown-item  px-3' %></li>
 
                 <% if plan.administerable_by?(current_user.id) %>
-                  <li><%= link_to _('Share'), share_plan_path(plan) %></li>
+                  <li><%= link_to _('Share'), share_plan_path(plan), class: 'dropdown-item  px-3' %></li>
                 <% end %>
 
-                <li><%= link_to _('Download'), download_plan_path(plan) %></li>
-                <li><%= link_to(_('Copy'), duplicate_plan_path(plan), data: { method: :post }) %></li>
+                <li><%= link_to _('Download'), download_plan_path(plan), class: 'dropdown-item  px-3' %></li>
+                <li><%= link_to(_('Copy'), duplicate_plan_path(plan), class: 'dropdown-item  px-3', data: { method: :post }) %></li>
               <% else %>
-                <li><%= link_to _('View'), plan_path(plan) %></li>
+                <li><%= link_to _('View'), plan_path(plan), class: 'dropdown-item  px-3' %></li>
 
                 <% if !plan.reviewable_by?(current_user.id) %>
-                  <li><%= link_to _('Download'), download_plan_path(plan) %></li>
+                  <li><%= link_to _('Download'), download_plan_path(plan), class: 'dropdown-item  px-3' %></li>
                 <% end %>
               <% end %>
               <% role = my_plan_roles.first %>
               <% conf = (role.creator? && plan.publicly_visible?) ? _("Are you sure you wish to remove this public plan? This will remove it from the Public DMPs page but any collaborators will still be able to access it.") : _("Are you sure you wish to remove this plan? Any collaborators will still be able to access it.") %>
-              <li><%= link_to _('Remove'), deactivate_role_path(role), 'data-method': 'put', rel: 'nofollow', 'data-confirm': conf %></li>
+              <li><%= link_to _('Remove'), deactivate_role_path(role), 'class': 'dropdown-item  px-3', 'data-method': 'put', rel: 'nofollow', 'data-confirm': conf %></li>
             </ul>
           </div>
           </td>
diff --git a/app/views/paginable/research_outputs/_index.html.erb b/app/views/paginable/research_outputs/_index.html.erb
index 8b89fb7163..c4e912f563 100644
--- a/app/views/paginable/research_outputs/_index.html.erb
+++ b/app/views/paginable/research_outputs/_index.html.erb
@@ -43,17 +43,17 @@
               <button class="btn btn-link dropdown-toggle"
                       type="button"
                       id="research_output-<%= output.id %>-actions"
-                      data-toggle="dropdown"
+                      data-bs-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="true">
                 <%= _('Actions') %><span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="research_output-<%= output.id %>-actions">
                 <li><%= link_to _('Edit'),
-                        edit_plan_research_output_path(plan_id: @plan.id, id: output.id) %></li>
+                        edit_plan_research_output_path(plan_id: @plan.id, id: output.id), class: 'dropdown-item' %></li>
                 <li><%= link_to _('Remove'),
                                 plan_research_output_path(@plan.id, output),
                                 data: { confirm: _("You are about to delete '%{research_output_title}'. Are you sure?") % { research_output_title: output.title } },
-                                method: :delete %>
+                                method: :delete, class: 'dropdown-item' %>
                 </li>
               </ul>
             </div>
diff --git a/app/views/paginable/templates/_customisable.html.erb b/app/views/paginable/templates/_customisable.html.erb
index da85873975..f22831323e 100644
--- a/app/views/paginable/templates/_customisable.html.erb
+++ b/app/views/paginable/templates/_customisable.html.erb
@@ -15,7 +15,7 @@
       <% customization = customizations.find{ |customization| customization.customization_of == template.family_id } %>
       <tr id="<%= dom_id(template) %>">
         <td>
-          <%= link_to_customizable_template "#{template.is_default ? '* ' : ''}#{template.title}", customization, template %>
+          <%= link_to_customizable_template "#{template.is_default ? '* ' : ''}#{template.title}", customization, template, false %>
         </td>
         <td>
           <%= template.org.name %>
@@ -25,14 +25,14 @@
             <% if customization.upgrade_customization? %>
               <% tooltip = _("Select 'Transfer customisation' in the Actions menu to review your customisation(s) and make any necessary changes. When you are done, you must return to the Actions menu and publish your customisation(s).") %>
               <%= _('Original funder template has changed!') %><em class="sr-only"><%= tooltip %></em>
-              &nbsp;&nbsp;<i class="fas fa-copy red" aria-hidden="true" data-toggle="tooltip" title="<%= tooltip %>"></i>
+              &nbsp;&nbsp;<i class="fas fa-copy red" aria-hidden="true" data-bs-toggle="tooltip" title="<%= tooltip %>"></i>
             <% else %>
               <% if customization.published? %>
                 <%= _('Published') %>
               <% elsif customization.draft? %>
                 <% tooltip = _('You have unpublished changes! Select "Publish changes" in the Actions menu when you are ready to make them available to users.') %>
                 <%= _('Published') %> <em class="sr-only"><%= tooltip %></em>
-              &nbsp;&nbsp;<i class="fas fa-pen-to-square red" aria-hidden="true" data-toggle="tooltip" title="<%= tooltip %>"></i>
+              &nbsp;&nbsp;<i class="fas fa-pen-to-square red" aria-hidden="true" data-bs-toggle="tooltip" title="<%= tooltip %>"></i>
               <% else %>
                 <%= _('Unpublished') %>
               <% end %>
@@ -47,26 +47,27 @@
         </td>
         <td>
           <div class="dropdown">
-            <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
               <%= _('Actions') %><span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
-              <li><%= link_to_customizable_template "", customization, template %></li>
+              <li><%= link_to_customizable_template "", customization, template, true %></li>
               <% if customization.present? && customization.created_at >= template.created_at %>
-                <li><%= link_to _('History'), history_org_admin_template_path(customization.id) %></li>
+                <li><%= link_to _('History'), history_org_admin_template_path(customization.id), class: 'dropdown-item px-3' %></li>
                 <% if customization.draft? || customization.published? %>
-                  <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(customization.id), 'data-method': 'patch' %></li>
+                  <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(customization.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                 <% end %>
                 <% if customization.draft? %>
-                  <li><%= link_to _('Publish changes'), publish_org_admin_template_path(customization.id), 'data-method': 'patch' %></li>
+                  <li><%= link_to _('Publish changes'), publish_org_admin_template_path(customization.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                 <% elsif !customization.published? %>
-                    <li><%= link_to _('Publish'), publish_org_admin_template_path(customization.id), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Publish'), publish_org_admin_template_path(customization.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                 <% end %>
                 <% if customization.removable? %>
                   <li>
                     <%= link_to _('Remove'), org_admin_template_path(id: customization.id),
                                   'data-method': 'delete', rel: 'nofollow',
-                                  'data-confirm': _('Are you sure you want to remove your customization of "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: customization.title} %>
+                                  'data-confirm': _('Are you sure you want to remove your customization of "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: customization.title},
+                                  class: 'dropdown-item px-3' %>
                   </li>
                 <% end %>
               <% end %>
diff --git a/app/views/paginable/templates/_organisational.html.erb b/app/views/paginable/templates/_organisational.html.erb
index 2376970062..921ca09e42 100644
--- a/app/views/paginable/templates/_organisational.html.erb
+++ b/app/views/paginable/templates/_organisational.html.erb
@@ -49,37 +49,39 @@
           <% if action_name != 'index' %>
             <td>
               <div class="dropdown">
-                <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                   <%= _('Actions') %><span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu">
-                  <li><%= link_to _('Edit'), edit_org_admin_template_path(template.id) %></li>
-                  <li><%= link_to _('History'), history_org_admin_template_path(template.id) %></li>
+                  <li><%= link_to _('Edit'), edit_org_admin_template_path(template.id), class: 'dropdown-item px-3' %></li>
+                  <li><%= link_to _('History'), history_org_admin_template_path(template.id), class: 'dropdown-item px-3' %></li>
                   <% if template.draft? || template.published? %>
-                    <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(template.id), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Unpublish'), unpublish_org_admin_template_path(template.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                   <% end %>
                   <% if template.draft? %>
-                    <li><%= link_to _('Publish changes'), publish_org_admin_template_path(template), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Publish changes'), publish_org_admin_template_path(template), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                   <% elsif !template.published? %>
-                    <li><%= link_to _('Publish'), publish_org_admin_template_path(template.id), 'data-method': 'patch' %></li>
+                    <li><%= link_to _('Publish'), publish_org_admin_template_path(template.id), 'data-method': 'patch', class: 'dropdown-item px-3' %></li>
                   <% end %>
                   <li>
                     <%= link_to _('Copy'),
                         org_admin_template_copies_path(template.id),
-                        data: { method: 'post' }
+                        data: { method: 'post' },
+                        class: 'dropdown-item px-3'
                     %>
                   </li>
                   <% if template.removable? %>
                     <li>
                       <%= link_to _('Remove'), org_admin_template_path(id: template.id),
                                   'data-method': 'delete', rel: 'nofollow',
-                                  'data-confirm': _('Are you sure you want to remove "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: template.title} %>
+                                  'data-confirm': _('Are you sure you want to remove "%{template_title}"? Any published versions will become unavailable to users.') % { template_title: template.title},
+                                  class: 'dropdown-item px-3' %>
                     </li>
                   <% end %>
                   <li><%= link_to template_export_org_admin_template_url(template, format: :pdf),
                                   title: export_as_pdf,
                                   target: '_blank',
-                                  class: 'has-new-window-popup-info' do %>
+                                  class: 'has-new-window-popup-info dropdown-item px-3' do %>
                           <%= export_as_pdf %>
                           <em class="sr-only"><%= _('(new window)') %></em>
                           <span class="new-window-popup-info"><%= _('Opens in new window') %></span>
@@ -87,7 +89,7 @@
                   </li>
                   <li>
                     <%= direct_link(template, true) %>
-                    <a href="" class="copy-link" data-toggle="modal" data-target="#link-modal"><%= _('Copy link') %></a>
+                    <a href="" class="copy-link dropdown-item px-3" data-bs-toggle="modal" data-bs-target="#link-modal"><%= _('Copy link') %></a>
                   </li>
                 </ul>
               </div>
diff --git a/app/views/paginable/templates/_publicly_visible.html.erb b/app/views/paginable/templates/_publicly_visible.html.erb
index 0a0af28673..6d6d6a2d2e 100644
--- a/app/views/paginable/templates/_publicly_visible.html.erb
+++ b/app/views/paginable/templates/_publicly_visible.html.erb
@@ -44,7 +44,7 @@
           <td class="text-center">
           <% if signed_in %>
             <%= direct_link(template) %>
-            <a href="" class="copy-link" data-toggle="modal" data-target="#link-modal" title="<%= _('Copy link to create a new plan') %>"><span class="fas fa-clipboard"></span></a>
+            <a href="" class="copy-link" data-bs-toggle="modal" data-bs-target="#link-modal" title="<%= _('Copy link to create a new plan') %>"><span class="fas fa-clipboard"></span></a>
           <% else %>
             <%= _('Requires login') %>
           <% end %>
diff --git a/app/views/phases/_edit_plan_answers.html.erb b/app/views/phases/_edit_plan_answers.html.erb
index df53921eb3..c27caf46cd 100644
--- a/app/views/phases/_edit_plan_answers.html.erb
+++ b/app/views/phases/_edit_plan_answers.html.erb
@@ -5,16 +5,16 @@
         <div class="row">
           <div class="col-md-8">
             <div id="sections-accordion-controls">
-              <div class="accordion-controls" data-parent="sections-accordion">
+              <div class="accordion-controls px-1" data-parent="sections-accordion">
                 <a href="#" data-toggle-direction="show"><%= _('expand all') %></a>
                 <span>|</span>
                 <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
               </div>
             </div>
           </div>
+          <div class="col-md-4">
           <div id="progress-data" data-sections="<%= sections_info(plan).to_json %>" data-remove="<%= remove_list(plan).to_json %>">
           </div>
-          <div class="col-md-4">
             <% if plan.present? && phase.present? %>
               <div class="progress">
                 <%= render partial: "/plans/progress",
@@ -25,19 +25,17 @@
         </div>
       </div>
     </div>
-    <div class="panel-group" id="sections-accordion" role="tablist"
+    <div class="accordion" id="sections-accordion" role="tablist"
          aria-multiselectable="true">
-    <% phase.sections.sort {|a,b| a.number <=> b.number }.each do |section| %>
-      <div class="panel panel-default">
-        <div class="heading-button" role="button" data-toggle="collapse"
+      <% phase.sections.sort {|a,b| a.number <=> b.number }.each do |section| %>
+      <div class="accordion-item w-100 my-3">
+        <h2 class="accordion-header" role="tab" id="heading-<%= section.id %>">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              id="section-panel-<%= section.id %>"
-             data-parent="sections-accordion"
+             data-bs-parent="sections-accordion"
              href="#collapse-<%= section.id %>"
              aria-expanded="false"
              aria-controls="collapse-<%= section.id %>">
-
-          <div class="panel-heading" role="tab" id="heading-<%= section.id %>">
-            <div class="panel-title pull-left">
               <%= section.title %>
               <% if plan.present? %>
                   <span class="section-progress-<%= section.id %>">
@@ -45,13 +43,12 @@
                                locals: { section: section, plan: plan } %>
                   </span>
               <% end %>
-            </div>
-            <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-            <div class="clearfix"></div>
-          </div>
-        </div>
-        <div id="collapse-<%= section.id %>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
-          <div class="panel-body"><!-- accordion body -->
+            </button>
+  
+        </h2>
+
+        <div id="collapse-<%= section.id %>" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
+          <div class="accordion-body card card-body"><!-- accordion-body -->
             <div class="section-description">
               <div class="display-readonly-textarea-content">
                 <%= sanitize section.description %>
@@ -114,10 +111,10 @@
                   <hr />
                 <% end %>
               <% end %> <!-- section.questions.each do -->
-            </div> <!-- panel-body -->
-          </div> <!-- panel-collapse -->
-        </div> <!-- panel panel-default -->
+          </div> <!-- accordion-body -->
+        </div> <!-- accordion-collapse -->
+      </div> <!-- accordion-item -->
       <% end %>   <!-- phase.sections.sort {|a,b| a.number <=> b.number }.each do -->
-    </div>   <!-- panel-group -->
-  </div> <!-- tab panel -->
+    </div> <!-- accordion -->
+  </div> <!-- tab card -->
 </div> <!-- tab panels -->
diff --git a/app/views/phases/_guidances_notes.html.erb b/app/views/phases/_guidances_notes.html.erb
index 8c6937e929..05c7f351ef 100644
--- a/app/views/phases/_guidances_notes.html.erb
+++ b/app/views/phases/_guidances_notes.html.erb
@@ -3,23 +3,23 @@
 <% active_nav = nil %>
 <div id="plan-guidance-tab">
   <!-- Nav tabs -->
-  <ul class="nav nav-pills nav-justified mb-10" role="tablist">
-      <% if guidances_active %>
-          <li role="presentation" class="active">
-              <a href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-toggle="pill">
-                  <%= _('Guidance') %>
-              </a>
-          </li>
-      <% end %>
-      <% if plan.present? %>
-          <li role="presentation" class="<%= 'active' if !guidances_active %>">
-              <a href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-toggle="pill">
-                  <span id="notes-title-<%= question.id %>">
-                      <%= render partial: '/notes/title', locals: { answer: answer } %>
-                  </span>
-              </a>
-          </li>
-      <% end %>
+  <ul class="nav nav-pills nav-justified mb-2" role="tablist">
+    <% if guidances_active %>
+      <li role="presentation" class="nav-item">
+        <a class="nav-link active" href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-bs-toggle="pill">
+          <%= _('Guidance') %>
+        </a>
+      </li>
+    <% end %>
+    <% if plan.present? %>
+      <li role="presentation" class="nav-item">
+        <a class="nav-link <%= 'active' if !guidances_active %>" href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-bs-toggle="pill">
+          <span id="notes-title-<%= question.id %>">
+            <%= render partial: '/notes/title', locals: { answer: answer } %>
+          </span>
+        </a>
+      </li>
+    <% end %>
   </ul>
   <div class="tab-content">
     <% if guidances_active %>
@@ -28,14 +28,14 @@
         <ul class="nav nav-tabs" role="tablist">
           <% tablist.each_with_index do |tab, i| %>
             <% active_nav ||= tab[:name] %>
-            <li role="presentation" <%= active_nav == tab[:name] ? "class=active" : "" %>>
+            <li role="presentation" class="nav-item">
               <a
-                data-target="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
+                data-bs-target="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 aria-controls="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 role="tab"
-                data-toggle="tab"
+                data-bs-toggle="tab"
                 tabindex="0"
-                class="view-plan-guidance">
+                class="<%= active_nav == tab[:name] ? "nav-link view-plan-guidance active" : "nav-link view-plan-guidance" %>">
                 <%= tab[:name] %>
               </a>
             </li>
@@ -44,34 +44,33 @@
         <div class="tab-content">
           <% tablist.each_with_index do |tab, i| %>
             <div id="<%= "guidance_per_question_#{question.id}_#{i}" %>" role="tabpanel" class="tab-pane <%= active_nav == tab[:name] ? 'active' : '' %>">
-                <div class="panel panel-default">
-                  <div class="panel-body">
-                    <% if tab[:annotations].present? %>
-                      <% tab[:annotations].each do |annotation| %>
-                        <%=
+              <div class="card card-default">
+                <div class="card-body">
+                  <% if tab[:annotations].present? %>
+                    <% tab[:annotations].each do |annotation| %>
+                      <%=
                           render partial: 'org_admin/annotations/show', locals: {
                             template: template,
                             example_answer: nil,
                             guidance: annotation,
                             for_plan: true }
                         %>
-                      <% end %>
-                      <% if tab[:groups].present? %>
-                        <hr />
-                      <% end %>
                     <% end %>
                     <% if tab[:groups].present? %>
-                      <%= render partial: 'guidance_groups/index_by_theme',
-                          locals: { question: question, guidance_groups_by_theme: tab[:groups] } %>
+                      <hr />
                     <% end %>
-                  </div>
+                  <% end %>
+                  <% if tab[:groups].present? %>
+                    <%= render partial: 'guidance_groups/index_by_theme',
+                          locals: { question: question, guidance_groups_by_theme: tab[:groups] } %>
+                  <% end %>
                 </div>
               </div>
+            </div>
           <% end %>
         </div>
       </div>
     <% end %>
-
     <% if plan.present? %>
       <div id="notes-<%= question.id %>" role="tabpanel" class="tab-pane <%= 'active' if !guidances_active %> notes">
         <%= render partial: '/notes/layout', locals: { plan: plan, question: question, answer: answer } %>
diff --git a/app/views/phases/_overview.html.erb b/app/views/phases/_overview.html.erb
index 656323b986..8f9fe1be6b 100644
--- a/app/views/phases/_overview.html.erb
+++ b/app/views/phases/_overview.html.erb
@@ -3,7 +3,7 @@
   <div class="col-xs-12">
     <p class='fontsize-h4'>
       <%= _('Instructions') %>
-      <a href="<%= edit_plan_path(plan_id, phase_id: phase.id) %>" class="btn btn-default pull-right"><%= _('Write plan') %></a>
+      <a href="<%= edit_plan_path(plan_id, phase_id: phase.id) %>" class="btn btn-secondary float-end"><%= _('Write plan') %></a>
     </p>
     <p class="text-justify">
         <div class="display-readonly-textarea-content">
diff --git a/app/views/plans/_download_form.html.erb b/app/views/plans/_download_form.html.erb
index 930d9b6a04..5100a71b5a 100644
--- a/app/views/plans/_download_form.html.erb
+++ b/app/views/plans/_download_form.html.erb
@@ -5,7 +5,7 @@
 
   <h2><%= _('Format') %></h2>
   <div class="row">
-    <div class="form-group col-xs-2">
+    <div class="form-control mb-3 col-sm-2">
       <%= select_tag :format, options_for_select(Settings::Template::VALID_FORMATS, :pdf),
                      class: 'form-control', "aria-labelledby": "format" %>
     </div>
@@ -15,8 +15,8 @@
     <h2><%= _("Download settings") %></h2>
     <%= hidden_field_tag 'export[form]', true %>
     <% if @phase_options.length > 1 %>
-      <div class="form-group">
-        <%= label_tag(:phase_id, _("Select phase to download")) %>
+      <div class="form-control mb-5">
+        <%= label_tag(:phase_id, _("Select phase to download"), class: 'form-label') %>
         <%= select_tag(:phase_id, options_for_select(@phase_options, @phase_options[0])) %>
       </div>
     <% else %>
@@ -24,35 +24,35 @@
     <% end %>
     <fieldset>
       <legend><%= _("Optional plan components") %></legend>
-      <div class="checkbox">
-        <%= label_tag 'export[project_details]' do %>
+      <div class="form-check">
+        <%= label_tag 'export[project_details]', class:'form-check-label' do %>
           <%= check_box_tag 'export[project_details]', true, download_coversheet_tickbox_checked %>
           <%= _('project details coversheet') %>
         <% end %>
       </div>
-      <div class="checkbox">
-        <%= label_tag 'export[question_headings]' do %>
+      <div class="form-check">
+        <%= label_tag 'export[question_headings]', class:'form-check-label' do %>
           <%= check_box_tag 'export[question_headings]', true, true %>
           <%= _('question text and section headings') %>
         <% end %>
       </div>
-      <div class="checkbox">
-        <%= label_tag 'export[unanswered_questions]' do %>
+      <div class="form-check">
+        <%= label_tag 'export[unanswered_questions]', class:'form-check-label' do %>
           <%= check_box_tag 'export[unanswered_questions]', true, true %>
           <%= _('unanswered questions') %>
         <% end %>
       </div>
       <% if @plan.research_outputs.any? %>
-        <div class="checkbox">
-          <%= label_tag 'export[research_outputs]' do %>
+        <div class="form-check">
+          <%= label_tag 'export[research_outputs]', class:'form-check-label' do %>
             <%= check_box_tag 'export[research_outputs]', true, true %>
             <%= _('research outputs') %>
           <% end %>
         </div>
       <% end %>
       <% if @plan.template.customization_of.present? %>
-        <div class="checkbox">
-          <%= label_tag 'export[custom_sections]' do %>
+        <div class="form-check">
+          <%= label_tag 'export[custom_sections]', class:'form-check-label' do %>
             <%= check_box_tag 'export[custom_sections]', true, false %>
             <%= _('supplementary section(s) not requested by funding organisation') %>
           <% end %>
@@ -61,63 +61,63 @@
     </fieldset>
   </div>
 
-  <div id="pdf-formatting">
+  <div id="pdf-formatting" class="py-3">
     <h2><%= _('PDF formatting') %></h2>
-    <div class="row">
-      <div class="col-xs-6">
-        <h3><%= _('Font') %></h3>
+    <div class="d-flex flex-row">
+      <div class="col-sm-6">
+        <h4><%= _('Font') %></h4>
       </div>
-      <div class="col-xs-6">
-        <h3><%= _('Margin (mm)') %></h3>
+      <div class="col-sm-6 px-2">
+        <h4><%= _('Margin (mm)') %></h4>
       </div>
     </div>
-    <div class="row">
-      <div class="form-group col-xs-4">
-        <%= label_tag "export[formatting][font_face]", _('Face'), class: 'control-label' %>
+    <div class="d-flex flex-row">
+      <div class="form-control mb-3 col-sm-4">
+        <%= label_tag "export[formatting][font_face]", _('Face'), class: 'form-label' %>
         <%= select_tag "export[formatting][font_face]",
             options_for_select(Settings::Template::VALID_FONT_FACES,
                                @export_settings.formatting[:font_face]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:font_face] %>
       </div>
-      <div class="form-group col-xs-2">
-        <%= label_tag "export[formatting][font_size]", _('Size') + " (pt)", class: 'control-label' %>
+      <div class="form-control mb-3 px-2 col-sm-2">
+        <%= label_tag "export[formatting][font_size]", _('Size') + " (pt)", class: 'form-label' %>
         <%= select_tag "export[formatting][font_size]",
             options_for_select(Settings::Template::VALID_FONT_SIZE_RANGE.to_a, @export_settings.formatting[:font_size]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:font_size] %>
       </div>
 
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][top]", _('Top'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][top]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:top]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:margin][:top] %>
       </div>
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][bottom]", _('Bottom'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][bottom]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:bottom]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:margin][:bottom] %>
       </div>
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][left]", _('Left'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][left]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:left]),
             class: 'form-control',
             "data-default": @plan.template.settings(:export).formatting[:margin][:left] %>
       </div>
-      <div class="form-group col-xs-1">
+      <div class="form-control mb-3 px-2 col-sm-1">
         <%= label_tag "export[formatting][margin][right]", _('Right'),
-                      class: 'control-label' %>
+                      class: 'form-label' %>
         <%= select_tag "export[formatting][margin][right]",
             options_for_select(Settings::Template::VALID_MARGIN_RANGE.to_a,
                                @export_settings.formatting[:margin][:right]),
diff --git a/app/views/plans/_edit_details.html.erb b/app/views/plans/_edit_details.html.erb
index e6cc4a747a..54c84d2a6c 100644
--- a/app/views/plans/_edit_details.html.erb
+++ b/app/views/plans/_edit_details.html.erb
@@ -3,14 +3,14 @@
 <%= form_for plan, html: { method: :put,
                             class: 'form-horizontal edit_plan' } do |f| %>
   <div class="row">
-    <div class="col-md-8">
+    <div class="col-lg-8">
       <%= render partial: "plans/project_details",
                  locals: { form: f, plan: plan, orgs: orgs, org_partial: org_partial,
                            research_domains: @research_domains } %>
 
-      <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+      <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
     </div>
-    <div class="col-md-4">
+    <div class="col-lg-4">
       <h2><%= _('Select Guidance') %></h2>
       <%= render partial: "plans/guidance_selection",
                  locals: {
diff --git a/app/views/plans/_guidance_choices.html.erb b/app/views/plans/_guidance_choices.html.erb
index d25b3f7c26..f8b820a7f5 100644
--- a/app/views/plans/_guidance_choices.html.erb
+++ b/app/views/plans/_guidance_choices.html.erb
@@ -1,7 +1,7 @@
 <%# locals: choices, current_selections %>
 <% choices.each do |org, groups| %>
   <% if groups && groups.size == 1 %>
-    <li class="checkbox">
+    <li class="form-check">
       <%= check_box_tag "guidance_group_ids[]",
                         groups[0].id,
                         current_selections.include?(groups[0].id),
@@ -10,11 +10,11 @@
       <%= org.name %>
     </li>
   <% elsif groups %>
-    <li class="checkbox">
+    <li class="form-check">
       <%= org.name %>
       <ul>
         <% groups.each do |group| %>
-          <li class="checkbox">
+          <li class="form-check">
             <span class="sublist">└─ </span>
             <%= check_box_tag "guidance_group_ids[]",
                               group.id,
diff --git a/app/views/plans/_guidance_selection.html.erb b/app/views/plans/_guidance_selection.html.erb
index 57013276e0..9440e9f97f 100644
--- a/app/views/plans/_guidance_selection.html.erb
+++ b/app/views/plans/_guidance_selection.html.erb
@@ -16,25 +16,23 @@
 
   <% if all_guidance_groups.length > important_ggs.length %>
     <p><%= _('Find guidance from additional organisations below') %></p>
-    <%= link_to _('See the full list'), '#', data: { toggle: "modal", target: "#modal-full-guidances" }, class: 'modal-guidances-window' %>
+    <%= link_to _('See the full list'), '#', 'data-bs-toggle' => 'modal', 'data-bs-target' => '#modal-full-guidances', class: 'modal-guidances-window' %>
   <% end %>
 
   <br>
-  <%= form.button(_('Save'), class: "btn btn-default", type: "submit") %>
+  <%= form.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
 
 <% else %>
   <p><%= _("There is no additional guidance for this template.") %></p>
 <% end %>
 
 <% if all_guidance_groups.length > important_ggs.length %>
-  <div id="modal-full-guidances" class="modal fade" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
+  <div id="modal-full-guidances"  class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content modal-dialog-scrollable">
         <div class="sign-in">
           <div class="modal-body">
-            <button type="button" class="close pull-right" data-dismiss="modal" aria-label="<%= _('Cancel') %>">
-              <span class="fas fa-times" aria-hidden="true">&nbsp;</span>
-            </button>
+            <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
             <h2><%= _('Select Guidance') %></h2>
             <p>
               <%= _('To help you write your plan, %{application_name} can show you guidance from a variety of organisations. Please choose up to 6 organisations of the following organisations who offer guidance relevant to your plan.') % { application_name: app_name } %>
diff --git a/app/views/plans/_navigation.html.erb b/app/views/plans/_navigation.html.erb
index 468321c9de..6cbf7dd8e8 100644
--- a/app/views/plans/_navigation.html.erb
+++ b/app/views/plans/_navigation.html.erb
@@ -1,48 +1,53 @@
 <% phases = plan.template.phases %>
 <ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" class="<%= (active_page?(plan_path(plan), true) ? 'active' : '') %>">
-    <a href="<%= plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Project Details') %></a>
+  <li role="presentation" class="nav-item <%= (active_page?(plan_path(plan), true) ? 'active' : '') %>">
+    <a href="<%= plan_path(plan) %>" role="tab" 
+    class="nav-link" aria-controls="content"><%= _('Project Details') %></a>
   </li>
-  <li role="contributors" class="<%= (active_page?(plan_contributors_path(plan)) ? "active" : "") %>">
+  <li role="contributors" class="nav-item <%= (active_page?(plan_contributors_path(plan)) ? "active" : "") %>">
     <%= link_to _("Contributors"), plan_contributors_path(plan), role: "tab",
-                aria: { controls: "content" } %>
-  </li>
-  <li role="presentation" class="<%= (active_page?(overview_plan_path(plan)) ? 'active' : '') %>">
-    <%= link_to(_('Plan overview'), overview_plan_path(plan), role: 'tab', 'aria-controls': 'content') %>
+                aria: { controls: "content" }, class: 'nav-link' %>
   </li>
+  <li role="presentation" class="nav-item <%= (active_page?(overview_plan_path(plan)) ? 'active' : '') %>">
+    <%= link_to _('Plan overview'), overview_plan_path(plan), role: 'tab', 
+                aria: { controls: "content" }, class: 'nav-link' %>
   <% phases.each do |phase| %>
-    <li role="presentation" class="<%= (active_page?(edit_plan_path(plan.id, phase_id: phase.id)) ? 'active' : '') %>">
-      <a href="<%= edit_plan_path(plan.id, phase_id: phase.id) %>" role="tab" aria-controls="content">
+    <li role="presentation" class="nav-item <%= (active_page?(edit_plan_path(plan.id, phase_id: phase.id)) ? 'active' : '') %>">
+      <a href="<%= edit_plan_path(plan.id, phase_id: phase.id) %>" role="tab" 
+         class="nav-link" aria-controls="content">
         <%= (phases.size > 1 ? phase.title : _('Write Plan')) %>
       </a>
     </li>
   <% end %>
   <% if Rails.configuration.x.madmp.enable_research_outputs %>
-    <li role="research_outputs" class="<%= (active_page?(plan_research_outputs_path(plan)) ? "active" : "") %>">
+    <li role="research_outputs" class="nav-item <%= (active_page?(plan_research_outputs_path(plan)) ? "active" : "") %>">
       <%= link_to _("Research Outputs"), plan_research_outputs_path(plan), role: "tab",
-                  aria: { controls: "content" } %>
+                  aria: { controls: "content" }, class: 'nav-link' %>
     </li>
   <% end %>
   <% if plan.administerable_by?(current_user.id) || (current_user.can_org_admin? && current_user.org.plans.include?(plan)) %>
-    <li role="presentation" class="<%= (active_page?(share_plan_path(plan)) ? 'active' : '') %>">
-      <a href="<%= share_plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Share') %></a>
+    <li role="presentation" class="nav-item <%= (active_page?(share_plan_path(plan)) ? 'active' : '') %>">
+      <a href="<%= share_plan_path(plan) %>" role="tab" 
+         class="nav-link" aria-controls="content"><%= _('Share') %></a>
     </li>
   <% end %>
   <% if (plan.administerable_by?(current_user.id) || (current_user.can_org_admin? && current_user.org.plans.include?(plan))) && plan.owner_and_coowners.include?(current_user) && plan.owner.org.feedback_enabled? %>
-    <li role="presentation" class="<%= (active_page?(request_feedback_plan_path(plan)) ? 'active' : '') %>">
-      <a href="<%= request_feedback_plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Request feedback') %></a>
+    <li role="presentation" class="nav-item <%= (active_page?(request_feedback_plan_path(plan)) ? 'active' : '') %>">
+      <a href="<%= request_feedback_plan_path(plan) %>" role="tab" 
+         class="nav-link" aria-controls="content"><%= _('Request feedback') %></a>
     </li>
   <% end %>
   <% if plan.readable_by?(current_user.id) %>
-    <li role="presentation" class="<%= (active_page?(download_plan_path(plan)) ? 'active' : '') %>">
-      <a href="<%= download_plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Download') %></a>
+    <li role="presentation" class="nav-item <%= (active_page?(download_plan_path(plan)) ? 'active' : '') %>">
+      <a href="<%= download_plan_path(plan) %>" role="tab"
+         class="nav-link" aria-controls="content"><%= _('Download') %></a>
     </li>
   <% end %>
 </ul>
 <div class="tab-content">
   <div id="content" role="tabpanel" class="tab-pane active">
-    <div class="panel panel-default">
-      <div class="panel-body">
+    <div class="card card-default">
+      <div class="card-body">
         <%= yield :plan_tab_body %>
       </div>
     </div>
diff --git a/app/views/plans/_overview_details.html.erb b/app/views/plans/_overview_details.html.erb
index 5c4b7531ca..cba5201573 100644
--- a/app/views/plans/_overview_details.html.erb
+++ b/app/views/plans/_overview_details.html.erb
@@ -26,33 +26,29 @@
     <% if plan.template.phases.size == 1 %>
       <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: plan.template.phases.first }) %>
     <% else %>
-      <div class="panel-group" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
+      <div class="accordion" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
         <% plan.template.phases.each do |p| %>
           <% questions_size = p.sections.map{|s| s.questions.size }.reduce(0){|sum,x| sum + x } %>
-          <div class="panel panel-default">
-            <div class="heading-button" role="button" data-toggle="collapse"
-                 data-parent="plan-overview-accordion"
+          <div class="accordion-item card card-default">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                 data-bs-parent="plan-overview-accordion"
                  href="#plan-overview-collapse-<%= p.id %>"
                  aria-expanded="false"
                  aria-controls="#plan-overview-collapse-<%= p.id %>">
 
-              <div class="panel-heading" role="tab" id="plan-overview-heading-<%= p.id %>">
-                <div class="panel-title">
-                  <div class="pull-left">
+              <div class="card-heading" role="tab" id="plan-overview-heading-<%= p.id %>">
+                <h2 class="accordion-header">
+                  <div class="float-start">
                     <%= _("%{phase_title} (%{sections_size} %{sections}, %{questions_size} %{questions})") % {
                       :phase_title => p.title, :sections_size => p.sections.size, :sections => n_('section', 'sections', p.sections.size),
                       :questions_size => questions_size,
                       :questions => n_('question', 'questions', questions_size) } %>
                   </div>
-                  <div class="pull-right">
-                    <i class="fas fa-plus pull-right" aria-hidden="true"></i>
-                  </div>
-                  <div class="clearfix"></div>
-                </div>
+                </h2>
               </div>
-            </div>
-            <div id="plan-overview-collapse-<%= p.id %>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="plan-overview-heading-<%= p.id %>">
-              <div class="panel-body">
+            </button>
+            <div id="plan-overview-collapse-<%= p.id %>" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="plan-overview-heading-<%= p.id %>">
+              <div class="accordion-body card card-body">
                 <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: p }) %>
               </div>
             </div>
diff --git a/app/views/plans/_project_details.html.erb b/app/views/plans/_project_details.html.erb
index dd81a54ef5..3ca1e53ffc 100644
--- a/app/views/plans/_project_details.html.erb
+++ b/app/views/plans/_project_details.html.erb
@@ -9,20 +9,20 @@ ethics_description_tooltip = _("Description of the ethical issues")
 ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics commitee")
 %>
 
-<div class="form-group"><!-- title -->
-  <div class="col-md-12">
-    <%= form.label(:title, _('Project title'), class: 'control-label') %>
+<div class="form-control mb-3"><!-- title -->
+  <div class="col-lg-12">
+    <%= form.label(:title, _('Project title'), class: 'form-label') %>
   </div>
-  <div class="col-md-8">
+  <div class="col-lg-8">
     <em class="sr-only"><%= project_title_tooltip %></em>
     <%= form.text_field(:title, class: "form-control", "aria-required": true,
                                 'data-toggle': 'tooltip', spellcheck: true,
                                 title: project_title_tooltip) %>
   </div>
-  <div class="col-md-8">
-    <div class="checkbox">
+  <div class="col-lg-8">
+    <div class="form-check">
       <%= form.hidden_field :visibility %>
-      <%= form.label(:is_test, class: 'control-label') do %>
+      <%= form.label(:is_test, class: 'form-label') do %>
         <%= check_box_tag(:is_test, 1, plan.is_test?, "aria-label": "is_test") %>
         <%= _('mock project for testing, practice, or educational purposes') %>
       <% end %>
@@ -30,11 +30,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
   </div>
 </div>
 
-<div class="form-group"><!-- description -->
-  <div class="col-md-12">
-    <%= form.label(:description, _('Project abstract'), class: 'control-label', id: 'project-description-label') %>
+<div class="form-control mb-3"><!-- description -->
+  <div class="col-lg-12">
+    <%= form.label(:description, _('Project abstract'), class: 'form-label', id: 'project-description-label') %>
   </div>
-  <div class="col-md-8" data-toggle="tooltip" title="<%= project_abstract_tooltip %>">
+  <div class="col-lg-8" data-toggle="tooltip" title="<%= project_abstract_tooltip %>">
     <em class="sr-only"><%= project_abstract_tooltip %></em>
     <%= form.text_area :description, rows: 6, class: 'form-control tinymce',
                        spellcheck: true, aria: { required: false, labelledby: 'project-description-label' } %>
@@ -42,9 +42,9 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 </div>
 
 <% if Rails.configuration.x.madmp.enable_research_domain %>
-  <div class="form-group">
-    <div class="col-md-8">
-      <%= form.label(:research_domain_id, _("Research domain"), class: "control-label") %>
+  <div class="form-control mb-3">
+    <div class="col-lg-8">
+      <%= form.label(:research_domain_id, _("Research domain"), class: "form-label") %>
 
       <% options = research_domains.map { |rd| [rd.label, rd.id] } %>
       <%= form.select :research_domain_id, options_for_select(options, form.object.research_domain_id),
@@ -57,15 +57,15 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
   </div>
 <% end %>
 
-<div class="form-group"><!-- start / end dates -->
-  <div class="col-md-4">
-    <%= form.label(:start_date, _("Project Start"), class: "control-label") %>
+<div class="form-control mb-3"><!-- start / end dates -->
+  <div class="col-lg-4">
+    <%= form.label(:start_date, _("Project Start"), class: "form-label") %>
     <%= form.date_field :start_date, class: "form-control",
                                      data: { toggle: "tooltip" },
                                      title: _("The estimated date on which you will begin this project.") %>
   </div>
-  <div class="col-md-4">
-    <%= form.label(:end_date, _("Project End"), class: "control-label") %>
+  <div class="col-lg-4">
+    <%= form.label(:end_date, _("Project End"), class: "form-label") %>
     <%= form.date_field :end_date, class: "form-control",
                                    data: { toggle: "tooltip" },
                                    title: _("The estimated date on which you will complete this project.") %>
@@ -75,11 +75,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 <%# if DOI minting is enabled %>
 <% landing_page = plan.landing_page %>
 <% if Rails.configuration.x.doi&.active && landing_page.present? %>
-  <div class="form-group"><!-- identifier -->
-    <div class="col-md-12">
-      <%= form.label(:identifier, _('Landing page'), class: 'control-label') %>
+  <div class="form-control mb-3"><!-- identifier -->
+    <div class="col-lg-12">
+      <%= form.label(:identifier, _('Landing page'), class: 'form-label') %>
     </div>
-    <div class="col-md-8">
+    <div class="col-lg-8">
       <% if landing_page.value.starts_with?("http") %>
         <%= link_to landing_page.value, landing_page.value %>
       <% else %>
@@ -88,11 +88,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
     </div>
   </div>
 <% else %>
-  <div class="form-group">
-    <div class="col-md-12">
-      <%= form.label :id, _("ID"), class: "control-label" %>
+  <div class="form-control mb-3">
+    <div class="col-lg-12">
+      <%= form.label :id, _("ID"), class: "form-label" %>
     </div>
-    <div class="col-md-8">
+    <div class="col-lg-8">
       <em class="sr-only"><%= id_tooltip %></em>
       <%= form.text_field :identifier,
                           class: "form-control",
@@ -106,21 +106,21 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 
 <% if Rails.configuration.x.madmp.enable_ethical_issues %>
   <conditional>
-    <div class="form-group">
-      <div class="col-md-8">
-        <div class="checkbox">
-          <%= form.label(:ethical_issues, class: 'control-label', title: ethics_tooltip) do %>
+    <div class="form-control mb-3">
+      <div class="col-lg-8">
+        <div class="form-check">
+          <%= form.label(:ethical_issues, class: 'form-label', title: ethics_tooltip) do %>
             <%= form.check_box(:ethical_issues) %>
             <%= _('Research outputs may have ethical concerns') %>
           <% end %>
         </div>
       </div>
     </div>
-    <div class="form-group toggleable-field">
-      <div class="col-md-12">
-        <%= form.label(:ethical_issues_description, _('Describe any ethical concerns'), class: 'control-label', id: 'plan-ethical-description') %>
+    <div class="form-control mb-3 toggleable-field">
+      <div class="col-lg-12">
+        <%= form.label(:ethical_issues_description, _('Describe any ethical concerns'), class: 'form-label', id: 'plan-ethical-description') %>
       </div>
-      <div class="col-md-8" data-toggle="tooltip" title="<%= ethics_description_tooltip %>">
+      <div class="col-lg-8" data-toggle="tooltip" title="<%= ethics_description_tooltip %>">
         <em class="sr-only"><%= ethics_description_tooltip %></em>
         <%= form.text_area :ethical_issues_description,
                            rows: 6,
@@ -129,11 +129,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
                            aria: { required: false, labelledby: 'plan-ethical-description' } %>
       </div>
     </div>
-    <div class="form-group toggleable-field">
-      <div class="col-md-12">
-        <%= form.label(:ethical_issues_report, _('Ethical protocols'), class: 'control-label') %>
+    <div class="form-control mb-3 toggleable-field">
+      <div class="col-lg-12">
+        <%= form.label(:ethical_issues_report, _('Ethical protocols'), class: 'form-label') %>
       </div>
-      <div class="col-md-8">
+      <div class="col-lg-8">
         <em class="sr-only"><%= ethics_report_tooltip %></em>
         <%= form.url_field(:ethical_issues_report,
                            class: "form-control",
@@ -146,8 +146,8 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 <% end %>
 
 <conditional>
-  <div id="funder-org-controls" class="form-group">
-    <div class="col-md-8">
+  <div id="funder-org-controls" class="form-control mb-3">
+    <div class="col-lg-8">
       <%= form.fields_for :funder, Org.new do |funder_fields| %>
         <%= render partial: "shared/org_selectors/local_only",
                     locals: {
@@ -162,11 +162,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
     </div>
   </div>
 
-  <div class="form-group toggleable-field">
-    <div class="col-md-12">
-      <%= form.label(:funding_status, _("Funding status"), class: "control-label") %>
+  <div class="form-control mb-3 toggleable-field">
+    <div class="col-lg-12">
+      <%= form.label(:funding_status, _("Funding status"), class: "form-label") %>
     </div>
-    <div class="col-md-8">
+    <div class="col-lg-8">
      <% funding_statuses = Plan::FUNDING_STATUS.map { |status| [_(status[0].to_s.capitalize), _(status[0].to_s)] } %>
     <%= form.select :funding_status, options_for_select(funding_statuses, form.object.funding_status),
                             {
@@ -176,11 +176,11 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
                             { class: "form-control" } %>
     </div>
     <%= form.fields_for :grant, plan.grant do |grant_fields| %>
-      <div class="col-md-12">
-        <%= grant_fields.label(:value, _("Grant number/url"), class: "control-label") %>
+      <div class="col-lg-12">
+        <%= grant_fields.label(:value, _("Grant number/url"), class: "form-label") %>
       </div>
 
-      <div class="col-md-8">
+      <div class="col-lg-8">
         <%# If the OpenAire grant typeahead if enabled use it %>
         <% if Rails.configuration.x.open_aire.active %>
           <!-- Using the research_project.json source for typeahead -->
diff --git a/app/views/plans/_request_feedback_form.html.erb b/app/views/plans/_request_feedback_form.html.erb
index 777b419b20..b3949f0425 100644
--- a/app/views/plans/_request_feedback_form.html.erb
+++ b/app/views/plans/_request_feedback_form.html.erb
@@ -15,11 +15,11 @@
         <%= sanitize plan.owner.org.feedback_msg.to_s % { user_name: current_user.name(false), plan_name: plan.title, organisation_email: current_user.org.contact_email } %>
       </div>
       <p><%= _('You can continue to edit and download the plan in the interim.') %></p>
-      <div class="form-group col-xs-8">
+      <div class="form-control mb-3 col-xs-8">
         <%= link_to _('Request feedback'),
                      feedback_requests_path(plan_id: @plan.id),
                      data: { method: 'post' },
-                     class: "btn btn-default#{' disabled' if @plan.feedback_requested?}" %>
+                     class: "btn btn-secondary#{' disabled' if @plan.feedback_requested?}" %>
         <span><%= _("Feedback has been requested.") if @plan.feedback_requested? %></span>
       </div>
     <% end %>
diff --git a/app/views/plans/_share_form.html.erb b/app/views/plans/_share_form.html.erb
index e68cede35a..7151623d82 100644
--- a/app/views/plans/_share_form.html.erb
+++ b/app/views/plans/_share_form.html.erb
@@ -12,25 +12,25 @@
     <legend>
       <p class="form-control-static"><%= _('Public or organisational visibility is intended for finished plans. You must answer at least %{percentage}%% of the questions to enable these options. Note: test plans are set to private visibility by default.') % { :percentage => Rails.configuration.x.plans.default_percentage_answered } %></p>
     </legend>
-    <div class="form-group col-xs-8">
-      <div class="radio">
-        <%= label_tag :visibility_privately_visible do %>
+    <div class="form-control mb-3 col-xs-8">
+      <div class="form-check">
+        <%= label_tag :visibility_privately_visible, class:'form-check-label' do %>
           <%= f.radio_button :visibility, :privately_visible,
                              data: { url: visibility_plan_path(@plan),
                                      remote: true, method: :post } %>
           <%= _('Private: visible to me, specified collaborators and administrators at my organisation') %>
         <% end %>
       </div>
-      <div class="radio">
-        <%= label_tag :visibility_organisationally_visible do %>
+      <div class="form-check">
+        <%= label_tag :visibility_organisationally_visible, class:'form-check-label' do %>
           <%= f.radio_button :visibility, :organisationally_visible,
                              data: { url: visibility_plan_path(@plan),
                                      remote: true, method: :post } %>
           <%= _('Organisation: anyone at my organisation can view') %>
         <% end %>
       </div>
-      <div class="radio">
-        <%= label_tag :visibility_publicly_visible do %>
+      <div class="form-check">
+        <%= label_tag :visibility_publicly_visible, class:'form-check-label' do %>
           <%= f.radio_button :visibility, :publicly_visible,
                              data: { url: visibility_plan_path(@plan),
                                      remote: true, method: :post }  %>
@@ -63,7 +63,7 @@
                 <span><%= display_role(role) %></span>
             <% else %>
                 <% if administerable && role.user != current_user %>
-                  <div class="form-group col-xs-8">
+                  <div class="form-control mb-3 col-xs-8">
                     <%= fields_for role do |f| %>
                       <% options = [
                         ["#{display_role(administrator)}", administrator.access],
@@ -103,10 +103,10 @@
   <% new_role = Role.new %>
   <% new_role.plan = @plan %>
   <%= form_for new_role, url: {controller: :roles, action: :create }, html: {method: :post} do |f| %>
-    <div class="form-group col-xs-6">
+    <div class="form-control mb-3 col-xs-6">
       <%= f.hidden_field :plan_id %>
       <%= f.fields_for :user, new_role.user do |user| %>
-        <%= user.label :email, _('Email'), class: 'control-label'%>
+        <%= user.label :email, _('Email'), class: 'form-label'%>
          <em class="sr-only"><%= email_tooltip %></em>
         <%= user.email_field :email, class: "form-control", title: email_tooltip,
                                      aria: { required: true },
@@ -122,20 +122,20 @@
                     title: permissions_tooltip,
                     'data-placement':'right' do %>
       <%= content_tag :legend , _('Permissions') %>
-      <div class="form-group">
-        <div class="radio">
+      <div class="form-control mb-3">
+        <div class="form-check">
           <%= f.label :administrator_access do %>
             <%= f.radio_button :access, administrator.access, id: "role_administrator_access", "aria-required": true, required: true %>
             <%= _('Co-owner') %>
           <% end %>
         </div>
-        <div class="radio">
+        <div class="form-check">
           <%= f.label :editor_access do %>
             <%= f.radio_button :access, editor.access , id: "role_editor_access" %>
             <%= _('Editor') %>
           <% end %>
         </div>
-        <div class="radio">
+        <div class="form-check">
           <%= f.label :commenter_access do %>
             <%= f.radio_button :access, commenter.access, id: "role_commenter_access" %>
             <%= _('Read only') %>
@@ -144,7 +144,7 @@
       </div>
     <% end %>
     <div class="clearfix"></div>
-    <div class="form-group col-xs-2">
+    <div class="form-control mb-3 col-xs-2">
     <%= f.button(_('Submit'), class: "btn btn-primary", type: "submit") %>
     </div>
   <% end %>
diff --git a/app/views/plans/new.html.erb b/app/views/plans/new.html.erb
index d2d3ed23bb..d1b0af4de5 100644
--- a/app/views/plans/new.html.erb
+++ b/app/views/plans/new.html.erb
@@ -10,7 +10,7 @@
   <div class="col-md-12">
     <h1><%= _('Create a new plan') %></h1>
 
-    <p class="left-indent">
+    <p class="start-indent">
       <%= _("Before you get started, we need some information about your research project to set you up with the best DMP template for your needs.") %>
     </p>
   </div>
@@ -22,17 +22,15 @@
       <!-- Plan name section -->
       <h2 id="project-title"><span class="red" title="<%= required_project_title_tooltip %>">*<em class="sr-only"><%= required_project_title_tooltip %></em> </span><%= _('What research project are you planning?') %></h2>
       <div class="row">
-        <div class="form-group col-xs-6">
-          <em class="sr-only"><%= project_title_tooltip %></em>
+        <div class="form-control mb-3 col-md-8">
           <%= f.text_field(:title, class: 'form-control', 'aria-labelledby': 'project-title', 'aria-required': 'true', 'aria-label': 'project-title',
                 'data-toggle': 'tooltip',
                 'data-placement': 'bottom',
                 spellcheck: true,
                 title: project_title_tooltip ) %>
         </div>
-        <div class="col-md-1">&nbsp;</div>
-        <div class="form-group col-xs-5">
-          <div class="checkbox create-plan-mock">
+        <div class="form-control mb-3 col-md-6">
+          <div class="checkbox">
             <%= label_tag(:is_test) do %>
               <%= check_box_tag(:is_test, "1", false) %>
               <%= _('mock project for testing, practice, or educational purposes') %>
@@ -47,7 +45,7 @@
         <%= _('Select the primary research organisation') %>
       </h2>
       <div id="research-org-controls" class="row">
-        <div class="form-group col-md-6">
+        <div class="form-control mb-3 col-md-6">
            <em class="sr-only"><%= research_org_tooltip %></em>
            <% dflt = @orgs.include?(current_user.org) ? current_user.org : nil %>
            <%= f.fields_for :org, @plan.org do |org_fields| %>
@@ -61,9 +59,9 @@
                         } %>
           <% end %>
         </div>
-        <div class="col-md-1 pad-top-10 create-plan-or"><strong>- <%= _('or') %> -</strong></div>
-        <div class="form-group col-md-5 create-plan-checkbox">
-          <div class="checkbox">
+        <div class="col-md-3 text-center"><strong>- <%= _('or') %> -</strong></div>
+        <div class="form-control mb-3 col-md-3">
+          <div class="form-check">
             <% primary_research_org_message = _('No research organisation associated with this plan or my research organisation is not listed') %>
             <%= label_tag(:plan_no_org) do %>
               <%= check_box_tag(:plan_no_org, "0", false, class: "toggle-autocomplete") %>
@@ -76,7 +74,7 @@
       <!-- Funder selection -->
       <h2 id="funder-org"><span class="red" title="<%= required_primary_funding_tooltip %>">* <em class="sr-only"><%= required_primary_funding_tooltip %></em> </span><%= _('Select the primary funding organisation') %></h2>
       <div id="funder-org-controls" class="row">
-        <div class="form-group col-xs-6">
+        <div class="form-control mb-3 col-md-6">
           <em class="sr-only"><%= primary_funding_tooltip %></em>
           <%= f.fields_for :funder, @plan.funder = Org.new do |funder_fields| %>
             <%= render partial: "shared/org_selectors/local_only",
@@ -90,9 +88,9 @@
                         } %>
           <% end %>
         </div>
-        <div class="col-md-1 create-plan-or"><strong>- <%= _('or') %> -</strong></div>
-        <div class="form-group col-xs-5 create-plan-checkbox">
-          <div class="checkbox">
+        <div class="col-md-3 text-center"><strong>- <%= _('or') %> -</strong></div>
+        <div class="form-control mb-3 col-md-3">
+          <div class="form-check">
             <% primary_funding_message = _('No funder associated with this plan or my funder is not listed') %>
             <%= label_tag(:plan_no_funder) do %>
               <%= check_box_tag(:plan_no_funder, "0", false, class: "toggle-autocomplete") %>
@@ -106,12 +104,12 @@
       <div id="available-templates" style="visibility: none;">
         <%= hidden_field_tag 'template-option-target', template_options_path %>
         <h2 id="template-selection"><%= _('Which DMP template would you like to use?') %></h2>
-        <div class="form-group row">
-          <div class="col-xs-6">
+        <div class="form-control mb-3 row">
+          <div class="col-md-6">
             <%= select_tag(:plan_template_id, "<option value=\"\">#{_('Please select a template')}</option>", name: 'plan[template_id]',
                            class: 'form-control', 'aria-labelledby': 'template-selection') %>
           </div>
-          <div class="col-xs-6">
+          <div class="col-md-6">
             <span id="multiple-templates">
               <%= _('We found multiple DMP templates corresponding to your funder.') %>
             </span>
@@ -121,7 +119,7 @@
 
       <%= f.hidden_field(:visibility, value: @is_test ? 'is_test' : Rails.configuration.x.plans.default_visibility) %>
       <%= f.button(_('Create plan'), class: "btn btn-primary", type: "submit") %>
-      <%= link_to _('Cancel'), plans_path, class: 'btn btn-default' %>
+      <%= link_to _('Cancel'), plans_path, class: 'btn btn-secondary' %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/public_pages/plan_index.html.erb b/app/views/public_pages/plan_index.html.erb
index 5d5af35f21..dcb3c9ea98 100644
--- a/app/views/public_pages/plan_index.html.erb
+++ b/app/views/public_pages/plan_index.html.erb
@@ -4,11 +4,11 @@
     <h1><%= _('Public DMPs') %></h1>
     <!-- if the user has projects -->
     <% if @plans.count > 0 %>
-      <p class="left-indent">
+      <p class="start-indent">
         <%= _('Public DMPs are plans created using the %{application_name} service and shared publicly by their owners. They are not vetted for quality, completeness, or adherence to funder guidelines.') % {application_name: ApplicationService.application_name} %>
       </p>
     <% else %>
-      <p class="left-indent">
+      <p class="start-indent">
         <%= _("There are currently no public DMPs.")%>
       </p>
     <% end %>
diff --git a/app/views/public_pages/template_index.html.erb b/app/views/public_pages/template_index.html.erb
index 014d5db364..ebdab1d3ce 100644
--- a/app/views/public_pages/template_index.html.erb
+++ b/app/views/public_pages/template_index.html.erb
@@ -3,9 +3,9 @@
   <div class="col-md-12">
     <h1><%= _('DMP Templates') %></h1>
     <% if @templates.count > 0 %>
-      <p class="left-indent"><%= _('Templates are provided by a funder, an organisation, or a trusted party.') %></p>
+      <p class="start-indent"><%= _('Templates are provided by a funder, an organisation, or a trusted party.') %></p>
     <% else %>
-      <p class="left-indent"><%= _('There are currently no public Templates.')%></p>
+      <p class="start-indent"><%= _('There are currently no public Templates.')%></p>
     <% end %>
   </div>
 </div>
diff --git a/app/views/questions/_new_edit_question_datefield.html.erb b/app/views/questions/_new_edit_question_datefield.html.erb
index 923784b714..f7baf5995e 100644
--- a/app/views/questions/_new_edit_question_datefield.html.erb
+++ b/app/views/questions/_new_edit_question_datefield.html.erb
@@ -1,5 +1,5 @@
 <%# locals: { f, question, answer } %>
-<div class="form-group">
-    <%= f.label(:text, sanitize(question.text), class: 'control-label') %>
+<div class="form-control mb-3">
+    <%= f.label(:text, sanitize(question.text), class: 'form-label') %>
     <%= date_field_tag('answer[text]', strip_tags(answer.text || question.default_value), class: 'form-control') %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/questions/_new_edit_question_option_based.html.erb b/app/views/questions/_new_edit_question_option_based.html.erb
index b2aa141797..b399720b85 100644
--- a/app/views/questions/_new_edit_question_option_based.html.erb
+++ b/app/views/questions/_new_edit_question_option_based.html.erb
@@ -1,9 +1,9 @@
 <%# locals: { f, question, answer } %>
 <% options = question.question_options.by_number %>
 <% if question.question_format.checkbox? || question.question_format.multiselectbox? %>
-    <%= f.label(:question_option_ids, sanitize(question.text), class: 'control-label') %>
+    <%= f.label(:question_option_ids, sanitize(question.text), class: 'form-label') %>
     <% options.each do |op| %>
-        <div class="checkbox">
+        <div class="form-check">
             <label>
                 <%= f.check_box(:question_option_ids, { multiple: true, checked: answer.options_selected?(op.id) || (answer.question_options.empty? && op.is_default?) }, op.id, nil) %>
                 <%= sanitize op.text %>
@@ -11,9 +11,9 @@
         </div>
     <% end %>
 <% elsif question.question_format.radiobuttons? %>
-    <%= f.label(:question_option_ids, sanitize(question.text), class: 'control-label') %>
+    <%= f.label(:question_option_ids, sanitize(question.text), class: 'form-label') %>
     <% options.each do |op| %>
-        <div class="radio">
+        <div class="form-check">
             <label>
                 <%= f.radio_button :question_option_ids, op.id, { checked: answer.options_selected?(op.id) || (answer.question_options.empty? && op.is_default?), id: "answer_option_ids_#{op.id}" } %>
                 <%= sanitize op.text %>
@@ -29,17 +29,17 @@
                 "<option value=#{op.id}>#{op.text}</option>"
         end
     %>
-    <%= f.label(:question_option_ids, sanitize(question.text), class: 'control-label') %>
+    <%= f.label(:question_option_ids, sanitize(question.text), class: 'form-label') %>
     <%= select_tag('answer[question_option_ids]',
         options_html.html_safe,
         { multiple: question.question_format.multiselectbox?,
           include_blank: question.question_format.dropdown?,
           class: 'form-control' }) %>
 <% end %>
-<div class="form-group">
+<div class="form-control mb-3">
 <% if question.option_comment_display %><!-- Comment text area for option_based questions -->
     <% text = question.question_format.rda_metadata? ? answer.answer_hash['text'] : answer.text %>
-    <%= label_tag('answer[text]', _('Additional Information'), class: 'control-label') %>
+    <%= label_tag('answer[text]', _('Additional Information'), class: 'form-label') %>
     <% if readonly %>
       <div class="display-readonly-textarea-content">
         <%= sanitize("<p>#{text}</p>") %>
diff --git a/app/views/questions/_new_edit_question_textarea.html.erb b/app/views/questions/_new_edit_question_textarea.html.erb
index e8691555d4..f01f36a7e4 100644
--- a/app/views/questions/_new_edit_question_textarea.html.erb
+++ b/app/views/questions/_new_edit_question_textarea.html.erb
@@ -7,7 +7,7 @@
   rather cumbersome. As such, this workaround, simplifies the logic when a stale answer is found by rendering the html of the answer directly
   within a paragraph.
 %>
-<div class="form-group allow-break-words">
+<div class="form-control mb-3 allow-break-words">
     <div class="display-readonly-textarea-content" id="question-text-<%= question.id %>">
       <label for="answer-text-<%= question.id %>"><%= sanitize(question.text) %></label>
     </div>
@@ -18,4 +18,4 @@
     <% else %>
       <%= text_area_tag('answer[text]', answer.text || question.default_value, id: "answer-text-#{question.id}", class: "form-control tinymce_answer", aria: { labelledby: "question-text-#{question.id}" }) %>
     <% end %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/questions/_new_edit_question_textfield.html.erb b/app/views/questions/_new_edit_question_textfield.html.erb
index 171432fa90..c16741addf 100644
--- a/app/views/questions/_new_edit_question_textfield.html.erb
+++ b/app/views/questions/_new_edit_question_textfield.html.erb
@@ -1,5 +1,5 @@
 <%# locals: { f, question, answer } %>
-<div class="form-group">
-    <%= f.label(:text, sanitize(question.text), class: 'control-label') %>
+<div class="form-control mb-3">
+    <%= f.label(:text, sanitize(question.text), class: 'form-label') %>
     <%= text_field_tag('answer[text]', strip_tags(answer.text || question.default_value), class: 'form-control', spellcheck: true) %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/questions/_preview_question.html.erb b/app/views/questions/_preview_question.html.erb
index 39209d4366..2cc39ac51e 100644
--- a/app/views/questions/_preview_question.html.erb
+++ b/app/views/questions/_preview_question.html.erb
@@ -110,7 +110,7 @@
       <!-- button without action-->
       <%= link_to _('Save'), "#", class: "btn btn-primary", onclick: "event.preventDefault();" %>
 
-      <span class="label label-warning answer-status"><%= _('Not answered yet') %></span>
+      <span class="badge bg-warning text-dark answer-status"><%= _('Not answered yet') %></span>
 
     </div>
   </form>
diff --git a/app/views/research_outputs/_form.html.erb b/app/views/research_outputs/_form.html.erb
index 4e6dcb6373..6a6c15f51f 100644
--- a/app/views/research_outputs/_form.html.erb
+++ b/app/views/research_outputs/_form.html.erb
@@ -9,14 +9,14 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
 %>
 
 <%= form_with model: @research_output, url: path, method: method, local: true do |f| %>
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
-      <span class="col-md-3"><%= label(:output_type, _("Type"), class: "control-label") %></span>
-      <span class="col-md-5 output-type-description <%= research_output.other? ? "" : "hidden" %>">
-        <%= f.label(:output_type_description, _("Please describe the output type"), class: "control-label") %>
+      <span class="col-md-3"><%= label(:output_type, _("Type"), class: "form-label") %></span>
+      <span class="col-md-5 output-type-description <%= research_output.other? ? "" : "visually-hidden-focusable" %>">
+        <%= f.label(:output_type_description, _("Please describe the output type"), class: "form-label") %>
       </span>
     </div>
-    <div class="col-md-12">
+    <div class="col-md-3">
       <span class="col-md-3">
         <%= f.select :output_type, options_for_select(presenter.selectable_output_types, f.object.output_type),
                      {
@@ -28,35 +28,35 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
                        data: { remote: true, url: plan_output_type_selection_path(plan), method: :get }
                      } %>
       </span>
-      <span class="col-md-5 output-type-description <%= research_output.other? ? "" : "hidden" %>">
+      <span class="col-md-3 output-type-description <%= research_output.other? ? "" : "visually-hidden-focusable" %>">
         <%= f.text_field :output_type_description, class: "form-control",
                                                    aria: { required: research_output.other? } %>
       </span>
     </div>
   </div>
 
-  <div class="form-group row">
-    <div class="col-md-12">
-      <span class="col-md-6">
-        <%= f.label(:title, _("Title"), class: "control-label") %>
+  <div class="form-control mb-3 row">
+    <div class="d-flex justify-content-start col-md-12">
+      <span class="col pe-md-6">
+        <%= f.label(:title, _("Title"), class: "form-label") %>
       </span>
-      <span class="col-md-6">
-        <%= f.label(:abbreviation, _("Abbreviation"), class: "control-label") %>
+      <span class="col px-md-3">
+        <%= f.label(:abbreviation, _("Abbreviation"), class: "form-label") %>
       </span>
     </div>
-    <div class="col-md-12">
-      <span class="col-md-6">
+    <div class="d-flex justify-content-start col-md-12">
+      <span class="col px-md-6">
         <%= f.text_field :title, class: "form-control", aria: { required: true } %>
       </span>
-      <span class="col-md-2">
+      <span class="col px-md-4">
         <%= f.text_field :abbreviation, class: "form-control", title: abbrev_tooltip,
                                         maxlength: 10, data: { toggle: "tooltip" } %>
       </span>
     </div>
   </div>
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
-      <span class="col-md-12"><%= f.label(:description, _("Description"), class: "control-label", id: 'research-output-description') %></span>
+      <span class="col-md-12"><%= f.label(:description, _("Description"), class: "form-label", id: 'research-output-description') %></span>
     </div>
     <div class="col-md-12">
       <span class="col-md-8">
@@ -65,15 +65,15 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     </div>
   </div>
 
-  <div class="form-group row">
-    <div class="col-md-12">
+  <div class="form-control mb-3 row">
+    <div class="d-flex col-md-12">
       <span class="col-md-4">
         <%= f.label :sensitive_data do %>
           <%= f.check_box :sensitive_data, data: { toggle: "tooltip" } %>
           <%= _('May contain sensitive data?') %>
         <% end %>
       </span>
-      <span class="col-md-4">
+      <span class="col-md-8">
         <%= f.label :personal_data do %>
           <%= f.check_box :personal_data, data: { toggle: "tooltip" },
                           title: personal_data_tooltip %>
@@ -84,7 +84,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   </div>
 
   <% if Rails.configuration.x.madmp.enable_repository_selection && Repository.all.any? %>
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <div class="col-md-12">
         <span class="col-md-12">
           <h3><%= label_tag _("Intended repositories") %></h3>
@@ -92,7 +92,7 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
       </div>
     </div>
 
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <%= render partial: "layouts/modal_search/selections",
                 locals: {
                   namespace: "repositories",
@@ -108,14 +108,14 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   <% end %>
 
   <% if Rails.configuration.x.madmp.enable_metadata_standard_selection && MetadataStandard.all.any? %>
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <div class="col-md-12">
         <span class="col-md-12">
-          <h3><%= f.label(:metadata_standard, _("Metadata standards"), class: "control-label") %></h3>
+          <h3><%= f.label(:metadata_standard, _("Metadata standards"), class: "form-label") %></h3>
         </span>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-control mb-3 row">
       <%= render partial: "layouts/modal_search/selections",
                 locals: {
                   namespace: "metadata_standards",
@@ -130,14 +130,14 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     </div>
   <% end %>
 
-  <div class="form-group row">
-    <div class="col-md-12">
-      <span class="col-md-4">
-        <%= f.label(:release_date, _("Anticipated release date"), class: "control-label") %>
+  <div class="form-control mb-3 row">
+    <div class="d-flex col-md-12">
+      <span class="col pe-md-4">
+        <%= f.label(:release_date, _("Anticipated release date"), class: "form-label") %>
         <%= f.date_field :release_date, class: "form-control" %>
       </span>
-      <span class="col-md-4">
-        <%= f.label(:access, _("Initial access level"), class: "control-label") %>
+      <span class="col px-md-4">
+        <%= f.label(:access, _("Initial access level"), class: "form-label") %>
         <%= f.select :access, options_for_select(presenter.selectable_access_types, f.object.access),
                               { selected: f.object.access },
                               { class: "form-control" } %>
@@ -146,19 +146,19 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
   </div>
 
   <% if Rails.configuration.x.madmp.enable_license_selection && License.all.any? %>
-    <div class="form-group row license-selection">
+    <div class="form-control mb-3 row license-selection">
       <%= render partial: "research_outputs/licenses/form",
                 locals: { research_output: research_output, presenter: presenter } %>
     </div>
   <% end %>
 
-  <div class="form-group row file-details-section <%= presenter.byte_sizable? ? "" : "hidden" %>">
-    <div class="col-md-12">
+  <div class="form-control mb-3 row file-details-section <%= presenter.byte_sizable? ? "" : "d-none" %>">
+    <div class="d-flex col-md-12">
       <span class="col-md-3">
-        <%= f.label(:byte_size, _("Anticipated file size"), class: "control-label") %>
+        <%= f.label(:byte_size, _("Anticipated file size"), class: "form-label") %>
       </span>
     </div>
-    <div class="col-md-12">
+    <div class="d-flex justify-content-start col-md-12">
       <span class="col-md-2">
         <% file_size = presenter.converted_file_size(size: f.object.byte_size) %>
         <%= f.number_field "file_size", min: 1, step: 0.1, value: file_size[:size], class: "form-control", aria: { label: _("Anticipated file size") } %>
@@ -172,16 +172,16 @@ repository_tooltip = _("Repositories preserve, manage, and provide access to man
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="form-control mb-3 row">
     <div class="col-md-12">
       <div class="col-md-6">
-        <%= f.button(_("Save"), class: "btn btn-default", type: "submit") %>
+        <%= f.button(_("Save"), class: "btn btn-secondary", type: "submit") %>
         <% unless research_output.new_record? %>
           <%= link_to _("Remove"), plan_research_output_path(plan, research_output),
-                                   method: :delete, class: "btn btn-default" %>
+                                   method: :delete, class: "btn btn-secondary" %>
           <% end %>
           <%= link_to _("Cancel"), plan_research_outputs_path(plan),
-                                   class: "btn btn-default" %>
+                                   class: "btn btn-secondary" %>
       </div>
     </div>
   </div>
diff --git a/app/views/research_outputs/edit.html.erb b/app/views/research_outputs/edit.html.erb
index a85d3003cf..78002b889e 100644
--- a/app/views/research_outputs/edit.html.erb
+++ b/app/views/research_outputs/edit.html.erb
@@ -11,7 +11,7 @@
   <h2>
     <%= _("Editing %{research_output_title}") % { research_output_title: @research_output.title } %>
     <%= link_to _('View all research outputs'), plan_research_outputs_path(@plan),
-                                            class: "btn btn-default pull-right" %>
+                                            class: "btn btn-secondary float-end" %>
   </h2>
   <div class="row">
     <div class="col-md-12 research-output-form">
diff --git a/app/views/research_outputs/licenses/_form.html.erb b/app/views/research_outputs/licenses/_form.html.erb
index 6d4db22bd4..5fa570d01c 100644
--- a/app/views/research_outputs/licenses/_form.html.erb
+++ b/app/views/research_outputs/licenses/_form.html.erb
@@ -22,7 +22,7 @@ args[:data] = { remote: true, url: plan_license_selection_path(research_output.p
 %>
 <div class="col-md-12">
   <span class="col-md-4">
-    <%= label_tag _("Initial license"), _("Initial license"), class: "control-label" %>
+    <%= label_tag _("Initial license"), _("Initial license"), class: "form-label" %>
     <%= select_tag "research_output[license_id]", options_for_select(options, selected), args %>
   </span>
   <span class="col-md-4">
diff --git a/app/views/research_outputs/new.html.erb b/app/views/research_outputs/new.html.erb
index 4f461f01f4..e736ca010d 100644
--- a/app/views/research_outputs/new.html.erb
+++ b/app/views/research_outputs/new.html.erb
@@ -11,7 +11,7 @@
   <h2>
     <%= _("New research output") %>
     <%= link_to _('View all research outputs'), plan_research_outputs_path(@plan),
-                                            class: "btn btn-default pull-right" %>
+                                            class: "btn btn-secondary float-end" %>
   </h2>
   <div class="row">
     <div class="col-md-12 research-output-form">
diff --git a/app/views/research_outputs/repositories/_search_result.html.erb b/app/views/research_outputs/repositories/_search_result.html.erb
index 62490a8596..f15efab19e 100644
--- a/app/views/research_outputs/repositories/_search_result.html.erb
+++ b/app/views/research_outputs/repositories/_search_result.html.erb
@@ -31,7 +31,7 @@
   <div class="more-info more-info-<%= result.id %>">
     <%= link_to _("More info"), "#", class: "more-info-link" %>
 
-    <div class="info hidden">
+    <div class="info d-none">
       <% info = result.info.with_indifferent_access %>
       <dl>
         <dt><%= _("Repository URL") %></dt>
diff --git a/app/views/research_outputs/select_output_type.js.erb b/app/views/research_outputs/select_output_type.js.erb
index 65b501a38f..9588b0aebb 100644
--- a/app/views/research_outputs/select_output_type.js.erb
+++ b/app/views/research_outputs/select_output_type.js.erb
@@ -8,11 +8,11 @@ if (outputTypeForm.length > 0) {
   var outputTypeDescription = outputTypeForm.find('#research_output_output_type_description');
 
   <% if @research_output.other? %>
-    outputTypeSpans.removeClass('hidden');
+    outputTypeSpans.removeClass('d-none');
     outputTypeDescription.attr('aria-required', 'true');
   <% else %>
     outputTypeDescription.attr('aria-required', 'false');
-    outputTypeSpans.addClass('hidden');
+    outputTypeSpans.addClass('d-none');
     var selected = outputTypeSpans.parent().find('option:selected');
     selected.removeAttr("selected");
   <% end %>
@@ -21,9 +21,9 @@ if (outputTypeForm.length > 0) {
   var fileDetailsSection = outputTypeForm.find('.file-details-section');
 
   <% if presenter.byte_sizable? %>
-    fileDetailsSection.removeClass('hidden');
+    fileDetailsSection.removeClass('d-none');
   <% else %>
-    fileDetailsSection.addClass('hidden');
+    fileDetailsSection.addClass('d-none');
     var selected = fileDetailsSection.find('option:selected');
     selected.removeAttr("selected");
     var sizeField = fileDetailsSection.find('#research_output_file_size');
diff --git a/app/views/shared/_access_controls.html.erb b/app/views/shared/_access_controls.html.erb
index 603bce25b5..a4338486b2 100644
--- a/app/views/shared/_access_controls.html.erb
+++ b/app/views/shared/_access_controls.html.erb
@@ -1,31 +1,30 @@
-<div class="sign-in">
+<div class="sign-in border border-1">
   <ul class="nav nav-tabs" role="tablist">
-    <li role="presentation" class="active">
-      <a href="#sign-in-form" role="tab" aria-controls="sign-in-form" data-toggle="tab">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" href="#sign-in-form" role="tab" aria-controls="sign-in-form" data-bs-toggle="tab">
         <%= _('Sign in') %>
       </a>
     </li>
     <% unless active_page?(new_user_registration_path, true) %>
-      <li role="presentation">
-        <a href="#create-account-form" role="tab" aria-controls="create-account-form" data-toggle="tab">
+      <li class="nav-item" role="presentation">
+        <a class="nav-link" href="#create-account-form" role="tab" aria-controls="create-account-form" data-bs-toggle="tab">
           <%= _('Create account') %>
         </a>
       </li>
     <% end %>
   </ul>
-
   <div class="tab-content">
-    <div id="sign-in-form" role="tabpanel" class="tab-pane active">
-      <div class="panel panel-default">
-        <div class="panel-body">
+    <div id="sign-in-form" role="tabpanel" class="tab-pane show active">
+      <div class="card">
+        <div class="card-body">
           <%= render :partial => 'shared/sign_in_form' %>
         </div>
       </div>
     </div>
     <% unless active_page?(new_user_registration_path, true) %>
       <div id="create-account-form" role="tabpanel" class="tab-pane">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card">
+          <div class="card-body">
             <%= render :partial => 'shared/create_account_form', locals: {orgs: orgs, org_partial: org_partial} %>
           </div>
         </div>
diff --git a/app/views/shared/_copy_link_modal.html.erb b/app/views/shared/_copy_link_modal.html.erb
index 7c454c70e7..4dbb73a5d4 100644
--- a/app/views/shared/_copy_link_modal.html.erb
+++ b/app/views/shared/_copy_link_modal.html.erb
@@ -1,16 +1,20 @@
 <div id="link-modal" class="modal fade" role="dialog">
   <div class="modal-dialog">
-    <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal">&times;</button>
-      <p class="modal-title fontsize-h4">
-        <%= _('Copy link') %>
-      </p>
-    </div>
-    <div class="modal-body">
-      <input type="text" id="link" readonly="readonly" style="width: 100%">
-    </div>
-    <div class="modal-footer">
-      <button id="copy-link-btn" class="btn btn-default"><%= _('Copy link') %></button>
+    <div class="modal-content">
+      <div class="modal-header">
+        <p class="modal-title fontsize-h4">
+          <%= _('Copy link') %>
+        </p>
+        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
+      </div>
+      <div class="modal-body">
+        <form>
+          <input type="text" id="link" readonly="readonly" style="width: 100%">
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button id="copy-link-btn" class="btn btn-secondary"><%= _('Copy link') %></button>
+      </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/shared/_create_account_form.html.erb b/app/views/shared/_create_account_form.html.erb
index 531d458251..9fd4afd56d 100644
--- a/app/views/shared/_create_account_form.html.erb
+++ b/app/views/shared/_create_account_form.html.erb
@@ -1,18 +1,18 @@
 <%= form_for resource, namespace: 'new', url: registration_path("user"), html: {autocomplete: "off", id: "create_account_form"} do |f| %>
 
-  <div class="form-group">
-    <%= f.label(:firstname, _('First Name'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:firstname, _('First Name'), class: "form-label") %>
     <%= f.text_field(:firstname, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group">
-    <%= f.label(:surname, _('Last Name'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:surname, _('Last Name'), class: "form-label") %>
     <%= f.text_field(:surname, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group">
-    <%= f.label(:email, _('Email'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:email, _('Email'), class: "form-label") %>
     <%= f.email_field(:email, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group" id="create-account-org-controls">
+  <div class="form-control mb-3" id="create-account-org-controls">
     <%= render partial: org_partial,
                locals: {
                  form: f,
@@ -21,19 +21,18 @@
                  required: true
                } %>
   </div>
-  <div class="form-group">
-    <%= f.label(:password, _('Password'), class: "control-label") %>
+  <div class="form-control mb-3">
+    <%= f.label(:password, _('Password'), class: "form-label") %>
     <%= f.password_field(:password, class: "form-control", "aria-required": true) %>
   </div>
-  <div class="form-group">
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" id="passwords_toggle_sign_up" class="passwords_toggle" /><%= _('Show password') %>
-      </label>
+  <div class="form-control mb-3">
+    <div class="form-check">
+        <input type="checkbox" id="passwords_toggle_sign_up" class="passwords_toggle" />
+        <%= label_tag('passwords_toggle_sign_up', _('Show password'), class: 'form-check-label') %>
     </div>
   </div>
-  <div class="form-group">
-    <div class="checkbox">
+  <div class="form-control mb-3">
+    <div class="form-check">
       <%= f.label(:accept_terms) do %>
         <%= f.check_box(:accept_terms, "aria-required": true) %>
         <%= _('I accept the') %>
@@ -42,10 +41,10 @@
     </div>
   </div>
   <% if Rails.configuration.x.recaptcha.enabled %>
-    <div class="form-group">
-      <%= label_tag(nil, _('Security check')) %>
+    <div class="form-control mb-3">
+      <%= label_tag(nil, _('Security check'), class: "form-label") %>
       <%= recaptcha_tags %>
     </div>
   <% end %>
-  <%= f.button(_('Create account'), class: "btn btn-default", type: "submit") %>
+  <%= f.button(_('Create account'), class: "btn btn-secondary", type: "submit") %>
 <% end %>
diff --git a/app/views/shared/_create_plan_modal.html.erb b/app/views/shared/_create_plan_modal.html.erb
index a8b4b815bb..c3c27ae8b7 100644
--- a/app/views/shared/_create_plan_modal.html.erb
+++ b/app/views/shared/_create_plan_modal.html.erb
@@ -1,15 +1,19 @@
 <div id="create-modal" class="modal in" role="dialog">
   <div class="modal-dialog">
+    <div class="modal-content">
     <div class="modal-header">
-      <button class="close" type="button" data-dismiss="modal">&times;</button>
-      <p class="modal-title fontsize-h4"><%= _('Create plan') %></p>
+      <p class="modal-title fontsize-h4">
+      <%= _('Create plan') %>
+      </p>
+      <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="<%= _('Cancel') %>"></button>
     </div>
     <div class="modal-body">
       <p><%= _('Would you like to create a plan based on the "%{name}" template?') % { name: @template.title }%></p>
     </div>
     <div class="modal-footer">
       <%= direct_link(@template, false, _('Yes')) %>
-      <button class="btn btn-default" data-dismiss="modal"><%= _('No') %></button>
+      <button class="btn btn-secondary" data-bs-dismiss="modal"><%= _('No') %></button>
+    </div>
     </div>
   </div>
 </div>
diff --git a/app/views/shared/_links.html.erb b/app/views/shared/_links.html.erb
index 681af0352a..c954ba1a9d 100644
--- a/app/views/shared/_links.html.erb
+++ b/app/views/shared/_links.html.erb
@@ -3,7 +3,7 @@
                    data-max-number-links="<%= max_number_links %>"
                    data-turbo="false">
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-sm-12">
       <h3><%= title.present? ? title : _('Links') %>&nbsp;
         <small>(<%= _('Up to ') %>
           <span class="max-number-links">
@@ -19,26 +19,26 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-sm-12">
       <% links = [{ "link" => "", "text" => "" }] if links.length == 0 %>
       <% links.each_with_index do |l, i| %>
         <div class="link row">
-          <div class="col-xs-5">
-            <div class="form-group link-input">
-              <%= label_tag "link_link#{i}", _('URL'), class: "control-label" %>
+          <div class="col-sm-5">
+            <div class="form-control mb-3 link-input">
+              <%= label_tag "link_link#{i}", _('URL'), class: "form-label" %>
               <%= text_field_tag 'link_link', l['link'], class: "form-control",
                                                          id: "#{context}_link_link#{i}" %>
             </div>
           </div>
-          <div class="col-xs-5">
-            <div class="form-group link-input">
-              <%= label_tag "link_text#{i}", _('Link text'), class: "control-label" %>
+          <div class="col-sm-5">
+            <div class="form-control mb-3 link-input">
+              <%= label_tag "link_text#{i}", _('Link text'), class: "form-label" %>
               <%= text_field_tag 'link_text', l['text'], class: "form-control",
                                                          id: "#{context}link_text#{i}" %>
             </div>
           </div>
-          <div class="col-xs-2">
-            <div class="form-group">
+          <div class="col-sm-2">
+            <div class="form-control mb-3">
               <a href="#" class="delete" aria-label="<%= _('Remove this link') %>">
                 <i class="fas fa-circle-xmark fa-reverse" aria-hidden="true"></i>
               </a>
@@ -49,7 +49,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-sm-12">
       <a href="#" class="new<%= links.length >= max_number_links ? ' hide' : '' %>"><%= _('+ Add an additional URL') %></a>
     </div>
   </div>
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
index 699d3782bb..020227d612 100644
--- a/app/views/shared/_modal.html.erb
+++ b/app/views/shared/_modal.html.erb
@@ -7,7 +7,7 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <p class="modal-title fontesize-h4" id="modal-title">
           <%= title %>
         </p>
@@ -16,7 +16,7 @@
         <%= yield %>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/app/views/shared/_popover.html.erb b/app/views/shared/_popover.html.erb
index 433b69935f..734705ee2c 100644
--- a/app/views/shared/_popover.html.erb
+++ b/app/views/shared/_popover.html.erb
@@ -1,6 +1,6 @@
 <%# available locals: message, placement %>
 <% if message.present? %>
-  <a href="#" class="btn btn-default" data-toggle="tooltip"
+  <a href="#" class="btn btn-secondary" data-toggle="tooltip"
      title="<%= message %>" placement="<%= placement %>">
     <i class="fas fa-circle-question"></i>
     <em class="sr-only"><%= message %>></em>
diff --git a/app/views/shared/_search.html.erb b/app/views/shared/_search.html.erb
index ea756ca074..f8e5c9f52e 100644
--- a/app/views/shared/_search.html.erb
+++ b/app/views/shared/_search.html.erb
@@ -1,21 +1,23 @@
 <%# locals: { search_term } %>
 
 <%= form_tag(paginable_base_url(1), method: :get, remote: remote, class: 'form-inline paginable-action') do %>
-  <div class="form-group">
-    <div class="input-group">
-      <span class="input-group-addon" id="search-addon">
+  <div class="d-inline-flex flex-row mb-2 col-6">
+    <div class="d-inline-flex input-group col-6">
+      <span class="input-group-text" id="search-addon">
         <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
       </span>
       <%= text_field_tag(:search, search_term, class: 'form-control', 'aria-labelledby': 'search',
                         spellcheck: true, 'aria-describedby': 'search-addon', 'aria-required': true) %>
-
     </div>
+    <div class="d-inline-flex input-group col-6">
     <%# @filter_admin is only defined on the users_index page %>
     <% unless @filter_admin.nil?  %>
-      <%= label_tag(:filter_admin, _('Only Show Admins'), class: 'form-check-inline') %>
-      <%= check_box_tag( :filter_admin , "1", @filter_admin)%>
-      &nbsp
+      <div class="d-inline-flex align-items-center form-check ms-2">
+        <%= check_box_tag( :filter_admin , "1", @filter_admin, class: 'checkbox')%>
+        <%= label_tag(:filter_admin, _('Only Show Admins'), class: 'form-check-label') %>
+      </div>
     <% end %>
+      <%= submit_tag(_('Search'), class: 'btn btn-secondary ms-2') %>
+    </div>
   </div>
-  <%= submit_tag(_('Search'), class: 'btn btn-default', style: 'margin-top: 8px;') %>
 <% end %>
diff --git a/app/views/shared/_sign_in_form.html.erb b/app/views/shared/_sign_in_form.html.erb
index c4a29ec5d2..274b932588 100644
--- a/app/views/shared/_sign_in_form.html.erb
+++ b/app/views/shared/_sign_in_form.html.erb
@@ -1,35 +1,35 @@
-<%= form_for resource, as: 'user', namespace: 'signin', url: user_session_path, html: {id: "sign_in_form"} do |f| %>
-  <div class="form-group">
-    <%= f.label(:email, _('Email'), class: 'control-label') %>
-    <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
-  </div>
-  <div class="form-group">
-    <%= f.label(:password, _('Password'), class: 'control-label') %>
-    <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
-  </div>
-  <div>
-    <%= link_to _('Forgot password?'), new_password_path('user') %>
-  </div>
-  <div class="checkbox">
-    <%= label_tag 'remember_email' do %>
-      <%= check_box_tag 'remember_email' %>
-      <%= _('Remember email') %>
-    <% end %>
-  </div>
-  <%= f.button(_('Sign in'), class: "btn btn-default", type: "submit") %>
-
-  <% if Rails.configuration.x.shibboleth.enabled %>
-    <% if session['devise.shibboleth_data'].nil? %>
-      <p class="text-center fontsize-h4">- <%= _('or') %> -</p>
-      <div class="form-group">
-        <span class="center-block btn-group-justified">
-          <% target = (Rails.configuration.x.shibboleth.use_filtered_discovery_service ? shibboleth_ds_path : user_shibboleth_omniauth_authorize_path) %>
-          <%= link_to _('Sign in with your institutional credentials'), target, method: :post, class: 'btn btn-default' %>
-        </span>
-      </div>
-    <% else %>
-      <%= f.hidden_field :shibboleth_id, :value => session['devise.shibboleth_data']['uid'] %>
-    <% end %>
-  <% end %>
-
-<% end %>
+<%= form_for resource, as: 'user', namespace: 'signin', url: user_session_path, html: {id: "sign_in_form"} do |f| %>
+  <div class="form-control mb-3">
+    <%= f.label(:email, _('Email'), class: 'form-label') %>
+    <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
+  </div>
+  <div class="form-control mb-3">
+    <%= f.label(:password, _('Password'), class: 'form-label') %>
+    <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
+  </div>
+  <div>
+    <%= link_to _('Forgot password?'), new_password_path('user') %>
+  </div>
+  <div class="form-check mb-3">
+    <%= label_tag 'remember_email', class: 'form-check-label' do %>
+      <%= check_box_tag 'remember_email' %>
+      <%= _('Remember email') %>
+    <% end %>
+  </div>
+  <%= f.button(_('Sign in'), class: "btn btn-secondary", type: "submit") %>
+
+  <% if Rails.configuration.x.shibboleth.enabled %>
+    <% if session['devise.shibboleth_data'].nil? %>
+      <p class="text-center fontsize-h4">- <%= _('or') %> -</p>
+      <div class="form-control mb-3">
+        <span class="d-grid">
+          <% target = (Rails.configuration.x.shibboleth.use_filtered_discovery_service ? shibboleth_ds_path : user_shibboleth_omniauth_authorize_path) %>
+          <%= link_to _('Sign in with your institutional credentials'), target, method: :post, class: 'btn btn-secondary' %>
+        </span>
+      </div>
+    <% else %>
+      <%= f.hidden_field :shibboleth_id, :value => session['devise.shibboleth_data']['uid'] %>
+    <% end %>
+  <% end %>
+
+<% end %>
diff --git a/app/views/shared/_table_filter.html.erb b/app/views/shared/_table_filter.html.erb
index daf236c0aa..0f8341e87d 100644
--- a/app/views/shared/_table_filter.html.erb
+++ b/app/views/shared/_table_filter.html.erb
@@ -1,21 +1,21 @@
-<% remove_filter_tooltip = _('Remove the filter') %>
-
-<div class="tablefilter form-group pull-right">
-  <form>
-    <ul class="list-inline">
-      <li><%= label_tag :filter, _('Filter plans'), class: "sr-only" %></li>
-      <li><%= search_field_tag(:filter, nil, placeholder: placeholder, class: "form-control filter") %></li>
-      <li>
-          <a
-            class="clear_filter"
-            href="#"
-            data-toggle="tooltip"
-            title="<%= remove_filter_tooltip %>"
-            aria-label="<%= remove_filter_tooltip %>">
-              <i class="fas fa-times" aria-hidden="true"></i>
-              <em class="sr-only"><%= remove_filter_tooltip %></em>
-          </a>
-      </li>
-    </ul>
-  </form>
-</div>
+<% remove_filter_tooltip = _('Remove the filter') %>
+
+<div class="tablefilter form-control mb-3 float-end">
+  <form>
+    <ul class="list-inline">
+      <li><%= label_tag :filter, _('Filter plans'), class: "sr-only form-label" %></li>
+      <li><%= search_field_tag(:filter, nil, placeholder: placeholder, class: "form-control filter") %></li>
+      <li>
+          <a
+            class="clear_filter"
+            href="#"
+            data-toggle="tooltip"
+            title="<%= remove_filter_tooltip %>"
+            aria-label="<%= remove_filter_tooltip %>">
+              <i class="fas fa-times" aria-hidden="true"></i>
+              <em class="sr-only"><%= remove_filter_tooltip %></em>
+          </a>
+      </li>
+    </ul>
+  </form>
+</div>
diff --git a/app/views/static_pages/about_us.html.erb b/app/views/static_pages/about_us.html.erb
index fbc2f7a034..b931fa0d22 100644
--- a/app/views/static_pages/about_us.html.erb
+++ b/app/views/static_pages/about_us.html.erb
@@ -1,5 +1,5 @@
 <% title _('About %{application_name}') % { application_name: ApplicationService.application_name } %>
-<div class="row">
+<div class="row mt-5">
   <div class="col-md-12">
     <h1><%= _('About %{application_name}') % { application_name: ApplicationService.application_name } %></h1>
   </div>
diff --git a/app/views/static_pages/privacy.html.erb b/app/views/static_pages/privacy.html.erb
index 3445bcfa29..c5f7a853cc 100644
--- a/app/views/static_pages/privacy.html.erb
+++ b/app/views/static_pages/privacy.html.erb
@@ -1,5 +1,5 @@
 <% title _('Privacy statement') %>
-<div class="row">
+<div class="row mt-5 mb-3">
   <div class="col-md-12">
     <h1><%= _('Privacy statement') %></h1>
   </div>
diff --git a/app/views/static_pages/termsuse.html.erb b/app/views/static_pages/termsuse.html.erb
index 1481ed39ee..5c68453f60 100644
--- a/app/views/static_pages/termsuse.html.erb
+++ b/app/views/static_pages/termsuse.html.erb
@@ -1,5 +1,5 @@
 <% title _('Terms of use') %>
-<div class="row">
+<div class="row mt-5">
   <div class="col-md-12">
     <h1><%= _('Terms of use')%></h1>
   </div>
diff --git a/app/views/super_admin/api_clients/_form.html.erb b/app/views/super_admin/api_clients/_form.html.erb
index 27dbbf348d..02d33f2116 100644
--- a/app/views/super_admin/api_clients/_form.html.erb
+++ b/app/views/super_admin/api_clients/_form.html.erb
@@ -7,35 +7,35 @@ orgs = Org.where(is_other: false)
 <%= form_for @api_client, url: url, method: method,
                           html: { class: 'api_client' } do |f| %>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :name, _('Name'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :name, _('Name'), class: 'form-label' %>
       <%= f.text_field :name, class: 'form-control', aria: { required: true } %>
     </div>
-    <div class="form-group col-xs-4">
-      <%= f.label :homepage, _('Homepage'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :homepage, _('Homepage'), class: 'form-label' %>
       <%= f.url_field :homepage, class: 'form-control' %>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-8">
-      <%= f.label :description, _('Description'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-8">
+      <%= f.label :description, _('Description'), class: 'form-label' %>
       <%= f.text_area :description,
                       class: 'form-control api-client-text',
                       spellcheck: true %>
     </div>
   </div>
   <div class="row">
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_email, _('Contact Name'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :contact_email, _('Contact Name'), class: 'form-label' %>
       <%= f.text_field :contact_name, class: 'form-control' %>
     </div>
-    <div class="form-group col-xs-4">
-      <%= f.label :contact_email, _('Contact Email'), class: 'control-label' %>
+    <div class="form-control mb-3 col-xs-4">
+      <%= f.label :contact_email, _('Contact Email'), class: 'form-label' %>
       <%= f.email_field :contact_email, class: 'form-control', aria: { required: true } %>
     </div>
   </div>
   <div class="row">
-    <div id="api-client-org-controls" class="form-group col-xs-8">
+    <div id="api-client-org-controls" class="form-control mb-3 col-xs-8">
       <%= render partial: "shared/org_selectors/local_only",
                  locals: { form: f, default_org: @api_client.org, orgs: orgs, required: false } %>
     </div>
@@ -43,19 +43,19 @@ orgs = Org.where(is_other: false)
 
   <% unless @api_client.new_record? %>
     <div class="row" id="api-client-credentials">
-      <div class="form-group col-xs-4">
-        <%= f.label :client_id, _('Client ID'), class: 'control-label' %>
+      <div class="form-control mb-3 col-xs-4">
+        <%= f.label :client_id, _('Client ID'), class: 'form-label' %>
         <%= f.email_field :client_id, class: 'form-control', disabled: true %>
       </div>
-      <div class="form-group col-xs-4">
-        <%= f.label :client_secret, _('Client Secret'), class: 'control-label' %>
+      <div class="form-control mb-3 col-xs-4">
+        <%= f.label :client_secret, _('Client Secret'), class: 'form-label' %>
         <%= f.email_field :client_secret, class: 'form-control', disabled: true %>
       </div>
     </div>
 
     <div class="row">
-      <div class="form-group col-xs-3">
-        <%= f.label :client_id, _('Last accessed on'), class: 'control-label' %>
+      <div class="form-control mb-3 col-xs-3">
+        <%= f.label :client_id, _('Last accessed on'), class: 'form-label' %>
         <% date = @api_client.last_access.present? ? @api_client.last_access.utc.to_s  : _("Never") %>
         <%= f.text_field :last_access, class: 'form-control', disabled: true,
                                        value: date %>
@@ -63,26 +63,26 @@ orgs = Org.where(is_other: false)
     </div>
   <% end %>
 
-  <div class="pull-right">
-    <%= f.button _('Save'), class: 'btn btn-default', type: 'submit' %>
+  <div class="float-end">
+    <%= f.button _('Save'), class: 'btn btn-secondary', type: 'submit' %>
 
     <% unless @api_client.new_record? %>
       <%= link_to _("Refresh client ID and secret"),
                   refresh_credentials_super_admin_api_client_path(@api_client),
-                  class: "btn btn-default", remote: true %>
+                  class: "btn btn-secondary", remote: true %>
 
       <%= link_to _("Email credentials to contact"),
                   email_credentials_super_admin_api_client_path(@api_client),
-                  class: "btn btn-default", remote: true %>
+                  class: "btn btn-secondary", remote: true %>
 
       <%= link_to(
             _('Delete'),
             super_admin_api_client_path(@api_client),
-            class: 'btn btn-default',
+            class: 'btn btn-secondary',
             method: :delete,
             data: { confirm: _('Are you sure you want to delete the API client: "%{name}"') % { name: @api_client.name }}) %>
     <% end %>
 
-    <%= link_to _('Cancel'), super_admin_api_clients_path, class: 'btn btn-default', role: 'button' %>
+    <%= link_to _('Cancel'), super_admin_api_clients_path, class: 'btn btn-secondary', role: 'button' %>
   </div>
 <% end %>
diff --git a/app/views/super_admin/api_clients/edit.html.erb b/app/views/super_admin/api_clients/edit.html.erb
index 7a5a5262b6..c5a58fdf70 100644
--- a/app/views/super_admin/api_clients/edit.html.erb
+++ b/app/views/super_admin/api_clients/edit.html.erb
@@ -2,7 +2,7 @@
 <h2>
    <%= _('Editing API Client') %>
    <%= link_to(_('View all API clients'), super_admin_api_clients_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h2>
 
 <%= render 'form' %>
diff --git a/app/views/super_admin/api_clients/index.html.erb b/app/views/super_admin/api_clients/index.html.erb
index 01801c75d0..9450416983 100644
--- a/app/views/super_admin/api_clients/index.html.erb
+++ b/app/views/super_admin/api_clients/index.html.erb
@@ -5,7 +5,7 @@
     <h1>
       <%= _('API Clients') %>
       <a href="<%= new_super_admin_api_client_path %>"
-         class="btn btn-primary pull-right"><%= _('Create Api Client') %></a>
+         class="btn btn-primary float-end"><%= _('Create Api Client') %></a>
     </h1>
     <p>Manage API access for external applications</p>
   </div>
diff --git a/app/views/super_admin/api_clients/new.html.erb b/app/views/super_admin/api_clients/new.html.erb
index dbdeb61bca..7d4d6cc29c 100644
--- a/app/views/super_admin/api_clients/new.html.erb
+++ b/app/views/super_admin/api_clients/new.html.erb
@@ -2,7 +2,7 @@
 <h2>
    <%= _('New API Client') %>
    <%= link_to(_('View all API clients'), super_admin_api_clients_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h2>
 
 <%= render 'form' %>
diff --git a/app/views/super_admin/notifications/_form.html.erb b/app/views/super_admin/notifications/_form.html.erb
index 50bbe62280..d99b0f700e 100644
--- a/app/views/super_admin/notifications/_form.html.erb
+++ b/app/views/super_admin/notifications/_form.html.erb
@@ -2,8 +2,8 @@
 
 <%= form_for @notification, url: url, html: { class: 'notification' } do |f| %>
   <div class="row">
-    <div class="form-group col-xs-10">
-      <%= f.label :title, _('Title'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-10">
+      <%= f.label :title, _('Title'), class: 'form-label' %>
       <%= f.text_field :title,
           class: 'form-control',
           value: @notification.title,
@@ -11,8 +11,8 @@
           "aria-required": true %>
     </div>
 
-    <div class="form-group col-xs-2">
-      <%= f.label :level, _('Level'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-2">
+      <%= f.label :level, _('Level'), class: 'form-label' %>
       <%= f.select :level,
           Notification.levels.keys.map { |l| [l.humanize, l] },
           { value: @notification.level },
@@ -22,30 +22,30 @@
   </div>
 
   <div class="row">
-    <div class="form-group col-xs-12">
+    <div class="form-control mb-3 col-sm-12">
       <%= f.check_box :dismissable, style: 'width: auto' %>
-      <%= f.label :dismissable, _('Dismissable'), class: 'control-label' %>
+      <%= f.label :dismissable, _('Dismissable'), class: 'form-label' %>
     </div>
   </div>
 
   <div class="row">
-    <div class="form-group col-xs-12">
+    <div class="form-control mb-3 col-sm-12">
       <%= f.check_box :enabled, style: 'width: auto' %>
-      <%= f.label :enabled, _('Active'), class: 'control-label' %>
+      <%= f.label :enabled, _('Active'), class: 'form-label' %>
     </div>
   </div>
 
   <div class="row">
-    <div class="form-group col-xs-6">
-      <%= f.label :starts_at, _('Start'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-6">
+      <%= f.label :starts_at, _('Start'), class: 'form-label' %>
       <%= f.date_field :starts_at,
           class: 'form-control',
           value: (@notification.starts_at || Date.today),
           min: Date.today %>
     </div>
 
-    <div class="form-group col-xs-6">
-      <%= f.label :expires_at, _('Expiration'), class: 'control-label' %>
+    <div class="form-control mb-3 col-sm-6">
+      <%= f.label :expires_at, _('Expiration'), class: 'form-label' %>
       <%= f.date_field :expires_at,
         class: 'form-control',
         value: (@notification.expires_at || Date.tomorrow),
@@ -53,8 +53,8 @@
     </div>
   </div>
 
-  <div class="form-group">
-    <%= f.label :body, _('Body'), class: 'control-label' %>
+  <div class="form-control mb-3">
+    <%= f.label :body, _('Body'), class: 'form-label' %>
     <%= f.text_area :body,
         class: 'form-control notification-text',
         value: @notification.body,
@@ -62,14 +62,14 @@
         "aria-required": true %>
   </div>
 
-  <div class="pull-right">
-    <%= f.button _('Save'), class: 'btn btn-default', type: 'submit' %>
+  <div class="float-end">
+    <%= f.button _('Save'), class: 'btn btn-secondary', type: 'submit' %>
     <%= link_to(
           _('Delete'),
           super_admin_notification_path(@notification),
-          class: 'btn btn-default',
+          class: 'btn btn-secondary',
           method: :delete,
           data: { confirm: _('Are you sure you want to delete the notification "%{title}"') % { title: @notification.title }}) unless @notification.new_record? %>
-    <%= link_to _('Cancel'), super_admin_notifications_path, class: 'btn btn-default', role: 'button' %>
+    <%= link_to _('Cancel'), super_admin_notifications_path, class: 'btn btn-secondary', role: 'button' %>
   </div>
 <% end %>
diff --git a/app/views/super_admin/notifications/edit.html.erb b/app/views/super_admin/notifications/edit.html.erb
index 5810fac90f..d28069fb6b 100644
--- a/app/views/super_admin/notifications/edit.html.erb
+++ b/app/views/super_admin/notifications/edit.html.erb
@@ -4,7 +4,7 @@
 
    <%= _('Editing Notification') %>
    <%= link_to(_('View all notifications'), super_admin_notifications_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h1>
 
 <%= render 'form' %>
diff --git a/app/views/super_admin/notifications/index.html.erb b/app/views/super_admin/notifications/index.html.erb
index f0b174a052..1b70fdca22 100644
--- a/app/views/super_admin/notifications/index.html.erb
+++ b/app/views/super_admin/notifications/index.html.erb
@@ -1,14 +1,15 @@
 <% title _('Notifications') %>
 <div class="row">
-  <div class="col-xs-12">
+  <div class="col-sm-9">
     <h1 class="fontsize-h2"><%= _('Notifications') %></h1>
   </div>
+      <div class="col-sm-3">
+      <%= link_to _('+ Add New Notification'), new_super_admin_notification_path, class: 'btn btn-secondary float-end', role: 'button' %>
+    </div>
 </div>
+
 <div class="row">
   <div class="col-xs-12">
-    <div class="pull-right">
-      <%= link_to _('+ Add New Notification'), new_super_admin_notification_path, class: 'btn btn-default', role: 'button' %>
-    </div>
     <div class="table-responsive">
       <%= paginable_renderise(
         partial: '/paginable/notifications/index',
diff --git a/app/views/super_admin/notifications/new.html.erb b/app/views/super_admin/notifications/new.html.erb
index 8f1de38a64..cc202a55bb 100644
--- a/app/views/super_admin/notifications/new.html.erb
+++ b/app/views/super_admin/notifications/new.html.erb
@@ -2,7 +2,7 @@
 <h1 class="fontsize-h2">
    <%= _('New Notification') %>
    <%= link_to(_('View all notifications'), super_admin_notifications_path,
-       class: 'btn btn-default pull-right', role: 'button') %>
+       class: 'btn btn-secondary float-end', role: 'button') %>
  </h1>
 
   <%= render 'form' %>
diff --git a/app/views/super_admin/orgs/_analysis.html.erb b/app/views/super_admin/orgs/_analysis.html.erb
index 42bad41c4a..abc8c37d9e 100644
--- a/app/views/super_admin/orgs/_analysis.html.erb
+++ b/app/views/super_admin/orgs/_analysis.html.erb
@@ -27,8 +27,8 @@ orcid = IdentifierScheme.find_by(name: 'orcid')
           %>
           <tr>
             <td class="text-center"><%= category.capitalize %></td>
-            <td class="text-right"><%= to_entries.length %></td>
-            <td class="text-right"><%= to_entries.length + mergeable_entries.length %></td>
+            <td class="text-end"><%= to_entries.length %></td>
+            <td class="text-end"><%= to_entries.length + mergeable_entries.length %></td>
           </tr>
         <% end %>
       </<tbody>
diff --git a/app/views/super_admin/orgs/index.html.erb b/app/views/super_admin/orgs/index.html.erb
index dd6d521cbc..e1bcf91b0e 100644
--- a/app/views/super_admin/orgs/index.html.erb
+++ b/app/views/super_admin/orgs/index.html.erb
@@ -5,7 +5,7 @@
     <h1>
       <%= _('Organisations') %>
       <a href="<%= new_super_admin_org_path %>"
-         class="btn btn-primary pull-right"><%= _('Create Organisation') %></a>
+         class="btn btn-primary float-end"><%= _('Create Organisation') %></a>
     </h1>
   </div>
 </div>
diff --git a/app/views/super_admin/orgs/new.html.erb b/app/views/super_admin/orgs/new.html.erb
index 8def3306dd..8c75d4bde3 100644
--- a/app/views/super_admin/orgs/new.html.erb
+++ b/app/views/super_admin/orgs/new.html.erb
@@ -4,7 +4,7 @@
       <%= _('New organisation')  %>
     </h1>
     <% if current_user.can_super_admin? %>
-      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-default pull-right' %>
+      <%= link_to _('View all organisations'), super_admin_orgs_path, class: 'btn btn-secondary float-end' %>
     <% end %>
   </div>
 </div>
@@ -20,8 +20,8 @@
     <!-- render navigation tabs for the template-->
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active" id="profile">
-        <div class="panel panel-default">
-          <div class="panel-body">
+        <div class="card card-default">
+          <div class="card-body">
             <div class="px-2">
               <%= render partial: 'orgs/profile_form',
                          locals: {
diff --git a/app/views/super_admin/themes/_form.html.erb b/app/views/super_admin/themes/_form.html.erb
index cd46e069f9..d239405111 100644
--- a/app/views/super_admin/themes/_form.html.erb
+++ b/app/views/super_admin/themes/_form.html.erb
@@ -1,21 +1,21 @@
 <% url = @theme.new_record? ? super_admin_themes_path : super_admin_theme_path(@theme) %>
 
  <%= form_for @theme, url: url, html: { class: 'theme' } do |f| %>
-   <div class="form-group">
-     <%= f.label(:title, _('Title'), class: 'control-label') %>
+   <div class="form-control mb-3">
+     <%= f.label(:title, _('Title'), class: 'form-label') %>
      <%= f.text_field(:title, class: "form-control", spellcheck: true, "aria-required": true) %>
    </div>
-   <div class="form-group">
+   <div class="form-control mb-3">
      <%= f.label(:description, _('Guidance')) %>
      <%= f.text_area(:description, class: "form-control", rows: 10, spellcheck: true) %>
    </div>
-   <div class="pull-right">
-     <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
+   <div class="float-end">
+     <%= f.button(_('Save'), class: "btn btn-secondary", type: "submit") %>
      <% unless @theme.new_record? %>
-       <%= link_to(_('Delete'), super_admin_theme_path(@theme), class: 'btn btn-default',
+       <%= link_to(_('Delete'), super_admin_theme_path(@theme), class: 'btn btn-secondary',
          rel: 'nofollow', 'data-method': 'delete',
          'data-confirm': _("Are you sure you want to delete the theme \"%{title}\"?") % { title: @theme.title }) %>
      <% end %>
-     <%= link_to(_('Cancel'), super_admin_themes_path, class: 'btn btn-default', role: 'button') %>
+     <%= link_to(_('Cancel'), super_admin_themes_path, class: 'btn btn-secondary', role: 'button') %>
    </div>
  <% end %>
diff --git a/app/views/super_admin/themes/edit.html.erb b/app/views/super_admin/themes/edit.html.erb
index 29a9f38392..9d9e0e4ab6 100644
--- a/app/views/super_admin/themes/edit.html.erb
+++ b/app/views/super_admin/themes/edit.html.erb
@@ -1,6 +1,6 @@
 <h1 class="fontsize-h2">
   <%= @theme.title %>
   <%= link_to(_('View all themes'), super_admin_themes_path,
-      class: 'btn btn-default pull-right', role: 'button') %>
+      class: 'btn btn-secondary float-end', role: 'button') %>
 </h1>
 <%= render partial: 'form' %>
diff --git a/app/views/super_admin/themes/index.html.erb b/app/views/super_admin/themes/index.html.erb
index 77557e6013..374eb983ef 100644
--- a/app/views/super_admin/themes/index.html.erb
+++ b/app/views/super_admin/themes/index.html.erb
@@ -6,8 +6,8 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <div class="pull-right">
-      <%= link_to(_('+ Add New Theme'), new_super_admin_theme_path, class: 'btn btn-default', role: 'button') %>
+    <div class="float-end">
+      <%= link_to(_('+ Add New Theme'), new_super_admin_theme_path, class: 'btn btn-secondary', role: 'button') %>
     </div>
     <div class="table-responsive">
       <%= paginable_renderise(
diff --git a/app/views/super_admin/themes/new.html.erb b/app/views/super_admin/themes/new.html.erb
index 40682eefd4..d21a981502 100644
--- a/app/views/super_admin/themes/new.html.erb
+++ b/app/views/super_admin/themes/new.html.erb
@@ -1,6 +1,6 @@
 <h1 class="fontsize-h2">
   <%= _("New theme") %>
   <%= link_to(_('View all themes'), super_admin_themes_path,
-      class: 'btn btn-default pull-right', role: 'button') %>
+      class: 'btn btn-secondary float-end', role: 'button') %>
 </h1>
 <%= render partial: 'form' %>
diff --git a/app/views/super_admin/users/_confirm_merge.html.erb b/app/views/super_admin/users/_confirm_merge.html.erb
index 4c0c5d1fc0..fd10e63262 100644
--- a/app/views/super_admin/users/_confirm_merge.html.erb
+++ b/app/views/super_admin/users/_confirm_merge.html.erb
@@ -3,14 +3,14 @@
 </p>
 
 <%= form_tag(merge_super_admin_user_path(@user), method: 'put', class: 'form-inline merge_form') do %>
-  <div class="form-group">
+  <div class="form-control mb-3">
     <div class="input-group">
-      <span class="input-group-addon" id="search-addon">
+      <span class="input-group-text" id="search-addon">
         <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
       </span>
     <%= select_tag(:merge_id, options_from_collection_for_select(@users, "id", "email"), class: "form-control") %>
     </div>
   </div>
-  <%= submit_tag( _("Merge"), class: 'btn btn-default', style: 'margin-top: 8px;', data: { confirm: "placeholder" }) %>
-  <%= link_to(_("Cancel"), edit_super_admin_user_path(@user), class: 'btn btn-default') %>
+  <%= submit_tag( _("Merge"), class: 'btn btn-secondary', style: 'margin-top: 8px;', data: { confirm: "placeholder" }) %>
+  <%= link_to(_("Cancel"), edit_super_admin_user_path(@user), class: 'btn btn-secondary') %>
 <% end %>
diff --git a/app/views/super_admin/users/edit.html.erb b/app/views/super_admin/users/edit.html.erb
index e95e0c89c0..8d1a3ab7ee 100644
--- a/app/views/super_admin/users/edit.html.erb
+++ b/app/views/super_admin/users/edit.html.erb
@@ -3,7 +3,7 @@
   <div class="col-md-12">
     <h1>
       <%= _('Editing profile for %{username}') % { username: @user.name(false) } %>
-      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-default pull-right', role: 'button') %>
+      <%= link_to(_('View all users'), admin_index_users_path, class: 'btn btn-secondary float-end', role: 'button') %>
     </h1>
   </div>
 </div>
@@ -11,22 +11,22 @@
 <div class="row">
   <div class="col-md-7">
     <%= form_for(@user, namespace: :superadmin, as: :user, url: super_admin_user_path(@user), html: {method: :put, id: 'super_admin_user_edit' }) do |f| %>
-      <div class="form-group col-xs-12">
-        <%= f.label(:email, _('Email'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:email, _('Email'), class: 'form-label') %>
         <%= f.email_field(:email, class: "form-control", "aria-required": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:firstname, _('First name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:firstname, _('First name'), class: 'form-label') %>
         <%= f.text_field(:firstname, class: "form-control", "aria-required": true) %>
       </div>
 
-      <div class="form-group col-xs-12">
-        <%= f.label(:surname, _('Last name'), class: 'control-label') %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.label(:surname, _('Last name'), class: 'form-label') %>
         <%= f.text_field(:surname, class: "form-control", "aria-required": true) %>
       </div>
 
-      <div class="form-group col-xs-12" id="super-admin-user-org-controls">
+      <div class="form-control mb-3 col-xs-12" id="super-admin-user-org-controls">
         <%= render partial: "shared/org_selectors/combined",
                locals: {
                  form: f,
@@ -36,9 +36,9 @@
       </div>
 
       <% if @departments.any? %>
-      <div class="form-group col-xs-12">
+      <div class="form-control mb-3 col-xs-12">
         <% dept_id = @user.department.nil? ? -1 : @user.department.id  %>
-        <%= f.label(:department_id, _('Department or school'), class: 'control-label') %>
+        <%= f.label(:department_id, _('Department or school'), class: 'form-label') %>
         <%= select_tag(:department_id,
             options_from_collection_for_select(@departments, "id", "name", dept_id),
             include_blank: true,
@@ -48,21 +48,21 @@
       <% end %>
 
       <% if Language.many? %>
-        <div class="form-group col-xs-12">
+        <div class="form-control mb-3 col-xs-12">
           <% lang_id = @user.language.nil? ? Language.id_for(I18n.default_locale) : @user.language.id %>
-          <%= f.label(:language_id, _('Language'), class: 'control-label') %>
+          <%= f.label(:language_id, _('Language'), class: 'form-label') %>
           <%= select_tag(:super_admin_user_language_id,
               options_from_collection_for_select(Language.sorted_by_abbreviation, "id", "name", lang_id),
               class: "form-control", name: 'user[language_id]') %>
         </div>
       <% end %>
 
-      <div class="form-group col-xs-12">
-        <%= f.button(_('Save'), class: 'btn btn-default', type: "submit", id: "personal_details_registration_form_submit") %>
+      <div class="form-control mb-3 col-xs-12">
+        <%= f.button(_('Save'), class: 'btn btn-secondary', type: "submit", id: "personal_details_registration_form_submit") %>
 
         <%= link_to _('Archive'), archive_super_admin_user_path(id: @user.id),
             data: { method: :put, confirm: _("You are about to archive %{user_name}.  This will remove their personal information, but retain their plans, answers, and comments.  They will be unable to sign-in. Are you sure?") % {user_name: @user.name } },
-            class: 'btn btn-default', role: 'button' %>
+            class: 'btn btn-secondary', role: 'button' %>
       </div>
     <% end %>
 
@@ -75,8 +75,8 @@
     <% end %>
 
   </div>
-  <div class="col-xs-5">
-    <div class="row">
+  <div class="col-md-5">
+    <div class="row mx-3">
       <h2>
         <%= _('Merge Accounts') %>
       </h2>
@@ -85,15 +85,15 @@
           <%= sanitize _("First, search for a user by email, then select them from the list.") %>
         </p>
         <%= form_tag(search_super_admin_user_path(@user), method: 'get', remote: true, class: 'form-inline', id: 'merge_form') do %>
-          <div class="form-group">
+          <div class="form-control mb-3">
             <div class="input-group">
-              <span class="input-group-addon" id="search-addon">
+              <span class="input-group-text" id="search-addon">
                 <span class="fas fa-magnifying-glass" aria-hidden="true"></span>
               </span>
             <%= text_field_tag(:email, nil, class: "form-control", placeholder: _("Email")) %>
             </div>
           </div>
-          <%= submit_tag( _("Search"), class: 'btn btn-default', style: 'margin-top: 8px;') %>
+          <%= submit_tag( _("Search"), class: 'btn btn-secondary', style: 'margin-top: 8px;') %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/usage/_template_statistics_accordion.html.erb b/app/views/usage/_template_statistics_accordion.html.erb
index b027446344..22501b0f79 100644
--- a/app/views/usage/_template_statistics_accordion.html.erb
+++ b/app/views/usage/_template_statistics_accordion.html.erb
@@ -1,29 +1,21 @@
 <%# locals: expanded %>
 
-<div class="panel panel-default">
-  <a href="#template_statistics" class="heading-button"
-     data-toggle="collapse" data-parent="usage-accordion"
-     data-target="#collapseTemplateStatistics"
-     aria-expanded="true" aria-controls="#collapseTemplateStatistics">
+ <div class="accordion-item w-100">
+ <h2 class="accordion-header" id="headingTemplateStatistics">
+      <button href="#template_statistics" type="button"
+             class="accordion-button collapsed" data-bs-toggle="collapse" 
+             data-bs-target="#collapseTemplateStatistics" aria-expanded="false" aria-controls="collapseTemplateStatistics">
+         <%= _('Statistics on your Templates') %>
+      </button>
+  </h2>
 
-    <div class="panel-heading" role="tab" id="headingTemplateStatistics">
-      <div class="panel-title pull-left">
-        <%= _('Statistics on your Templates') %>
-      </div>
-      <div class="pull-right">
-        <i class="fas fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  </a>
   <div id="collapseTemplateStatistics"
-       class="panel-collapse collapse <%='in' if expanded %>"
-       role="tabpanel" aria-labled-by="headingTemplateStatistics">
-    <div class="panel-body">
-
+       class="card collapse"
+       role="tabpanel" 
+       aria-labelledby="headingTemplateStatistics"
+       data-bs-parent="#usage-accordion">
+    <div class="accordion-body card card-body">
       <%= render partial: 'usage/template_statistics' %>
-
     </div>
   </div>
-
 </div>
diff --git a/app/views/usage/_total_usage.html.erb b/app/views/usage/_total_usage.html.erb
index e1c0e67023..b1e230934b 100644
--- a/app/views/usage/_total_usage.html.erb
+++ b/app/views/usage/_total_usage.html.erb
@@ -1,31 +1,29 @@
 <%# locals: user_count, plan_count, separators %>
 
-<div class="row mt-15 mb-15">
-  <div class="col-md-3">
-    <div class="col-xs-6">
+<div class="row">
+    <div class="col-md-2">
       <i class="fas fa-users f-large"></i>
       <p class="fontsize-h4"><%= user_count.to_i %> <%= _('Total users') %></p>
     </div>
-    <div class="col-xs-6">
+    <div class="col-md-2 pe-1">
       <i class="fas fa-files f-large"></i>
       <p class="fontsize-h4"><%= plan_count.to_i %> <%= _( 'Total plans') %></p>
       <%= form_tag('/usage', method: :get, id: :filter_plans_form) do |f| %>
-        <%= label_tag :filtered do %>
+        <%= label_tag :filtered, class: 'form-label' do %>
           <%= check_box_tag(:filtered, "true", @filtered)  %>
           <%=  _("Excluding Test Plans") %>
         <% end %>
       <% end %>
     </div>
-  </div>
   <% if @funder.present? %>
     <div class="col-md-3"></div>
   <% end %>
   <% unless current_user.can_super_admin? %>
     <div class="col-md-3"></div>
   <% end %>
-  <div class="col-md-3">
-    <form class="form-inline mt-10 mb-10 pull-right">
-      <label for="csv-field-sep">
+  <div class="col-md-2">
+    <form class="form-inline float-end">
+      <label for="csv-field-sep form-label">
         <%= _('csv download field separator') %>:
       </label>
       <%= select_tag "csv-field-sep", options_for_select(separators, separators[0]), {class: "single-char-select"} %>
@@ -33,14 +31,14 @@
   </div>
   <% if current_user.can_super_admin? %>
     <div class="col-md-3">
-      <%= link_to usage_global_statistics_path(sep: ",", filtered: @filtered), class: "stat btn btn-default #{'pull-right' if @funder.present?}", role: 'button', target: '_blank' do %>
+      <%= link_to usage_global_statistics_path(sep: ",", filtered: @filtered), class: "stat btn btn-secondary #{'float-end' if @funder.present?}", role: 'button', target: '_blank' do %>
         <%= _('Download global usage') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
   <% end %>
   <% unless @funder.present? %>
     <div class="col-md-3">
-      <%= link_to usage_org_statistics_path(sep: ",", filtered: @filtered), class: 'stat btn btn-default pull-right', role: 'button', target: '_blank' do %>
+      <%= link_to usage_org_statistics_path(sep: ",", filtered: @filtered), class: 'stat btn btn-secondary float-end', role: 'button', target: '_blank' do %>
         <%= _('Download Monthly Usage') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
diff --git a/app/views/usage/_user_statistics.html.erb b/app/views/usage/_user_statistics.html.erb
index e1471d7f36..c22cd30e26 100644
--- a/app/views/usage/_user_statistics.html.erb
+++ b/app/views/usage/_user_statistics.html.erb
@@ -14,12 +14,12 @@
 </div>
 
 <div class="row">
-  <div class="col-md-6">
-    <div class="pull-left">
+  <div class="col-md-6 pe-2">
+    <div class="float-start">
       <p class="bold fontsize-h4"><%= _('No. users joined during last year') %></p>
     </div>
-    <div class="pull-right">
-      <%= link_to usage_yearly_users_path(sep: ","), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
+    <div class="float-end">
+      <%= link_to usage_yearly_users_path(sep: ","), class: 'stat btn btn-secondary', role: 'button', target: '_blank' do %>
         <%= _('Download') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
@@ -29,12 +29,12 @@
                  locals: { data: @users_per_month } %>
     </div>
   </div>
-  <div class="col-md-6">
-    <div class="pull-left">
+  <div class="col-md-6 ps-2">
+    <div class="float-start">
       <p class="bold fontsize-h4"><%= _('No. plans during last year') %></p>
     </div>
-    <div class="pull-right">
-      <%= link_to usage_yearly_plans_path(sep: ",", filtered: @filtered), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
+    <div class="float-end">
+      <%= link_to usage_yearly_plans_path(sep: ",", filtered: @filtered), class: 'stat btn btn-secondary', role: 'button', target: '_blank' do %>
         <%= _('Download') %> <i class="fas fa-download" aria-hidden="true"></i>
       <% end %>
     </div>
@@ -52,18 +52,15 @@
 </div>
 <div class="row">
   <div class="col-md-12">
-      <div class="col-md-6">
-        <div class="pull-left">
+      <div class="col-md-6 float-start">
           <p class="bold fontsize-h4"><%= _('No. plans by template') %></p>
-        </div>
       </div>
 
-      <div class="col-md-6">
-        <div class="pull-right"">
+      <div class="col-md-6 float-end">
           <ul class="list-inline">
             <li>
               <%= form_for :usage, url: usage_plans_by_template_path, remote: true do |f| %>
-                <div class="form-group">
+                <div class="form-control mb-3">
                   <%= f.label :template_plans_range, _('Time period') %>
                   <ul class="list-inline">
                     <li>
@@ -73,21 +70,20 @@
                       <%= hidden_field_tag :filtered, @filtered %>
                     </li>
                     <li>
-                      <%= f.submit _('Go'), class: 'btn btn-default mt-25' %>
+                      <%= f.submit _('Go'), class: 'btn btn-secondary mt-25' %>
                     </li>
                   </ul>
                 </div>
               <% end %>
             </li>
             <li>
-              <div class="form-group">
-                <%= link_to usage_all_plans_by_template_path(sep: ",", filtered: @filtered), class: 'btn btn-default stat', role: 'button', target: '_blank' do %>
+              <div class="form-control mb-3">
+                <%= link_to usage_all_plans_by_template_path(sep: ",", filtered: @filtered), class: 'btn btn-secondary stat', role: 'button', target: '_blank' do %>
                   <%= _('Download all') %> <i class="fas fa-download" aria-hidden="true"></i>
                 <% end %>
              </div>
             </li>
           </ul>
-        </div>
       </div>
     </div>
   </div>
diff --git a/app/views/usage/_user_statistics_accordion.html.erb b/app/views/usage/_user_statistics_accordion.html.erb
index 621a38fdd1..b49c15d106 100644
--- a/app/views/usage/_user_statistics_accordion.html.erb
+++ b/app/views/usage/_user_statistics_accordion.html.erb
@@ -1,29 +1,21 @@
 <%# locals: expanded %>
+ <div class="accordion-item w-100 my-3">
+ <h2 class="accordion-header" id="headingUserStatistics">
+      <button href="#user_statistics" type="button"
+             class="accordion-button collapsed" data-bs-toggle="collapse" 
+             data-bs-target="#collapseUserStatistics" aria-expanded="false" aria-controls="collapseUserStatistics">
+        <%= _('Statistics on your Users') %>
+      </button>
+    </h2>
 
-<div class="panel panel-default">
-  <a href="#user_statistics" class="heading-button"
-     data-toggle="collapse" data-parent="usage-accordion"
-     data-target="#collapseUserStatistics"
-     aria-expanded="true" aria-controls="#collapseUserStatistics">
 
-    <div class="panel-heading" role="tab" id="headingUserStatistics">
-      <div class="panel-title pull-left">
-        <%= _('Statistics on your Users') %>
-      </div>
-      <div class="pull-right">
-        <i class="fas fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  </a>
   <div id="collapseUserStatistics"
-       class="panel-collapse collapse <%='in' if expanded %>"
-       role="tabpanel" aria-labled-by="headingUserStatistics">
-    <div class="panel-body">
-
+       class="card collapse"
+       role="tabpanel" 
+       aria-labelledby="headingUserStatistics"
+       data-bs-parent="#usage-accordion">
+    <div class="accordion-body card card-body">
       <%= render partial: 'usage/user_statistics' %>
-
     </div>
   </div>
-
 </div>
diff --git a/app/views/usage/index.html.erb b/app/views/usage/index.html.erb
index b9f6ca2e72..e506fa2289 100644
--- a/app/views/usage/index.html.erb
+++ b/app/views/usage/index.html.erb
@@ -14,7 +14,7 @@
 <% if @funder.present? %>
   <%= render partial: 'usage/template_statistics' %>
 <% else %>
-  <div class="panel-group usage-accordion" role="tablist" aria-multiselectable="true">
+  <div  id="usage-accordion" class="accordion" role="tablist" aria-multiselectable="true">
     <%= render partial: 'usage/user_statistics_accordion', locals: {expanded: true} %>
     <%= render partial: 'usage/template_statistics_accordion', locals: {expanded: false} %>
   </div>
diff --git a/app/views/users/_admin_grant_permissions.html.erb b/app/views/users/_admin_grant_permissions.html.erb
index ca0d33655d..01321daf10 100644
--- a/app/views/users/_admin_grant_permissions.html.erb
+++ b/app/views/users/_admin_grant_permissions.html.erb
@@ -2,18 +2,20 @@
   <div class="modal-content">
 
     <div class="modal-header">
-      <button type="button" class="close"
-              data-dismiss="modal"
+    <h2 class="modal-title"><%= _('Editing privileges for %{username}') % { username: user.name(false) } %></h2>
+      <button type="button" class="btn-close float-end"
+              data-bs-dismiss="modal"
               aria-label="Close">
-              <span aria-hidden="true">&times;</span></button>
-      <h2 class="modal-title"><%= _('Editing privileges for %{username}') % { username: user.name(false) } %></h2>
+      </button>
     </div>
 
     <%= form_for user, url: admin_update_permissions_user_path(user), html: { method: :put, remote: true, class: 'admin_update_permissions' } do |f| %>
       <div class="modal-body" style="text-align: left">
         <ul class="list-group">
-         <input type="checkbox" name="org_admin_privileges" id="org_admin_privileges" />
-          <%= label_tag :organisational_admin_privileges %>
+          <div class="col-md-8">
+            <input type="checkbox" name="org_admin_privileges" id="org_admin_privileges" />
+              <%= label_tag :organisational_admin_privileges, _('Organisational Admin Privileges'), class: 'form-check-label' %>
+          </div>
           <% perms.each do |perm| %>
             <% case perm.name when 'grant_permissions' %>
               <li class="list-group-item" style="border: none" title="<%= _('Allows the user to assign permissions to other users within the same organisation. Users can only assign permissions they own themselves') %>">
@@ -44,8 +46,10 @@
 
 
           <% if current_user.can_super_admin? %>
+          <div class="col-md-8">
             <input type="checkbox" name="super_admin_privileges" id="super_admin_privileges" />
-            <%= label_tag :super_admin_privileges %>
+            <%= label_tag :super_admin_privileges, _('Super Admin Privileges'), class: 'form-check-label' %>
+            </div>
             <% perms.each do |perm| %>
               <% case perm.name when 'add_organisations' %>
                 <li class="list-group-item" style="border: none" title="<%= _('Allows the user to create new organisations') %>">
diff --git a/app/views/users/_notification_preferences.html.erb b/app/views/users/_notification_preferences.html.erb
index 0178b17365..780a777132 100644
--- a/app/views/users/_notification_preferences.html.erb
+++ b/app/views/users/_notification_preferences.html.erb
@@ -8,42 +8,36 @@
     </p>
 
     <p class="form-control-static"><strong>All Users</strong></p>
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][users][new_comment]', true, @prefs[:users][:new_comment] %><%= _('A new comment has been added to my DMP')  %>
-      </label>
+    <div class="form-check">
+      <%= check_box_tag 'user[prefs][users][new_comment]', true, @prefs[:users][:new_comment] %>
+      <%= label_tag('user[prefs][users][new_comment]', _('A new comment has been added to my DMP'), class: 'form-check-label') %>
     </div>
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %><%= _('A plan has been shared with me')  %>
-      </label>
+    <div class="form-check">
+      <%= check_box_tag 'user[prefs][users][added_as_coowner]', true, @prefs[:users][:added_as_coowner] %>
+      <%= label_tag('user[prefs][users][added_as_coowner]', _('A plan has been shared with me'), class: 'form-check-label') %>
     </div>
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][users][admin_privileges]', true, @prefs[:users][:admin_privileges] %><%= _('Admin privileges granted to me')  %>
-      </label>
+    <div class="form-check">
+        <%= check_box_tag 'user[prefs][users][admin_privileges]', true, @prefs[:users][:admin_privileges] %>
+        <%= label_tag('user[prefs][users][admin_privileges]', _('Admin privileges granted to me'), class: 'form-check-label') %>
     </div>
     <% if @user.org.present? && @user.org.feedback_enabled %>
-      <div class="checkbox">
-        <label>
-          <%= check_box_tag 'user[prefs][users][feedback_requested]', true, @prefs[:users][:feedback_requested] %><%= _('Feedback has been requested for my DMP') %>
-        </label>
+      <div class="form-check">
+          <%= check_box_tag 'user[prefs][users][feedback_requested]', true, @prefs[:users][:feedback_requested] %>
+          <%= label_tag('user[prefs][users][feedback_requested]',  _('Feedback has been requested for my DMP'), class: 'form-check-label') %>
       </div>
-      <div class="checkbox">
-        <label>
-          <%= check_box_tag 'user[prefs][users][feedback_provided]', true, @prefs[:users][:feedback_provided] %><%= _('Feedback has been provided for my DMP')  %>
-        </label>
+      <div class="form-check">
+          <%= check_box_tag 'user[prefs][users][feedback_provided]', true, @prefs[:users][:feedback_provided] %>
+          <%= label_tag('user[prefs][users][feedback_provided]',  _('Feedback has been provided for my DMP') , class: 'form-check-label') %>
       </div>
     <% end %>
 
     <p class="form-control-static"><strong>DMP owners and co-owners</strong></p>
 
-    <div class="checkbox">
-      <label>
-        <%= check_box_tag 'user[prefs][owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %><%= _("My DMP's visibility has changed")  %>
-      </label>
+    <div class="form-check">
+        <%= check_box_tag 'user[prefs][owners_and_coowners][visibility_changed]', true, @prefs[:owners_and_coowners][:visibility_changed] %>
+        <%= label_tag('user[prefs][owners_and_coowners][visibility_changed]',  _("My DMP's visibility has changed"), class: 'form-check-label') %>
     </div>
 
-    <%= submit_tag _('Save'), class: 'btn btn-default' %>
+    <%= submit_tag _('Save'), class: 'btn btn-secondary' %>
   <% end %>
 <% end %>
diff --git a/app/views/users/admin_index.html.erb b/app/views/users/admin_index.html.erb
index 698f261eb6..92c9751104 100644
--- a/app/views/users/admin_index.html.erb
+++ b/app/views/users/admin_index.html.erb
@@ -19,7 +19,7 @@
   <div class="col-md-12">
     <%- # Only display Download Csv button for non super-admin users -%>
     <% if !current_user.can_super_admin? %>
-      <%= button_to _('Download users'), admin_index_users_path(format: 'csv'), class: 'btn btn-default pull-right', method: 'get' %>
+      <%= button_to _('Download users'), admin_index_users_path(format: 'csv'), class: 'btn btn-secondary float-end', method: 'get' %>
     <% end %>
     <div class="table-responsive">
       <%= paginable_renderise(
diff --git a/package.json b/package.json
index 92908f075d..b21d1db7cf 100644
--- a/package.json
+++ b/package.json
@@ -40,9 +40,7 @@
     "@rails/ujs": "^6.0.3-1",
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
-    "bootstrap": "^3.4.1",
-    "bootstrap-3-typeahead": "^4.0.2",
-    "bootstrap-sass": "3.4.1",
+    "bootstrap": "5.2.3",
     "bootstrap-select": "^1.13.18",
     "chart.js": "^3.8.0",
     "core-js": "^3.6.5",
@@ -55,7 +53,7 @@
     "jquery-ui-sass": "^0.0.1",
     "js-cookie": "^3.0.1",
     "number-to-text": "^0.3.8",
-    "popper.js": "^1.16.1",
+    "@popperjs/core": "^2.11.6",
     "rails-erb-loader": "^5.5.2",
     "regenerator-runtime": "^0.13.5",
     "sass": "^1.57.1",
diff --git a/yarn.lock b/yarn.lock
index eec53e3a4e..83149ad778 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1067,6 +1067,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.6":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rails/actioncable@^6.0.3-1":
   version "6.1.7"
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.7.tgz#8b4506925d3f7146a70941e4db7ce9dda99f99ae"
@@ -1523,25 +1528,15 @@ body-parser@^1.19.0:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
-bootstrap-3-typeahead@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bootstrap-3-typeahead/-/bootstrap-3-typeahead-4.0.2.tgz#cb1c969044856862096fc8c71cc21b3acbb50412"
-  integrity sha512-cy1RiQ8wC1p8mM9D+hqlIZAc3llE8ddrF6lw6AhfhbF1YvqA0OrztZYMfPxPlZp1crEXE53IwyYNxehuAIWvew==
-
-bootstrap-sass@3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.4.1.tgz#6843c73b1c258a0ac5cb2cc6f6f5285b664a8e9a"
-  integrity sha512-p5rxsK/IyEDQm2CwiHxxUi0MZZtvVFbhWmyMOt4lLkA4bujDA1TGoKT0i1FKIWiugAdP+kK8T5KMDFIKQCLYIA==
-
 bootstrap-select@^1.13.18:
   version "1.13.18"
   resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.18.tgz#4557119d58dc1159189977161c803962220e4dda"
   integrity sha512-V1IzK4rxBq5FrJtkzSH6RmFLFBsjx50byFbfAf8jYyXROWs7ZpprGjdHeoyq2HSsHyjJhMMwjsQhRoYAfxCGow==
 
-bootstrap@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
-  integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
+bootstrap@5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
+  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -3280,11 +3275,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"

From d6b2db64b89052d177f92a0e39becd3e9c8b8391 Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Tue, 6 Feb 2024 16:16:26 +0000
Subject: [PATCH 14/31] Minor fix for Copy link modal

---
 app/javascript/src/publicTemplates/show.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/javascript/src/publicTemplates/show.js b/app/javascript/src/publicTemplates/show.js
index 75b59d4d66..ecf1a0ce29 100644
--- a/app/javascript/src/publicTemplates/show.js
+++ b/app/javascript/src/publicTemplates/show.js
@@ -1,10 +1,8 @@
 $(() => {
   $('body').on('click', '.copy-link', (e) => {
     const link = $(e.currentTarget).siblings('.direct-link');
-
-    $('#link-modal').on('show.bs.modal', () => {
-      $('#link').val(link.attr('href'));
-    });
+    $('#link').val(link.attr('href'));
+    $('#link-modal').show();
   });
 
   $('body').on('click', '#copy-link-btn', () => {

From cb9b3449d990e5d985b9b9e1baecdd0e38eaf5ba Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Wed, 13 Mar 2024 15:30:27 +0000
Subject: [PATCH 15/31] Fix for issue 2. raised by Aaron. Changes in this PR:
 1) modal-search-result-selector class changed from 'hidden' to 'd-none' 2)
 changes to the related rspec tests for the above

---
 app/javascript/src/utils/modalSearch.js              |  4 ++--
 .../layouts/modal_search/_result.html.erb_spec.rb    | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/javascript/src/utils/modalSearch.js b/app/javascript/src/utils/modalSearch.js
index 2bc8bf1888..eca1eca6fe 100644
--- a/app/javascript/src/utils/modalSearch.js
+++ b/app/javascript/src/utils/modalSearch.js
@@ -16,8 +16,8 @@ $(() => {
 
           if (selectionsBlock.length > 0) {
             const clone = selectedBlock.clone();
-            clone.find('.modal-search-result-selector').addClass('hidden');
-            clone.find('.modal-search-result-unselector').removeClass('hidden');
+            clone.find('.modal-search-result-selector').addClass('d-none');
+            clone.find('.modal-search-result-unselector').removeClass('d-none');
             clone.find('.tags').remove();
             selectionsBlock.append(clone);
             selectedBlock.remove();
diff --git a/spec/views/layouts/modal_search/_result.html.erb_spec.rb b/spec/views/layouts/modal_search/_result.html.erb_spec.rb
index 6266872334..406594d652 100644
--- a/spec/views/layouts/modal_search/_result.html.erb_spec.rb
+++ b/spec/views/layouts/modal_search/_result.html.erb_spec.rb
@@ -43,8 +43,8 @@
              search_path: nil,
              search_method: nil
            }
-    expect(rendered.include?('modal-search-result-selector hidden')).to eql(true)
-    expect(rendered.include?('modal-search-result-unselector hidden')).to eql(false)
+    expect(rendered.include?('modal-search-result-selector d-none')).to eql(true)
+    expect(rendered.include?('modal-search-result-unselector d-none')).to eql(false)
   end
 
   it "hides the 'Select' button and shows the 'Remove' button when :selected is true" do
@@ -57,8 +57,8 @@
              search_path: nil,
              search_method: nil
            }
-    expect(rendered.include?('modal-search-result-selector hidden')).to eql(true)
-    expect(rendered.include?('modal-search-result-unselector hidden')).to eql(false)
+    expect(rendered.include?('modal-search-result-selector d-none')).to eql(true)
+    expect(rendered.include?('modal-search-result-unselector d-none')).to eql(false)
   end
 
   it "shows the 'Select' button and hides the 'Remove' button when :selected is false" do
@@ -71,7 +71,7 @@
              search_path: nil,
              search_method: nil
            }
-    expect(rendered.include?('modal-search-result-selector hidden')).to eql(false)
-    expect(rendered.include?('modal-search-result-unselector hidden')).to eql(true)
+    expect(rendered.include?('modal-search-result-selector d-none')).to eql(false)
+    expect(rendered.include?('modal-search-result-unselector d-none')).to eql(true)
   end
 end

From 11a7ec85d1913f3e53440b6db65710666db242c3 Mon Sep 17 00:00:00 2001
From: John Pinto <jpinto@newington.ed.ac.uk>
Date: Thu, 14 Mar 2024 16:04:39 +0000
Subject: [PATCH 16/31] IssueID #3144 - Rspec fixes for Bootstrap 5 upgrade: 1:
 Added to  spec/rails_helper.rb: Capybara.default_max_wait_time = 10 2: Fix
 for SuperAdmins Orgs Super admin removes links      Failure/Error: all('.link
 a > .fa-circle-xmark').last.click Changed selectors in
 spec/features/super_admins/orgs_spec.rb & updated
 spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to
 links that were not visible and click by using Javascripts scripts. 3: Fixed
 errors in ./spec/features/questions/textarea_questions_spec.rb. Changed
 "(0/1) answered" -> "( 0 / 1)",         "(1/1) answered" -> "( 1 / 1)" 4: Fix
 for error in ./spec/features/annotations/annotations_editing_spec.rb Changed
 "Noo bar" -> "<p>Noo bar</p>". 5: Fixed error in
 ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1)
 answered" -> "(0 / 1)". 6: Fixed error in
 ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1)
 answered" -> "( 0 / 1)". 7: Fixed error in
 spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" ->
 "within('.tab-pane.active')" 8: Fixed errors in
 ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1)
 answered" -> "( 0 / 1)",         "(1/1) answered" -> "( 1 / 1)" 9: Fixed
 error in ./spec/features/templates/templates_editings_spec.rb. Changed "Foo
 bar" -. "<p>Foo bar</p>". 10: Fix for
 ./spec/features/questions/textfield_questions_spec.rb. Changed "(0/1)
 answered" -> "( 0 / 1)",         "(1/1) answered" -> "( 1 / 1)"

---
 spec/features/feedback_requests_spec.rb        |  2 +-
 spec/features/modal_search_spec.rb             |  6 ++++--
 .../questions/checkbox_questions_spec.rb       |  4 ++--
 .../questions/dropdown_questions_spec.rb       |  2 +-
 .../questions/radiobuttons_questions_spec.rb   |  4 ++--
 .../questions/textarea_questions_spec.rb       |  4 ++--
 .../questions/textfield_questions_spec.rb      |  4 ++--
 spec/features/super_admins/orgs_spec.rb        |  8 ++++----
 .../templates_upgrade_customisations_spec.rb   |  3 ++-
 spec/rails_helper.rb                           | 18 ++++++++++++++++++
 spec/support/helpers/links_helper.rb           | 11 ++++++++++-
 11 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/spec/features/feedback_requests_spec.rb b/spec/features/feedback_requests_spec.rb
index 91da633e09..4d6eaccfdf 100644
--- a/spec/features/feedback_requests_spec.rb
+++ b/spec/features/feedback_requests_spec.rb
@@ -35,7 +35,7 @@
     end
 
     # Click "Request feedback" button within panel
-    within('div.panel') do
+    within('.tab-pane.active') do
       click_link 'Request feedback'
     end
 
diff --git a/spec/features/modal_search_spec.rb b/spec/features/modal_search_spec.rb
index 9bc7523aac..478d60719d 100644
--- a/spec/features/modal_search_spec.rb
+++ b/spec/features/modal_search_spec.rb
@@ -32,18 +32,20 @@
       fill_in 'research_output_search_term',	with: @model.name
       click_button 'Apply filter(s)'
       expect(page).to have_text(@model.description)
-
       # Select the repository and make sure it no longer appears in the search results
       click_link 'Select'
       expect(page).not_to have_text(@model.description)
 
+      # Using JS to click on button, as click_button '.modal-header button.btn-close' did not work.
+      modal_close_button = find('.modal-header button.btn-close')
       # Close the modal
-      click_button 'Close'
+      execute_script("arguments[0].click();", modal_close_button)
     end
 
     # Verify that the selection was added to the main page's dom
     expect(page).not_to have_text('Repository search')
     expect(page).to have_text(@model.description)
+    save_screenshot
     # Verify that we can remove the selection
     click_link 'Remove'
     expect(page).not_to have_text(@model.description)
diff --git a/spec/features/questions/checkbox_questions_spec.rb b/spec/features/questions/checkbox_questions_spec.rb
index 9e8a3b658b..50262f9022 100644
--- a/spec/features/questions/checkbox_questions_spec.rb
+++ b/spec/features/questions/checkbox_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
@@ -38,7 +38,7 @@
 
     # Expectations
     expect(page).to have_text 'Answered just now'
-    expect(page).to have_text '1/1 answered'
+    expect(page).to have_text '(1 / 1)'
     expect(Answer.where(question_id: @question.id)).to be_any
   end
 end
diff --git a/spec/features/questions/dropdown_questions_spec.rb b/spec/features/questions/dropdown_questions_spec.rb
index d9c5a52ca5..f157dd4621 100644
--- a/spec/features/questions/dropdown_questions_spec.rb
+++ b/spec/features/questions/dropdown_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
diff --git a/spec/features/questions/radiobuttons_questions_spec.rb b/spec/features/questions/radiobuttons_questions_spec.rb
index c41a51aec1..b913d58710 100644
--- a/spec/features/questions/radiobuttons_questions_spec.rb
+++ b/spec/features/questions/radiobuttons_questions_spec.rb
@@ -2,7 +2,7 @@
 
 require 'rails_helper'
 
-RSpec.describe 'Questions::Tadio button questions', type: :feature do
+RSpec.describe 'Questions::Radio button questions', type: :feature do
   before do
     @default_template  = create(:template, :default, :published)
     @phase             = create(:phase, template: @default_template)
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
diff --git a/spec/features/questions/textarea_questions_spec.rb b/spec/features/questions/textarea_questions_spec.rb
index 2b9ed8c874..34e3fcf84c 100644
--- a/spec/features/questions/textarea_questions_spec.rb
+++ b/spec/features/questions/textarea_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
@@ -39,7 +39,7 @@
 
     # Expectations
     expect(page).to have_text 'Answered just now'
-    expect(page).to have_text '1/1 answered'
+    expect(page).to have_text '(1 / 1)'
     expect(Answer.where(question_id: @question.id)).to be_any
   end
 end
diff --git a/spec/features/questions/textfield_questions_spec.rb b/spec/features/questions/textfield_questions_spec.rb
index 2d3476a9e4..7df6366f37 100644
--- a/spec/features/questions/textfield_questions_spec.rb
+++ b/spec/features/questions/textfield_questions_spec.rb
@@ -26,7 +26,7 @@
     # Expectations
     expect(current_path).to eql(edit_plan_path(@plan))
     # 4 sections x 3 questions
-    expect(page).to have_text('0/1 answered')
+    expect(page).to have_text('(0 / 1)')
 
     # Action
     find("#section-panel-#{@section.id}").click
@@ -39,7 +39,7 @@
 
     # Expectations
     expect(page).to have_text 'Answered just now'
-    expect(page).to have_text '1/1 answered'
+    expect(page).to have_text '(1 / 1)'
     expect(Answer.where(question_id: @question.id)).to be_any
   end
 end
diff --git a/spec/features/super_admins/orgs_spec.rb b/spec/features/super_admins/orgs_spec.rb
index 06f6a61b34..b250b8b9c6 100644
--- a/spec/features/super_admins/orgs_spec.rb
+++ b/spec/features/super_admins/orgs_spec.rb
@@ -27,9 +27,9 @@
     # Edit the first org in the table
     find('table .dropdown-toggle').click
     find('.dropdown-menu > li > a').click
-    nbr_links = all('.link').length
+    nbr_links = all('input[name="link_link"]').length
     add_link
-    expect(all('.link').length).to eql(nbr_links + 1)
+    expect(all('input[name="link_link"]').length).to eql(nbr_links + 1)
   end
 
   scenario 'Super admin removes links' do
@@ -39,8 +39,8 @@
     find('table .dropdown-toggle').click
     find('.dropdown-menu > li > a').click
     add_link
-    nbr_links = all('.link').length
+    nbr_links = all('input[name="link_link"]').length
     remove_link
-    expect(all('.link').length).to eql(nbr_links - 1)
+    expect(all('input[name="link_link"]').length).to eql(nbr_links - 1)
   end
 end
diff --git a/spec/features/templates/templates_upgrade_customisations_spec.rb b/spec/features/templates/templates_upgrade_customisations_spec.rb
index 9a5da195b0..715691b69c 100644
--- a/spec/features/templates/templates_upgrade_customisations_spec.rb
+++ b/spec/features/templates/templates_upgrade_customisations_spec.rb
@@ -74,7 +74,8 @@
       within('.new-question-button') do
         click_link('Add Question')
       end
-      expect(page).to have_css('#new_question_new_question')
+
+      expect(page).to have_selector('#new_question_new_question')
       within('#new_question_new_question') do
         tinymce_fill_in :new_question_question_text, with: 'Text for this specific question'
         expect { click_button('Save') }.to change { Question.count }.by(1)
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index 98c265b5cf..4be8e3b936 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -80,3 +80,21 @@
   config.include Devise::Test::ControllerHelpers, type: :view
   config.include Pundit::Matchers, type: :policy
 end
+
+Capybara.register_driver :headless_chrome do |app|
+  options = Selenium::WebDriver::Chrome::Options.new
+  options.add_argument('--headless')
+  options.add_argument('--no-sandbox')
+  options.add_argument('--disable-dev-shm-usage')
+
+  Capybara::Selenium::Driver.new(
+    app,
+    browser: :chrome,
+    options: options
+  )
+end
+
+Capybara.javascript_driver = :headless_chrome
+Capybara.default_driver = :headless_chrome
+# Configure Capybara to wait longer for elements to appear
+Capybara.default_max_wait_time = 20
diff --git a/spec/support/helpers/links_helper.rb b/spec/support/helpers/links_helper.rb
index a4501227d5..8b27295757 100644
--- a/spec/support/helpers/links_helper.rb
+++ b/spec/support/helpers/links_helper.rb
@@ -6,6 +6,15 @@ def add_link
   end
 
   def remove_link
-    all('.link a > .fa-circle-xmark').last.click
+    # # Scroll the element into view
+    last_link = all('a.delete > .fas.fa-circle-xmark.fa-reverse', visible: false).last
+    scroll_to_element(last_link)
+    # Use Javascript to click link element, as it appears to be size 0
+    execute_script("arguments[0].click();", last_link);
+  end
+
+  def scroll_to_element(element)
+    script = 'arguments[0].scrollIntoView(true)'
+    execute_script(script, element.native)
   end
 end

From b90ffcde67b59eb57be61f25b9e661284d307fae Mon Sep 17 00:00:00 2001
From: Marta Nicholson <marta.nicholson@ed.ac.uk>
Date: Mon, 25 Mar 2024 16:41:02 +0000
Subject: [PATCH 17/31] Update modal_search_spec.rb

---
 spec/features/modal_search_spec.rb | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spec/features/modal_search_spec.rb b/spec/features/modal_search_spec.rb
index 478d60719d..eac60978fc 100644
--- a/spec/features/modal_search_spec.rb
+++ b/spec/features/modal_search_spec.rb
@@ -45,7 +45,6 @@
     # Verify that the selection was added to the main page's dom
     expect(page).not_to have_text('Repository search')
     expect(page).to have_text(@model.description)
-    save_screenshot
     # Verify that we can remove the selection
     click_link 'Remove'
     expect(page).not_to have_text(@model.description)

From 6785bf3973e724a202f6907ade554f38204861cf Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Tue, 26 Mar 2024 14:04:27 +0000
Subject: [PATCH 18/31] Changes in this PR:  - rubocop fixes after Bootstrap
 upgrade and RSpec tests fixes (Note: default value for 'dropdown' argument
 removed in app/helpers/customizable_template_link_helper.rb as part of
 rubocop fix)

---
 CHANGELOG.md                                     |  3 ++-
 app/helpers/customizable_template_link_helper.rb | 14 ++++++++------
 spec/features/modal_search_spec.rb               |  2 +-
 spec/support/helpers/links_helper.rb             |  2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb58ae6692..963208c31d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -148,7 +148,8 @@ We sometimes use the button native Dom element to programmatically click, as the
     * `text-*` utilities do not add hover and focus states to links anymore. `link-*` helper classes can be used instead.
 
 ### Fixed 
-- Fixed rubocop errors after V4.1.1 release 
+- Fixed rubocop errors after Bootstrap upgrade 
+- Fixed RSpec tests after Bootstrap upgrade  
 
 ## V4.1.1
 
diff --git a/app/helpers/customizable_template_link_helper.rb b/app/helpers/customizable_template_link_helper.rb
index 524f007e98..d14cd8f6fc 100644
--- a/app/helpers/customizable_template_link_helper.rb
+++ b/app/helpers/customizable_template_link_helper.rb
@@ -5,29 +5,31 @@ module CustomizableTemplateLinkHelper
   # Link to the appropriate customizable template.
   # Default link name set if name not set which can be overwritten.
   # rubocop:disable Metrics/AbcSize, Metrics/PerceivedComplexity
-  def link_to_customizable_template(name, customization, template, dropdown=true)
+  # rubocop:todo Metrics/CyclomaticComplexity
+  def link_to_customizable_template(name, customization, template, dropdown)
     name = nil unless name.present?
-    link_css =  dropdown ? 'dropdown-item px-3' : 'px-3'
+    link_css = dropdown ? 'dropdown-item px-3' : 'px-3'
 
-    if customization.present? 
+    if customization.present?
 
       if customization.created_at < template.created_at
-        name = name.blank? ? _('Transfer customisation') : name
+        name = _('Transfer customisation') if name.blank?
         link_to name,
                 org_admin_template_customization_transfers_path(customization.id),
                 data: { method: 'post' },
                 class: link_css
       else
-        name = name.blank? ? _('Edit customisation') : name
+        name = _('Edit customisation') if name.blank?
         link_to name, org_admin_template_path(id: customization.id), class: link_css
       end
     else
-      name = name.blank? ? _('Customise') : name
+      name = _('Customise') if name.blank?
       link_to name,
               org_admin_template_customizations_path(template.id),
               'data-method': 'post',
               class: link_css
     end
   end
+  # rubocop:enable Metrics/CyclomaticComplexity
   # rubocop:enable Metrics/AbcSize, Metrics/PerceivedComplexity
 end
diff --git a/spec/features/modal_search_spec.rb b/spec/features/modal_search_spec.rb
index eac60978fc..f4df729692 100644
--- a/spec/features/modal_search_spec.rb
+++ b/spec/features/modal_search_spec.rb
@@ -39,7 +39,7 @@
       # Using JS to click on button, as click_button '.modal-header button.btn-close' did not work.
       modal_close_button = find('.modal-header button.btn-close')
       # Close the modal
-      execute_script("arguments[0].click();", modal_close_button)
+      execute_script('arguments[0].click();', modal_close_button)
     end
 
     # Verify that the selection was added to the main page's dom
diff --git a/spec/support/helpers/links_helper.rb b/spec/support/helpers/links_helper.rb
index 8b27295757..2e6363438a 100644
--- a/spec/support/helpers/links_helper.rb
+++ b/spec/support/helpers/links_helper.rb
@@ -10,7 +10,7 @@ def remove_link
     last_link = all('a.delete > .fas.fa-circle-xmark.fa-reverse', visible: false).last
     scroll_to_element(last_link)
     # Use Javascript to click link element, as it appears to be size 0
-    execute_script("arguments[0].click();", last_link);
+    execute_script('arguments[0].click();', last_link)
   end
 
   def scroll_to_element(element)

From d96561ce4512e7941dce4bdc2251060a0878e2a4 Mon Sep 17 00:00:00 2001
From: gjacob24 <gjacob@ed.ac.uk>
Date: Mon, 8 Apr 2024 13:24:43 +0100
Subject: [PATCH 19/31] Changes in this PR: - Request feedback box changed from
 'well' to card' class - Reset password view alignment of checkbox and label
 fields - Required field red star alignment for Project Details and Share plan
 pages

---
 app/views/devise/passwords/edit.html.erb        | 9 +++++----
 app/views/plans/_project_details.html.erb       | 4 +---
 app/views/plans/_request_feedback_form.html.erb | 2 +-
 app/views/plans/_share_form.html.erb            | 2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index 40b0805d8a..3e296747c2 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -19,10 +19,11 @@
         <%= f.label(:password_confirmation, _('Password confirmation'), class: 'form-label') %>
         <%= f.password_field(:password_confirmation, class: 'form-control', "aria-required": true) %>
       </div>
-      <div class="form-check">
-        <label class="form-check-label">
-          <input type="checkbox" id="passwords_toggle" class="passwords_toggle"/><%= _('Show passwords') %>
-        </label>
+      <div class="form-control mb-3 col-sm-8">
+          <div class="form-check">
+              <input type="checkbox" id="passwords_toggle" class="passwords_toggle"/>
+              <%= label_tag('passwords_toggle', _('Show passwords'), class: 'form-check-label') %>
+          </div>
       </div>
       
       <% if Rails.configuration.x.recaptcha.enabled %>
diff --git a/app/views/plans/_project_details.html.erb b/app/views/plans/_project_details.html.erb
index 3ca1e53ffc..a147190a43 100644
--- a/app/views/plans/_project_details.html.erb
+++ b/app/views/plans/_project_details.html.erb
@@ -10,11 +10,9 @@ ethics_report_tooltip = _("Link to a protocol from a meeting with an ethics comm
 %>
 
 <div class="form-control mb-3"><!-- title -->
-  <div class="col-lg-12">
-    <%= form.label(:title, _('Project title'), class: 'form-label') %>
-  </div>
   <div class="col-lg-8">
     <em class="sr-only"><%= project_title_tooltip %></em>
+    <%= form.label(:title, _('Project title'), class: 'form-label') %>
     <%= form.text_field(:title, class: "form-control", "aria-required": true,
                                 'data-toggle': 'tooltip', spellcheck: true,
                                 title: project_title_tooltip) %>
diff --git a/app/views/plans/_request_feedback_form.html.erb b/app/views/plans/_request_feedback_form.html.erb
index b3949f0425..9347798f05 100644
--- a/app/views/plans/_request_feedback_form.html.erb
+++ b/app/views/plans/_request_feedback_form.html.erb
@@ -11,7 +11,7 @@
        }
        %>
        </p>
-      <div class="well well-sm">
+      <div class="card bg-light mb-3 p-2">
         <%= sanitize plan.owner.org.feedback_msg.to_s % { user_name: current_user.name(false), plan_name: plan.title, organisation_email: current_user.org.contact_email } %>
       </div>
       <p><%= _('You can continue to edit and download the plan in the interim.') %></p>
diff --git a/app/views/plans/_share_form.html.erb b/app/views/plans/_share_form.html.erb
index 7151623d82..3f0f53fa5c 100644
--- a/app/views/plans/_share_form.html.erb
+++ b/app/views/plans/_share_form.html.erb
@@ -106,8 +106,8 @@
     <div class="form-control mb-3 col-xs-6">
       <%= f.hidden_field :plan_id %>
       <%= f.fields_for :user, new_role.user do |user| %>
+       <em class="sr-only"><%= email_tooltip %></em>
         <%= user.label :email, _('Email'), class: 'form-label'%>
-         <em class="sr-only"><%= email_tooltip %></em>
         <%= user.email_field :email, class: "form-control", title: email_tooltip,
                                      aria: { required: true },
                                      required: true,

From 7312151f36ff14d49a81783c47ef36eadc0d3372 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:17:00 -0700
Subject: [PATCH 20/31] Call getConstant() after constants.js callback

Prior to this commit, requiredField.js was calling getConstant('REQUIRED_FIELD_TEXT') before the constant was loaded to constants.js. As a result, `asterisk` was evaluating to `undefined`.
---
 app/javascript/src/utils/requiredField.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/javascript/src/utils/requiredField.js b/app/javascript/src/utils/requiredField.js
index 6b4995e65a..10833f8e45 100644
--- a/app/javascript/src/utils/requiredField.js
+++ b/app/javascript/src/utils/requiredField.js
@@ -1,7 +1,7 @@
 import getConstant from './constants';
 import { isObject } from './isType';
 
-const asterisk = `<span class="red" title="${getConstant('REQUIRED_FIELD_TEXT')}">* </span>`;
+var asterisk;
 
 export const addAsterisk = (el) => {
   const target = $(el);
@@ -32,5 +32,6 @@ export const addAsterisks = (el) => {
 };
 
 $(() => {
+  asterisk = `<span class="red" title="${getConstant('REQUIRED_FIELD_TEXT')}">* </span>`;
   addAsterisks('body');
 });

From 83f16f8b9e77a88bc0eb07851fbdbbcf52c0034c Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:19:39 -0700
Subject: [PATCH 21/31] Put back constant for passwordHelper.js

getConstant('VALIDATION_MESSAGE_PASSWORDS_MATCH') still exists in passwordhelper.js

Was previously removed here: https://github.com/portagenetwork/roadmap/commit/33a60587b5ad60f3dcc1d7864cae5b94a7b7e7a0
---
 app/views/layouts/application.html.erb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 687385e6a9..491e2d8039 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -118,6 +118,7 @@
       MAX_NUMBER_GUIDANCE_SELECTIONS: 6,
 
       REQUIRED_FIELD_TEXT: _('This field is required.'),
+      VALIDATION_MESSAGE_PASSWORDS_MATCH: _('The passwords must match.'),
 
       SHOW_PASSWORD_MESSAGE: _('Show password'),
       SHOW_SELECT_ORG_MESSAGE: _('Select an organisation from the list.'),

From 831d6d34a0f70fdce9fc1ba1d8c675deef03ea98 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Wed, 27 Mar 2024 11:13:40 -0600
Subject: [PATCH 22/31] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 963208c31d..9ecca00727 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -150,6 +150,7 @@ We sometimes use the button native Dom element to programmatically click, as the
 ### Fixed 
 - Fixed rubocop errors after Bootstrap upgrade 
 - Fixed RSpec tests after Bootstrap upgrade  
+- Fix "undefined" Tooltip Messages [#3364](https://github.com/DMPRoadmap/roadmap/pull/3364)
 
 ## V4.1.1
 

From 2d69584b654b6024656c3590f567cf6e8c06fb94 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:32:56 -0700
Subject: [PATCH 23/31] Prevent duplicate options in 'Select Guidance'

- Prior to this commit, if current_user.org was also a @default_org, then @important_ggs would contain duplicate [org, ggs].
---
 app/controllers/plans_controller.rb | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/controllers/plans_controller.rb b/app/controllers/plans_controller.rb
index 421514001a..277ce4a699 100644
--- a/app/controllers/plans_controller.rb
+++ b/app/controllers/plans_controller.rb
@@ -192,10 +192,8 @@ def show
     end
     @default_orgs = Org.default_orgs
     @all_ggs_grouped_by_org.each do |org, ggs|
-      @important_ggs << [org, ggs] if @default_orgs.include?(org)
-
-      # If this is one of the already selected guidance groups its important!
-      @important_ggs << [org, ggs] if !(ggs & @selected_guidance_groups).empty? && !@important_ggs.include?([org, ggs])
+      # @default_orgs and already selected guidance groups are important.
+      @important_ggs << [org, ggs] if (@default_orgs.include?(org) || !(ggs & @selected_guidance_groups).empty?) && !@important_ggs.include?([org, ggs])
     end
 
     # Sort the rest by org name for the accordion

From 7d047413926ec28e457879f1910c72e71ffd94b8 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:35:58 -0700
Subject: [PATCH 24/31] refactor / make rubocop happy

---
 app/controllers/plans_controller.rb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/controllers/plans_controller.rb b/app/controllers/plans_controller.rb
index 277ce4a699..e3da35eae0 100644
--- a/app/controllers/plans_controller.rb
+++ b/app/controllers/plans_controller.rb
@@ -193,7 +193,9 @@ def show
     @default_orgs = Org.default_orgs
     @all_ggs_grouped_by_org.each do |org, ggs|
       # @default_orgs and already selected guidance groups are important.
-      @important_ggs << [org, ggs] if (@default_orgs.include?(org) || !(ggs & @selected_guidance_groups).empty?) && !@important_ggs.include?([org, ggs])
+      if (@default_orgs.include?(org) || (ggs & @selected_guidance_groups).any?) && !@important_ggs.include?([org, ggs])
+        @important_ggs << [org, ggs]
+      end
     end
 
     # Sort the rest by org name for the accordion

From a3676abcfa803982df24ffbe806eb279f738cb37 Mon Sep 17 00:00:00 2001
From: aaronskiba <71047780+aaronskiba@users.noreply.github.com>
Date: Tue, 26 Mar 2024 09:50:22 -0600
Subject: [PATCH 25/31] Add Changelog entries for PR #3365 and  #3376

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ecca00727..3aeeb4e2f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -151,6 +151,14 @@ We sometimes use the button native Dom element to programmatically click, as the
 - Fixed rubocop errors after Bootstrap upgrade 
 - Fixed RSpec tests after Bootstrap upgrade  
 - Fix "undefined" Tooltip Messages [#3364](https://github.com/DMPRoadmap/roadmap/pull/3364)
+- Fixed rubocop errors after V4.1.1 release
+- Fixed MySQL and PostgreSQL GitHub Actions [PR #3376](https://github.com/DMPRoadmap/roadmap/pull/3376)
+  - Removed duplicate `node-version:` statements from the `mysql.yml` and `postgres.yml` workflows
+  - Replaced `webdrivers` gem with `selenium-webdriver` gem
+  - Disabled `rack-attack` gem from throttling `/users/sign_in` path in Rails test environment
+  - Addressed `Faker` deprecation warnings
+  - Made some small changes to fix some existing tests
+- Prevent Duplicate Options in 'Select Guidance' [PR #3365](https://github.com/DMPRoadmap/roadmap/pull/3365)
 
 ## V4.1.1
 

From b1cf1206a719a3065dc19caa8f4b2e8fa219a80b Mon Sep 17 00:00:00 2001
From: Benjamin FAURE <benjamin.faure@inist.fr>
Date: Tue, 9 Apr 2024 08:21:32 +0200
Subject: [PATCH 26/31] Bumped bootstrap to 5.3 & updated JS dependencies

---
 package.json |    8 +-
 yarn.lock    | 3257 ++++++++++++++++++++++++++++----------------------
 2 files changed, 1814 insertions(+), 1451 deletions(-)

diff --git a/package.json b/package.json
index b21d1db7cf..d324b338bf 100644
--- a/package.json
+++ b/package.json
@@ -31,16 +31,19 @@
   "homepage": "https://github.com/DMPRoadmap/roadmap#readme",
   "dependencies": {
     "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@hotwired/turbo-rails": "^7.1.3",
+    "@popperjs/core": "^2.11.6",
     "@rails/actioncable": "^6.0.3-1",
     "@rails/activestorage": "^6.0.3-1",
     "@rails/ujs": "^6.0.3-1",
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
-    "bootstrap": "5.2.3",
+    "bootstrap": "^5.3.3",
     "bootstrap-select": "^1.13.18",
     "chart.js": "^3.8.0",
     "core-js": "^3.6.5",
@@ -53,7 +56,6 @@
     "jquery-ui-sass": "^0.0.1",
     "js-cookie": "^3.0.1",
     "number-to-text": "^0.3.8",
-    "@popperjs/core": "^2.11.6",
     "rails-erb-loader": "^5.5.2",
     "regenerator-runtime": "^0.13.5",
     "sass": "^1.57.1",
@@ -63,6 +65,8 @@
     "webpack-cli": "^5.0.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "eslint": "^8.18.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
diff --git a/yarn.lock b/yarn.lock
index 83149ad778..acd64fd474 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,300 +2,298 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@ampproject/remapping@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
-  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
-  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.23.5", "@babel/code-frame@^7.24.1", "@babel/code-frame@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
+  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
   dependencies:
-    "@babel/highlight" "^7.18.6"
+    "@babel/highlight" "^7.24.2"
+    picocolors "^1.0.0"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f"
-  integrity sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==
+"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5", "@babel/compat-data@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
+  integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
 
 "@babel/core@^7.20.12":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659"
-  integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.4.tgz#1f758428e88e0d8c563874741bc4ffc4f71a4717"
+  integrity sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.21.4"
-    "@babel/generator" "^7.21.4"
-    "@babel/helper-compilation-targets" "^7.21.4"
-    "@babel/helper-module-transforms" "^7.21.2"
-    "@babel/helpers" "^7.21.0"
-    "@babel/parser" "^7.21.4"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.4"
-    "@babel/types" "^7.21.4"
-    convert-source-map "^1.7.0"
+    "@babel/code-frame" "^7.24.2"
+    "@babel/generator" "^7.24.4"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helpers" "^7.24.4"
+    "@babel/parser" "^7.24.4"
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.1"
+    "@babel/types" "^7.24.0"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
-    semver "^6.3.0"
+    json5 "^2.2.3"
+    semver "^6.3.1"
 
-"@babel/generator@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc"
-  integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==
+"@babel/generator@^7.24.1", "@babel/generator@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.4.tgz#1fc55532b88adf952025d5d2d1e71f946cb1c498"
+  integrity sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==
   dependencies:
-    "@babel/types" "^7.21.4"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
+    "@babel/types" "^7.24.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
-  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
-  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
+  integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.18.6"
-    "@babel/types" "^7.18.9"
+    "@babel/types" "^7.22.15"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz#770cd1ce0889097ceacb99418ee6934ef0572656"
-  integrity sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==
+"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
+  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
   dependencies:
-    "@babel/compat-data" "^7.21.4"
-    "@babel/helper-validator-option" "^7.21.0"
-    browserslist "^4.21.3"
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    browserslist "^4.22.2"
     lru-cache "^5.1.1"
-    semver "^6.3.0"
-
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz#3a017163dc3c2ba7deb9a7950849a9586ea24c18"
-  integrity sha512-46QrX2CQlaFRF4TkwfTt6nJD7IHq8539cCL7SDpqWSDeJKY1xylKKY5F/33mJhLZ3mFvKv2gGrVS6NkyF6qs+Q==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-member-expression-to-functions" "^7.21.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.20.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5"
-  integrity sha512-M00OuhU+0GyZ5iBBN9czjugzWrEq2vDpf/zCYHxxf93ul/Q5rv+a5h+/+0WnI1AebHNVtl5bFV0qsJoH23DbfA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
+    semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0", "@babel/helper-create-class-features-plugin@^7.24.1", "@babel/helper-create-class-features-plugin@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.4.tgz#c806f73788a6800a5cfbbc04d2df7ee4d927cce3"
+  integrity sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-member-expression-to-functions" "^7.23.0"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.24.1"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
+  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
     regexpu-core "^5.3.1"
+    semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
-  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+"@babel/helper-define-polyfill-provider@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz#fadc63f0c2ff3c8d02ed905dcea747c5b0fb74fd"
+  integrity sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
     debug "^4.1.1"
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
-    semver "^6.1.2"
-
-"@babel/helper-environment-visitor@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
-  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
-"@babel/helper-explode-assignable-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
-  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
-  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
-  dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/types" "^7.21.0"
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
-"@babel/helper-hoist-variables@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
-  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
-  integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==
+"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/types" "^7.21.0"
-
-"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
-  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
-  dependencies:
-    "@babel/types" "^7.21.4"
-
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2":
-  version "7.21.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
-  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.20.2"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.2"
-    "@babel/types" "^7.21.2"
-
-"@babel/helper-optimise-call-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
-  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
-  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
-"@babel/helper-remap-async-to-generator@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
-  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-wrap-function" "^7.18.9"
-    "@babel/types" "^7.18.9"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
-  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+"@babel/helper-member-expression-to-functions@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-member-expression-to-functions" "^7.20.7"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.7"
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.23.0"
+
+"@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.24.1", "@babel/helper-module-imports@^7.24.3":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
+  integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
+  dependencies:
+    "@babel/types" "^7.24.0"
 
-"@babel/helper-simple-access@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
-  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
-  dependencies:
-    "@babel/types" "^7.20.2"
+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
+"@babel/helper-optimise-call-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
+  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
+  integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
+
+"@babel/helper-remap-async-to-generator@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
+  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-wrap-function" "^7.22.20"
+
+"@babel/helper-replace-supers@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz#7085bd19d4a0b7ed8f405c1ed73ccb70f323abc1"
+  integrity sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.23.0"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
+  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-string-parser@^7.23.4":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
+  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
+
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
+"@babel/helper-validator-option@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
+  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
+
+"@babel/helper-wrap-function@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
+  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
+  dependencies:
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.22.19"
+
+"@babel/helpers@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.4.tgz#dc00907fd0d95da74563c142ef4cd21f2cb856b6"
+  integrity sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==
+  dependencies:
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.1"
+    "@babel/types" "^7.24.0"
+
+"@babel/highlight@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
+  integrity sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
-  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
-  dependencies:
-    "@babel/types" "^7.20.0"
+"@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
+  integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
-"@babel/helper-split-export-declaration@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
-  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-string-parser@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
-  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
-
-"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
-  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
-
-"@babel/helper-validator-option@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
-  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
-
-"@babel/helper-wrap-function@^7.18.9":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
-  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
-  dependencies:
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.5"
-    "@babel/types" "^7.20.5"
-
-"@babel/helpers@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
-  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
-  dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.0"
-    "@babel/types" "^7.21.0"
-
-"@babel/highlight@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
-  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.4.tgz#6125f0158543fb4edf1c22f322f3db67f21cb3e1"
+  integrity sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
-  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
-  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz#b645d9ba8c2bc5b7af50f0fe949f9edbeb07c8cf"
+  integrity sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
-  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz#da8261f2697f0f41b0855b91d3a20a1fbfd271d3"
+  integrity sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-transform-optional-chaining" "^7.24.1"
 
-"@babel/plugin-proposal-async-generator-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
-  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz#1181d9685984c91d657b8ddf14f0487a6bab2988"
+  integrity sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
 "@babel/plugin-proposal-class-properties@^7.18.6":
   version "7.18.6"
@@ -305,63 +303,6 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
-  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
-"@babel/plugin-proposal-dynamic-import@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
-  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
-  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-proposal-json-strings@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
-  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
-  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
-  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-proposal-numeric-separator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
-  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
 "@babel/plugin-proposal-object-rest-spread@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
@@ -373,23 +314,6 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.20.7"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
-  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
-  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
 "@babel/plugin-proposal-private-methods@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
@@ -398,24 +322,21 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
-  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-proposal-private-property-in-object@^7.21.11":
+  version "7.21.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
+  integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-create-class-features-plugin" "^7.21.0"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
-  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -451,12 +372,26 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-assertions@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
-  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
+"@babel/plugin-syntax-import-assertions@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.1.tgz#db3aad724153a00eaac115a3fb898de544e34971"
+  integrity sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-syntax-import-attributes@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz#c66b966c63b714c4eec508fcf5763b1f2d381093"
+  integrity sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-syntax-import-meta@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
@@ -521,301 +456,435 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-arrow-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
-  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-async-to-generator@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
-  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
+"@babel/plugin-transform-arrow-functions@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz#2bf263617060c9cc45bcdbf492b8cc805082bf27"
+  integrity sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-block-scoped-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
-  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+"@babel/plugin-transform-async-generator-functions@^7.24.3":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz#8fa7ae481b100768cc9842c8617808c5352b8b89"
+  integrity sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-transform-block-scoping@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
-  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
+"@babel/plugin-transform-async-to-generator@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz#0e220703b89f2216800ce7b1c53cb0cf521c37f4"
+  integrity sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-module-imports" "^7.24.1"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
 
-"@babel/plugin-transform-classes@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
-  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
+"@babel/plugin-transform-block-scoped-functions@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz#1c94799e20fcd5c4d4589523bbc57b7692979380"
+  integrity sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.20.7"
-    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-block-scoping@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.4.tgz#28f5c010b66fbb8ccdeef853bef1935c434d7012"
+  integrity sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-class-properties@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz#bcbf1aef6ba6085cfddec9fc8d58871cf011fc29"
+  integrity sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.24.1"
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-class-static-block@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz#1a4653c0cf8ac46441ec406dece6e9bc590356a4"
+  integrity sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.24.4"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.1.tgz#5bc8fc160ed96378184bc10042af47f50884dcb1"
+  integrity sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-replace-supers" "^7.24.1"
+    "@babel/helper-split-export-declaration" "^7.22.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
-  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
+"@babel/plugin-transform-computed-properties@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.1.tgz#bc7e787f8e021eccfb677af5f13c29a9934ed8a7"
+  integrity sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/template" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/template" "^7.24.0"
 
-"@babel/plugin-transform-destructuring@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
-  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
+"@babel/plugin-transform-destructuring@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.1.tgz#b1e8243af4a0206841973786292b8c8dd8447345"
+  integrity sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
-  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+"@babel/plugin-transform-dotall-regex@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz#d56913d2f12795cc9930801b84c6f8c47513ac13"
+  integrity sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
-  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+"@babel/plugin-transform-duplicate-keys@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz#5347a797fe82b8d09749d10e9f5b83665adbca88"
+  integrity sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-exponentiation-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
-  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+"@babel/plugin-transform-dynamic-import@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz#2a5a49959201970dd09a5fca856cb651e44439dd"
+  integrity sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-transform-for-of@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e"
-  integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==
+"@babel/plugin-transform-exponentiation-operator@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz#6650ebeb5bd5c012d5f5f90a26613a08162e8ba4"
+  integrity sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-function-name@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
-  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+"@babel/plugin-transform-export-namespace-from@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz#f033541fc036e3efb2dcb58eedafd4f6b8078acd"
+  integrity sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
-  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+"@babel/plugin-transform-for-of@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.1.tgz#67448446b67ab6c091360ce3717e7d3a59e202fd"
+  integrity sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
-"@babel/plugin-transform-member-expression-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
-  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+"@babel/plugin-transform-function-name@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz#8cba6f7730626cc4dfe4ca2fa516215a0592b361"
+  integrity sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-modules-amd@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
-  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
+"@babel/plugin-transform-json-strings@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz#08e6369b62ab3e8a7b61089151b161180c8299f7"
+  integrity sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.21.2":
-  version "7.21.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7"
-  integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
+"@babel/plugin-transform-literals@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz#0a1982297af83e6b3c94972686067df588c5c096"
+  integrity sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==
   dependencies:
-    "@babel/helper-module-transforms" "^7.21.2"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
-  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
+"@babel/plugin-transform-logical-assignment-operators@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz#719d8aded1aa94b8fb34e3a785ae8518e24cfa40"
+  integrity sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-transform-modules-umd@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
-  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+"@babel/plugin-transform-member-expression-literals@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz#896d23601c92f437af8b01371ad34beb75df4489"
+  integrity sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==
   dependencies:
-    "@babel/helper-module-transforms" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
-  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
+"@babel/plugin-transform-modules-amd@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz#b6d829ed15258536977e9c7cc6437814871ffa39"
+  integrity sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-new-target@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
-  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+"@babel/plugin-transform-modules-commonjs@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz#e71ba1d0d69e049a22bf90b3867e263823d3f1b9"
+  integrity sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-object-super@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
-  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+"@babel/plugin-transform-modules-systemjs@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz#2b9625a3d4e445babac9788daec39094e6b11e3e"
+  integrity sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.6"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
-  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
+"@babel/plugin-transform-modules-umd@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz#69220c66653a19cf2c0872b9c762b9a48b8bebef"
+  integrity sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-property-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
-  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
+  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-regenerator@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d"
-  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
+"@babel/plugin-transform-new-target@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz#29c59988fa3d0157de1c871a28cd83096363cc34"
+  integrity sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    regenerator-transform "^0.15.1"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-reserved-words@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
-  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988"
+  integrity sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-transform-numeric-separator@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz#5bc019ce5b3435c1cadf37215e55e433d674d4e8"
+  integrity sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-transform-object-rest-spread@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz#5a3ce73caf0e7871a02e1c31e8b473093af241ff"
+  integrity sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.24.1"
+
+"@babel/plugin-transform-object-super@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz#e71d6ab13483cca89ed95a474f542bbfc20a0520"
+  integrity sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-replace-supers" "^7.24.1"
+
+"@babel/plugin-transform-optional-catch-binding@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz#92a3d0efe847ba722f1a4508669b23134669e2da"
+  integrity sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-transform-optional-chaining@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz#26e588acbedce1ab3519ac40cc748e380c5291e6"
+  integrity sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.1.tgz#983c15d114da190506c75b616ceb0f817afcc510"
+  integrity sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-private-methods@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.1.tgz#a0faa1ae87eff077e1e47a5ec81c3aef383dc15a"
+  integrity sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.24.1"
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-private-property-in-object@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.1.tgz#756443d400274f8fb7896742962cc1b9f25c1f6a"
+  integrity sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.24.1"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz#d6a9aeab96f03749f4eebeb0b6ea8e90ec958825"
+  integrity sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-regenerator@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.1.tgz#625b7545bae52363bdc1fbbdc7252b5046409c8c"
+  integrity sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-reserved-words@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz#8de729f5ecbaaf5cf83b67de13bad38a21be57c1"
+  integrity sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.0"
 
 "@babel/plugin-transform-runtime@^7.19.6":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz#2e1da21ca597a7d01fc96b699b21d8d2023191aa"
-  integrity sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.3.tgz#dc58ad4a31810a890550365cc922e1ff5acb5d7f"
+  integrity sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.21.4"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    semver "^6.3.0"
+    "@babel/helper-module-imports" "^7.24.3"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.1"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    semver "^6.3.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
-  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+"@babel/plugin-transform-shorthand-properties@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz#ba9a09144cf55d35ec6b93a32253becad8ee5b55"
+  integrity sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
-  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
+"@babel/plugin-transform-spread@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz#a1acf9152cbf690e4da0ba10790b3ac7d2b2b391"
+  integrity sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
-"@babel/plugin-transform-sticky-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
-  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+"@babel/plugin-transform-sticky-regex@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.1.tgz#f03e672912c6e203ed8d6e0271d9c2113dc031b9"
+  integrity sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-template-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
-  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+"@babel/plugin-transform-template-literals@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7"
+  integrity sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
-  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+"@babel/plugin-transform-typeof-symbol@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.1.tgz#6831f78647080dec044f7e9f68003d99424f94c7"
+  integrity sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
-  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+"@babel/plugin-transform-unicode-escapes@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz#fb3fa16676549ac7c7449db9b342614985c2a3a4"
+  integrity sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-unicode-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
-  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
+"@babel/plugin-transform-unicode-property-regex@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz#56704fd4d99da81e5e9f0c0c93cabd91dbc4889e"
+  integrity sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/preset-env@^7.20.2":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.4.tgz#a952482e634a8dd8271a3fe5459a16eb10739c58"
-  integrity sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw==
+"@babel/plugin-transform-unicode-regex@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz#57c3c191d68f998ac46b708380c1ce4d13536385"
+  integrity sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==
   dependencies:
-    "@babel/compat-data" "^7.21.4"
-    "@babel/helper-compilation-targets" "^7.21.4"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.21.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz#c1ea175b02afcffc9cf57a9c4658326625165b7f"
+  integrity sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.24.0"
+
+"@babel/preset-env@^7.20.2":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.4.tgz#46dbbcd608771373b88f956ffb67d471dce0d23b"
+  integrity sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==
+  dependencies:
+    "@babel/compat-data" "^7.24.4"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-validator-option" "^7.23.5"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.24.4"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.24.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.24.1"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-assertions" "^7.24.1"
+    "@babel/plugin-syntax-import-attributes" "^7.24.1"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -825,54 +894,68 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.20.7"
-    "@babel/plugin-transform-async-to-generator" "^7.20.7"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.21.0"
-    "@babel/plugin-transform-classes" "^7.21.0"
-    "@babel/plugin-transform-computed-properties" "^7.20.7"
-    "@babel/plugin-transform-destructuring" "^7.21.3"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.21.0"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.20.11"
-    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
-    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.21.3"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.20.5"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.20.7"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.21.4"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
-
-"@babel/preset-modules@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
-  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.24.1"
+    "@babel/plugin-transform-async-generator-functions" "^7.24.3"
+    "@babel/plugin-transform-async-to-generator" "^7.24.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.24.1"
+    "@babel/plugin-transform-block-scoping" "^7.24.4"
+    "@babel/plugin-transform-class-properties" "^7.24.1"
+    "@babel/plugin-transform-class-static-block" "^7.24.4"
+    "@babel/plugin-transform-classes" "^7.24.1"
+    "@babel/plugin-transform-computed-properties" "^7.24.1"
+    "@babel/plugin-transform-destructuring" "^7.24.1"
+    "@babel/plugin-transform-dotall-regex" "^7.24.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.24.1"
+    "@babel/plugin-transform-dynamic-import" "^7.24.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.24.1"
+    "@babel/plugin-transform-export-namespace-from" "^7.24.1"
+    "@babel/plugin-transform-for-of" "^7.24.1"
+    "@babel/plugin-transform-function-name" "^7.24.1"
+    "@babel/plugin-transform-json-strings" "^7.24.1"
+    "@babel/plugin-transform-literals" "^7.24.1"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.24.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.24.1"
+    "@babel/plugin-transform-modules-amd" "^7.24.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.24.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.24.1"
+    "@babel/plugin-transform-modules-umd" "^7.24.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
+    "@babel/plugin-transform-new-target" "^7.24.1"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.24.1"
+    "@babel/plugin-transform-numeric-separator" "^7.24.1"
+    "@babel/plugin-transform-object-rest-spread" "^7.24.1"
+    "@babel/plugin-transform-object-super" "^7.24.1"
+    "@babel/plugin-transform-optional-catch-binding" "^7.24.1"
+    "@babel/plugin-transform-optional-chaining" "^7.24.1"
+    "@babel/plugin-transform-parameters" "^7.24.1"
+    "@babel/plugin-transform-private-methods" "^7.24.1"
+    "@babel/plugin-transform-private-property-in-object" "^7.24.1"
+    "@babel/plugin-transform-property-literals" "^7.24.1"
+    "@babel/plugin-transform-regenerator" "^7.24.1"
+    "@babel/plugin-transform-reserved-words" "^7.24.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.24.1"
+    "@babel/plugin-transform-spread" "^7.24.1"
+    "@babel/plugin-transform-sticky-regex" "^7.24.1"
+    "@babel/plugin-transform-template-literals" "^7.24.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.24.1"
+    "@babel/plugin-transform-unicode-escapes" "^7.24.1"
+    "@babel/plugin-transform-unicode-property-regex" "^7.24.1"
+    "@babel/plugin-transform-unicode-regex" "^7.24.1"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.24.1"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.4"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.31.0"
+    semver "^6.3.1"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
@@ -882,44 +965,44 @@
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
-  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
-"@babel/template@^7.18.10", "@babel/template@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
-  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-
-"@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36"
-  integrity sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==
-  dependencies:
-    "@babel/code-frame" "^7.21.4"
-    "@babel/generator" "^7.21.4"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.21.4"
-    "@babel/types" "^7.21.4"
-    debug "^4.1.0"
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.22.15", "@babel/template@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
+  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.24.0"
+    "@babel/types" "^7.24.0"
+
+"@babel/traverse@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
+  integrity sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.1"
+    "@babel/generator" "^7.24.1"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.24.1"
+    "@babel/types" "^7.24.0"
+    debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.4", "@babel/types@^7.4.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4"
-  integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==
+"@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.0", "@babel/types@^7.4.4":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
+  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
   dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
 "@colors/colors@1.5.0":
@@ -939,19 +1022,19 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0":
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.0.tgz#f6f729b02feee2c749f57e334b7a1b5f40a81724"
-  integrity sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==
+"@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
-"@eslint/eslintrc@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.2.tgz#01575e38707add677cf73ca1589abba8da899a02"
-  integrity sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.5.1"
+    espree "^9.6.0"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -959,15 +1042,15 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.38.0":
-  version "8.38.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.38.0.tgz#73a8a0d8aa8a8e6fe270431c5e72ae91b5337892"
-  integrity sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
 "@fortawesome/fontawesome-free@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz#1ee0c174e472c84b23cb46c995154dc383e3b4fe"
-  integrity sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz#310fe90cb5a8dee9698833171b98e7835404293d"
+  integrity sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==
 
 "@hotwired/turbo-rails@^7.1.3":
   version "7.3.0"
@@ -982,13 +1065,13 @@
   resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.3.0.tgz#2226000fff1aabda9fd9587474565c9929dbf15d"
   integrity sha512-Dcu+NaSvHLT7EjrDrkEmH4qET2ZJZ5IcCWmNXxNQTBwlnE5tBZfN6WxZ842n5cHV52DH/AKNirbPBtcEXDLW4g==
 
-"@humanwhocodes/config-array@^0.11.8":
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
-  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
@@ -996,55 +1079,50 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
-  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
   dependencies:
-    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/set-array" "^1.2.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
-"@jridgewell/resolve-uri@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
-  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
 
-"@jridgewell/set-array@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
-  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
-"@jridgewell/source-map@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.3.tgz#8108265659d4c33e72ffe14e33d6cc5eb59f2fda"
-  integrity sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
-"@jridgewell/sourcemap-codec@1.4.14":
-  version "1.4.14"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
-  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
 
-"@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.18"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
-  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
   dependencies:
-    "@jridgewell/resolve-uri" "3.1.0"
-    "@jridgewell/sourcemap-codec" "1.4.14"
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1078,9 +1156,9 @@
   integrity sha512-F6S74NGpxhbbDRFsQFGYqefRfZPgYvePNtz9hHKYOqLturrsqrDoG+UcrxEGHsvqDUorMYfx4Wl3K8smmk/u2g==
 
 "@rails/actioncable@^7.0":
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.4.tgz#70a3ca56809f7aaabb80af2f9c01ae51e1a8ed41"
-  integrity sha512-tz4oM+Zn9CYsvtyicsa/AwzKZKL+ITHWkhiu7x+xF77clh2b4Rm+s6xnOgY/sGDWoFWZmtKsE95hxBPkgQQNnQ==
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.1.3.tgz#4db480347775aeecd4dde2405659eef74a458881"
+  integrity sha512-ojNvnoZtPN0pYvVFtlO7dyEN9Oml1B6IDM+whGKVak69MMYW99lC2NOWXWeE3bmwEydbP/nn6ERcpfjHVjYQjA==
 
 "@rails/activestorage@^6.0.3-1":
   version "6.1.7"
@@ -1105,24 +1183,24 @@
   integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
 
 "@types/cors@^2.8.12":
-  version "2.8.13"
-  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.13.tgz#b8ade22ba455a1b8cb3b5d3f35910fd204f84f94"
-  integrity sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==
+  version "2.8.17"
+  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.17.tgz#5d718a5e494a8166f569d986794e49c48b216b2b"
+  integrity sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==
   dependencies:
     "@types/node" "*"
 
 "@types/eslint-scope@^3.7.3":
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
-  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
+  integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
   dependencies:
     "@types/eslint" "*"
     "@types/estree" "*"
 
 "@types/eslint@*":
-  version "8.37.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.37.0.tgz#29cebc6c2a3ac7fea7113207bf5a828fdf4d7ef1"
-  integrity sha512-Piet7dG2JBuDIfohBngQ3rCt7MgO9xCO4xIMKxBThCq5PNRB91IjlJ10eJVwfoNtvTErmxLzwBZ7rHZtbOMmFQ==
+  version "8.56.7"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.7.tgz#c33b5b5a9cfb66881beb7b5be6c34aa3e81d3366"
+  integrity sha512-SjDvI/x3zsZnOkYZ3lCt9lOZWZLB2jIlNKz+LBgCtDurK0JZcwucxYHn1w2BJkD34dgX9Tjnak0txtq4WTggEA==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -1135,15 +1213,15 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
-  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+"@types/estree@*", "@types/estree@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
 "@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
-  version "7.0.11"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
-  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -1151,150 +1229,157 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/node@*", "@types/node@>=10.0.0":
-  version "18.15.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
-  integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
+  version "20.12.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.5.tgz#74c4f31ab17955d0b5808cdc8fd2839526ad00b3"
+  integrity sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==
+  dependencies:
+    undici-types "~5.26.4"
 
 "@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
-"@webassemblyjs/ast@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
-  integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==
-  dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-
-"@webassemblyjs/floating-point-hex-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
-  integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
-
-"@webassemblyjs/helper-api-error@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
-  integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
-
-"@webassemblyjs/helper-buffer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
-  integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
-
-"@webassemblyjs/helper-numbers@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
-  integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==
-  dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz#6df20d272ea5439bf20ab3492b7fb70e9bfcb3f6"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/helper-wasm-bytecode@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
-  integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
 
-"@webassemblyjs/helper-wasm-section@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
-  integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz#3da623233ae1a60409b509a52ade9bc22a37f7bf"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
 
-"@webassemblyjs/ieee754@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
-  integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
-  integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
   dependencies:
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/utf8@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
-  integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
-
-"@webassemblyjs/wasm-edit@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
-  integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/helper-wasm-section" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-opt" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    "@webassemblyjs/wast-printer" "1.11.1"
-
-"@webassemblyjs/wasm-gen@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
-  integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wasm-opt@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
-  integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-
-"@webassemblyjs/wasm-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
-  integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wast-printer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
-  integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz#9f9f3ff52a14c980939be0ef9d5df9ebc678ae3b"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz#a6520601da1b5700448273666a71ad0a45d78547"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz#9e6e81475dfcfb62dab574ac2dda38226c232bc5"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz#c47acb90e6f083391e3fa61d113650eea1e95937"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz#bcecf661d7d1abdaf989d8341a4833e33e2b31ac"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.0.1.tgz#a69720f6c9bad6aef54a8fa6ba9c3533e7ef4c7f"
-  integrity sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==
+"@webpack-cli/configtest@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.1.1.tgz#3b2f852e91dac6e3b85fb2a314fb8bef46d94646"
+  integrity sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==
 
-"@webpack-cli/info@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.1.tgz#eed745799c910d20081e06e5177c2b2569f166c0"
-  integrity sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==
+"@webpack-cli/info@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.2.tgz#cc3fbf22efeb88ff62310cf885c5b09f44ae0fdd"
+  integrity sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==
 
-"@webpack-cli/serve@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8"
-  integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==
+"@webpack-cli/serve@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
+  integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -1314,20 +1399,20 @@ accepts@~1.3.4:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-acorn-import-assertions@^1.7.6:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
-  integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
+acorn-import-assertions@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
+  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
-  version "8.8.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
-  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.11.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
 ajv-formats@^2.1.1:
   version "2.1.1"
@@ -1341,14 +1426,14 @@ ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv-keywords@^5.0.0:
+ajv-keywords@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
   integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -1358,7 +1443,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.8.0:
+ajv@^8.0.0, ajv@^8.9.0:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -1400,61 +1485,90 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-array-buffer-byte-length@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
-  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
-  dependencies:
-    call-bind "^1.0.2"
-    is-array-buffer "^3.0.1"
+array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+array-includes@^3.1.7:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
 
-array-includes@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
-  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+array.prototype.findlastindex@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
-    is-string "^1.0.7"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.flat@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
-  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+array.prototype.flat@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
-  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
 arrify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
   integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
-available-typed-arrays@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
-  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
 
 babel-loader@^9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
-  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.3.tgz#3d0e01b4e69760cc694ee306fe16d358aa1c6f9a"
+  integrity sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==
   dependencies:
-    find-cache-dir "^3.3.2"
+    find-cache-dir "^4.0.0"
     schema-utils "^4.0.0"
 
 babel-plugin-macros@^3.1.0:
@@ -1466,29 +1580,29 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
-  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz#276f41710b03a64f6467433cab72cbc2653c38b1"
+  integrity sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==
   dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    semver "^6.1.1"
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.1"
+    semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
-  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+babel-plugin-polyfill-corejs3@^0.10.1, babel-plugin-polyfill-corejs3@^0.10.4:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz#789ac82405ad664c20476d0233b485281deb9c77"
+  integrity sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    core-js-compat "^3.25.1"
+    "@babel/helper-define-polyfill-provider" "^0.6.1"
+    core-js-compat "^3.36.1"
 
-babel-plugin-polyfill-regenerator@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
-  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.1.tgz#4f08ef4c62c7a7f66a35ed4c0d75e30506acc6be"
+  integrity sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    "@babel/helper-define-polyfill-provider" "^0.6.1"
 
 balanced-match@^1.0.0:
   version "1.0.2"
@@ -1506,9 +1620,9 @@ big.js@^5.2.2:
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
 binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
 body-parser@^1.19.0:
   version "1.20.2"
@@ -1533,10 +1647,10 @@ bootstrap-select@^1.13.18:
   resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.18.tgz#4557119d58dc1159189977161c803962220e4dda"
   integrity sha512-V1IzK4rxBq5FrJtkzSH6RmFLFBsjx50byFbfAf8jYyXROWs7ZpprGjdHeoyq2HSsHyjJhMMwjsQhRoYAfxCGow==
 
-bootstrap@5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
-  integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -1546,6 +1660,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -1553,15 +1674,15 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.14.5, browserslist@^4.21.3, browserslist@^4.21.5:
-  version "4.21.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
-  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+browserslist@^4.21.10, browserslist@^4.22.2, browserslist@^4.23.0:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
   dependencies:
-    caniuse-lite "^1.0.30001449"
-    electron-to-chromium "^1.4.284"
-    node-releases "^2.0.8"
-    update-browserslist-db "^1.0.10"
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
 
 buffer-from@^1.0.0:
   version "1.1.2"
@@ -1573,25 +1694,28 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
   dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
 
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-caniuse-lite@^1.0.30001449:
-  version "1.0.30001478"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz#0ef8a1cf8b16be47a0f9fc4ecfc952232724b32a"
-  integrity sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==
+caniuse-lite@^1.0.30001587:
+  version "1.0.30001607"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001607.tgz#b91e8e033f6bca4e13d3d45388d87fa88931d9a5"
+  integrity sha512-WcvhVRjXLKFB/kmOFVwELtMxyhq3iM/MvmXcyCe2PNf166c39mptscOc/45TTS96n2gpNV2z7+NakArTWZCQ3w==
 
-chalk@^2.0.0:
+chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1614,9 +1738,9 @@ chart.js@^3.8.0:
   integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
 
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
   dependencies:
     anymatch "~3.1.2"
     braces "~3.0.2"
@@ -1676,24 +1800,24 @@ color-name@~1.1.4:
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 colorette@^2.0.14:
-  version "2.0.19"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
-  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^9.4.1:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
-  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
-
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+common-path-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
+  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
 
 concat-map@0.0.1:
   version "0.0.1"
@@ -1720,27 +1844,27 @@ content-type@~1.0.5:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
-convert-source-map@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
-  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
 cookie@~0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
-core-js-compat@^3.25.1:
-  version "3.30.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.0.tgz#99aa2789f6ed2debfa1df3232784126ee97f4d80"
-  integrity sha512-P5A2h/9mRYZFIAP+5Ab8ns6083IyVpSclU74UNvbGVQ8VM7n3n3/g2yF3AkKQ9NXz2O+ioxLbEWKnDtgsFamhg==
+core-js-compat@^3.31.0, core-js-compat@^3.36.1:
+  version "3.36.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.36.1.tgz#1818695d72c99c25d621dca94e6883e190cea3c8"
+  integrity sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==
   dependencies:
-    browserslist "^4.21.5"
+    browserslist "^4.23.0"
 
 core-js@^3.6.5:
-  version "3.30.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.0.tgz#64ac6f83bc7a49fd42807327051701d4b1478dea"
-  integrity sha512-hQotSSARoNh1mYPi9O2YaWeiq/cEB95kOrFb4NCrO4RIFt1qqNpKsaE+vy/L3oiqvND5cThqXzUU3r9F7Efztg==
+  version "3.36.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.1.tgz#c97a7160ebd00b2de19e62f4bbd3406ab720e578"
+  integrity sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==
 
 cors@~2.8.5:
   version "2.8.5"
@@ -1775,6 +1899,33 @@ custom-event@~1.0.0:
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
   integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
 
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
 date-format@^4.0.14:
   version "4.0.14"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
@@ -1794,7 +1945,7 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1806,11 +1957,21 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-define-properties@^1.1.3, define-properties@^1.1.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
-  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
   dependencies:
+    define-data-property "^1.0.1"
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
@@ -1858,10 +2019,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.4.284:
-  version "1.4.359"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.359.tgz#5c4d13cb08032469fcd6bd36457915caa211356b"
-  integrity sha512-OoVcngKCIuNXtZnsYoqlCvr0Cf3NIPzDIgwUfI9bdTFjXCrr79lI0kwQstLPZ7WhCezLlGksZk/BFAzoXC7GDw==
+electron-to-chromium@^1.4.668:
+  version "1.4.729"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.729.tgz#8477d21e2a50993781950885b2731d92ad532c00"
+  integrity sha512-bx7+5Saea/qu14kmPTDHQxkp2UnziG3iajUQu3BxFvCOnpAJdDbMV4rSl+EqFDkkpNNVUFlR1kDfpL59xfy1HA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -1878,15 +2039,15 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-engine.io-parser@~5.0.3:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.6.tgz#7811244af173e157295dec9b2718dfe42a64ef45"
-  integrity sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==
+engine.io-parser@~5.2.1:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.2.tgz#37b48e2d23116919a3453738c5720455e64e1c49"
+  integrity sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==
 
-engine.io@~6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.4.1.tgz#8056b4526a88e779f9c280d820422d4e3eeaaae5"
-  integrity sha512-JFYQurD/nbsA5BSPmbaOSLa3tSVj8L6o4srSwXXY3NqE+gGUNmmPTbhn8tjzcCtSqhFgIeqef81ngny8JM25hw==
+engine.io@~6.5.2:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.5.4.tgz#6822debf324e781add2254e912f8568508850cdc"
+  integrity sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==
   dependencies:
     "@types/cookie" "^0.4.1"
     "@types/cors" "^2.8.12"
@@ -1896,13 +2057,13 @@ engine.io@~6.4.1:
     cookie "~0.4.1"
     cors "~2.8.5"
     debug "~4.3.1"
-    engine.io-parser "~5.0.3"
+    engine.io-parser "~5.2.1"
     ws "~8.11.0"
 
-enhanced-resolve@^5.10.0:
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
-  integrity sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==
+enhanced-resolve@^5.16.0:
+  version "5.16.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz#65ec88778083056cb32487faa9aef82ed0864787"
+  integrity sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -1913,9 +2074,9 @@ ent@~2.2.0:
   integrity sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==
 
 envinfo@^7.7.3:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
-  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.12.0.tgz#b56723b39c2053d67ea5714f026d05d4f5cc7acd"
+  integrity sha512-Iw9rQJBGpJRd3rwXm9ft/JiGoAZmLxxJZELYDQoPRZ4USVhkKtIcNBPw6U+/K2mBpaqM25JSV6Yl4Az9vO2wJg==
 
 error-ex@^1.3.1:
   version "1.3.2"
@@ -1924,66 +2085,97 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.20.4:
-  version "1.21.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff"
-  integrity sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    es-set-tostringtag "^2.0.1"
+es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
     es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.5"
-    get-intrinsic "^1.2.0"
-    get-symbol-description "^1.0.0"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
     globalthis "^1.0.3"
     gopd "^1.0.1"
-    has "^1.0.3"
-    has-property-descriptors "^1.0.0"
-    has-proto "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.5"
-    is-array-buffer "^3.0.2"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
     is-callable "^1.2.7"
-    is-negative-zero "^2.0.2"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
     is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
+    is-shared-array-buffer "^1.0.3"
     is-string "^1.0.7"
-    is-typed-array "^1.1.10"
+    is-typed-array "^1.1.13"
     is-weakref "^1.0.2"
-    object-inspect "^1.12.3"
+    object-inspect "^1.13.1"
     object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.4.3"
-    safe-regex-test "^1.0.0"
-    string.prototype.trim "^1.2.7"
-    string.prototype.trimend "^1.0.6"
-    string.prototype.trimstart "^1.0.6"
-    typed-array-length "^1.0.4"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
     unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.9"
+    which-typed-array "^1.1.15"
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
 es-module-lexer@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.2.1.tgz#ba303831f63e6a394983fde2f97ad77b22324527"
-  integrity sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.0.tgz#4878fee3789ad99e065f975fdd3c645529ff0236"
+  integrity sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==
 
-es-set-tostringtag@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
-  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
   dependencies:
-    get-intrinsic "^1.1.3"
-    has "^1.0.3"
-    has-tostringtag "^1.0.0"
+    es-errors "^1.3.0"
 
-es-shim-unscopables@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
-  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
+
+es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
   dependencies:
-    has "^1.0.3"
+    hasown "^2.0.0"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
@@ -1995,9 +2187,9 @@ es-to-primitive@^1.2.1:
     is-symbol "^1.0.2"
 
 escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
 
 escape-html@~1.0.3:
   version "1.0.3"
@@ -2024,42 +2216,44 @@ eslint-config-airbnb-base@^15.0.0:
     object.entries "^1.1.5"
     semver "^6.3.0"
 
-eslint-import-resolver-node@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
-  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
   dependencies:
     debug "^3.2.7"
-    is-core-module "^2.11.0"
-    resolve "^1.22.1"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
 
-eslint-module-utils@^2.7.4:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
-  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+eslint-module-utils@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
+  integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
   dependencies:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
-  version "2.27.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
-  integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
-  dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flat "^1.3.1"
-    array.prototype.flatmap "^1.3.1"
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
+  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+  dependencies:
+    array-includes "^3.1.7"
+    array.prototype.findlastindex "^1.2.3"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.7"
-    eslint-module-utils "^2.7.4"
-    has "^1.0.3"
-    is-core-module "^2.11.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.8.0"
+    hasown "^2.0.0"
+    is-core-module "^2.13.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.values "^1.1.6"
-    resolve "^1.22.1"
-    semver "^6.3.0"
-    tsconfig-paths "^3.14.1"
+    object.fromentries "^2.0.7"
+    object.groupby "^1.0.1"
+    object.values "^1.1.7"
+    semver "^6.3.1"
+    tsconfig-paths "^3.15.0"
 
 eslint-scope@5.1.1:
   version "5.1.1"
@@ -2069,18 +2263,18 @@ eslint-scope@5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
-  integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
 eslint-webpack-plugin@^2.6.0:
   version "2.7.0"
@@ -2095,26 +2289,27 @@ eslint-webpack-plugin@^2.6.0:
     schema-utils "^3.1.1"
 
 eslint@^8.18.0:
-  version "8.38.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.38.0.tgz#a62c6f36e548a5574dd35728ac3c6209bd1e2f1a"
-  integrity sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.4.0"
-    "@eslint/eslintrc" "^2.0.2"
-    "@eslint/js" "8.38.0"
-    "@humanwhocodes/config-array" "^0.11.8"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-visitor-keys "^3.4.0"
-    espree "^9.5.1"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
     esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -2122,32 +2317,29 @@ eslint@^8.18.0:
     find-up "^5.0.0"
     glob-parent "^6.0.2"
     globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^9.5.1:
-  version "9.5.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.1.tgz#4f26a4d5f18905bf4f2e0bd99002aab807e96dd4"
-  integrity sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.9.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.4.0"
+    eslint-visitor-keys "^3.4.1"
 
 esquery@^1.4.2:
   version "1.5.0"
@@ -2214,9 +2406,9 @@ fastest-levenshtein@^1.0.12:
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
 fastq@^1.6.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
-  integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
+  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
   dependencies:
     reusify "^1.0.4"
 
@@ -2247,14 +2439,13 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-cache-dir@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
-  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+find-cache-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-4.0.0.tgz#a30ee0448f81a3990708f6453633c733e2f6eec2"
+  integrity sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==
   dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
+    common-path-prefix "^3.0.0"
+    pkg-dir "^7.0.0"
 
 find-up@^4.0.0:
   version "4.1.0"
@@ -2272,23 +2463,37 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+find-up@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-6.3.0.tgz#2abab3d3280b2dc7ac10199ef324c4e002c8c790"
+  integrity sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==
+  dependencies:
+    locate-path "^7.1.0"
+    path-exists "^5.0.0"
+
 flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
   dependencies:
-    flatted "^3.1.0"
+    flatted "^3.2.9"
+    keyv "^4.5.3"
     rimraf "^3.0.2"
 
-flatted@^3.1.0, flatted@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
-  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
+
+flatted@^3.2.7, flatted@^3.2.9:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 follow-redirects@^1.0.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -2312,26 +2517,26 @@ fs.realpath@^1.0.0:
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
-  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
 
-functions-have-names@^1.2.2:
+functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -2346,22 +2551,25 @@ get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
-  integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
   dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
     has-symbols "^1.0.3"
+    hasown "^2.0.0"
 
-get-symbol-description@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
-  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.1"
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
 
 glob-parent@^6.0.2:
   version "6.0.2"
@@ -2400,9 +2608,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0:
-  version "13.20.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
-  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
@@ -2420,15 +2628,15 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
@@ -2445,36 +2653,36 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-property-descriptors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
-  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
   dependencies:
-    get-intrinsic "^1.1.1"
+    es-define-property "^1.0.0"
 
-has-proto@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
-  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+has-proto@^1.0.1, has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
 
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
-has-tostringtag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
-  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
   dependencies:
-    has-symbols "^1.0.2"
+    has-symbols "^1.0.3"
 
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
   dependencies:
-    function-bind "^1.1.1"
+    function-bind "^1.1.2"
 
 http-errors@2.0.0:
   version "2.0.0"
@@ -2504,16 +2712,16 @@ iconv-lite@0.4.24:
     safer-buffer ">= 2.1.2 < 3"
 
 ignore@^5.2.0:
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
-  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
 immutable@^4.0.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
-  integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
+  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
 
-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -2547,13 +2755,13 @@ inherits@2, inherits@2.0.4:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-internal-slot@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
-  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
+internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
   dependencies:
-    get-intrinsic "^1.2.0"
-    has "^1.0.3"
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
     side-channel "^1.0.4"
 
 interpret@^3.1.1:
@@ -2561,14 +2769,13 @@ interpret@^3.1.1:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
   integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
-is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
-  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.2.0"
-    is-typed-array "^1.1.10"
+    get-intrinsic "^1.2.1"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
@@ -2602,12 +2809,19 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.11.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
-  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
+is-core-module@^2.13.0, is-core-module@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
   dependencies:
-    has "^1.0.3"
+    hasown "^2.0.0"
+
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
 
 is-date-object@^1.0.1:
   version "1.0.5"
@@ -2633,10 +2847,10 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-negative-zero@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
-  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
 is-number-object@^1.0.4:
   version "1.0.7"
@@ -2670,12 +2884,12 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-shared-array-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
-  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
   dependencies:
-    call-bind "^1.0.2"
+    call-bind "^1.0.7"
 
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
@@ -2691,16 +2905,12 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.9:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
-  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
   dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
+    which-typed-array "^1.1.14"
 
 is-weakref@^1.0.2:
   version "1.0.2"
@@ -2709,6 +2919,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.8:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
@@ -2759,19 +2974,14 @@ jquery-ui@^1.12.1:
     jquery ">=1.8.0 <4.0.0"
 
 "jquery@>=1.8.0 <4.0.0", jquery@^3.5.1:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.4.tgz#ba065c188142100be4833699852bf7c24dc0252f"
-  integrity sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
+  integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
 
 js-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
-  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
-
-js-sdsl@^4.1.4:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
-  integrity sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 js-tokens@^4.0.0:
   version "4.0.0"
@@ -2795,6 +3005,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -2822,7 +3037,7 @@ json5@^1.0.1, json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.2:
+json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -2840,9 +3055,9 @@ karma-babel-preprocessor@^8.0.1:
   integrity sha512-6ZUnHwaK2EyhgxbgeSJW6n6WZUYSEdekHIV/qDUnPgMkVzQBHEvd07d2mTL5AQjV8uTUgH6XslhaPrp+fHWH2A==
 
 karma-chrome-launcher@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz#baca9cc071b1562a1db241827257bfe5cab597ea"
-  integrity sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-3.2.0.tgz#eb9c95024f2d6dfbb3748d3415ac9b381906b9a9"
+  integrity sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==
   dependencies:
     which "^1.2.1"
 
@@ -2874,18 +3089,18 @@ karma-json-fixtures-preprocessor@^0.0.6:
   integrity sha512-weEt31YeOgui3Lmw1KYWgvkcjOb3Mr8xvB3SgjKg0wDlAGqCDhhXkff6UHaK5J0fIZzJMur18PqHMgzulM5bzA==
 
 karma-webpack@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-5.0.0.tgz#2a2c7b80163fe7ffd1010f83f5507f95ef39f840"
-  integrity sha512-+54i/cd3/piZuP3dr54+NcFeKOPnys5QeM1IY+0SPASwrtHsliXUiCL50iW+K9WWA7RvamC4macvvQ86l3KtaA==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-5.0.1.tgz#4eafd31bbe684a747a6e8f3e4ad373e53979ced4"
+  integrity sha512-oo38O+P3W2mSPCSUrQdySSPv1LvPpXP+f+bBimNomS5sW+1V4SuhCuW8TfJzV+rDv921w2fDSDw0xJbPe6U+kQ==
   dependencies:
     glob "^7.1.3"
-    minimatch "^3.0.4"
+    minimatch "^9.0.3"
     webpack-merge "^4.1.5"
 
 karma@^6.3.14:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.1.tgz#f2253716dd3a41aaa813fa9f54b6ee047e1127d9"
-  integrity sha512-Cj57NKOskK7wtFWSlMvZf459iX+kpYIPXmkNUzP2WAFcA7nhr/ALn5R7sw3w+1udFDcpMx/tuB8d5amgm3ijaA==
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.3.tgz#763e500f99597218bbb536de1a14acc4ceea7ce8"
+  integrity sha512-LuucC/RE92tJ8mlCwqEoRWXP38UMAqpnq98vktmS9SznSoUPPUJQbc91dHcxcunROvfQjdORVA/YFviH+Xci9Q==
   dependencies:
     "@colors/colors" "1.5.0"
     body-parser "^1.19.0"
@@ -2906,12 +3121,19 @@ karma@^6.3.14:
     qjobs "^1.2.0"
     range-parser "^1.2.1"
     rimraf "^3.0.2"
-    socket.io "^4.4.1"
+    socket.io "^4.7.2"
     source-map "^0.6.1"
     tmp "^0.2.1"
     ua-parser-js "^0.7.30"
     yargs "^16.1.1"
 
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -2958,6 +3180,13 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+locate-path@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-7.2.0.tgz#69cb1779bd90b35ab1e771e1f2f89a202c2a8a8a"
+  integrity sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
+  dependencies:
+    p-locate "^6.0.0"
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -2996,13 +3225,6 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-make-dir@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
-  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
-  dependencies:
-    semver "^6.0.0"
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -3045,6 +3267,13 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.3:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
+  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -3087,10 +3316,10 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-releases@^2.0.8:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
-  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -3107,43 +3336,62 @@ object-assign@^4:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-inspect@^1.12.3, object-inspect@^1.9.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
-  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+object-inspect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
 object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.2, object.assign@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
-  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+object.assign@^4.1.2, object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
 object.entries@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
-  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
-object.values@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
-  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+object.fromentries@^2.0.7:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.values@^1.1.7:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 on-finished@2.4.1:
   version "2.4.1"
@@ -3166,17 +3414,17 @@ once@^1.3.0:
   dependencies:
     wrappy "1"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
   dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
 
 p-limit@^2.2.0:
   version "2.3.0"
@@ -3192,6 +3440,13 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
+p-limit@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
+  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
+  dependencies:
+    yocto-queue "^1.0.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -3206,6 +3461,13 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-locate@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-6.0.0.tgz#3da9a49d4934b901089dca3302fa65dc5a05c04f"
+  integrity sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
+  dependencies:
+    p-limit "^4.0.0"
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -3238,6 +3500,11 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
+path-exists@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
+  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -3268,22 +3535,34 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
   dependencies:
     find-up "^4.0.0"
 
+pkg-dir@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-7.0.0.tgz#8f0c08d6df4476756c5ff29b3282d0bab7517d11"
+  integrity sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==
+  dependencies:
+    find-up "^6.3.0"
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 punycode@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
-  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 qjobs@^1.2.0:
   version "1.2.0"
@@ -3347,9 +3626,9 @@ rechoir@^0.8.0:
     resolve "^1.20.0"
 
 regenerate-unicode-properties@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
-  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
+  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
   dependencies:
     regenerate "^1.4.2"
 
@@ -3358,26 +3637,32 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.5:
+regenerator-runtime@^0.13.5:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
-regenerator-transform@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
-  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
-  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    functions-have-names "^1.2.2"
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
 
 regexpu-core@^5.3.1:
   version "5.3.2"
@@ -3430,12 +3715,12 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1:
-  version "1.22.2"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
-  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
-    is-core-module "^2.11.0"
+    is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
@@ -3445,11 +3730,11 @@ reusify@^1.0.4:
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rfdc@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
-  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.1.tgz#2b6d4df52dffe8bb346992a10ea9451f24373a8f"
+  integrity sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==
 
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -3463,18 +3748,28 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-regex-test@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
-  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
     is-regex "^1.1.4"
 
 "safer-buffer@>= 2.1.2 < 3":
@@ -3483,45 +3778,67 @@ safe-regex-test@^1.0.0:
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
 sass@^1.57.1:
-  version "1.62.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.0.tgz#3686b2195b93295d20765135e562366b33ece37d"
-  integrity sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==
+  version "1.74.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.74.1.tgz#686fc227d3707dd25cb2925e1db8e4562be29319"
+  integrity sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
-  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+schema-utils@^3.1.1, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
   dependencies:
     "@types/json-schema" "^7.0.8"
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
 schema-utils@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
-  integrity sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
+  integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    ajv "^8.8.0"
+    ajv "^8.9.0"
     ajv-formats "^2.1.1"
-    ajv-keywords "^5.0.0"
+    ajv-keywords "^5.1.0"
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+semver@^6.3.0, semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 serialize-javascript@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
-  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
   dependencies:
     randombytes "^2.1.0"
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
 setprototypeof@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
@@ -3547,45 +3864,48 @@ shebang-regex@^3.0.0:
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
   dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
 
 socket.io-adapter@~2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz#5de9477c9182fdc171cd8c8364b9a8894ec75d12"
-  integrity sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.4.tgz#4fdb1358667f6d68f25343353bd99bd11ee41006"
+  integrity sha512-wDNHGXGewWAjQPt3pyeYBtpWSq9cLE5UW1ZUPL/2eGK9jtse/FpXib7epSTsz0Q0m+6sg6Y4KtcFTlah1bdOVg==
   dependencies:
+    debug "~4.3.4"
     ws "~8.11.0"
 
-socket.io-parser@~4.2.1:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.2.tgz#1dd384019e25b7a3d374877f492ab34f2ad0d206"
-  integrity sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
   dependencies:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-socket.io@^4.4.1:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.6.1.tgz#62ec117e5fce0692fa50498da9347cfb52c3bc70"
-  integrity sha512-KMcaAi4l/8+xEjkRICl6ak8ySoxsYG+gG6/XfRCPJPQ/haCRIJBTL4wIl8YCsmtaBovcAXGLOShyVWQ/FG8GZA==
+socket.io@^4.7.2:
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.7.5.tgz#56eb2d976aef9d1445f373a62d781a41c7add8f8"
+  integrity sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==
   dependencies:
     accepts "~1.3.4"
     base64id "~2.0.0"
+    cors "~2.8.5"
     debug "~4.3.2"
-    engine.io "~6.4.1"
+    engine.io "~6.5.2"
     socket.io-adapter "~2.5.2"
-    socket.io-parser "~4.2.1"
+    socket.io-parser "~4.2.4"
 
 "source-map-js@>=0.6.2 <2.0.0":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 source-map-support@~0.5.20:
   version "0.5.21"
@@ -3633,32 +3953,33 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string.prototype.trim@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
-  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
 
-string.prototype.trimend@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
-  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
-  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
@@ -3672,7 +3993,7 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -3708,24 +4029,24 @@ tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-terser-webpack-plugin@^5.3.7:
-  version "5.3.7"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
-  integrity sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==
+terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
+    "@jridgewell/trace-mapping" "^0.3.20"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
     serialize-javascript "^6.0.1"
-    terser "^5.16.5"
+    terser "^5.26.0"
 
-terser@^5.16.5:
-  version "5.16.9"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.9.tgz#7a28cb178e330c484369886f2afd623d9847495f"
-  integrity sha512-HPa/FdTB9XGI2H1/keLFZHxl6WNvAI4YalHGtDQTlMnJcoqSab1UwL4l1hGEhs6/GmLHBZIg/YgB++jcbzoOEg==
+terser@^5.26.0:
+  version "5.30.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.30.3.tgz#f1bb68ded42408c316b548e3ec2526d7dd03f4d2"
+  integrity sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==
   dependencies:
-    "@jridgewell/source-map" "^0.3.2"
-    acorn "^8.5.0"
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
@@ -3740,16 +4061,14 @@ timeago.js@^4.0.2:
   integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
 
 tinymce@^6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.4.1.tgz#9c28f798074668d53371805fb6f1c68e582a4549"
-  integrity sha512-+/cS2AM9l6p72IBs2uolHbGsBUztLs0WslqNgFaTXtmMksTNUOhh8p08xtA/fa03UGlWEC6/EJoeV95/QDXa2A==
+  version "6.8.3"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.3.tgz#0025a4aaa4c24dc2a3e32e83dfda705d196fd802"
+  integrity sha512-3fCHKAeqT+xNwBVESf6iDbDV0VNwZNmfrkx9c/6Gz5iB8piMfaO6s7FvoiTrj1hf1gVbfyLTnz1DooI6DhgINQ==
 
 tmp@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
+  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
@@ -3768,10 +4087,10 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
-tsconfig-paths@^3.14.1:
-  version "3.14.2"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
-  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.2"
@@ -3798,19 +4117,54 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typed-array-length@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
-  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
   dependencies:
-    call-bind "^1.0.2"
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
     for-each "^0.3.3"
-    is-typed-array "^1.1.9"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
 
 ua-parser-js@^0.7.30:
-  version "0.7.35"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
-  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
+  version "0.7.37"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.37.tgz#e464e66dac2d33a7a1251d7d7a99d6157ec27832"
+  integrity sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -3822,6 +4176,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -3855,10 +4214,10 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
-update-browserslist-db@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
-  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
@@ -3885,25 +4244,25 @@ void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==
 
-watchpack@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+watchpack@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff"
+  integrity sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
 webpack-cli@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.0.1.tgz#95fc0495ac4065e9423a722dec9175560b6f2d9a"
-  integrity sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.1.4.tgz#c8e046ba7eaae4911d7e71e2b25b776fcc35759b"
+  integrity sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^2.0.1"
-    "@webpack-cli/info" "^2.0.1"
-    "@webpack-cli/serve" "^2.0.1"
+    "@webpack-cli/configtest" "^2.1.1"
+    "@webpack-cli/info" "^2.0.2"
+    "@webpack-cli/serve" "^2.0.5"
     colorette "^2.0.14"
-    commander "^9.4.1"
+    commander "^10.0.1"
     cross-spawn "^7.0.3"
     envinfo "^7.7.3"
     fastest-levenshtein "^1.0.12"
@@ -3920,11 +4279,12 @@ webpack-merge@^4.1.5:
     lodash "^4.17.15"
 
 webpack-merge@^5.7.3:
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
-  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
+  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
   dependencies:
     clone-deep "^4.0.1"
+    flat "^5.0.2"
     wildcard "^2.0.0"
 
 webpack-sources@^3.2.3:
@@ -3933,33 +4293,33 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.75.0:
-  version "5.79.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.79.0.tgz#8552b5da5a26e4e25842c08a883e08fc7740547a"
-  integrity sha512-3mN4rR2Xq+INd6NnYuL9RC9GAmc1ROPKJoHhrZ4pAjdMFEkJJWrsPw8o2JjCIyQyTu7rTXYn4VG6OpyB3CobZg==
+  version "5.91.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.91.0.tgz#ffa92c1c618d18c878f06892bbdc3373c71a01d9"
+  integrity sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^1.0.0"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.7.6"
-    browserslist "^4.14.5"
+    acorn-import-assertions "^1.9.0"
+    browserslist "^4.21.10"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.10.0"
+    enhanced-resolve "^5.16.0"
     es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
+    graceful-fs "^4.2.11"
     json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.1.0"
+    schema-utils "^3.2.0"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.3.7"
-    watchpack "^2.4.0"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
 which-boxed-primitive@^1.0.2:
@@ -3973,17 +4333,16 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-typed-array@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
-  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
   dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
     for-each "^0.3.3"
     gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
-    is-typed-array "^1.1.10"
+    has-tostringtag "^1.0.2"
 
 which@^1.2.1:
   version "1.3.1"
@@ -4000,14 +4359,9 @@ which@^2.0.1:
     isexe "^2.0.0"
 
 wildcard@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
-  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
-
-word-wrap@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
+  integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
 wrap-ansi@^7.0.0:
   version "7.0.0"
@@ -4065,3 +4419,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yocto-queue@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
+  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==

From 03365f4b3ded7a0a6f6b61a6563b2c575c4eaa7c Mon Sep 17 00:00:00 2001
From: Benjamin FAURE <benjamin.faure@inist.fr>
Date: Tue, 9 Apr 2024 08:21:53 +0200
Subject: [PATCH 27/31] Added net-stmp & updated Gems

---
 Gemfile      |   4 +
 Gemfile.lock | 345 ++++++++++++++++++++++++++-------------------------
 2 files changed, 182 insertions(+), 167 deletions(-)

diff --git a/Gemfile b/Gemfile
index cc16bb67a7..ba04ab6fa4 100644
--- a/Gemfile
+++ b/Gemfile
@@ -202,6 +202,10 @@ gem 'activerecord_json_validator'
 # See : https://github.com/DMPRoadmap/roadmap/issues/3254
 gem 'mail', '2.7.1'
 
+# This library provides functionality to send internet mail via SMTP, the Simple Mail Transfer Protocol.
+# https://github.com/ruby/net-smtp
+gem 'net-smtp'
+
 # ================================= #
 # ENVIRONMENT SPECIFIC DEPENDENCIES #
 # ================================= #
diff --git a/Gemfile.lock b/Gemfile.lock
index 68c97fce60..e6a13c307b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,69 +1,69 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.7.6)
-      actionpack (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    actioncable (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.7.6)
-      actionpack (= 6.1.7.6)
-      activejob (= 6.1.7.6)
-      activerecord (= 6.1.7.6)
-      activestorage (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    actionmailbox (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activestorage (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       mail (>= 2.7.1)
-    actionmailer (6.1.7.6)
-      actionpack (= 6.1.7.6)
-      actionview (= 6.1.7.6)
-      activejob (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    actionmailer (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      actionview (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.7.6)
-      actionview (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    actionpack (6.1.7.7)
+      actionview (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.7.6)
-      actionpack (= 6.1.7.6)
-      activerecord (= 6.1.7.6)
-      activestorage (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    actiontext (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activestorage (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       nokogiri (>= 1.8.5)
-    actionview (6.1.7.6)
-      activesupport (= 6.1.7.6)
+    actionview (6.1.7.7)
+      activesupport (= 6.1.7.7)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.1.7.6)
-      activesupport (= 6.1.7.6)
+    activejob (6.1.7.7)
+      activesupport (= 6.1.7.7)
       globalid (>= 0.3.6)
-    activemodel (6.1.7.6)
-      activesupport (= 6.1.7.6)
-    activerecord (6.1.7.6)
-      activemodel (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
-    activerecord_json_validator (2.1.5)
+    activemodel (6.1.7.7)
+      activesupport (= 6.1.7.7)
+    activerecord (6.1.7.7)
+      activemodel (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
+    activerecord_json_validator (3.0.0)
       activerecord (>= 4.2.0, < 8)
-      json_schemer (~> 0.2.18)
-    activestorage (6.1.7.6)
-      actionpack (= 6.1.7.6)
-      activejob (= 6.1.7.6)
-      activerecord (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+      json_schemer (~> 2.2)
+    activestorage (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.7.6)
+    activesupport (6.1.7.7)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
       zeitwerk (~> 2.3)
-    addressable (2.8.5)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
@@ -72,22 +72,24 @@ GEM
       bundler (>= 1.1)
     api-pagination (5.0.0)
     ast (2.4.2)
-    autoprefixer-rails (10.4.15.0)
+    autoprefixer-rails (10.4.16.0)
       execjs (~> 2)
-    base64 (0.1.1)
-    bcrypt (3.1.19)
+    base64 (0.2.0)
+    bcrypt (3.1.20)
     better_errors (2.10.1)
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
       rouge (>= 1.0.0)
+    bigdecimal (3.1.7)
     bindex (0.8.1)
-    binding_of_caller (1.0.0)
-      debug_inspector (>= 0.0.1)
-    bootsnap (1.16.0)
+    binding_of_caller (1.0.1)
+      debug_inspector (>= 1.2.0)
+    bootsnap (1.18.3)
       msgpack (~> 1.2)
-    brakeman (6.0.1)
+    brakeman (6.1.2)
+      racc
     builder (3.2.4)
-    bullet (7.1.2)
+    bullet (7.1.6)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     bundle-audit (0.1.0)
@@ -96,11 +98,11 @@ GEM
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
     byebug (11.1.3)
-    capybara (3.39.2)
+    capybara (3.40.0)
       addressable
       matrix
       mini_mime (>= 0.1.3)
-      nokogiri (~> 1.8)
+      nokogiri (~> 1.11)
       rack (>= 1.6.0)
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
@@ -112,17 +114,18 @@ GEM
       open4 (~> 1.3)
     coderay (1.1.3)
     colored2 (3.1.2)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     contact_us (1.2.0)
       rails (>= 4.2.0)
     cork (0.3.0)
       colored2 (~> 3.1)
-    crack (0.4.5)
+    crack (1.0.0)
+      bigdecimal
       rexml
     crass (1.0.6)
-    cssbundling-rails (1.3.3)
+    cssbundling-rails (1.4.0)
       railties (>= 6.0.0)
-    danger (9.3.2)
+    danger (9.4.3)
       claide (~> 1.0)
       claide-plugins (>= 0.9.2)
       colored2 (~> 3.1)
@@ -133,7 +136,7 @@ GEM
       kramdown (~> 2.3)
       kramdown-parser-gfm (~> 1.0)
       no_proxy_fix
-      octokit (~> 6.0)
+      octokit (>= 4.0)
       terminal-table (>= 1, < 4)
     database_cleaner (2.0.2)
       database_cleaner-active_record (>= 2, < 3)
@@ -141,21 +144,21 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    debug_inspector (1.1.0)
+    debug_inspector (1.2.0)
     devise (4.9.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise_invitable (2.0.8)
+    devise_invitable (2.0.9)
       actionmailer (>= 5.0)
       devise (>= 4.6)
-    diff-lcs (1.5.0)
-    dotenv (2.8.1)
-    dotenv-rails (2.8.1)
-      dotenv (= 2.8.1)
-      railties (>= 3.2)
+    diff-lcs (1.5.1)
+    dotenv (3.1.0)
+    dotenv-rails (3.1.0)
+      dotenv (= 3.1.0)
+      railties (>= 6.1)
     dragonfly (1.4.0)
       addressable (~> 2.3)
       multi_json (~> 1.0)
@@ -163,32 +166,29 @@ GEM
     dragonfly-s3_data_store (1.3.0)
       dragonfly (~> 1.0)
       fog-aws
-    ecma-re-validator (0.4.0)
-      regexp_parser (~> 2.2)
     erubi (1.12.0)
-    excon (0.104.0)
+    excon (0.110.0)
     execjs (2.9.1)
-    factory_bot (6.2.1)
+    factory_bot (6.4.6)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.2.0)
-      factory_bot (~> 6.2.0)
+    factory_bot_rails (6.4.3)
+      factory_bot (~> 6.4)
       railties (>= 5.0.0)
-    faker (3.2.1)
+    faker (3.3.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.7.11)
-      base64
-      faraday-net_http (>= 2.0, < 3.1)
-      ruby2_keywords (>= 0.0.4)
-    faraday-http-cache (2.5.0)
+    faraday (2.9.0)
+      faraday-net_http (>= 2.0, < 3.2)
+    faraday-http-cache (2.5.1)
       faraday (>= 0.8)
-    faraday-net_http (3.0.2)
+    faraday-net_http (3.1.0)
+      net-http
     ffi (1.16.3)
     flag_shih_tzu (0.3.23)
-    fog-aws (3.21.0)
+    fog-aws (3.22.0)
       fog-core (~> 2.1)
       fog-json (~> 1.1)
       fog-xml (~> 0.1)
-    fog-core (2.3.0)
+    fog-core (2.4.0)
       builder
       excon (~> 0.71)
       formatador (>= 0.2, < 2.0)
@@ -204,13 +204,13 @@ GEM
     fuubar (2.5.1)
       rspec-core (~> 3.0)
       ruby-progressbar (~> 1.4)
-    gettext (3.4.4)
+    gettext (3.4.9)
       erubi
       locale (>= 2.0.5)
       prime
       racc
       text (>= 1.3.0)
-    git (1.18.0)
+    git (1.19.1)
       addressable (~> 2.8)
       rchardet (~> 1.8)
     globalid (1.2.1)
@@ -225,7 +225,7 @@ GEM
       shellany (~> 0.0)
       thor (>= 0.18.1)
     hana (1.3.7)
-    hashdiff (1.0.1)
+    hashdiff (1.1.0)
     hashie (5.0.0)
     highline (2.1.0)
     htmltoword (1.1.1)
@@ -235,21 +235,22 @@ GEM
     httparty (0.21.0)
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-    jsbundling-rails (1.2.1)
+    jsbundling-rails (1.3.0)
       railties (>= 6.0.0)
-    json (2.6.3)
-    json_schemer (0.2.25)
-      ecma-re-validator (~> 0.3)
+    json (2.7.2)
+    json_schemer (2.2.1)
+      base64
+      bigdecimal
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       simpleidn (~> 0.2)
-      uri_template (~> 0.7)
-    jwt (2.7.1)
+    jwt (2.8.1)
+      base64
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)
@@ -267,42 +268,48 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     language_server-protocol (3.17.0.3)
-    ledermann-rails-settings (2.6.0)
+    ledermann-rails-settings (2.6.1)
       activerecord (>= 6.1)
-    listen (3.8.0)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    locale (2.1.3)
-    loofah (2.21.4)
+    locale (2.1.4)
+    loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    lumberjack (1.2.9)
+    lumberjack (1.2.10)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (1.0.2)
+    marcel (1.0.4)
     matrix (0.4.2)
     method_source (1.0.0)
-    mime-types (3.5.1)
+    mime-types (3.5.2)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2023.1003)
+    mime-types-data (3.2024.0305)
     mimemagic (0.4.3)
       nokogiri (~> 1)
       rake
     mini_mime (1.1.5)
-    minitest (5.20.0)
+    minitest (5.22.3)
     mocha (2.1.0)
       ruby2_keywords (>= 0.0.5)
     msgpack (1.7.2)
     multi_json (1.15.0)
     multi_xml (0.6.0)
-    mysql2 (0.5.5)
+    mysql2 (0.5.6)
     nap (1.1.0)
     nenv (0.3.0)
-    nio4r (2.5.9)
+    net-http (0.4.1)
+      uri
+    net-protocol (0.2.2)
+      timeout
+    net-smtp (0.5.0)
+      net-protocol
+    nio4r (2.7.1)
     no_proxy_fix (0.1.2)
-    nokogiri (1.15.4-arm64-darwin)
+    nokogiri (1.16.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-linux)
+    nokogiri (1.16.3-x86_64-linux)
       racc (~> 1.4)
     notiffany (0.1.3)
       nenv (~> 0.1)
@@ -314,10 +321,11 @@ GEM
       rack (>= 1.2, < 4)
       snaky_hash (~> 2.0)
       version_gem (~> 1.1)
-    octokit (6.1.1)
+    octokit (8.1.0)
+      base64
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
-    omniauth (2.1.1)
+    omniauth (2.1.2)
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
@@ -335,11 +343,11 @@ GEM
     open4 (1.3.4)
     options (2.3.2)
     orm_adapter (0.5.0)
-    parallel (1.23.0)
-    parser (3.2.2.4)
+    parallel (1.24.0)
+    parser (3.3.0.5)
       ast (~> 2.4.1)
       racc
-    pg (1.5.4)
+    pg (1.5.6)
     prime (0.1.2)
       forwardable
       singleton
@@ -349,8 +357,8 @@ GEM
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
-    public_suffix (5.0.3)
-    puma (6.4.0)
+    public_suffix (5.0.5)
+    puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.1)
       activesupport (>= 3.0.0)
@@ -359,30 +367,31 @@ GEM
       rspec-expectations (~> 3.12)
       rspec-mocks (~> 3.12)
       rspec-support (~> 3.12)
-    racc (1.7.1)
-    rack (2.2.8)
+    racc (1.7.3)
+    rack (2.2.9)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
-    rack-mini-profiler (3.1.1)
+    rack-mini-profiler (3.3.1)
       rack (>= 1.2.0)
-    rack-protection (3.1.0)
+    rack-protection (3.2.0)
+      base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rails (6.1.7.6)
-      actioncable (= 6.1.7.6)
-      actionmailbox (= 6.1.7.6)
-      actionmailer (= 6.1.7.6)
-      actionpack (= 6.1.7.6)
-      actiontext (= 6.1.7.6)
-      actionview (= 6.1.7.6)
-      activejob (= 6.1.7.6)
-      activemodel (= 6.1.7.6)
-      activerecord (= 6.1.7.6)
-      activestorage (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    rails (6.1.7.7)
+      actioncable (= 6.1.7.7)
+      actionmailbox (= 6.1.7.7)
+      actionmailer (= 6.1.7.7)
+      actionpack (= 6.1.7.7)
+      actiontext (= 6.1.7.7)
+      actionview (= 6.1.7.7)
+      activejob (= 6.1.7.7)
+      activemodel (= 6.1.7.7)
+      activerecord (= 6.1.7.7)
+      activestorage (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       bundler (>= 1.15.0)
-      railties (= 6.1.7.6)
+      railties (= 6.1.7.7)
       sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.5)
       actionpack (>= 5.0.1.rc1)
@@ -395,64 +404,63 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (6.1.7.6)
-      actionpack (= 6.1.7.6)
-      activesupport (= 6.1.7.6)
+    railties (6.1.7.7)
+      actionpack (= 6.1.7.7)
+      activesupport (= 6.1.7.7)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
     rainbow (3.1.1)
-    rake (13.0.6)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rchardet (1.8.0)
-    recaptcha (5.15.0)
-    regexp_parser (2.8.2)
+    recaptcha (5.16.0)
+    regexp_parser (2.9.0)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     rexml (3.2.6)
-    rollbar (3.4.1)
-    rouge (4.1.3)
+    rollbar (3.5.2)
+    rouge (4.2.1)
     rspec-collection_matchers (1.2.1)
       rspec-expectations (>= 2.99.0.beta1)
-    rspec-core (3.12.2)
-      rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.3)
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.6)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-rails (6.0.3)
+      rspec-support (~> 3.13.0)
+    rspec-rails (6.1.2)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
-      rspec-core (~> 3.12)
-      rspec-expectations (~> 3.12)
-      rspec-mocks (~> 3.12)
-      rspec-support (~> 3.12)
-    rspec-support (3.12.1)
-    rubocop (1.57.1)
-      base64 (~> 0.1.1)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.1)
+    rubocop (1.63.0)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
-      parser (>= 3.2.2.4)
+      parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.28.1, < 2.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.29.0)
-      parser (>= 3.2.1.0)
+    rubocop-ast (1.31.2)
+      parser (>= 3.3.0.4)
     rubocop-i18n (3.0.0)
       rubocop (~> 1.0)
-    rubocop-performance (1.19.1)
-      rubocop (>= 1.7.0, < 2.0)
-      rubocop-ast (>= 0.4.0)
+    rubocop-performance (1.21.0)
+      rubocop (>= 1.48.1, < 2.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
     ruby-progressbar (1.13.0)
     ruby2_keywords (0.0.5)
     ruby_dig (0.0.2)
@@ -460,7 +468,8 @@ GEM
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
-    selenium-webdriver (4.16.0)
+    selenium-webdriver (4.19.0)
+      base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
@@ -473,11 +482,11 @@ GEM
       activesupport (>= 4.2.0)
     simpleidn (0.2.1)
       unf (~> 0.1.4)
-    singleton (0.1.1)
+    singleton (0.2.0)
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
-    spring (4.1.1)
+    spring (4.1.3)
     spring-commands-rspec (1.0.4)
       spring (>= 0.9.1)
     spring-watcher-listen (2.1.0)
@@ -493,11 +502,12 @@ GEM
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     text (1.3.1)
-    thor (1.2.2)
+    thor (1.3.1)
+    timeout (0.4.1)
     tomparse (0.4.2)
-    translation (1.37)
-      gettext (~> 3.2, >= 3.2.5, <= 3.4.4)
-    turbo-rails (1.5.0)
+    translation (1.40)
+      gettext (~> 3.2, >= 3.2.5, <= 3.4.9)
+    turbo-rails (2.0.5)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
@@ -505,11 +515,11 @@ GEM
       concurrent-ruby (~> 1.0)
     unf (0.1.4)
       unf_ext
-    unf_ext (0.0.8.2)
+    unf_ext (0.0.9.1)
     unicode-display_width (2.5.0)
     uniform_notifier (1.16.0)
-    uri_template (0.7.0)
-    version_gem (1.1.3)
+    uri (0.13.0)
+    version_gem (1.1.4)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -517,7 +527,7 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webmock (3.19.1)
+    webmock (3.23.0)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -525,16 +535,16 @@ GEM
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    wicked_pdf (2.7.0)
+    wicked_pdf (2.8.0)
       activesupport
     wkhtmltopdf-binary (0.12.6.6)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    yard (0.9.34)
+    yard (0.9.36)
     yard-tomdoc (0.7.1)
       tomparse (>= 0.4.0)
       yard
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   arm64-darwin-21
@@ -581,6 +591,7 @@ DEPENDENCIES
   mimemagic
   mocha
   mysql2
+  net-smtp
   omniauth
   omniauth-orcid
   omniauth-rails_csrf_protection

From c5df39102a43545a8ec317746f367783f938cd88 Mon Sep 17 00:00:00 2001
From: Benjamin FAURE <benjamin.faure@inist.fr>
Date: Tue, 9 Apr 2024 08:53:40 +0200
Subject: [PATCH 28/31] Made rubocop happy

---
 app/controllers/api/v0/base_controller.rb      |  6 +++---
 app/controllers/application_controller.rb      |  4 ++--
 app/controllers/concerns/versionable.rb        |  2 +-
 app/controllers/plans_controller.rb            |  2 +-
 app/helpers/conditions_helper.rb               |  9 ++++-----
 app/models/application_record.rb               |  2 +-
 app/models/concerns/acts_as_sortable.rb        |  2 +-
 app/models/concerns/exportable_plan.rb         |  4 ++--
 app/models/question.rb                         | 18 +++++++++---------
 app/models/research_output.rb                  |  4 ++--
 app/models/template.rb                         |  2 +-
 config/credentials.yml                         | 14 ++++++++++++++
 .../application_controller_renderer.rb         |  1 +
 config/initializers/backtrace_silencers.rb     |  1 +
 config/initializers/inflections.rb             |  1 +
 config/initializers/mime_types.rb              |  1 +
 .../initializers/new_framework_defaults_5_2.rb |  1 +
 .../initializers/new_framework_defaults_6_1.rb |  1 +
 config/initializers/permissions_policy.rb      |  1 +
 lib/tasks/data_cleanup.rake                    |  4 +---
 lib/tasks/migrate.rake                         |  6 +++---
 lib/tasks/upgrade.rake                         |  2 +-
 spec/support/helpers/webmocks.rb               |  2 +-
 23 files changed, 54 insertions(+), 36 deletions(-)
 create mode 100644 config/credentials.yml

diff --git a/app/controllers/api/v0/base_controller.rb b/app/controllers/api/v0/base_controller.rb
index fb8309bd39..f259096cbc 100644
--- a/app/controllers/api/v0/base_controller.rb
+++ b/app/controllers/api/v0/base_controller.rb
@@ -56,7 +56,7 @@ def update
       #
       # Returns Object
       def retrieve_resource
-        instance_variable_get("@#{resource_name}")
+        instance_variable_get(:"@#{resource_name}")
       end
 
       # The allowed parameters for searching. Override this method in each API
@@ -98,13 +98,13 @@ def resource_name
       # the method "#{resource_name}_params" to limit permitted
       # parameters for the individual model.
       def resource_params
-        @resource_params ||= send("#{resource_name}_params")
+        @resource_params ||= send(:"#{resource_name}_params")
       end
 
       # Use callbacks to share common setup or constraints between actions.
       def define_resource(resource = nil)
         resource ||= resource_class.find(params[:id])
-        instance_variable_set("@#{resource_name}", resource)
+        instance_variable_set(:"@#{resource_name}", resource)
       end
 
       def authenticate
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index da8cde06da..71499ae5fa 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -54,11 +54,11 @@ def current_locale
   def store_location
     # store last url - this is needed for post-login redirect to whatever the user last
     # visited.
+    # don't store ajax calls
     unless ['/users/sign_in',
             '/users/sign_up',
             '/users/password',
-            '/users/invitation/accept'].any? { |ur| request.fullpath.include?(ur) } \
-    || request.xhr? # don't store ajax calls
+            '/users/invitation/accept'].any? { |ur| request.fullpath.include?(ur) } || request.xhr?
       session[:previous_url] = request.fullpath
     end
   end
diff --git a/app/controllers/concerns/versionable.rb b/app/controllers/concerns/versionable.rb
index e242f16e78..0a98723907 100644
--- a/app/controllers/concerns/versionable.rb
+++ b/app/controllers/concerns/versionable.rb
@@ -72,7 +72,7 @@ def get_new(obj)
       else
         found = find_in_space(obj.send(belongs), new_template.phases)
         obj = obj.send(:deep_copy)
-        obj.send("#{belongs}=", found)
+        obj.send(:"#{belongs}=", found)
       end
     end
     obj
diff --git a/app/controllers/plans_controller.rb b/app/controllers/plans_controller.rb
index e3da35eae0..8f7c44393a 100644
--- a/app/controllers/plans_controller.rb
+++ b/app/controllers/plans_controller.rb
@@ -176,7 +176,7 @@ def show
                   .joins(:templates)
                   .where(templates: { published: true }).uniq.sort_by(&:name)
     # TODO: Seems strange to do this. Why are we just not using an `edit` route?
-    @editing = (!params[:editing].nil? && @plan.administerable_by?(current_user.id))
+    @editing = !params[:editing].nil? && @plan.administerable_by?(current_user.id)
 
     # Get all Guidance Groups applicable for the plan and group them by org
     @all_guidance_groups = @plan.guidance_group_options
diff --git a/app/helpers/conditions_helper.rb b/app/helpers/conditions_helper.rb
index 9973efb975..9ea082a326 100644
--- a/app/helpers/conditions_helper.rb
+++ b/app/helpers/conditions_helper.rb
@@ -107,11 +107,10 @@ def num_section_questions(plan, section, phase = nil)
   def sections_info(plan)
     return [] if plan.nil?
 
-    info = []
-    plan.sections.each do |section|
-      info.push(section_info(plan, section))
+    info = plan.sections.map do |section|
+      section_info(plan, section)
     end
-    info
+    info || []
   end
 
   def section_info(plan, section)
@@ -250,7 +249,7 @@ def conditions_to_param_form(conditions)
   def webhook_hash(conditions)
     web_hash = {}
     param_conditions = conditions_to_param_form(conditions)
-    param_conditions.each do |_title, params|
+    param_conditions.each_value do |params|
       web_hash.merge!(params[:number] => params[:webhook_data])
     end
     web_hash
diff --git a/app/models/application_record.rb b/app/models/application_record.rb
index ecde6e7ebf..750599ec2f 100644
--- a/app/models/application_record.rb
+++ b/app/models/application_record.rb
@@ -35,7 +35,7 @@ def safe_regexp_where_clause(column:)
 
   def sanitize_fields(*attrs)
     attrs.each do |attr|
-      send("#{attr}=", ActionController::Base.helpers.sanitize(send(attr)))
+      send(:"#{attr}=", ActionController::Base.helpers.sanitize(send(attr)))
     end
   end
 end
diff --git a/app/models/concerns/acts_as_sortable.rb b/app/models/concerns/acts_as_sortable.rb
index 3ec73d2725..87dd3e974f 100644
--- a/app/models/concerns/acts_as_sortable.rb
+++ b/app/models/concerns/acts_as_sortable.rb
@@ -8,7 +8,7 @@ module ActsAsSortable
   class_methods do
     def update_numbers!(ids, parent:)
       # Ensure only records belonging to this parent are included.
-      ids = ids.map(&:to_i) & parent.public_send("#{model_name.singular}_ids")
+      ids = ids.map(&:to_i) & parent.public_send(:"#{model_name.singular}_ids")
       return if ids.empty?
 
       update_numbers_postgresql!(ids) if ApplicationRecord.postgres_db?
diff --git a/app/models/concerns/exportable_plan.rb b/app/models/concerns/exportable_plan.rb
index e5410326ab..f593f0a82c 100644
--- a/app/models/concerns/exportable_plan.rb
+++ b/app/models/concerns/exportable_plan.rb
@@ -282,8 +282,8 @@ def record_plan_export(user, format)
       ep.format = format
       plan_settings = settings(:export)
 
-      Settings::Template::DEFAULT_SETTINGS.each do |key, _value|
-        ep.settings(:export).send("#{key}=", plan_settings.send(key))
+      Settings::Template::DEFAULT_SETTINGS.each_key do |key|
+        ep.settings(:export).send(:"#{key}=", plan_settings.send(key))
       end
     end
     exported_plan.save
diff --git a/app/models/question.rb b/app/models/question.rb
index 509a977136..0afb049bda 100644
--- a/app/models/question.rb
+++ b/app/models/question.rb
@@ -208,12 +208,13 @@ def update_conditions(param_conditions, old_to_new_opts, question_id_map)
     conditions.destroy_all
     return unless param_conditions.present?
 
-    param_conditions.each do |_key, value|
+    param_conditions.each_value do |value|
       save_condition(value, old_to_new_opts, question_id_map)
     end
   end
 
   # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
+  # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
   def save_condition(value, opt_map, question_id_map)
     c = conditions.build
     c.action_type = value['action_type']
@@ -221,21 +222,19 @@ def save_condition(value, opt_map, question_id_map)
     # question options may have changed so rewrite them
     c.option_list = value['question_option']
     unless opt_map.blank?
-      new_question_options = []
-      c.option_list.each do |qopt|
-        new_question_options << opt_map[qopt]
+      new_question_options = c.option_list.map do |qopt|
+        opt_map[qopt]
       end
-      c.option_list = new_question_options
+      c.option_list = new_question_options || []
     end
 
     if value['action_type'] == 'remove'
       c.remove_data = value['remove_question_id']
       unless question_id_map.blank?
-        new_question_ids = []
-        c.remove_data.each do |qid|
-          new_question_ids << question_id_map[qid]
+        new_question_ids = c.remove_data.each do |qid|
+          question_id_map[qid]
         end
-        c.remove_data = new_question_ids
+        c.remove_data = new_question_ids || []
       end
     else
       c.webhook_data = {
@@ -247,6 +246,7 @@ def save_condition(value, opt_map, question_id_map)
     end
     c.save
   end
+  # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
   # rubocop:enable Metrics/MethodLength, Metrics/AbcSize
 
   private
diff --git a/app/models/research_output.rb b/app/models/research_output.rb
index 4165f0b7ea..243b925185 100644
--- a/app/models/research_output.rb
+++ b/app/models/research_output.rb
@@ -76,14 +76,14 @@ class ResearchOutput < ApplicationRecord
 
   # Helper method to convert selected repository form params into Repository objects
   def repositories_attributes=(params)
-    params.each do |_i, repository_params|
+    params.each_value do |repository_params|
       repositories << Repository.find_by(id: repository_params[:id])
     end
   end
 
   # Helper method to convert selected metadata standard form params into MetadataStandard objects
   def metadata_standards_attributes=(params)
-    params.each do |_i, metadata_standard_params|
+    params.each_value do |metadata_standard_params|
       metadata_standards << MetadataStandard.find_by(id: metadata_standard_params[:id])
     end
   end
diff --git a/app/models/template.rb b/app/models/template.rb
index 217aa4d6a9..98de69ec8c 100644
--- a/app/models/template.rb
+++ b/app/models/template.rb
@@ -284,7 +284,7 @@ def deep_copy(attributes: {}, **options)
     copy = dup
     if attributes.respond_to?(:each_pair)
       attributes.each_pair do |attribute, value|
-        copy.send("#{attribute}=".to_sym, value) if copy.respond_to?("#{attribute}=".to_sym)
+        copy.send(:"#{attribute}=".to_sym, value) if copy.respond_to?(:"#{attribute}=".to_sym)
       end
     end
     copy.save! if options.fetch(:save, false)
diff --git a/config/credentials.yml b/config/credentials.yml
new file mode 100644
index 0000000000..d7d4d5e1aa
--- /dev/null
+++ b/config/credentials.yml
@@ -0,0 +1,14 @@
+# aws:
+#   access_key_id: 123
+#   secret_access_key: 345
+
+# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
+secret_key_base: 3c5a0101d3521a0dae9682b8b4fb1352cacbe18723ae76ff9eaaf1652f548d1e54d242f1e95d05b58262603ecd19ffa8452da2b943df119aa44aa83cf2b81fc1
+
+devise_pepper: de451fa8d44af2c286d922f753d1b10fd23b99c10747143d9ba118988b9fa9601fea66bfe31266ffc6a331dc7331c71ebe845af8abcdb84c24b42b8063386530
+
+dragonfly_secret: "my_secret"
+
+recaptcha:
+  site_key: 6LcxyFMUAAAAACqaczujD9XBhYLoZ-QNS0ngzMME
+  secret_key: 6LcxyFMUAAAAAEE2E6jXgoJfXV0viwaYNv6JvePg
\ No newline at end of file
diff --git a/config/initializers/application_controller_renderer.rb b/config/initializers/application_controller_renderer.rb
index f4556db399..6d56e43900 100644
--- a/config/initializers/application_controller_renderer.rb
+++ b/config/initializers/application_controller_renderer.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 
 # ActiveSupport::Reloader.to_prepare do
diff --git a/config/initializers/backtrace_silencers.rb b/config/initializers/backtrace_silencers.rb
index e622a8dfd4..a457b7c474 100644
--- a/config/initializers/backtrace_silencers.rb
+++ b/config/initializers/backtrace_silencers.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 
 # You can add backtrace silencers for libraries that you're using but don't
diff --git a/config/initializers/inflections.rb b/config/initializers/inflections.rb
index aa7435fbc9..dc84742212 100644
--- a/config/initializers/inflections.rb
+++ b/config/initializers/inflections.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 
 # Add new inflection rules using the following format. Inflections
diff --git a/config/initializers/mime_types.rb b/config/initializers/mime_types.rb
index 6e1d16f027..be6fedc535 100644
--- a/config/initializers/mime_types.rb
+++ b/config/initializers/mime_types.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 
 # Add new mime types for use in respond_to blocks:
diff --git a/config/initializers/new_framework_defaults_5_2.rb b/config/initializers/new_framework_defaults_5_2.rb
index 7df9ce8f45..c300f2133b 100644
--- a/config/initializers/new_framework_defaults_5_2.rb
+++ b/config/initializers/new_framework_defaults_5_2.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 #
 # This file contains migration options to ease your Rails 5.2 upgrade.
diff --git a/config/initializers/new_framework_defaults_6_1.rb b/config/initializers/new_framework_defaults_6_1.rb
index 0b4ce02317..8c28549c8e 100644
--- a/config/initializers/new_framework_defaults_6_1.rb
+++ b/config/initializers/new_framework_defaults_6_1.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Be sure to restart your server when you modify this file.
 #
 # This file contains migration options to ease your Rails 6.1 upgrade.
diff --git a/config/initializers/permissions_policy.rb b/config/initializers/permissions_policy.rb
index 50bcf4eade..810aadeb98 100644
--- a/config/initializers/permissions_policy.rb
+++ b/config/initializers/permissions_policy.rb
@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 # Define an application-wide HTTP permissions policy. For further
 # information see https://developers.google.com/web/updates/2018/06/feature-policy
 #
diff --git a/lib/tasks/data_cleanup.rake b/lib/tasks/data_cleanup.rake
index e4aa5eebd6..65ce227abb 100644
--- a/lib/tasks/data_cleanup.rake
+++ b/lib/tasks/data_cleanup.rake
@@ -178,7 +178,7 @@ namespace :data_cleanup do
   # rubocop:disable Metrics/AbcSize
   def check_uniqueness(klass, filter)
     instance = klass.new
-    group = [filter.attributes.map { |a| instance.respond_to?("#{a}_id") ? "#{a}_id".to_sym : a }]
+    group = [filter.attributes.map { |a| instance.respond_to?(:"#{a}_id") ? :"#{a}_id".to_sym : a }]
 
     group << filter.options[:scope] if filter.options[:scope].present?
     group = group.flatten.uniq
@@ -281,9 +281,7 @@ namespace :data_cleanup do
 
       ids = klass.where(qry).pluck(:id)
       msg = "  #{ids.count} records that are an invalid #{filter.attributes} because it should #{shoulda}"
-      # rubocop:disable Lint/Void
       [ids, msg]
-      # rubocop:enable Lint/Void
     end
   end
   # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
diff --git a/lib/tasks/migrate.rake b/lib/tasks/migrate.rake
index 8fac08aabf..c2c25c5f56 100644
--- a/lib/tasks/migrate.rake
+++ b/lib/tasks/migrate.rake
@@ -75,7 +75,7 @@ namespace :migrate do
         name: 'grant_api_to_orgs'
       }
     }
-    roles.each do |_r, details|
+    roles.each_value do |details|
       next unless Role.where(name: details[:name]).empty?
 
       role = Role.new
@@ -141,7 +141,7 @@ namespace :migrate do
       }
     }
 
-    languages.each do |_l, details|
+    languages.each_value do |details|
       next unless Language.where(name: details[:name]).empty?
 
       language = Language.new
@@ -171,7 +171,7 @@ namespace :migrate do
       }
     }
 
-    regions.each do |_l, details|
+    regions.each_value do |details|
       next unless Region.where(name: details[:name]).empty?
 
       region = Region.new
diff --git a/lib/tasks/upgrade.rake b/lib/tasks/upgrade.rake
index 98c97cdcb2..39c83aacf9 100644
--- a/lib/tasks/upgrade.rake
+++ b/lib/tasks/upgrade.rake
@@ -415,7 +415,7 @@ namespace :upgrade do
                 .where('customization_of IS NOT NULL')
                 .group(:customization_of, :org_id, :version, :id)
                 .order(customization_of: :asc, org_id: :asc, version: :asc, updated_at: :desc)
-    generate_compound_key = ->(customization_of, org_id) { return "#{customization_of}_#{org_id}" }
+    generate_compound_key = ->(customization_of, org_id) { "#{customization_of}_#{org_id}" }
     current = nil
     unique_versions = Set.new
     duplicates = []
diff --git a/spec/support/helpers/webmocks.rb b/spec/support/helpers/webmocks.rb
index a850e5c6c9..558e698d31 100644
--- a/spec/support/helpers/webmocks.rb
+++ b/spec/support/helpers/webmocks.rb
@@ -29,7 +29,7 @@ def stub_rdamsc_service(successful: true, response_body: '')
   def stub_openaire
     url = ExternalApis::OpenAireService.api_base_url
     url = "#{url}#{ExternalApis::OpenAireService.search_path}"
-    url = url % ExternalApis::OpenAireService.default_funder
+    url %= ExternalApis::OpenAireService.default_funder
     stub_request(:get, url).to_return(status: 200, body: '', headers: {})
   end
 

From 0f805f61c42a72dad4ff2299e23434292775b3c7 Mon Sep 17 00:00:00 2001
From: Benjamin FAURE <benjamin.faure@inist.fr>
Date: Tue, 9 Apr 2024 08:58:58 +0200
Subject: [PATCH 29/31] Upgrade github actions node version to 18

---
 .github/workflows/eslint.yml   | 2 +-
 .github/workflows/mysql.yml    | 2 +-
 .github/workflows/postgres.yml | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 1910be2d94..6a34d2c34b 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -15,7 +15,7 @@ jobs:
     - uses: actions/setup-node@v2
       with:
         cache: 'yarn'
-        node-version: 16
+        node-version: 18
 
     # Run yarn install for JS dependencies
     - name: 'Yarn Install'
diff --git a/.github/workflows/mysql.yml b/.github/workflows/mysql.yml
index 69905aff98..eaf89f1b5c 100644
--- a/.github/workflows/mysql.yml
+++ b/.github/workflows/mysql.yml
@@ -25,7 +25,7 @@ jobs:
     # Install Node
     - uses: actions/setup-node@v3
       with:
-        node-version: '16.6.0'
+        node-version: 18
         cache: 'yarn'
 
     # Copy all of the example configs over
diff --git a/.github/workflows/postgres.yml b/.github/workflows/postgres.yml
index 12ba62b8e7..d9c245a4e1 100644
--- a/.github/workflows/postgres.yml
+++ b/.github/workflows/postgres.yml
@@ -44,7 +44,7 @@ jobs:
     # Install Node
     - uses: actions/setup-node@v3
       with:
-        node-version: '16.6.0'
+        node-version: 18
         cache: 'yarn'
 
     # Install the Postgres developer packages

From 55321d06f1e1dfdae11ff0300d7e55af81ff1369 Mon Sep 17 00:00:00 2001
From: John Pinto <jpinto@newington.ed.ac.uk>
Date: Tue, 9 Apr 2024 12:37:25 +0100
Subject: [PATCH 30/31] Fix for failing Rubocop tests. Changes:  - To deal with
 missing favicon.ico error ( ActionController::RoutingError:        No route
 matches [GET] "/favicon.ico") :    added config/routes_test.rb to add a route
 will return an empty response    with a 200 OK status code when the browser
 requests the favicon.ico file.    Then for test purposes we add the lines to
 config/encvironments/test.rb:      # Add config/routes_test.rb to routes     
 config.paths['config/routes.rb'] << Rails.root.join('config/routes_test.rb')

  - The other outstanding errors arose because in the test environment
    we sometimes encounter errors like (Selenium::WebDriver::Error::ElementClickInterceptedError: element click intercepted:
    # Element <input type="submit" name="commit" value="Change affiliation" class="btn btn-secondary" data-disable-with="Change affiliation">
    # is not clickable at point (101, 203). Other element would receive
the click: <div id="ui-id-2" tabindex="-1"
class="ui-menu-item-wrapper">...</div>).
    To get round this we use JS to click on element using code like
this:
  change_affiliation_input_button = find('input[value="Change affiliation"]')
   execute_script('arguments[0].click();', change_affiliation_input_button)
---
 config/environments/test.rb                           |  3 +++
 config/routes_test.rb                                 |  9 +++++++++
 spec/features/super_admins/merge_org_spec.rb          | 11 ++++++++++-
 .../templates_upgrade_customisations_spec.rb          | 11 ++++++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 config/routes_test.rb

diff --git a/config/environments/test.rb b/config/environments/test.rb
index 7d008cd214..f886d4ada1 100644
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -62,6 +62,9 @@
   # config.action_view.annotate_rendered_view_with_filenames = true
 
   config.i18n.enforce_available_locales = false
+
+  # Add config/routes_test.rb to routes
+  config.paths['config/routes.rb'] << Rails.root.join('config/routes_test.rb')
 end
 
 # Used by Rails' routes url_helpers (typically when including a link in an email)
diff --git a/config/routes_test.rb b/config/routes_test.rb
new file mode 100644
index 0000000000..90555516a2
--- /dev/null
+++ b/config/routes_test.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+Rails.application.routes.draw do
+  # Define your test-specific routes here
+
+  # This route will return an empty response with a 200 OK status code
+  # when the browser requests the favicon.ico file.
+  get '/favicon.ico', to: proc { |_env| [200, {}, ['']] }
+end
diff --git a/spec/features/super_admins/merge_org_spec.rb b/spec/features/super_admins/merge_org_spec.rb
index 3e8338655a..29c682f410 100644
--- a/spec/features/super_admins/merge_org_spec.rb
+++ b/spec/features/super_admins/merge_org_spec.rb
@@ -45,7 +45,16 @@
     expect(page).to have_text('Merge Organisations')
     choose_suggestion('org_org_name', @to_org)
 
-    click_button 'Analyze'
+    # rubocop:disable Layout/LineLength
+    # Using JS to click on button as click_button 'Analyze' fails due to error like
+    # Selenium::WebDriver::Error::ElementClickInterceptedError: element click intercepted:
+    # Element <button name="button" type="submit" class="btn btn-primary">...</button> is not clickable at point (86, 349).
+    # Other element would receive the click: <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">...</div>
+    # So replacing  click_button 'Analyze'with
+    # rubocop:enable Layout/LineLength
+    analyze_button = find('button', text: 'Analyze')
+    execute_script('arguments[0].click();', analyze_button)
+
     # Wait for response
     sleep(0.3)
     expect(page).to have_text('Summary:')
diff --git a/spec/features/templates/templates_upgrade_customisations_spec.rb b/spec/features/templates/templates_upgrade_customisations_spec.rb
index 715691b69c..0fd0121689 100644
--- a/spec/features/templates/templates_upgrade_customisations_spec.rb
+++ b/spec/features/templates/templates_upgrade_customisations_spec.rb
@@ -52,7 +52,16 @@
 
     # Move to the other funder Org's Templates
     choose_suggestion('superadmin_user_org_name', funder)
-    click_button('Change affiliation')
+
+    # rubocop:disable Layout/LineLength
+    # Using JS to click as click_button "Change affiliation" fails due to error like
+    # Selenium::WebDriver::Error::ElementClickInterceptedError: element click intercepted:
+    # Element <input type="submit" name="commit" value="Change affiliation" class="btn btn-secondary" data-disable-with="Change affiliation">
+    # is not clickable at point (101, 203). Other element would receive the click: <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">...</div>
+    # So replacing click_button('Change affiliation')
+    # rubocop:enable Layout/LineLength
+    change_affiliation_input_button = find('input[value="Change affiliation"]')
+    execute_script('arguments[0].click();', change_affiliation_input_button)
 
     # Edit the original Template
     click_link "#{funder.name} Templates"

From 708dee445bb498a029d4daa0be45279844690b27 Mon Sep 17 00:00:00 2001
From: aaronskiba <askiba@ualberta.ca>
Date: Thu, 8 Feb 2024 13:38:30 -0700
Subject: [PATCH 31/31] Increase window-size for headless features tests

:selenium_chrome_headless driver has a default window-size of (800x600). This small window-size seems to result in the `Selenium::WebDriver::Error::ElementClickInterceptedError:`

This commit increases the window-size and also reverts the prior fix for these errors (commit 55321d06f1e1dfdae11ff0300d7e55af81ff1369)
---
 spec/features/super_admins/merge_org_spec.rb         | 11 +----------
 .../templates_upgrade_customisations_spec.rb         | 11 +----------
 spec/support/capybara.rb                             | 12 +++++++++++-
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/spec/features/super_admins/merge_org_spec.rb b/spec/features/super_admins/merge_org_spec.rb
index 29c682f410..3e8338655a 100644
--- a/spec/features/super_admins/merge_org_spec.rb
+++ b/spec/features/super_admins/merge_org_spec.rb
@@ -45,16 +45,7 @@
     expect(page).to have_text('Merge Organisations')
     choose_suggestion('org_org_name', @to_org)
 
-    # rubocop:disable Layout/LineLength
-    # Using JS to click on button as click_button 'Analyze' fails due to error like
-    # Selenium::WebDriver::Error::ElementClickInterceptedError: element click intercepted:
-    # Element <button name="button" type="submit" class="btn btn-primary">...</button> is not clickable at point (86, 349).
-    # Other element would receive the click: <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">...</div>
-    # So replacing  click_button 'Analyze'with
-    # rubocop:enable Layout/LineLength
-    analyze_button = find('button', text: 'Analyze')
-    execute_script('arguments[0].click();', analyze_button)
-
+    click_button 'Analyze'
     # Wait for response
     sleep(0.3)
     expect(page).to have_text('Summary:')
diff --git a/spec/features/templates/templates_upgrade_customisations_spec.rb b/spec/features/templates/templates_upgrade_customisations_spec.rb
index 0fd0121689..715691b69c 100644
--- a/spec/features/templates/templates_upgrade_customisations_spec.rb
+++ b/spec/features/templates/templates_upgrade_customisations_spec.rb
@@ -52,16 +52,7 @@
 
     # Move to the other funder Org's Templates
     choose_suggestion('superadmin_user_org_name', funder)
-
-    # rubocop:disable Layout/LineLength
-    # Using JS to click as click_button "Change affiliation" fails due to error like
-    # Selenium::WebDriver::Error::ElementClickInterceptedError: element click intercepted:
-    # Element <input type="submit" name="commit" value="Change affiliation" class="btn btn-secondary" data-disable-with="Change affiliation">
-    # is not clickable at point (101, 203). Other element would receive the click: <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">...</div>
-    # So replacing click_button('Change affiliation')
-    # rubocop:enable Layout/LineLength
-    change_affiliation_input_button = find('input[value="Change affiliation"]')
-    execute_script('arguments[0].click();', change_affiliation_input_button)
+    click_button('Change affiliation')
 
     # Edit the original Template
     click_link "#{funder.name} Templates"
diff --git a/spec/support/capybara.rb b/spec/support/capybara.rb
index ededee71dd..50f5e42547 100644
--- a/spec/support/capybara.rb
+++ b/spec/support/capybara.rb
@@ -6,6 +6,16 @@
 # Use the fast rack_test driver for non-feature tests by default
 Capybara.default_driver = :rack_test
 
+# Create a custom driver based on Capybara's :selenium_chrome_headless driver
+# This resolves a ElementClickInterceptedError when executing `click_button 'Sign in'` with DMP Assistant
+Capybara.register_driver :selenium_chrome_headless_add_window_size do |app|
+  # Get a copy of the default options for Capybara's :selenium_chrome_headless driver
+  options = Capybara.drivers[:selenium_chrome_headless].call.options[:options].dup
+  options.add_argument('--window-size=1920,1080') # default window-size is only (800x600)
+  # Create a new Selenium driver with the customised options
+  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
+end
+
 RSpec.configure do |config|
   config.before(:each, type: :feature, js: false) do
     Capybara.use_default_driver
@@ -13,6 +23,6 @@
 
   # Use the Selenium headless Chrome driver for feature tests
   config.before(:each, type: :feature, js: true) do
-    Capybara.current_driver = :selenium_chrome_headless
+    Capybara.current_driver = :selenium_chrome_headless_add_window_size
   end
 end