diff --git a/README.md b/README.md
index 2f66af0bafb..142cb99ebf5 100644
--- a/README.md
+++ b/README.md
@@ -71,9 +71,9 @@ A good starting point is the following:
 ```html
 <div class="background-light banner-container">
   <div class="container">
-    <div class="row no-margin">
+    <div class="row m-0">
       <div class="col-lg-12 banner">
-        <p class="no-margin">
+        <p class="m-0">
           This is the text of my news banner.
         </p>
       </div>
diff --git a/_config.yml b/_config.yml
index 7e7408cb5d0..d229f1c0605 100644
--- a/_config.yml
+++ b/_config.yml
@@ -73,6 +73,12 @@ defaults:
       search: true
       sidebar: home_sidebar
       topnav: topnav
+  -
+    scope:
+      path: "content/index.html"
+      type: "pages"
+    values:
+      topnav: topnav
   -
     scope:
       path: "content/docs"
diff --git a/_includes/algolia.html b/_includes/algolia.html
index a63c375eb37..6f0cb541181 100644
--- a/_includes/algolia.html
+++ b/_includes/algolia.html
@@ -3,14 +3,14 @@
   appId: '{{ site.algolia.application_id }}',
   apiKey: '{{ site.algolia.search_only_api_key }}',
   indexName: '{{ site.algolia.index_name }}',
-  searchFunction: function(helper) {          // hide search result in init query
-    var searchResults = $('#search-results');
+  searchFunction: function(helper) {
+    var searchResults = document.getElementById('search-results');
     if (helper.state.query === '') {
-      searchResults.hide();
+      if (searchResults) searchResults.style.display = 'none';
       return;
     }
     helper.search();
-    searchResults.show();
+    if (searchResults) searchResults.style.display = 'block';
   }
 });
 
@@ -65,58 +65,43 @@ <h2><a class="result-link" href="${url}">${title}</a></h2>
 
 algoliaSearch.start();
 
-// Patch the style of the search input bar generated by the above script
-// The equivalent CSS is below, however, including <style> in <body> is against the W3C commandments
-// Chrome and Firefox had baby called scope, but it didn't make it
-// https://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html
-var elem = document.querySelector('.ais-search-box--powered-by');
-elem.style.marginTop = '-15px';
-elem.style.paddingRight = '5px';
-
-var elem = document.querySelector('.nav li a.ais-search-box--powered-by-link');
-elem.style.padding = '0';
-elem.style.backgroundColor = 'transparent';
-elem.style.display = "inline-block";
-
-var elem = document.querySelector('.ais-search-box--input');
-elem.style.paddingLeft = '10px';
-elem.style.borderColor = '#0A76BB';
-
-var elem = document.querySelector('.ais-search-box');
-elem.style.padding = '.5em';
-elem.style.marginBottom = '0px';
-elem.style.marginLeft = '10px';
-elem.style.marginTop = '0px';
-elem.style.width = '20em';
-elem.style.fontSize = '0.8em';
-elem.style.height = '50px';
-elem.style.boxSizing = 'border-box';
-
-/*<style type="text/css">
-.ais-search-box--powered-by {
-  margin-top: -15px;
-  padding-right: 5px;
-}
-.nav li a.ais-search-box--powered-by-link {
-  padding: 0;
-  background-color: transparent;
-  display: inline-block;
-}
-.ais-search-box--input {
-  padding-left: 10px;
-  border-color: #0A76BB;
-}
-.ais-search-box {
-  padding: .5em;
-  margin-bottom: 0px;
-  margin-left: 10px;
-  margin-top: 0px;
-  width: 20em;
-  font-size: 0.8em;
-  box-sizing: border-box;
-  height: 50px;
-}
-</style>*/
+// Navbar search layout (patch after start — same as precice.org)
+(function patchAlgoliaNavbarStyles() {
+  var box = document.querySelector('.navbar .ais-search-box');
+  var input = document.querySelector('.navbar .ais-search-box--input');
+  var reset = document.querySelector('.navbar .ais-search-box--reset');
+  var poweredBy = document.querySelector('.navbar .ais-search-box--powered-by');
+  var poweredByLink = document.querySelector('.navbar .nav li a.ais-search-box--powered-by-link');
+  if (poweredBy) {
+    poweredBy.style.marginTop = '-15px';
+    poweredBy.style.paddingRight = '5px';
+    poweredBy.style.pointerEvents = 'none';
+  }
+  if (poweredByLink) {
+    poweredByLink.style.padding = '0';
+    poweredByLink.style.backgroundColor = 'transparent';
+    poweredByLink.style.display = 'inline-block';
+    poweredByLink.style.pointerEvents = 'auto';
+  }
+  if (reset) {
+    reset.style.zIndex = '10';
+    reset.style.cursor = 'pointer';
+  }
+  if (input) {
+    input.style.paddingLeft = '10px';
+    input.style.borderColor = '#0A76BB';
+  }
+  if (box) {
+    box.style.padding = '.5em';
+    box.style.marginBottom = '0';
+    box.style.marginLeft = '10px';
+    box.style.marginTop = '0';
+    box.style.width = '20em';
+    box.style.fontSize = '0.8em';
+    box.style.height = '50px';
+    box.style.boxSizing = 'border-box';
+  }
+})();
 
 // some hacky JS to hide the search results until we move to docsearch (which is a true autocomplete-type search)
 document.addEventListener('mouseup', function(e) {
diff --git a/_includes/footer.html b/_includes/footer.html
index f4d72db1776..ded314edc45 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,15 +2,15 @@
   <div class="container">
 
 {% if page.layout != "landing_page" %}
-    <div class="row equal">
-      <div class="col-md-4" style="background:white;border-radius:1rem;padding:0 3rem;margin:0 auto 50px auto;">
-        <h2> The preCICE newsletter </h2>
+    <div class="row">
+      <div class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 bg-white rounded-4 p-4 mx-auto mb-5">
+        <h2 class="text-center fs-5 fw-medium mt-1 mb-3 text-dark" style="font-family: 'Fira Sans', Roboto, sans-serif;">The preCICE newsletter</h2>
         {% include newsletter.html %}
-        </div>
+      </div>
     </div>
 {% endif %}
 
-    <div class="row equal text-center">
+    <div class="row text-center">
       <div class="col-md-4">
         <nav aria-label="Footer left">
           <ul class="list-unstyled">
diff --git a/_includes/head.html b/_includes/head.html
index 74f656ccebb..a5d06d65903 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,5 +1,4 @@
 <meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 {% if page.summary %}
 <meta name="description" content="{{ page.summary | strip_html | strip_newlines }}">
@@ -50,17 +49,15 @@
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
 
 <!-- Bootstrap -->
-<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
 
 <!-- Local CSS -->
-<link rel="stylesheet" href="{{ "css/modern-business.css" }}">
-<link rel="stylesheet" href="{{ "css/customstyles.css" }}">
-<link rel="stylesheet" href="{{ "css/customstyles-precice.css" }}">
-<link rel="stylesheet" href="{{ "css/boxshadowproperties.css" }}">
-<link rel="stylesheet" href="{{ "css/bookcover.css" }}">
+<link rel="stylesheet" href="{{ "css/customstyles.css" }}?v={{ site.time | date: '%s' }}">
+<link rel="stylesheet" href="{{ "css/customstyles-precice.css" }}?v={{ site.time | date: '%s' }}">
+<link rel="stylesheet" href="{{ "css/boxshadowproperties.css" }}?v={{ site.time | date: '%s' }}">
+<link rel="stylesheet" href="{{ "css/bookcover.css" }}?v={{ site.time | date: '%s' }}">
 <!-- Color styles -->
-<link rel="stylesheet" href="{{ "css/theme-precice.css" }}">
+<link rel="stylesheet" href="{{ "css/theme-precice.css" }}?v={{ site.time | date: '%s' }}">
 <!-- Styling for landing page -->
 {% if page.url == "/index.html" %}
 <link rel="stylesheet" href="{{ "css/landing-page.css" }}">
@@ -73,19 +70,13 @@
 <script src="https://cdn.jsdelivr.net/npm/anchor-js@4.2.0/anchor.min.js" integrity="sha256-m1eTvwEHwmsw4+XKF7BshClVJEPwTVycveNl0CS0Mkk=" crossorigin="anonymous"></script>
 
 <!-- Bootstrap JavaScript (requires jquery) -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
 
 <!-- Local JS -->
-<script src="{{ "js/jquery.navgoco.min.js" }}"></script>
 <script src="{{ "js/toc.js" }}"></script>
 <script src="{{ "js/customscripts.js" }}"></script>
 
-<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-<!--[if lt IE 9]>
-<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-<![endif]-->
+
 
 <!-- KaTeX -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
diff --git a/_includes/head_print.html b/_includes/head_print.html
index 30fab7e23ad..71661abd8fe 100644
--- a/_includes/head_print.html
+++ b/_includes/head_print.html
@@ -14,11 +14,9 @@
 <link rel="stylesheet" href="{{ "css/fontawesome.6.7.2.all.min.css" }}">
 
 <!-- Bootstrap -->
-<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
-<link rel="stylesheet" href="{{ "css/bootstrap.min.css" }}">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
 
 <!-- Local CSS -->
-<link rel="stylesheet" href="{{ "css/modern-business.css" }}">
 <link rel="stylesheet" href="{{ "css/customstyles.css" }}">
 <link rel="stylesheet" href="{{ "css/customstyles-precice.css" }}">
 <link rel="stylesheet" href="{{ "css/boxshadowproperties.css" }}">
diff --git a/_includes/news_banner.html b/_includes/news_banner.html
index fef68803536..baebf9ee3bb 100644
--- a/_includes/news_banner.html
+++ b/_includes/news_banner.html
@@ -6,9 +6,9 @@
 
 <aside role="banner" class="background-light banner-container">
   <div class="container">
-    <div class="row no-margin">
+    <div class="row m-0">
       <div class="col-lg-12 banner">
-        <p class="no-margin">
+        <p class="m-0">
           Submit your abstract to the <a href="eccomas-wccm-2026.html">preCICE session at WCCM 2026</a> (Munich, July 19-24) - Abstract deadline extended till Feb 9
         </p>
       </div>
diff --git a/_includes/publication_panel.html b/_includes/publication_panel.html
new file mode 100644
index 00000000000..f993be6584a
--- /dev/null
+++ b/_includes/publication_panel.html
@@ -0,0 +1,82 @@
+{% comment %}
+  Renders a blue-bordered publication citation box (same as precice.org / landing page).
+
+  Usage:
+    {% include publication_panel.html title="Exact publication title" %}
+    {% include publication_panel.html pub=pub %}
+    {% include publication_panel.html pub=pub flexible=true wrapper=false show_doi_in_body=true %}
+
+  Parameters:
+    title / pub          — lookup or pass publication from site.publications
+    flexible             — optional journal fields (fenics related literature)
+    wrapper              — wrap in row + col-md-10 offset-md-1 (default: true)
+    show_doi_in_body     — append doi link in the citation line
+    require_pub_url      — only show Publisher's site when pub-url is set
+{% endcomment %}
+
+{% if include.pub %}
+  {% assign pub = include.pub %}
+{% elsif include.title %}
+  {% assign pub = nil %}
+  {% for p in site.publications %}
+    {% if p.title == include.title %}
+      {% assign pub = p %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if pub %}
+  {% if pub.doi %}
+    {% assign publisher_url = pub.doi | prepend: 'https://www.doi.org/' %}
+  {% else %}
+    {% assign publisher_url = pub.pub-url %}
+  {% endif %}
+
+  {% assign use_wrapper = true %}
+  {% if include.wrapper == false %}
+    {% assign use_wrapper = false %}
+  {% endif %}
+
+  {% if use_wrapper %}
+<div class="row">
+<div class="col-md-10 offset-md-1">
+  {% endif %}
+  <div class="card border-primary panel-precice">
+    <div class="card-header-precice">
+      <strong>{{ pub.title }}</strong>
+    </div>
+    <div class="card-body">
+      <p>
+        {% if include.flexible %}
+        <em>{{ pub.authors }}</em>{% if pub.journal.name %} {{ pub.journal.name }}, {% endif %}{% if pub.journal.volume %}Volume {{ pub.journal.volume }}, {% endif %}{% if pub.journal.publisher %}{{ pub.journal.publisher }}, {% endif %}{{ pub.year }}{% if include.show_doi_in_body and pub.doi %}, <a href="https://www.doi.org/{{ pub.doi }}">doi:{{ pub.doi }}</a>{% endif %}.
+        {% elsif pub.journal.issue %}
+        <em>{{ pub.authors }}</em>,
+        {{ pub.journal.name }},
+        {{ pub.year }},
+        {{ pub.journal.volume }}:{{ pub.journal.issue }}{% if include.show_doi_in_body and pub.doi %}, <a href="https://www.doi.org/{{ pub.doi }}">doi:{{ pub.doi }}</a>{% endif %}.
+        {% else %}
+        <em>{{ pub.authors }}</em>,
+        {{ pub.journal.name }}{% if pub.journal.volume %},
+        Volume {{ pub.journal.volume }}{% endif %}{% if pub.journal.publisher %},
+        {{ pub.journal.publisher }}{% endif %},
+        {{ pub.year }}{% if include.show_doi_in_body and pub.doi %}, <a href="https://www.doi.org/{{ pub.doi }}">doi:{{ pub.doi }}</a>{% endif %}.
+        {% endif %}
+      </p>
+      {% if include.flexible and include.require_pub_url %}
+        {% if pub.pub-url %}
+      <a href="{{ pub.pub-url }}">Publisher's site</a>&nbsp;&nbsp;
+        {% endif %}
+      {% elsif publisher_url %}
+      <a href="{{ publisher_url }}">Publisher's site</a>&nbsp;&nbsp;
+      {% endif %}
+      {% if pub.bibtex %}
+      <a href="assets/{{ pub.bibtex }}">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
+      {% endif %}
+    </div>
+  </div>
+  {% if use_wrapper %}
+</div>
+</div>
+  {% endif %}
+{% endif %}
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 73645c9a5b9..3334ec8a057 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,74 +1,15 @@
 {% assign sidebar = site.data.sidebars[page.sidebar].entries %}
 
 <nav aria-label="{{sidebar[0].product}}">
-<ul id="mysidebar" class="nav">
+<ul id="mysidebar" class="sidebar-nav flex-column">
   <li class="sidebarTitle">{{sidebar[0].product}} {{sidebar[0].version}}</li>
-  {% for entry in sidebar %}
-  {% for folder in entry.folders %}
-  {% if folder.output contains "web" %}
-  {% if folder.url %}
-  <!-- Parent menu item has url and no folderitems -->
-  {% if page.url == folder.url %}
-  <li class="active">
-    <a title="{{folder.title}}" href="{{folder.url | remove: "/"}}">{{folder.title}}</a>
-  </li>
-  {% else %}
-  <li>
-    <a title="{{folder.title}}" href="{{folder.url | remove: "/"}}">{{folder.title}}</a>
-  </li>
-  {% endif %}
-  {% else %}
-  <!-- Parent menu item has folderitems -->
-  <li>
-    <a title="{{folder.title}}" href="#">{{folder.title}}</a>
-    <ul>
-      {% for folderitem in folder.folderitems %}
-      {% if folderitem.output contains "web" %}
-      {% if folderitem.external_url %}
-      <li><a title="{{folderitem.title}}" href="{{folderitem.external_url}}" target="_blank" rel="noopener">{{folderitem.title}}</a></li>
-      {% elsif page.url == folderitem.url %}
-      <li {% if folderitem.link-only == nil or folderitem.link-only == false %} class="active" {% endif %} ><a title="{{folderitem.title}}" href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
-      {% elsif folderitem.type == "empty" %}
-      <li><a title="{{folderitem.title}}" href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
 
-      {% else %}
-      <li><a title="{{folderitem.title}}" href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
-      {% endif %}
-      {% for subfolders in folderitem.subfolders %}
-      {% if subfolders.output contains "web" %}
-      <li class="subfolders">
-        <a title="{{subfolders.title}}" href="#">{{ subfolders.title }}</a>
-        <ul>
-          {% for subfolderitem in subfolders.subfolderitems %}
-          {% if subfolderitem.output contains "web" %}
-          {% if subfolderitem.external_url %}
-          <li><a title="{{subfolderitem.title}}" href="{{subfolderitem.external_url}}" target="_blank" rel="noopener">{{subfolderitem.title}}</a></li>
-          {% elsif page.url == subfolderitem.url %}
-          <li class="active"><a title="{{subfolderitem.title}}" href="{{subfolderitem.url | remove: "/"}}">{{subfolderitem.title}}</a></li>
-          {% else %}
-          <li><a title="{{subfolderitem.title}}" href="{{subfolderitem.url | remove: "/"}}">{{subfolderitem.title}}</a></li>
-          {% endif %}
-          {% endif %}
-          {% endfor %}
-        </ul>
-      </li>
-      {% endif %}
-      {% endfor %}
+  {% for entry in sidebar %}
+    {% for folder in entry.folders %}
+      {% if folder.output contains "web" %}
+        {% include sidebar_recursive.html item=folder level=1 parent_id="mysidebar" %}
       {% endif %}
-      {% endfor %}
-    </ul>
-  </li>
-  {% endif %}
-  {% endif %}
-  {% endfor %}
+    {% endfor %}
   {% endfor %}
-  <!-- if you aren't using the accordion, uncomment this block:
-  <p class="external">
-  <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
-  </p>
-  -->
 </ul>
 </nav>
-
-<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
-<script>$("li.active").parents('li').toggleClass("active");</script>
diff --git a/_includes/sidebar_recursive.html b/_includes/sidebar_recursive.html
new file mode 100644
index 00000000000..6c7d603a4e2
--- /dev/null
+++ b/_includes/sidebar_recursive.html
@@ -0,0 +1,122 @@
+{% comment %}
+  Recursive sidebar: renders nested doc nav from _data/sidebars via folder.folderitems.
+  Parameters: item (folder node), level (1–4), parent_id (element id for data-bs-parent accordion group).
+  Branch rows use BS5 Collapse (data-bs-toggle, .collapse.show); leaves are plain nav-links.
+  Active state compares page.url (no leading slash) to each item url.
+{% endcomment %}
+
+{% assign page_url_clean = page.url | remove_first: "/" %}
+
+{% assign itm = include.item %}
+{% assign title = itm.title %}
+{% assign url = itm.url %}
+{% assign folderitems = itm.folderitems %}
+{% assign subfolders = itm.subfolders %}
+{% assign subfolderitems = itm.subfolderitems %}
+
+{% assign is_branch = false %}
+{% if include.level == 1 %}
+  {% if folderitems.size > 0 %}
+    {% assign is_branch = true %}
+  {% endif %}
+{% elsif include.level == 3 %}
+  {% assign is_branch = true %}
+{% endif %}
+
+{% if is_branch == false %}
+  {% assign current_url_clean = url | remove_first: "/" %}
+  <li class="nav-item">
+    <a class="nav-link {% if page_url_clean == current_url_clean %}active{% endif %}"
+       title="{{ title }}" href="{{ url | remove_first: "/" }}">
+       {{ title }}
+    </a>
+  </li>
+{% else %}
+  {% capture current_uid %}{{ include.level }}-{{ title | slugify }}{% endcapture %}
+  {% assign current_id = current_uid | prepend: "sb-" %}
+
+  {% assign any_active = false %}
+  {% assign current_url_clean = url | remove_first: "/" %}
+  {% if page_url_clean == current_url_clean and current_url_clean != "" %}{% assign any_active = true %}{% endif %}
+
+  {% if any_active == false %}
+    {% for fi in folderitems %}
+      {% assign fi_url = fi.url | remove_first: "/" %}
+      {% if page_url_clean == fi_url and fi_url != "" %}{% assign any_active = true %}{% break %}{% endif %}
+      {% for sf in fi.subfolders %}
+        {% for sfi in sf.subfolderitems %}
+          {% assign sfi_url = sfi.url | remove_first: "/" %}
+          {% if page_url_clean == sfi_url and sfi_url != "" %}{% assign any_active = true %}{% break %}{% endif %}
+        {% endfor %}
+        {% if any_active %}{% break %}{% endif %}
+      {% endfor %}
+      {% if any_active %}{% break %}{% endif %}
+    {% endfor %}
+  {% endif %}
+
+  {% if any_active == false %}
+    {% for sf in subfolders %}
+      {% for sfi in sf.subfolderitems %}
+        {% assign sfi_url = sfi.url | remove_first: "/" %}
+        {% if page_url_clean == sfi_url and sfi_url != "" %}{% assign any_active = true %}{% break %}{% endif %}
+      {% endfor %}
+      {% if any_active %}{% break %}{% endif %}
+    {% endfor %}
+  {% endif %}
+
+  {% if any_active == false %}
+    {% for sfi in subfolderitems %}
+      {% assign sfi_url = sfi.url | remove_first: "/" %}
+      {% if page_url_clean == sfi_url and sfi_url != "" %}{% assign any_active = true %}{% break %}{% endif %}
+    {% endfor %}
+  {% endif %}
+
+  <li class="nav-item">
+    <a class="nav-link {% if any_active %}active{% else %}collapsed{% endif %}"
+       title="{{ title }}"
+       data-bs-toggle="collapse" href="#{{ current_id }}"
+       role="button"
+       aria-expanded="{% if any_active %}true{% else %}false{% endif %}"
+       aria-controls="{{ current_id }}">
+       {{ title }}
+    </a>
+    <ul class="collapse {% if any_active %}show{% endif %} sidebar-nav flex-column list-unstyled mb-0"
+        id="{{ current_id }}" data-bs-parent="#{{ include.parent_id }}">
+
+      {% if url %}
+        <li class="nav-item">
+          {% assign current_url_clean = url | remove_first: "/" %}
+          <a class="nav-link {% if page_url_clean == current_url_clean %}active{% endif %}"
+             title="{{ title }}" href="{{ url | remove_first: "/" }}">
+             {{ title }} Overview
+          </a>
+        </li>
+      {% endif %}
+
+      {% assign next_level = include.level | plus: 1 %}
+
+      {% for fi in folderitems %}
+        {% if fi.output contains "web" %}
+          {% include sidebar_recursive.html item=fi level=next_level parent_id=current_id %}
+          {% for sf in fi.subfolders %}
+            {% if sf.output contains "web" %}
+              {% include sidebar_recursive.html item=sf level=3 parent_id=current_id %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+      {% endfor %}
+
+      {% for sf in subfolders %}
+        {% if sf.output contains "web" %}
+          {% include sidebar_recursive.html item=sf level=next_level parent_id=current_id %}
+        {% endif %}
+      {% endfor %}
+
+      {% for sfi in subfolderitems %}
+        {% if sfi.output contains "web" %}
+          {% include sidebar_recursive.html item=sfi level=next_level parent_id=current_id %}
+        {% endif %}
+      {% endfor %}
+    </ul>
+  </li>
+{% endif %}
diff --git a/_includes/taglogic.html b/_includes/taglogic.html
index c2f76b014bb..3bdbf6e902b 100644
--- a/_includes/taglogic.html
+++ b/_includes/taglogic.html
@@ -1,4 +1,4 @@
-<p>The following pages and posts are tagged with <button type="button" style="cursor: default" class="btn btn-default navbar-btn">{{page.tagName}}</button></p>
+<p>The following pages and posts are tagged with <button type="button" style="cursor: default" class="btn btn-secondary">{{page.tagName}}</button></p>
 <table><thead><tr><th>Title</th><th>Type</th><th>Excerpt</th></tr></thead>
     <tbody>
     {% assign thisTag = page.tagName %}
@@ -7,7 +7,7 @@
         {% if tag == thisTag %}
 
         <tr><td><a href="{{ page.url | remove: "/" }}">{{page.title}}</a></td>
-            <td><span class="label label-default">Page</span></td>
+            <td><span class="badge text-bg-secondary">Page</span></td>
           <td>{% if page.summary %} {{ page.summary | strip_html | strip_newlines | truncate: 160 }} {% else %} {{ page.content | truncatewords: 50 | strip_html }} {% endif %}</td>
         </tr>
         {% endif %}
@@ -20,7 +20,7 @@
         {% if tag == thisTag %}
 
         <tr><td><a href="{{ post.url | remove: "/" }}">{{post.title}}</a></td>
-            <td><span class="label label-primary">Post</span></td>
+            <td><span class="badge text-bg-primary">Post</span></td>
             <td>{% if post.summary %} {{ post.summary | strip_html | strip_newlines | truncate: 160 }} {% else %} {{ post.content | truncatewords: 50 | strip_html }} {% endif %}</td>
         </tr>
         {% endif %}
@@ -29,4 +29,3 @@
 
    </tbody>
 </table>
-
diff --git a/_includes/topnav.html b/_includes/topnav.html
index f160361ce2a..807672c2423 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,35 +1,25 @@
 <!-- Navigation -->
-<nav class="navbar navbar-inverse navbar-fixed-top" aria-label="Main">
+<nav class="navbar navbar-expand-xl fixed-top" data-bs-theme="light" aria-label="Main">
     <div class="container topnavlinks">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                <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 navbar-header-group">
             <a class="navbar-brand no-icon" href="{{ site.url }}">
-            <span class="navbar-brand-icon">
-            <img class="navbar-brand-text" src="images/preCICE_text_28px.svg" alt="preCICE"></span>
+                <span class="navbar-brand-icon">
+                    <img class="navbar-brand-text" src="images/preCICE_text_28px.svg" alt="preCICE">
+                </span>
             </a>
+            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-            <ul class="nav navbar-nav navbar-right">
-                <!-- toggle sidebar button -->
-                {% comment %}
-                <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fas fa-toggle-on"></i> Nav</a></li>
-                {% endcomment %}
+            <ul class="nav navbar-nav ms-auto">
                 <!-- entries without drop-downs appear here -->
-
-                {% assign topnav = site.data[page.topnav] %}
-                {% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}
+                {% assign topnav_key = page.topnav | default: 'topnav' %}
+                {% assign topnav = site.data[topnav_key] %}
+                {% assign topnav_dropdowns = topnav.topnav_dropdowns %}
 
                 {% for entry in topnav.topnav %}
                 {% for item in entry.items %}
-                {% comment %}
-                Whenever page.url contains item.url the "active" class is applied, which does not work on sub pages
-                To solve this issue we exploit the association of sections of the website with sidebars, as scoped in _config.yml
-                {% endcomment %}
                 {% assign section_sidebar = item.section | append: '_sidebar' %}
                 {% if item.external_url %}
                 <li><a href="{{item.external_url}}" target="_blank" rel="noopener">{{item.title}}</a></li>
@@ -42,12 +32,13 @@
                 {% endif %}
                 {% endfor %}
                 {% endfor %}
+
                 <!-- entries with drop-downs appear here -->
-                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
+                {% if topnav_dropdowns %}
                 {% for entry in topnav_dropdowns %}
                 {% for folder in entry.folders %}
                 <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
+                    <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">{{ folder.title }}</a>
                     <ul class="dropdown-menu">
                         {% for folderitem in folder.folderitems %}
                         {% if folderitem.external_url %}
@@ -62,40 +53,35 @@
                 </li>
                 {% endfor %}
                 {% endfor %}
+                {% endif %}
 
-                {% if site.feedback_disable == null or site.feedback_disable == false %}
-        			{% comment %}
-                    {% include feedback.html %}
-                    {% endcomment %}
-		        {% endif %}
                 <!--comment out this block if you want to hide search-->
-                <li>
                     <!--start search-->
+                <li class="navbar-search-li">
                     <div id="search-demo-container">
                         <div id="search-input"></div>
                         <div id="search-results"></div>
                         {% include algolia.html %}
                     </div>
-                    <!--end search-->
                 </li>
+                    <!--end search-->
                 <li>
-                    <a class="no-icon nav-external" href="https://precice.discourse.group" target="_blank" rel="noopener noreferrer" data-show-count="false" aria-label="Join the discourse community"><i class="fab fa-discourse"></i></a>
+                    <a class="no-icon nav-external" href="https://precice.discourse.group" target="_blank" rel="noopener noreferrer" aria-label="Join the discourse community"><i class="fab fa-discourse"></i></a>
                 </li>
                 <li>
-                    <a class="no-icon nav-external" href="https://github.com/precice" target="_blank" rel="noopener noreferrer" data-show-count="false" aria-label="Star precice/precice on GitHub"><i class="fab fa-github"></i></a>
+                    <a class="no-icon nav-external" href="https://github.com/precice" target="_blank" rel="noopener noreferrer" aria-label="Star precice/precice on GitHub"><i class="fab fa-github"></i></a>
                 </li>
                 <li>
-                    <a class="no-icon nav-external" href="https://www.linkedin.com/company/precice" target="_blank" rel="noopener noreferrer" data-show-count="false" aria-label="Follow us on LinkedIn"><i class="fab fa-linkedin"></i></a>
+                    <a class="no-icon nav-external" href="https://www.linkedin.com/company/precice" target="_blank" rel="noopener noreferrer" aria-label="Follow us on LinkedIn"><i class="fab fa-linkedin"></i></a>
                 </li>
-                <li>
                     <!-- rel="me" required by Mastodon for verification -->
-                    <a rel="me noopener noreferrer" class="no-icon nav-external" href="https://fosstodon.org/@precice" target="_blank" data-show-count="false" aria-label="Follow us on Mastodon"><i class="fab fa-mastodon"></i></a>
+                <li>
+                    <a rel="me noopener noreferrer" class="no-icon nav-external" href="https://fosstodon.org/@precice" target="_blank" aria-label="Follow us on Mastodon"><i class="fab fa-mastodon"></i></a>
                 </li>
                 <li>
-                    <a class="no-icon nav-external" href="https://www.youtube.com/c/preCICECoupling/" target="_blank" rel="noopener noreferrer" data-show-count="false" aria-label="Subscribe on Youtube"><i class="fab fa-youtube"></i></a>
+                    <a class="no-icon nav-external" href="https://www.youtube.com/c/preCICECoupling/" target="_blank" rel="noopener noreferrer" aria-label="Subscribe on Youtube"><i class="fab fa-youtube"></i></a>
                 </li>
             </ul>
         </div>
-        </div>
-        <!-- /.container -->
+    </div>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
index b272a8d1868..7dabfcca123 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,61 +2,44 @@
 <html lang="en">
 <head>
     {% include head.html %}
-    <script>
-        $(document).ready(function() {
-            // Initialize navgoco with default options
-            $("#mysidebar").navgoco({
-                caretHtml: '',
-                accordion: true,
-                openClass: 'active', // open
-                save: false, // leave false or nav highlighting doesn't work right
-                cookie: {
-                    name: 'navgoco',
-                    expires: false,
-                    path: '/'
-                },
-                slide: {
-                    duration: 400,
-                    easing: 'swing'
-                }
-            });
-
-            $("#collapseAll").click(function(e) {
-                e.preventDefault();
-                $("#mysidebar").navgoco('toggle', false);
-            });
-
-            $("#expandAll").click(function(e) {
-                e.preventDefault();
-                $("#mysidebar").navgoco('toggle', true);
-            });
 
-        });
-
-    </script>
     <script>
-        $(function () {
-            $('[data-toggle="tooltip"]').tooltip()
-        })
-    </script>
-    <script>
-        $(document).ready(function() {
-            $("#tg-sb-link").click(function() {
-                $("#tg-sb-sidebar").toggle();
-                $("#tg-sb-content").toggleClass('col-md-9');
-                $("#tg-sb-content").toggleClass('col-md-12');
-                $("#tg-sb-icon").toggleClass('fa-toggle-on');
-                $("#tg-sb-icon").toggleClass('fa-toggle-off');
-            });
-        });
+    document.addEventListener('DOMContentLoaded', function () {
+      var toggleLink = document.getElementById('tg-sb-link');
+      if (!toggleLink) return;
+      toggleLink.addEventListener('click', function () {
+        var sidebar = document.getElementById('tg-sb-sidebar');
+        var content = document.getElementById('tg-sb-content');
+        var icon = document.getElementById('tg-sb-icon');
+        if (sidebar) {
+          sidebar.hidden = !sidebar.hidden;
+        }
+        if (content) {
+          content.classList.toggle('col-md-9');
+          content.classList.toggle('col-md-12');
+        }
+        if (icon) {
+          icon.classList.toggle('fa-toggle-on');
+          icon.classList.toggle('fa-toggle-off');
+        }
+      });
+    });
     </script>
     <script>
         // wrap tables into a div to make them scrollable on small viewports
         // https://getbootstrap.com/docs/3.4/css/#tables-responsive
-        $(document).ready(function() {
-            $('table').addClass('table');
-            $('table').wrap('<div class="table-responsive"></div>');
-        });
+    document.addEventListener('DOMContentLoaded', function () {
+      document.querySelectorAll('table').forEach(function (table) {
+        table.classList.add('table');
+        if (table.parentElement && table.parentElement.classList.contains('table-responsive')) {
+          return;
+        }
+        var wrapper = document.createElement('div');
+        wrapper.className = 'table-responsive';
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+      });
+    });
     </script>
     {% if page.datatable == true %}
     <!-- Include the standard DataTables bits -->
@@ -68,14 +51,15 @@
          Credit here: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
       -->
     <script>
-      $(document).ready(function(){
-          $('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
-          $('table.display').DataTable( {
-              paging: true,
-              stateSave: true,
-              searching: true
-          });
-       });
+      document.addEventListener('DOMContentLoaded', function () {
+        if (typeof jQuery === 'undefined' || !jQuery.fn.DataTable) return;
+        jQuery('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
+        jQuery('table.display').DataTable({
+          paging: true,
+          stateSave: true,
+          searching: true
+        });
+      });
     </script>
     {% endif %}
 </head>
@@ -85,7 +69,7 @@
           <!-- News banner -->
           {% include news_banner.html onlanding=false %}
     </header>
-    <div class="container page-content" style="margin-bottom:50px">
+    <div class="container page-content mb-5">
         {% unless page.hide_sidebar %}
         <div class="row">
           <div class="col-md-3" id="tg-sb-sidebar">
diff --git a/_layouts/page.html b/_layouts/page.html
index 28c72866680..8b4a3236023 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -9,8 +9,10 @@ <h1 class="post-title-main">{{ page.title }}</h1>
 {% if page.simple_map == true %}
 
 <script>
-    $(document).ready ( function(){
-        $('.box{{page.box_number}}').addClass('active');
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('.box{{page.box_number}}').forEach(function (el) {
+            el.classList.add('active');
+        });
     });
 </script>
 
@@ -19,8 +21,10 @@ <h1 class="post-title-main">{{ page.title }}</h1>
 {% elsif page.complex_map == true %}
 
 <script>
-    $(document).ready ( function(){
-        $('.modalButton{{page.box_number}}').addClass('active');
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('.modalButton{{page.box_number}}').forEach(function (el) {
+            el.classList.add('active');
+        });
     });
 </script>
 
@@ -38,7 +42,7 @@ <h1 class="post-title-main">{{ page.title }}</h1>
     {% endif %}
 
     <div class="row">
-        <div class="col-md-9 col-sm-8">
+        <div class="col-md-9">
           {% unless page.toc == false %}
           <nav aria-label="table of contents">
           {% if page.tocheaders %}
@@ -50,7 +54,7 @@ <h1 class="post-title-main">{{ page.title }}</h1>
           {% endunless %}
         </div>
 
-        <div class="col-md-3 col-sm-4">
+        <div class="col-md-3">
           {% unless page.editme == false %}
           <aside>
             {% if page.github_editme_path %}
@@ -61,15 +65,15 @@ <h1 class="post-title-main">{{ page.title }}</h1>
                 {% assign array = page.github_editme_path | split: "/" %}
                 {% assign repository = array[4] %}
                 {% assign github_file_path = page.path | remove: "imported/" | remove: repository | remove_first: "/" %}
-                <div class="text-right">
-                    <a target="_blank" rel="noopener" href="{{page.github_editme_path}}{{github_file_path}}" class="btn btn-default githubEditButton" role="button"><i class="fab fa-github fa-lg"></i> Edit me</a>
+                <div class="text-end">
+                    <a target="_blank" rel="noopener" href="{{page.github_editme_path}}{{github_file_path}}" class="btn btn-outline-secondary githubEditButton" role="button"><i class="fab fa-github fa-lg"></i> Edit me</a>
                 </div>
             {% elsif site.github_editme_path %}
-                <div class="text-right">
-                    <a target="_blank" rel="noopener" href="{{site.github_editme_path}}{{page.path}}" class="btn btn-default githubEditButton" role="button"><i class="fab fa-github fa-lg"></i> Edit me</a>
+                <div class="text-end">
+                    <a target="_blank" rel="noopener" href="{{site.github_editme_path}}{{page.path}}" class="btn btn-outline-secondary githubEditButton" role="button"><i class="fab fa-github fa-lg"></i> Edit me</a>
                 </div>
             {% endif %}
-            <div class="text-right">
+            <div class="text-end">
               <small>Updated {{ page.last_modified_at | date:  '%d %b %y' -}}</small>
             </div>
           </aside>
@@ -85,7 +89,7 @@ <h1 class="post-title-main">{{ page.title }}</h1>
         {% assign projectTags = site.data.tags.allowed-tags %}
         {% for tag in page.tags %}
         {% if projectTags contains tag %}
-        <a href="{{ "tag_" | append: tag | append: ".html" }}" class="btn btn-default navbar-btn cursorNorm" role="button">{{page.tagName}}{{tag}}</a>
+        <a href="{{ "tag_" | append: tag | append: ".html" }}" class="btn btn-outline-secondary cursorNorm" role="button">{{page.tagName}}{{tag}}</a>
         {% endif %}
         {% endfor %}
     </div>
diff --git a/content/about/about.md b/content/about/about.md
index 3d59baed3dc..09c409ffecb 100644
--- a/content/about/about.md
+++ b/content/about/about.md
@@ -16,7 +16,7 @@ redirect_from:
 preCICE is developed in the groups of [Benjamin Uekermann (Usability and Sustainability of Simulation Software)](https://www.ipvs.uni-stuttgart.de/departments/us3/) and [Miriam Schulte (Simulation of Large Systems)](https://www.ipvs.uni-stuttgart.de/departments/sgs/) at the University of Stuttgart and in the group of [Hans-Joachim Bungartz (Scientific Computing in Computer Science)](https://www.cs.cit.tum.de/en/sccs/home/) at the Technical University of Munich. [Support contracts](community-support-precice.html) are offered through [TTI GmbH](https://www.tti-stuttgart.de/).
 
 <br>
-<img class="img-responsive center-block" src="images/developer/precice-devs.png" alt="preCICE contributors" style="width: 800px; margin: auto;">
+<img class="img-fluid mx-auto d-block img-max-800" src="images/developer/precice-devs.png" alt="preCICE contributors">
 <br>
 
 For the full list of contributors to preCICE please see our [community page](community-contributors).
@@ -61,20 +61,18 @@ The website in its current form was planned and implemented by CH Lorenz Researc
 
 <div class="row">
 {% for item in site.data.funding %}
-<div class="col-md-6">
-        <div class="panel panel-default panel-custom">
-          <div class="panel-heading-precice">
-                <a href="{{ item.url }}" target="_blank" class="no-icon panel-title">
-                <strong>
-            {{ item.title }}
-                </strong>
-                </a>
-          </div>
-          <div class="panel-body">
-            <div class="row">
+<div class="col-md-6 d-flex flex-column">
+        <div class="card panel-custom h-100">
+          <div class="card-body">
+            <a href="{{ item.url }}" target="_blank" class="no-icon card-title">
+              <strong>
+                {{ item.title }}
+              </strong>
+            </a>
+            <div class="row align-items-center">
               <div class="col-sm-4">
                 <a href="{{ item.url }}" target="_blank" class="no-icon">
-                <img src="{{ item.img }}" alt="Logo" class="img-responsive">
+                  <img src="{{ item.img }}" alt="Logo" class="img-fluid">
                 </a>
               </div>
               <div class="col-sm-8">
diff --git a/content/community/workshops/precice-workshop-2025.md b/content/community/workshops/precice-workshop-2025.md
index 4573e59648e..69cecf74a5c 100644
--- a/content/community/workshops/precice-workshop-2025.md
+++ b/content/community/workshops/precice-workshop-2025.md
@@ -367,9 +367,9 @@ Did you know? Many past participants only discovered this workshop via a direct
 
 ## Supporters
 
-<div class="col-md-2 col-flex"><a href="https://www.dfg.de/en" title="DFG, German Research Foundation" class="no-icon"><img src="images/funding/dfg.jpg" alt="DFG logo" style="max-height:50px;"></a></div>
-<div class="col-md-6 col-flex"><a href="https://dtecbw.de/" title="dtec.bw" class="no-icon"><img src="images/events/precice2025/precice2025-logo-dtec.bw.jpg" alt="dtec.bw logo" style="max-height:50px;"></a></div>
-<div class="col-md-2 col-flex"><a href="https://dtecbw.de/home/forschung/hsu/projekt-hpcbw" title="hpc.bw" class="no-icon"><img src="images/events/precice2025/precice2025-logo-hpc-bw.png" alt="hpc.bw logo" style="max-height:50px;"></a></div>
+<div class="col-md-2 d-flex flex-column"><a href="https://www.dfg.de/en" title="DFG, German Research Foundation" class="no-icon"><img src="images/funding/dfg.jpg" alt="DFG logo" style="max-height:50px;"></a></div>
+<div class="col-md-6 d-flex flex-column"><a href="https://dtecbw.de/" title="dtec.bw" class="no-icon"><img src="images/events/precice2025/precice2025-logo-dtec.bw.jpg" alt="dtec.bw logo" style="max-height:50px;"></a></div>
+<div class="col-md-2 d-flex flex-column"><a href="https://dtecbw.de/home/forschung/hsu/projekt-hpcbw" title="hpc.bw" class="no-icon"><img src="images/events/precice2025/precice2025-logo-hpc-bw.png" alt="hpc.bw logo" style="max-height:50px;"></a></div>
 
 <script type="application/ld+json">
     {
diff --git a/content/community/workshops/precice-workshop-organizing.md b/content/community/workshops/precice-workshop-organizing.md
index 3196fb8d49e..ec55e2e3ea2 100644
--- a/content/community/workshops/precice-workshop-organizing.md
+++ b/content/community/workshops/precice-workshop-organizing.md
@@ -12,30 +12,7 @@ In this page, we document common steps and lessons learned, aiming to make onboa
 
 We have also published our experiences and recommendations together with the [ESPResSo](https://espressomd.org/) and [DuMux](https://dumux.org/) teams:
 
-{% for pub in site.publications %}
-{% if pub.title == "Organizing software community workshops: Experiences from three independent simulation software projects" %}
-<div class="row">
-<div class="col-md-10 col-md-offset-1">
-  <div class="panel panel-primary panel-precice">
-    <div class="panel-heading-precice">
-      <strong>{{ pub.title }}</strong>
-    </div>
-    <div class="panel-body">
-      <p>
-        <em>{{ pub.authors }}</em>,
-        {{ pub.journal.name }},
-        Volume {{ pub.journal.volume }},
-        {{ pub.journal.publisher }},
-        {{ pub.year }}.
-      </p>
-      <a href="{{pub.pub-url}}">Publisher's site</a>&nbsp;&nbsp;
-      <a href="assets/{{ pub.bibtex }}">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
-    </div>
-  </div>
-</div>
-</div>
-{% endif %}
-{% endfor %}
+{% include publication_panel.html title="Organizing software community workshops: Experiences from three independent simulation software projects" %}
 
 ## First urgent steps
 
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-defining-mesh-connectivity.md b/content/docs/couple-your-code/step-by-step/couple-your-code-defining-mesh-connectivity.md
index 56cba108bc8..ddda10fef17 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-defining-mesh-connectivity.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-defining-mesh-connectivity.md
@@ -15,11 +15,11 @@ For volume coupling in 2D, mesh connectivity boils down to defining triangles an
 
 All kind of connectivity can be built up directly from vertices. Triangles and quads also allow us to define them using edge IDs.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 void setMeshEdge(precice::string_view meshName, VertexID firstVertexID, VertexID secondVertexID);
@@ -29,7 +29,7 @@ void setMeshTetrahedron(precice::string_view meshName, VertexID firstVertexID, V
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 set_mesh_edge(mesh_name, first_vertex_id, second_vertex_id)
@@ -42,11 +42,11 @@ set_mesh_tetrahedron(mesh_name, first_vertex_id, second_vertex_id, third_vertex_
 </div>
 There are also bulk versions of these methods, which can be easier to handle in some cases:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```cpp
 void setMeshEdges(precice::string_view meshName, precice::span<const VertexID> vertices);
@@ -56,7 +56,7 @@ void setMeshTetrahedra(precice::string_view meshName, precice::span<const Vertex
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 set_mesh_edges(mesh_name, vertices)
@@ -69,18 +69,18 @@ set_mesh_tetrahedra(mesh_name, vertices)
 </div>
 If you do not configure any features in the preCICE configuration that require mesh connectivity, all these API functions are [no-ops](https://en.wikipedia.org/wiki/NOP_(code)). Thus, don't worry about performance. If you need a significant workload to already create this connectivity information in your adapter in the first place, you can also explicitly ask preCICE whether it is required:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-3" data-toggle="tab">C++</a></li>
-    <li><a href="#python-3" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-3">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-3">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-3" markdown="1">
 
 ```cpp
 bool requiresMeshConnectivityFor(precice::string_view meshName);
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-3" markdown="1">
 
 ```python
 requires_mesh_connectivity_for(mesh_name)   
@@ -101,11 +101,11 @@ Quads are only supported since v2.1. For older version, the methods only exist a
 
 The following code shows how mesh connectivity can be defined in our example. For sake of simplification, let's only define two triangles.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-4" data-toggle="tab">C++</a></li>
-    <li><a href="#python-4" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-4">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-4">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-4" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-4" markdown="1">
 
 ```cpp
 /* ... */
@@ -138,7 +138,7 @@ if (precice.requiresMeshConnectivityFor(meshName)) {
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-4" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-4" markdown="1">
 
 ```python
 # We define the unit square in 2D with vertices A, B, C, D
@@ -188,11 +188,11 @@ When iterating over the faces, get the vertex identifiers of defining points.
 For triangular faces, these would be the 3 corner points.
 Then map these Solver IDs to preCICE IDs, and use those to define your connectivity.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-5" data-toggle="tab">C++</a></li>
-    <li><a href="#python-5" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-5">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-5">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-5" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-5" markdown="1">
 
 ```cpp
 Participant participant(...);
@@ -216,7 +216,7 @@ for (auto& tri: solver.triangularFaces) {
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-5" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-5" markdown="1">
 
 ```python
 participant = precice.Participant(...)
@@ -254,11 +254,11 @@ In this case you can save preCICE Vertex IDs as labels directly in the solver ve
 Define the vertices using the preCICE API, then iterate over them and apply the preCICE vertex IDs as labels.
 When iterating over faces, get the preCICE vertex IDs from the point labels, and use those to define your connectivity.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-6" data-toggle="tab">C++</a></li>
-    <li><a href="#python-6" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-6">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-6">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-6" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-6" markdown="1">
 
 ```cpp
 Participant participant(...);
@@ -279,7 +279,7 @@ for (auto& tri: solver.triangularFaces) {
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-6" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-6" markdown="1">
 
 ```python
 participant = precice.Participant(...)
@@ -309,11 +309,11 @@ Hence, a C++ `std::map` without custom comparator, or python `dict` may not be s
 
 An alternative would be to use a spatial index as a data structure to store this information.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-7" data-toggle="tab">C++</a></li>
-    <li><a href="#python-7" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-7">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-7">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-7" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-7" markdown="1">
 
 ```cpp
 Participant participant(...);
@@ -366,7 +366,7 @@ class IDLookup {
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-7" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-7" markdown="1">
 
 ```py
 import rtree
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-gradient-data.md b/content/docs/couple-your-code/step-by-step/couple-your-code-gradient-data.md
index 8c68e13641c..2a78455a62d 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-gradient-data.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-gradient-data.md
@@ -17,11 +17,11 @@ Enable it using `<precice-configuration experimental="true">` and do not conside
 When using `nearest-neighbor-gradient` mapping, we require coupling data and additional gradient data. We have seen in [Step 3](couple-your-code-mesh-and-data-access.html) how to write data to the mesh.
 Now, we will learn how to write gradient data to the mesh. For this purpose, we use the following API method:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 void writeGradientData(
@@ -32,7 +32,7 @@ void writeGradientData(
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 write_gradient_data(mesh_name, data_name, vertex_ids, gradients)
@@ -52,11 +52,11 @@ The values are passed as following:
 
 Let's add gradient data to our example code:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```cpp
 precice::Participant precice("FluidSolver", "precice-config.xml", rank, size); // constructor
@@ -96,7 +96,7 @@ while (not simulationDone()){ // time loop
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 precice = precice.Participant("FluidSolver", "precice-config.xml", rank, size)
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-implicit-coupling.md b/content/docs/couple-your-code/step-by-step/couple-your-code-implicit-coupling.md
index 794f6fe29b6..fb453750d8f 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-implicit-coupling.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-implicit-coupling.md
@@ -7,11 +7,11 @@ summary: "In previous steps, we only considered explicit coupling. We now move o
 
 The main ingredient needed for implicit coupling is move backwards in time. For that, we need a [flux capacitor](https://www.youtube.com/watch?v=VcZe8_RZO8c). Just kidding 😉. What we really need is that your solver can write and read iteration checkpoints. An iteration checkpoint should contain all the information necessary to reload a previous state of your solver. What exactly is needed depends solely on your solver. preCICE tells you when you need to write and read checkpoints. To this end, preCICE uses the following interface:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 bool requiresWritingCheckpoint()
@@ -19,7 +19,7 @@ bool requiresReadingCheckpoint()
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 requires_writing_checkpoint()
@@ -35,11 +35,11 @@ These functions perform double duty:
 
 Let's extend our example code to also handle implicit coupling.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```cpp
 turnOnSolver(); //e.g. setup and partition mesh
@@ -54,7 +54,7 @@ double dt; // actual time step size
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 turn_on_solver() # eg: setup and partition mesh
@@ -67,11 +67,11 @@ precice = precice.Participant("FluidSolver", "precice-config.xml", rank, size) #
 </div>
 <!-- Long code blocks need to be split. See https://github.com/precice/precice.github.io/commit/74e377cece4a221e00b5c56b1db3942ec70a6272 -->
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-3" data-toggle="tab">C++</a></li>
-    <li><a href="#python-3" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-3">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-3">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-3" markdown="1">
 
 ```cpp
 precice.initialize();
@@ -100,7 +100,7 @@ turnOffSolver();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-3" markdown="1">
 
 ```python
 precice.initialize()
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-initializing-coupling-data.md b/content/docs/couple-your-code/step-by-step/couple-your-code-initializing-coupling-data.md
index 0c153722f67..ffbfcc9f43a 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-initializing-coupling-data.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-initializing-coupling-data.md
@@ -7,18 +7,18 @@ summary: "As default values, preCICE assumes that all coupling variables are zer
 
 By default preCICE assumes that all coupling variables are zero initially. If you want to provide non-zero initial values, you can write data before calling `initialize()`. This data will then be used as initial data. To check whether initial data is required, you can use the following function:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 bool requiresInitialData()
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 requires_initial_data()
@@ -28,11 +28,11 @@ requires_initial_data()
 </div>
 To support data initialization, we extend our example as follows:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```cpp
 
@@ -50,7 +50,7 @@ while (precice.isCouplingOngoing()){
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 [...]
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-mesh-and-data-access.md b/content/docs/couple-your-code/step-by-step/couple-your-code-mesh-and-data-access.md
index 780b8f17b91..d296b91f7eb 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-mesh-and-data-access.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-mesh-and-data-access.md
@@ -10,11 +10,11 @@ For coupling, we need coupling meshes. Let's see how we can tell preCICE about o
 Coupling meshes and associated data fields are defined in the preCICE configuration file, which you probably already know from the tutorials. The concrete values, however, you can access with the API:
 
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 VertexID setMeshVertex(
@@ -28,7 +28,7 @@ void setMeshVertices(
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 vertex_id = set_mesh_vertex(mesh_name, position)
@@ -42,11 +42,11 @@ vertex_ids = set_mesh_vertices(mesh_name, positions)
 
 To write data to the coupling data structure the following API function is needed:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```cpp
 void Participant::writeData(
@@ -57,7 +57,7 @@ void Participant::writeData(
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 write_data(mesh_name, data_name, vertex_ids, values)
@@ -67,11 +67,11 @@ write_data(mesh_name, data_name, vertex_ids, values)
 </div>
 Similarly, there is a `readData` API function for reading coupling data:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-3" data-toggle="tab">C++</a></li>
-    <li><a href="#python-3" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-3">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-3">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-3" markdown="1">
 
 ```cpp
 void readData(
@@ -83,7 +83,7 @@ void readData(
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-3" markdown="1">
 
 ```python
 values = read_data(mesh_name, data_name, vertex_ids, relative_read_time)
@@ -95,11 +95,11 @@ The relative read time can be anything from the current point in time (`0`) to t
 
 Let's define coupling meshes and access coupling data in our example code:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-4" data-toggle="tab">C++</a></li>
-    <li><a href="#python-4" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-4">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-4">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-4" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-4" markdown="1">
 
 ```cpp
 turnOnSolver(); //e.g. setup and partition mesh
@@ -141,7 +141,7 @@ turnOffSolver();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-4" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-4" markdown="1">
 
 ```python
 turn_on_solver() # e.g. setup and partition mesh
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-preparing-your-solver.md b/content/docs/couple-your-code/step-by-step/couple-your-code-preparing-your-solver.md
index 749387e1ab1..b6aaefc7aef 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-preparing-your-solver.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-preparing-your-solver.md
@@ -8,11 +8,11 @@ summary: "If you want to couple your own code you need to properly understand it
 Let's say you want to prepare a fluid solver for fluid-structure interaction and that your code looks like this:
 
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp" data-toggle="tab">C++</a></li>
-    <li><a href="#python" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python">Python</a></li>
 </ul>
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane active" id="cpp" markdown="1">
+  <div role="tabpanel" class="tab-pane fade show active" id="cpp" markdown="1">
 
 ```cpp
 turnOnSolver(); //e.g. setup and partition mesh
@@ -29,7 +29,7 @@ turnOffSolver();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python" markdown="1">
 
 ```python
 turn_on_solver() #e.g. setup and partition mesh
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-steering-methods.md b/content/docs/couple-your-code/step-by-step/couple-your-code-steering-methods.md
index f74a745a445..4e8d9c0916f 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-steering-methods.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-steering-methods.md
@@ -10,11 +10,11 @@ As a first preparation step, you need to include the preCICE library headers. In
 The handle to the preCICE API is the class `precice::Participant`. Its constructor requires the participant's name, the preCICE configuration file's name and the `rank` and `size` of the current thread. Once the basic preCICE interface is set up, we can _steer_ the behaviour of preCICE. For that we need the following functions:
 
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+  <div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 Participant( String participantName, String configurationFileName, int rank, int size );
@@ -24,7 +24,7 @@ void finalize();
 ```
 
   </div>
-  <div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+  <div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 participant = Participant(participant_name, configuration_file_name, rank, size)
@@ -43,18 +43,18 @@ What do they do?
 
 The following function allows us to query the maximum allowed time step size from preCICE:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+  <div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```cpp
 double getMaxTimeStepSize();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 get_max_time_step_size()
@@ -65,11 +65,11 @@ get_max_time_step_size()
 
 But let's ignore the details of time step sizes for the moment. This will be the topic of [Step 5](couple-your-code-time-step-sizes.html). We can now extend the code of our fluid solver:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-3" data-toggle="tab">C++</a></li>
-    <li><a href="#python-3" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-3">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-3">Python</a></li>
 </ul>
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane active" id="cpp-3" markdown="1">
+  <div role="tabpanel" class="tab-pane fade show active" id="cpp-3" markdown="1">
 
 ```cpp
 #include <precice/precice.hpp>
@@ -96,7 +96,7 @@ turnOffSolver();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-3" markdown="1">
 
 ```python
 import precice
diff --git a/content/docs/couple-your-code/step-by-step/couple-your-code-time-step-sizes.md b/content/docs/couple-your-code/step-by-step/couple-your-code-time-step-sizes.md
index 869fc824eac..e559877c5ef 100644
--- a/content/docs/couple-your-code/step-by-step/couple-your-code-time-step-sizes.md
+++ b/content/docs/couple-your-code/step-by-step/couple-your-code-time-step-sizes.md
@@ -9,11 +9,11 @@ redirect_from:
 
 In previous steps, you have already seen that there are quite some things going on with time step sizes. Let us now have a look at what is actually happening.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-1" data-toggle="tab">C++</a></li>
-    <li><a href="#python-1" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-1">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-1">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-1" markdown="1">
 
 ```cpp
 ...
@@ -33,7 +33,7 @@ while (not simulationDone()){ // time loop
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-1" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-1" markdown="1">
 
 ```python
 ...
@@ -78,18 +78,18 @@ The figure below illustrates this procedure (k is the subcycling index, the dash
 * After each time step, both participants tell preCICE which time step size `dt` they just used by calling `precice.advance(dt)`. This way, preCICE can keep track of the total time. `preciceDt` is the remainder time to the next window:
 
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-2" data-toggle="tab">C++</a></li>
-    <li><a href="#python-2" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-2">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-2">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-2" markdown="1">
 
 ```c++
 preciceDt = precice.getMaxTimeStepSize();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-2" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-2" markdown="1">
 
 ```python
 precice_dt = precice.get_max_time_step_size()
@@ -99,18 +99,18 @@ precice_dt = precice.get_max_time_step_size()
 </div>
 * Both participants compute their next (adaptive) time step size. It can be larger or smaller than the remainder `preciceDt`.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-3" data-toggle="tab">C++</a></li>
-    <li><a href="#python-3" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-3">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-3">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-3" markdown="1">
 
 ```c++
 solverDt = beginTimeStep();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-3" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-3" markdown="1">
 
 ```python
 solver_dt = begin_time_step()
@@ -122,18 +122,18 @@ If it is larger, the remainder `preciceDt` is used instead (orange participant,
 If it is smaller, the participant's time step size `solverDt` can be used (blue participant, dark blue is used).
 These two cases are reflected in:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-4" data-toggle="tab">C++</a></li>
-    <li><a href="#python-4" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-4">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-4">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-4" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-4" markdown="1">
 
 ```c++
 dt = min(preciceDt, solverDt)
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-4" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-4" markdown="1">
 
 ```python
 dt = min(precice_dt, solver_dt)
@@ -162,11 +162,11 @@ Such small time steps can lead to problems in the solver.
 One strategy to avoid this situation is to extend the last time step of a time window preventing problematic time step sizes.
 The following example extends the time step negotiation between the solver and preCICE to ensure the next time step size `preciceDt - solverDt` stays over some threshold `minDt`.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-5" data-toggle="tab">C++</a></li>
-    <li><a href="#python-5" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-5">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-5">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-5" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-5" markdown="1">
 
 ```cpp
 ...
@@ -193,7 +193,7 @@ precice.advance(dt);
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-5" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-5" markdown="1">
 
 ```python
 ...
@@ -234,18 +234,18 @@ The `first` participant sets the time step size. This requires that the `second`
 * In `advance`, this time step size is given to preCICE (Step 2).
 
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-6" data-toggle="tab">C++</a></li>
-    <li><a href="#python-6" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-6">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-6">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-6" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-6" markdown="1">
 
 ```c++
 precice.advance(dt);
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-6" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-6" markdown="1">
 
 ```python
 precice.advance(dt)
@@ -255,18 +255,18 @@ precice.advance(dt)
 </div>
 * preCICE has tracked the time level of the orange participant A and returns the remainder to reach B's time step size.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-7" data-toggle="tab">C++</a></li>
-    <li><a href="#python-7" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-7">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-7">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-7" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-7" markdown="1">
 
 ```c++
 preciceDt = precice.getMaxTimeStepSize();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-7" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-7" markdown="1">
 
 ```python
 precice_dt = precice.get_max_time_step_size()
@@ -276,18 +276,18 @@ precice_dt = precice.get_max_time_step_size()
 </div>
 * A computes its next (adaptive) time step size. It can now be larger or smaller than the remainder.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-8" data-toggle="tab">C++</a></li>
-    <li><a href="#python-8" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-8">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-8">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-8" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-8" markdown="1">
 
 ```c++
 solverDt = beginTimeStep();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-8" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-8" markdown="1">
 
 ```python
 solver_dt = begin_time_step()
@@ -300,18 +300,18 @@ If it is larger, the remainder `preciceDt` is used instead (the case below in St
 If it is smaller, the participant's time step size `solverDt` can be used (not visualized).
 These two cases are again reflected in the formula:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-9" data-toggle="tab">C++</a></li>
-    <li><a href="#python-9" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-9">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-9">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-9" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-9" markdown="1">
 
 ```c++
 dt = min(preciceDt, solverDt);
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-9" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-9" markdown="1">
 
 ```python
 dt = min(precice_dt, solver_dt)
@@ -334,18 +334,18 @@ You never need to alter your code if you want to switch the first and second par
 
 One last thing about time. There is also a helper function in preCICE that allows you to steer the end of a coupled simulation:
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-10" data-toggle="tab">C++</a></li>
-    <li><a href="#python-10" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-10">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-10">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-10" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-10" markdown="1">
 
 ```c++
 bool isCouplingOngoing();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-10" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-10" markdown="1">
 
 ```python
 is_ongoing = is_coupling_ongoing()
@@ -356,11 +356,11 @@ is_ongoing = is_coupling_ongoing()
 
 This functions looks at `max-time-windows` and `max-time` as defined in the preCICE configuration and knows when it is time to go. Then, you should call `finalize`. It replaces your `simulationDone()`.
 <ul id="apiTabs" class="nav nav-tabs">
-    <li class="active"><a href="#cpp-11" data-toggle="tab">C++</a></li>
-    <li><a href="#python-11" data-toggle="tab">Python</a></li>
+    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" role="tab" href="#cpp-11">C++</a></li>
+    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#python-11">Python</a></li>
 </ul>
 <div class="tab-content">
-<div role="tabpanel" class="tab-pane active" id="cpp-11" markdown="1">
+<div role="tabpanel" class="tab-pane fade show active" id="cpp-11" markdown="1">
 
 ```c++
 while (precice.isCouplingOngoing()){ // time loop
@@ -370,7 +370,7 @@ precice.finalize();
 ```
 
 </div>
-<div role="tabpanel" class="tab-pane" id="python-11" markdown="1">
+<div role="tabpanel" class="tab-pane fade" id="python-11" markdown="1">
 
 ```python
 while precice.is_coupling_ongoing(): # time loop
diff --git a/content/docs/fundamentals/fundamentals-literature-guide.md b/content/docs/fundamentals/fundamentals-literature-guide.md
index ce6a726c2b5..eba4558a625 100644
--- a/content/docs/fundamentals/fundamentals-literature-guide.md
+++ b/content/docs/fundamentals/fundamentals-literature-guide.md
@@ -20,30 +20,8 @@ Even further, please cite all components you are using, next to the latest refer
 
 Talking about preCICE, at any level? Then, read and cite the latest preCICE reference paper:
 
-<!-- Do you want to add a new publication? Careful where you are copying from. Depending on the type, every publication renders different fields.  -->
-{% for pub in site.publications %}
-{% if pub.title == "preCICE v2: A sustainable and user-friendly coupling library [version 2; peer review: 2 approved]" %}
-<div class="row">
-<div class="col-md-10 col-md-offset-1">
-  <div class="panel panel-primary panel-precice">
-    <div class="panel-heading-precice">
-      <strong>{{ pub.title }}</strong>
-    </div>
-    <div class="panel-body">
-      <p>
-        <em>{{ pub.authors }}</em>,
-        {{ pub.journal.name }},
-        {{ pub.year }},
-        {{ pub.journal.volume }}:{{ pub.journal.issue }}.
-      </p>
-      <a href="{{pub.pub-url}}">Publisher's site</a>&nbsp;&nbsp;
-      <a href="assets/{{ pub.bibtex }}">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
-    </div>
-  </div>
-</div>
-</div>
-{% endif %}
-{% endfor %}
+<!-- Do you want to add a new publication? Use {% include publication_panel.html title="..." %} -->
+{% include publication_panel.html title="preCICE v2: A sustainable and user-friendly coupling library [version 2; peer review: 2 approved]" %}
 
 Talking specifically about preCICE v1? Then keep citing the [preCICE v1 reference paper](https://www.sciencedirect.com/science/article/pii/S0045793016300974).
 
@@ -51,81 +29,12 @@ Talking specifically about preCICE v1? Then keep citing the [preCICE v1 referenc
 
 Are you using any of the adapters? Then, please also read and cite the respective references. The following adapters currently have reference papers:
 
-{% for pub in site.publications %}
-{% if pub.title == "OpenFOAM-preCICE: Coupling OpenFOAM with External Solvers for Multi-Physics Simulations" %}
-<div class="row">
-<div class="col-md-10 col-md-offset-1">
-  <div class="panel panel-primary panel-precice">
-    <div class="panel-heading-precice">
-      <strong>{{ pub.title }}</strong>
-    </div>
-    <div class="panel-body">
-      <p>
-        <em>{{ pub.authors }}</em>,
-        {{ pub.journal.name }},
-        Volume {{ pub.journal.volume }},
-        {{ pub.year }}.
-      </p>
-      <a href="https://www.doi.org/{{pub.doi}}">Publisher's site</a>&nbsp;&nbsp;
-      <a href="assets/{{ pub.bibtex }}">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
-    </div>
-  </div>
-</div>
-</div>
-{% endif %}
-{% endfor %}
-
-{% for pub in site.publications %}
-{% if pub.title == "FEniCS–preCICE: Coupling FEniCS to other simulation software" %}
-<div class="row">
-<div class="col-md-10 col-md-offset-1">
-  <div class="panel panel-primary panel-precice">
-    <div class="panel-heading-precice">
-      <strong>{{ pub.title }}</strong>
-    </div>
-    <div class="panel-body">
-      <p>
-        <em>{{ pub.authors }}</em>,
-        {{ pub.journal.name }},
-        Volume {{ pub.journal.volume }},
-        {{ pub.journal.publisher }},
-        {{ pub.year }}.
-      </p>
-      <a href="https://www.doi.org/{{pub.doi}}">Publisher's site</a>&nbsp;&nbsp;
-      <a href="assets/{{ pub.bibtex }}">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
-    </div>
-  </div>
-</div>
-</div>
-{% endif %}
-{% endfor %}
+{% include publication_panel.html title="OpenFOAM-preCICE: Coupling OpenFOAM with External Solvers for Multi-Physics Simulations" %}
+{% include publication_panel.html title="FEniCS–preCICE: Coupling FEniCS to other simulation software" %}
 
 For the CalculiX, SU2, and code_aster adapters, as well as for the concept of an adapter, please read and cite this overview paper:
 
-{% for pub in site.publications %}
-{% if pub.title == "Official preCICE Adapters for Standard Open-Source Solvers" %}
-<div class="row">
-<div class="col-md-10 col-md-offset-1">
-  <div class="panel panel-primary panel-precice">
-    <div class="panel-heading-precice">
-      <strong>{{ pub.title }}</strong>
-    </div>
-    <div class="panel-body">
-      <p>
-        <em>{{ pub.authors }}</em>,
-        {{ pub.journal.name }},
-        Volume {{ pub.journal.volume }},
-        {{ pub.journal.publisher }},
-        {{ pub.year }}.
-      </p>
-      <a href="{{pub.pub-url}}">Publisher's site</a>&nbsp;&nbsp;
-      <a href="assets/{{ pub.bibtex }}">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
-    </div>
-  </div>
-</div>
-</div>
-{% endif %}
-{% endfor %}
+{% include publication_panel.html title="Official preCICE Adapters for Standard Open-Source Solvers" %}
 
 ### Reproducibility
 
diff --git a/content/docs/fundamentals/fundamentals-roadmap.md b/content/docs/fundamentals/fundamentals-roadmap.md
index 953b34eb661..cb7bde66e90 100644
--- a/content/docs/fundamentals/fundamentals-roadmap.md
+++ b/content/docs/fundamentals/fundamentals-roadmap.md
@@ -54,7 +54,7 @@ meaning that the respective API or configuration might change in a minor release
 This is a list of changes that are present on develop and ready for the [next release](dev-docs-release-strategy.html#release-schedule).
 
 <div id="changelog">
-  <button id="loadBtn" class="btn btn-default">Click to load</button>
+  <button id="loadBtn" class="btn btn-secondary">Click to load</button>
   <span id="spinner" style="text-align:center; display:none"><i class="fa fa-spinner fa-spin fa-3x"></i></span></div>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
diff --git a/content/index.html b/content/index.html
index 39aa998a38f..2e472fac00b 100644
--- a/content/index.html
+++ b/content/index.html
@@ -5,6 +5,7 @@
 toc: false
 hide_sidebar: true
 layout: landing_page
+topnav: topnav
 ---
 
 <!-- Lead stage -->
@@ -12,21 +13,17 @@
 <div class="container">
   <div class="section">
 
-    <div class="row">
-      <div class="col-lg-12">
-        <h1 class="title no-anchor">Welcome to <img src="images/preCICE_logo_42px.svg" alt="preCICE"></h1>
-        <h2 class="subtitle no-anchor">The coupling library for partitioned multi-physics simulations.</h2>
-        <div class="action-button-container">
-          <span id="github-button">
-            <a href="https://github.com/precice/precice/" class="btn btn-default no-icon action-button" role="button">Star on Github &nbsp;<i class="fas fa-star"></i></a>
-          </span>
-          <span id="latest-release">
-            <!-- This will be replaced by the handleResponse() when the page is loaded -->
-            <a href="https://github.com/precice/precice/releases/tag/v{{ site.precice_version }}" class="btn btn-secondary no-icon action-button" role="button">Latest v{{ site.precice_version }} &nbsp;<i class="fas fa-download"></i></a>
-          </span>
-          <a href="/quickstart.html" class="btn btn-primary no-icon action-button" role="button">Get started &nbsp;<i class="fas fa-chevron-right"></i></a>
-        </div>
-      </div>
+    <h1 class="title no-anchor">Welcome to <img src="images/preCICE_logo_42px.svg" alt="preCICE"></h1>
+    <h2 class="subtitle no-anchor">The coupling library for partitioned multi-physics simulations.</h2>
+    <div class="action-button-container">
+      <span id="github-button">
+        <a href="https://github.com/precice/precice/" class="btn btn-secondary no-icon action-button" role="button">Star on Github &nbsp;<i class="fas fa-star"></i></a>
+      </span>
+      <span id="latest-release">
+        <!-- This will be replaced by the handleResponse() when the page is loaded -->
+        <a href="https://github.com/precice/precice/releases/tag/v{{ site.precice_version }}" class="btn btn-secondary no-icon action-button" role="button">Latest v{{ site.precice_version }} &nbsp;<i class="fas fa-download"></i></a>
+      </span>
+      <a href="/quickstart.html" class="btn btn-primary no-icon action-button" role="button">Get started &nbsp;<i class="fas fa-chevron-right"></i></a>
     </div>
 
     <div class="row">
@@ -37,13 +34,13 @@ <h2 class="subtitle no-anchor">The coupling library for partitioned multi-physic
         <p>
           Partitioned means that <strong>preCICE couples existing programs/solvers</strong> capable of simulating a subpart of the complete physics involved in a simulation. This allows for the high flexibility that is needed to keep a decent time-to-solution for complex coupled problems.
         </p>
-        <p class="no-margin">
+        <p class="m-0">
           The software offers convenient methods for transient equation coupling, communication, time interpolation, and data mapping.
         </p>
       </div>
       <div class="col-md-6">
-        <img class="img-responsive col-xs-12" src="images/lead-image-precice.svg" alt="visualisation of how preCICE couples different solvers">
-        <!-- https://stackoverflow.com/questions/21943108/bootstrap-3-img-responsive-images-are-not-responsive-inside-fieldset-in-firefox -->
+        <img class="img-fluid col-12" src="images/lead-image-precice.svg" alt="visualisation of how preCICE couples different solvers">
+        <!-- https://stackoverflow.com/questions/21943108/bootstrap-3-img-fluid-images-are-not-responsive-inside-fieldset-in-firefox -->
       </div>
     </div>
 
@@ -55,22 +52,19 @@ <h2 class="subtitle no-anchor">The coupling library for partitioned multi-physic
   <div class="container">
     <h2 class="section-header text-center">Latest news</h2>
 
-    <div id="news-container" class="row equal">
+    <div id="news-container" class="row">
       <!-- News cards will be inserted dynamically -->
       <p id="loading-news">Loading latest news...</p>
     </div>
 
-    
-    <div class="row" style="margin-top: 25px;">
-      <div class="col-lg-12 text-center">
-        <a href="https://precice.discourse.group/c/news/5"
-           class="btn btn-primary no-icon"
-           role="button"
-           target="_blank"
-           rel="noopener noreferrer">
-          More news &nbsp;<i class="fas fa-chevron-right"></i>
-        </a>
-      </div>
+    <div class="text-center mt-4">
+      <a href="https://precice.discourse.group/c/news/5"
+         class="btn btn-primary no-icon"
+         role="button"
+         target="_blank"
+         rel="noopener noreferrer">
+        More news &nbsp;<i class="fas fa-chevron-right"></i>
+      </a>
     </div>
 
   </div>
@@ -80,22 +74,18 @@ <h2 class="section-header text-center">Latest news</h2>
 <div class="container">
   <div class="section">
 
-    <div class="row">
-      <div class="col-lg-12">
-        <h2 class="section-header">Prepared for the next generation of multi-physics simulations</h2>
-      </div>
-    </div>
+    <h2 class="section-header">Prepared for the next generation of multi-physics simulations</h2>
 
-    <div class="row equal">
-      <div class="col-md-3 col-sm-6 col-flex">
+    <div class="row">
+      <div class="col-md-3 col-sm-6 d-flex flex-column">
         <div class="image-holder usp">
-          <img class="img-responsive center-block" src="images/usp/usp-minimal.svg" alt="non-invasive integration">
+          <img class="img-fluid mx-auto d-block" src="images/usp/usp-minimal.svg" alt="non-invasive integration">
         </div>
-        <div class="panel panel-primary panel-precice usp">
-          <div class="panel-heading-precice text-left">
+        <div class="card border-primary panel-precice usp">
+          <div class="card-header-precice text-start">
             <strong>Minimally invasive integration</strong>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <ul class="usp">
               <li class="usp">Elegant library approach</li>
               <li class="usp">High-level API in C++, C, Fortran, Python, Matlab</li>
@@ -104,15 +94,15 @@ <h2 class="section-header">Prepared for the next generation of multi-physics sim
           </div>
         </div>
       </div>
-      <div class="col-md-3 col-sm-6 col-flex">
+      <div class="col-md-3 col-sm-6 d-flex flex-column">
         <div class="image-holder usp">
-          <img class="img-responsive center-block" src="images/usp/usp-arbitrary.svg" alt="Coupling of programs">
+          <img class="img-fluid mx-auto d-block" src="images/usp/usp-arbitrary.svg" alt="Coupling of programs">
         </div>
-        <div class="panel panel-primary panel-precice usp">
-          <div class="panel-heading-precice text-left">
+        <div class="card border-primary panel-precice usp">
+          <div class="card-header-precice text-start">
             <strong>Coupling of arbitrary many programs</strong>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <ul class="usp">
               <li class="usp">Arbitrary combinations of strong and weak interactions</li>
               <li class="usp">Arbitrary many solvers</li>
@@ -121,15 +111,15 @@ <h2 class="section-header">Prepared for the next generation of multi-physics sim
           </div>
         </div>
       </div>
-      <div class="col-md-3 col-sm-6 col-flex">
+      <div class="col-md-3 col-sm-6 d-flex flex-column">
         <div class="image-holder usp">
-          <img class="img-responsive center-block" src="images/usp/usp-numerics.svg" alt="numerical methods">
+          <img class="img-fluid mx-auto d-block" src="images/usp/usp-numerics.svg" alt="numerical methods">
         </div>
-        <div class="panel panel-primary panel-precice usp">
-          <div class="panel-heading-precice text-left">
+        <div class="card border-primary panel-precice usp">
+          <div class="card-header-precice text-start">
             <strong>State-of-the-art numerical methods</strong>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <ul class="usp">
               <li class="usp">Robust quasi-Newton acceleration</li>
               <li class="usp">Radial-basis function data mapping</li>
@@ -138,15 +128,15 @@ <h2 class="section-header">Prepared for the next generation of multi-physics sim
           </div>
         </div>
       </div>
-      <div class="col-md-3 col-sm-6 col-flex">
+      <div class="col-md-3 col-sm-6 d-flex flex-column">
         <div class="image-holder usp">
-          <img class="img-responsive center-block" src="images/usp/usp-scalability.svg" alt="scalability">
+          <img class="img-fluid mx-auto d-block" src="images/usp/usp-scalability.svg" alt="scalability">
         </div>
-        <div class="panel panel-primary panel-precice usp">
-          <div class="panel-heading-precice text-left">
+        <div class="card border-primary panel-precice usp">
+          <div class="card-header-precice text-start">
             <strong>Scalability up to complete supercomputers</strong>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <ul class="usp">
               <li class="usp">Pure peer-to-peer approach</li>
               <li class="usp">Support of heterogenous hardware (CPU/GPU)</li>
@@ -166,55 +156,67 @@ <h2 class="section-header">Prepared for the next generation of multi-physics sim
 <div class="container">
   <div class="section">
 
-    <div class="row">
-      <div class="col-lg-12">
-        <h2 class="section-header">Ready-to-use with your favourite open-source solver</h2>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-lg-12">
-        <p>Several free and proprietary codes are currently coupled with preCICE. Pick one of our official adapters below or check out our <a href="community-projects.html">community projects</a>.</p>
-      </div>
-    </div>
+    <h2 class="section-header">Ready-to-use with your favourite open-source solver</h2>
+    <p class="mb-4">Several free and proprietary codes are currently coupled with preCICE. Pick one of our official adapters below or check out our <a href="community-projects.html">community projects</a>.</p>
 
-    <div class="row equal">
-      <div class="col-md-2 col-md-4 col-xs-6 col-flex">
-        <a class="adapter" href="adapter-openfoam-overview.html"><div class="panel panel-primary panel-body full-height text-center">
-          <img class="img-responsive adapter center-block" src="images/logo/logo-openfoam.png" alt="openFOAM logo" title="Couple with openFOAM">
-          <p>OpenFOAM &nbsp;<i class="fas fa-chevron-right"></i></p>
-        </div></a>
+    <div class="row g-3 align-items-stretch adapters-row">
+      <div class="col-6 col-lg-2 d-flex">
+        <a class="adapter w-100" href="adapter-openfoam-overview.html">
+          <div class="card border-primary adapter-card h-100 text-center">
+            <div class="card-body d-flex flex-column justify-content-between">
+              <img class="img-fluid adapter mx-auto" src="images/logo/logo-openfoam.png" alt="openFOAM logo" title="Couple with openFOAM">
+              <p class="adapter-label mb-0">OpenFOAM &nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
+            </div>
+          </div>
+        </a>
       </div>
-      <div class="col-md-2 col-md-4 col-xs-6 col-flex">
-        <a class="adapter" href="adapter-calculix-overview.html"><div class="panel panel-primary panel-body full-height text-center">
-          <img class="img-responsive adapter center-block" src="images/logo/logo-calculix.png" alt="CalculiX logo" title="Couple with CalculiX">
-          <p>CalculiX &nbsp;<i class="fas fa-chevron-right"></i></p>
-        </div></a>
+      <div class="col-6 col-lg-2 d-flex">
+        <a class="adapter w-100" href="adapter-calculix-overview.html">
+          <div class="card border-primary adapter-card h-100 text-center">
+            <div class="card-body d-flex flex-column justify-content-between">
+              <img class="img-fluid adapter mx-auto" src="images/logo/logo-calculix.png" alt="CalculiX logo" title="Couple with CalculiX">
+              <p class="adapter-label mb-0">CalculiX &nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
+            </div>
+          </div>
+        </a>
       </div>
-      <div class="col-md-2 col-md-4 col-xs-6 col-flex">
-        <a class="adapter" href="adapter-fenics.html"><div class="panel panel-primary panel-body full-height text-center">
-          <img class="img-responsive adapter center-block" src="images/logo/logo-fenics.png" alt="FEniCS logo" title="Couple with FEniCS">
-          <p>FEniCS &nbsp;<i class="fas fa-chevron-right"></i></p>
-        </div></a>
+      <div class="col-6 col-lg-2 d-flex">
+        <a class="adapter w-100" href="adapter-fenics.html">
+          <div class="card border-primary adapter-card h-100 text-center">
+            <div class="card-body d-flex flex-column justify-content-between">
+              <img class="img-fluid adapter mx-auto" src="images/logo/logo-fenics.png" alt="FEniCS logo" title="Couple with FEniCS">
+              <p class="adapter-label mb-0">FEniCS &nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
+            </div>
+          </div>
+        </a>
       </div>
-      <div class="col-md-2 col-md-4 col-xs-6 col-flex">
-        <a class="adapter" href="adapter-dealii-overview.html"><div class="panel panel-primary panel-body full-height text-center">
-          <img class="img-responsive adapter center-block" src="images/logo/logo-dealii.png" alt="deal.II logo" title="Couple with deal.II">
-          <p>deal.II &nbsp;<i class="fas fa-chevron-right"></i></p>
-        </div></a>
+      <div class="col-6 col-lg-2 d-flex">
+        <a class="adapter w-100" href="adapter-dealii-overview.html">
+          <div class="card border-primary adapter-card h-100 text-center">
+            <div class="card-body d-flex flex-column justify-content-between">
+              <img class="img-fluid adapter mx-auto" src="images/logo/logo-dealii.png" alt="deal.II logo" title="Couple with deal.II">
+              <p class="adapter-label mb-0">deal.II &nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
+            </div>
+          </div>
+        </a>
       </div>
-      <div class="col-md-2 col-md-4 col-xs-6 col-flex">
-        <a class="adapter" href="adapter-nutils.html"><div class="panel panel-primary panel-body full-height text-center">
-          <img class="img-responsive adapter center-block" src="images/logo/logo-nutils.png" alt="Nutils logo" title="Couple with Nutils">
-          <p>Nutils &nbsp;<i class="fas fa-chevron-right"></i></p>
-        </div></a>
+      <div class="col-6 col-lg-2 d-flex">
+        <a class="adapter w-100" href="adapter-nutils.html">
+          <div class="card border-primary adapter-card h-100 text-center">
+            <div class="card-body d-flex flex-column justify-content-between">
+              <img class="img-fluid adapter mx-auto" src="images/logo/logo-nutils.png" alt="Nutils logo" title="Couple with Nutils">
+              <p class="adapter-label mb-0">Nutils &nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
+            </div>
+          </div>
+        </a>
       </div>
-      <div class="col-md-2 col-md-4 col-xs-6 text-center">
+      <div class="col-6 col-lg-2 d-flex flex-column align-items-center justify-content-center text-center adapters-more-col">
         <a class="adapter" href="adapters-overview.html">
-          <div class="img-equivalent vertical-align center-block">
-            <i class="fas fa-chevron-right fa-4x blue center-block"></i>
+          <div class="img-equivalent d-flex align-items-center justify-content-center">
+            <i class="fas fa-chevron-right fa-4x blue" aria-hidden="true"></i>
           </div>
         </a>
-        <a href="adapters-overview.html" class="adapter" role="button">All adapters &nbsp;<i class="fas fa-chevron-right"></i></a>
+        <a href="adapters-overview.html" class="adapter adapters-more-link" role="button">All adapters &nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></a>
       </div>
     </div>
 
@@ -228,17 +230,13 @@ <h2 class="section-header">Ready-to-use with your favourite open-source solver</
   <div class="container">
     <div class="section">
 
-      <div class="row">
-        <div class="col-lg-12">
-          <h2 class="section-header">What our community is saying</h2>
-        </div>
-      </div>
+      <h2 class="section-header">What our community is saying</h2>
 
-      <div class="row equal">
-        <div class="col-md-4 col-flex">
-          <div class="panel panel-primary panel-body full-height">
+      <div class="row">
+        <div class="col-md-4 d-flex flex-column">
+          <div class="card border-primary card-body full-height">
             <p class="quote"><a href="community-projects.html#evaluation-of-heart-balve-biomechanics"><i class="fas fa-quote-left"></i>We are using preCICE as it can handle numerical simulations of large sizes with ease as opposed to previous in-house couplers.<i class="fas fa-quote-right"></i></a></p>
-            <div class="vertical-align">
+            <div class="d-flex align-items-center">
               <img class="testimonial" src="images/testimonial_kyle_square.jpg" alt="simulation biomechanics">
               <div>
                 <p><strong>—Kyle Davis</strong></p>
@@ -247,10 +245,10 @@ <h2 class="section-header">What our community is saying</h2>
             </div>
           </div>
         </div>
-        <div class="col-md-4 col-flex">
-          <div class="panel panel-primary panel-body full-height">
+        <div class="col-md-4 d-flex flex-column">
+          <div class="card border-primary card-body full-height">
             <p class="quote"><a href="community-projects.html#fluid-structure-interaction-on-flapping-wings"><i class="fas fa-quote-left"></i>The large number of coupling functionalities in preCICE gives the user the opportunity to build advanced and scalable simulations with ease.<i class="fas fa-quote-right"></i></a></p>
-            <div class="vertical-align">
+            <div class="d-flex align-items-center">
               <img class="testimonial" src="images/testimonial_derek_square.jpg" alt="simulation aerodynamics">
               <div>
                 <p><strong>—Derek Risseeuw</strong></p>
@@ -259,10 +257,10 @@ <h2 class="section-header">What our community is saying</h2>
             </div>
           </div>
         </div>
-        <div class="col-md-4 col-flex">
-          <div class="panel panel-primary panel-body full-height">
+        <div class="col-md-4 d-flex flex-column">
+          <div class="card border-primary card-body full-height">
             <p class="quote"><a href="community-projects.html#hybrid-simulation-methods-for-wind-modelling-in-urban-areas"><i class="fas fa-quote-left"></i>With preCICE, we could realize an efficient CPU-GPU coupling of our in-house lattice Boltzmann solver and OpenFOAM.<i class="fas fa-quote-right"></i></a></p>
-            <div class="vertical-align">
+            <div class="d-flex align-items-center">
               <img class="testimonial" src="images/testimonial_manchester_square.jpg" alt="simulation cpu-gpu">
               <div>
                 <p><strong>—Marta Camps Santasmasas</strong></p>
@@ -273,10 +271,8 @@ <h2 class="section-header">What our community is saying</h2>
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-lg-12">
-          <a href="community-projects.html" class="btn btn-primary" role="button">Explore all community stories &nbsp;<i class="fas fa-chevron-right"></i></a>
-        </div>
+      <div class="mt-4">
+        <a href="community-projects.html" class="btn btn-primary" role="button">Explore all community stories &nbsp;<i class="fas fa-chevron-right"></i></a>
       </div>
 
     </div> <!-- main -->
@@ -288,27 +284,23 @@ <h2 class="section-header">What our community is saying</h2>
 <div class="container">
   <div  class="section">
 
-    <div class="row">
-      <div class="col-lg-12">
-        <h2 class="section-header">Academic at heart, 100% free software</h2>
-      </div>
-    </div>
+    <h2 class="section-header">Academic at heart, 100% free software</h2>
 
     <div class="row">
       <div class="col-md-6">
         <p>preCICE has been developed by three generations of doctoral candidates from the <a href="https://www.cs.cit.tum.de/en/sccs/home/">Chair of Scientific Computing</a> at the <strong>Technical University of Munich</strong> and from the <a href="https://www.ipvs.uni-stuttgart.de/">Institute for Parallel and Distributed Systems</a> at the <strong>University of Stuttgart</strong>. We develop everything openly on GitHub, the preCICE library is licensed under LGPLv3, and every other component is developed under compatible free software licenses. <a href="fundamentals-license.html">More information.</a></p>
         <p>You can <strong>cite the preCICE library</strong> using the following paper. Please also consider citing the adapters you use, as well as the <a href="installation-distribution.html">preCICE Distribution</a> for <strong>reproducibility</strong>. You can find the respective references in our <a href="fundamentals-literature-guide.html">literature guide</a>.</p>
       </div>
-      <div class="col-md-6 equal vertical-align">
-        <div class="col-md-4 col-xs-4 col-flex">
-          <a class="no-icon" href="https://www.cs.cit.tum.de/en/sccs/home/"><img class="img-responsive center-block uni-logo" src="images/logo/logo_tum_400px.png" alt="TUM logo"></a>
+      <div class="col-md-6 d-flex align-items-center">
+        <div class="col-md-4 col-4 d-flex flex-column">
+          <a class="no-icon" href="https://www.cs.cit.tum.de/en/sccs/home/"><img class="img-fluid mx-auto d-block uni-logo" src="images/logo/logo_tum_400px.png" alt="TUM logo"></a>
         </div>
-        <div class="col-md-4 col-xs-4 col-flex">
-          <a class="no-icon" href="https://www.ipvs.uni-stuttgart.de/"><img class="img-responsive center-block uni-logo" src="images/logo/logo_stuttgart_400px.png" alt="Uni Stuttgart logo"></a>
+        <div class="col-md-4 col-4 d-flex flex-column">
+          <a class="no-icon" href="https://www.ipvs.uni-stuttgart.de/"><img class="img-fluid mx-auto d-block uni-logo" src="images/logo/logo_stuttgart_400px.png" alt="Uni Stuttgart logo"></a>
         </div>
-        <div class="col-md-4 col-xs-4 col-flex">
+        <div class="col-md-4 col-4 d-flex flex-column">
           <a class="no-icon github-link" href="https://github.com/precice/precice">
-            <div class="img-equivalent-uni-logo text-center center-block">
+            <div class="img-equivalent-uni-logo text-center mx-auto d-block">
               <i class="fab fa-github fa-4x"></i>
               <p><strong>preCICE on Github</strong></p>
             </div>
@@ -318,26 +310,26 @@ <h2 class="section-header">Academic at heart, 100% free software</h2>
     </div>
 
     <div class="row">
-      <div class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-0 hidden-xs text-center">
+      <div class="col-md-3 offset-md-1 col-sm-3 d-none d-sm-block text-center">
         <a class="book-container no-icon" href="https://doi.org/10.12688/openreseurope.14445.2" target="_blank" rel="noreferrer noopener">
-          <div class="book center-block">
-            <img class="no-margin" alt="preCICE reference paper" src="images/paper-v2-thumbnail.jpg" title="preCICE v2: A sustainable and user-friendly coupling library">
+          <div class="book mx-auto d-block">
+            <img class="m-0" alt="preCICE reference paper" src="images/paper-v2-thumbnail.jpg" title="preCICE v2: A sustainable and user-friendly coupling library">
           </div>
         </a>
       </div>
-      <div class="col-md-7 col-sm-9 col-xs-12">
-        <div class="panel panel-primary panel-precice">
-          <div class="panel-heading-precice">
+      <div class="col-md-7 col-sm-9 col-12">
+        <div class="card border-primary panel-precice">
+          <div class="card-header-precice">
             <strong>preCICE v2: A sustainable and user-friendly coupling library</strong>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <p><em>Gerasimos Chourdakis, Kyle Davis, Benjamin Rodenberg, Miriam Schulte, Frédéric Simonis, Benjamin Uekermann et al.</em>, <strong>2022</strong>. In Open Research Europe, 2:51.</p>
             <a href="https://doi.org/10.12688/openreseurope.14445.2">Publisher's Site</a>&nbsp;&nbsp;
             <a href="assets/precice-v2.bib">Download BibTeX &nbsp;<i class="fas fa-download"></i></a>
           </div>
         </div>
-        <a href="{{ site.precice_v2_citations_url }}" class="btn btn-default no-icon literature-link" role="button">Citations of preCICE v2 paper ({{ site.precice_v2_citations }}) &nbsp;<i class="fas fa-chevron-right"></i></a>
-        <a href="{{ site.precice_v1_citations_url }}" class="btn btn-default no-icon literature-link" role="button">preCICE v1 ({{ site.precice_v1_citations }}) &nbsp;<i class="fas fa-chevron-right"></i></a>
+        <a href="{{ site.precice_v2_citations_url }}" class="btn btn-secondary no-icon literature-link" role="button">Citations of preCICE v2 paper ({{ site.precice_v2_citations }}) &nbsp;<i class="fas fa-chevron-right"></i></a>
+        <a href="{{ site.precice_v1_citations_url }}" class="btn btn-secondary no-icon literature-link" role="button">preCICE v1 ({{ site.precice_v1_citations }}) &nbsp;<i class="fas fa-chevron-right"></i></a>
         <a href="fundamentals-literature-guide.html" class="btn btn-primary literature-link" role="button">Literature guide &nbsp;<i class="fas fa-chevron-right"></i></a>
       </div>
     </div>
@@ -351,14 +343,10 @@ <h2 class="section-header">Academic at heart, 100% free software</h2>
   <div class="container">
     <div  class="section">
 
-      <div class="row">
-        <div class="col-lg-12">
-          <h2 class="section-header">Join the community!</h2>
-        </div>
-      </div>
+      <h2 class="section-header">Join the community!</h2>
 
-      <div class="row equal">
-        <div class="col-md-8 col-flex">
+      <div class="row">
+        <div class="col-md-8 d-flex flex-column">
           <p>We develop everything in the open, with continuous feedback by a vivid community. Be part of it:</p>
           <ul>
             <li><strong>Ask for help and help others</strong> in the <a href="https://precice.discourse.group/">preCICE forum</a> and register to receive news.</li>
@@ -377,7 +365,7 @@ <h2 class="section-header">Join the community!</h2>
             </li>
           </ul>
         </div>
-        <div class="col-md-4 col-flex">
+        <div class="col-md-4 d-flex flex-column">
           <b>The quarterly preCICE newsletter</b>
           {% include newsletter.html %}
         </div>
@@ -392,14 +380,10 @@ <h2 class="section-header">Join the community!</h2>
   <div class="container">
     <div class="section">
 
-      <div class="row">
-        <div class="col-lg-12">
-          <h2 class="section-header">You support preCICE – preCICE supports you</h2>
-        </div>
-      </div>
+      <h2 class="section-header">You support preCICE – preCICE supports you</h2>
 
-      <div class="row equal">
-        <div class="col-md-8 col-flex">
+      <div class="row">
+        <div class="col-md-8 d-flex flex-column">
           <p>As the developers of preCICE, we enjoy supporting our academic and industry users, but due to the growing demand, we are not able to service all support requests any more. We are introducing <strong>preCICE support</strong> as a way to contribute to sustainable open-source software development and to ensure preCICE is developed and maintained in the future. Supporting preCICE comes with several benefits:</p>
           <ul>
             <li><strong>Increased success rate</strong> for your research proposal (include preCICE as a partner, software provider, or sub-contractor)</li>
@@ -409,19 +393,17 @@ <h2 class="section-header">You support preCICE – preCICE supports you</h2>
           <p>We offer different levels of support for industry and academia.</p>
         </div>
 
-        <div class="col-md-4 col-flex">
-          <div class="panel panel-primary panel-body full-height">
-            <div class="vertical-align">
-              <img class="img-responsive center-block precice-support" src="images/precice-support.svg" alt="precice support program logo">
+        <div class="col-md-4 d-flex flex-column">
+          <div class="card border-primary card-body full-height">
+            <div class="d-flex align-items-center">
+              <img class="img-fluid mx-auto d-block precice-support" src="images/precice-support.svg" alt="precice support program logo">
             </div>
           </div>
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-lg-12">
-          <a href="community-support-precice.html" class="btn btn-primary" role="button">Support preCICE - see options &nbsp;<i class="fas fa-chevron-right"></i></a>
-        </div>
+      <div class="mt-4">
+        <a href="community-support-precice.html" class="btn btn-primary" role="button">Support preCICE - see options &nbsp;<i class="fas fa-chevron-right"></i></a>
       </div>
 
     </div> <!-- main -->
@@ -434,41 +416,37 @@ <h2 class="section-header">You support preCICE – preCICE supports you</h2>
   <div class="container">
     <div class="section">
 
-      <div class="row">
-        <div class="col-lg-12">
-          <h2 class="section-header">Frequently asked questions (FAQ)</h2>
-        </div>
-      </div>
+      <h2 class="section-header">Frequently asked questions (FAQ)</h2>
 
-      <div class="row equal">
-        <div class="col-md-4 col-sm-6 col-flex">
-          <div class="panel panel-primary panel-precice usp">
-            <div class="panel-heading-precice text-left">
+      <div class="row">
+        <div class="col-md-4 col-sm-6 d-flex flex-column">
+          <div class="card border-primary panel-precice usp">
+            <div class="card-header-precice text-start">
               <strong>Can preCICE be used for volume coupling?</strong>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <p>Yes. In preCICE v3 there have been many changes and improvements regarding large meshes. The following has ...</p>
               <a class="no-icon" href="https://precice.discourse.group/t/can-precice-be-used-for-volume-coupling/27/9">Learn more &nbsp;<i class="fas fa-chevron-right"></i></a>
             </div>
           </div>
         </div>
-        <div class="col-md-4 col-sm-6 col-flex">
-          <div class="panel panel-primary panel-precice usp">
-            <div class="panel-heading-precice text-left">
+        <div class="col-md-4 col-sm-6 d-flex flex-column">
+          <div class="card border-primary panel-precice usp">
+            <div class="card-header-precice text-start">
               <strong>What are best practices to write a new adapter?</strong>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <p>There are <a href="community-guidelines-adapters.html">guidelines for adapters</a>, as well as for <a href="community-guidelines-application-cases.html">application cases</a>, as part of the ecosystem standardization ...</p>
               <a class="no-icon" href="https://precice.discourse.group/t/what-are-best-practices-to-write-a-new-adapter/44/3">Learn more &nbsp;<i class="fas fa-chevron-right" ></i></a>
             </div>
           </div>
         </div>
-        <div class="col-md-4 col-sm-6 col-flex">
-          <div class="panel panel-primary panel-precice usp">
-            <div class="panel-heading-precice text-left">
+        <div class="col-md-4 col-sm-6 d-flex flex-column">
+          <div class="card border-primary panel-precice usp">
+            <div class="card-header-precice text-start">
               <strong>Can preCICE be used for one-way coupling?</strong>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <p>Yes! Several people are doing this already. Even though there may be other ways to do one-way coupling, it may ...</p>
               <a class="no-icon" href="https://precice.discourse.group/t/can-precice-be-used-for-one-way-coupling/28/2">Learn more &nbsp;<i class="fas fa-chevron-right"></i></a>
             </div>
@@ -476,10 +454,8 @@ <h2 class="section-header">Frequently asked questions (FAQ)</h2>
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-lg-12">
-          <a href="fundamentals-faq.html" class="btn btn-primary no-icon" role="button">More questions &nbsp;<i class="fas fa-chevron-right"></i></a>
-        </div>
+      <div class="mt-4">
+        <a href="fundamentals-faq.html" class="btn btn-primary no-icon" role="button">More questions &nbsp;<i class="fas fa-chevron-right"></i></a>
       </div>
 
     </div> <!-- section -->
@@ -491,25 +467,15 @@ <h2 class="section-header">Frequently asked questions (FAQ)</h2>
 <div class="container">
   <div class="section">
 
-    <div class="row">
-      <div class="col-lg-12">
-        <h2 class="section-header">Tried and tested by a global community</h2>
-      </div>
-    </div>
+    <h2 class="section-header">Tried and tested by a global community</h2>
 
-    <div class= "row less-bottom-margin">
-      <div class="col-lg-12">
-        <p>Through the <strong>community-driven development</strong> approach, preCICE has become one of the leading coupling libraries for multi-physics simulations both in <strong>academia and industry</strong>. The wide variety of application fields ranges from aerodynamics to astronautics, automotive manufacturing, wind energy, biomechanics, biomimetics, marine engineering, nuclear fusion, reactor safety, geophysical systems, and many more.</p>
-      </div>
-    </div>
+    <p class="less-bottom-margin">Through the <strong>community-driven development</strong> approach, preCICE has become one of the leading coupling libraries for multi-physics simulations both in <strong>academia and industry</strong>. The wide variety of application fields ranges from aerodynamics to astronautics, automotive manufacturing, wind energy, biomechanics, biomimetics, marine engineering, nuclear fusion, reactor safety, geophysical systems, and many more.</p>
 
-    <div class="row less-bottom-margin logowall-filter" data-logowall-target="#logowall-items">
-      <div class="col-lg-12 text-center" role="group" aria-label="Filter organizations by category">
-        <button type="button" class="btn btn-primary filter-btn active" data-filter="all" aria-pressed="true" aria-controls="logowall-items">All</button>
-        <button type="button" class="btn btn-default filter-btn" data-filter="Academic" aria-pressed="false" aria-controls="logowall-items">Academia</button>
-        <button type="button" class="btn btn-default filter-btn" data-filter="Research" aria-pressed="false" aria-controls="logowall-items">Research</button>
-        <button type="button" class="btn btn-default filter-btn" data-filter="Industry" aria-pressed="false" aria-controls="logowall-items">Industry</button>
-      </div>
+    <div class="less-bottom-margin logowall-filter text-center" data-logowall-target="#logowall-items" role="group" aria-label="Filter organizations by category">
+      <button type="button" class="btn btn-primary filter-btn active" data-filter="all" aria-pressed="true" aria-controls="logowall-items">All</button>
+      <button type="button" class="btn btn-secondary filter-btn" data-filter="Academic" aria-pressed="false" aria-controls="logowall-items">Academia</button>
+      <button type="button" class="btn btn-secondary filter-btn" data-filter="Research" aria-pressed="false" aria-controls="logowall-items">Research</button>
+      <button type="button" class="btn btn-secondary filter-btn" data-filter="Industry" aria-pressed="false" aria-controls="logowall-items">Industry</button>
     </div>
     
     {% assign logowall = site.data.logowall %}
@@ -517,10 +483,10 @@ <h2 class="section-header">Tried and tested by a global community</h2>
     {% for row in logowall %}
     {% for column in row.columns %}
     {% for logo in column.logos %}
-      <div class="col-md-3 col-sm-3 col-xs-3 text-center logo-item" data-category="{{logo.category}}"> <!-- vertical-align -->
+      <div class="col-md-3 col-sm-3 col-3 text-center logo-item" data-category="{{logo.category}}"> <!-- vertical-align -->
         <a href="{{logo.link}}" class="logo no-icon">
-          <div class="logo-holder vertical-align "> <!-- center-block -->
-            <img class="img-responsive center-block" src="images/logo/{{logo.logo}}" alt="{{logo.name}}, {{logo.country}}"
+          <div class="logo-holder d-flex align-items-center"> <!-- mx-auto d-block -->
+            <img class="img-fluid mx-auto d-block" src="images/logo/{{logo.logo}}" alt="{{logo.name}}, {{logo.country}}"
              loading="lazy">
           </div>
           <p class="institution">{{logo.name}}</p>
@@ -532,10 +498,8 @@ <h2 class="section-header">Tried and tested by a global community</h2>
     {% endfor %}
     </div>
 
-    <div class="row">
-      <div class="col-lg-12">
-        <a href="community.html" class="btn btn-primary" role="button">Explore the preCICE community &nbsp;<i class="fas fa-chevron-right"></i></a>
-      </div>
+    <div class="mt-4">
+      <a href="community.html" class="btn btn-primary" role="button">Explore the preCICE community &nbsp;<i class="fas fa-chevron-right"></i></a>
     </div>
 
   </div> <!-- section -->
@@ -547,43 +511,31 @@ <h2 class="section-header">Tried and tested by a global community</h2>
   <div class="container">
     <div class="section">
 
-      <div class="row">
-        <div class="col-lg-12">
-          <h2 class="section-header">How does it look like?</h2>
-        </div>
-      </div>
+      <h2 class="section-header">How does it look like?</h2>
 
-      <div class="row">
-        <div class="col-lg-12">
-          <p>
-            In this tutorial, we couple the CFD code OpenFOAM with a C++ rigid body solver for fluid-structure interaction, using a serial-explicit coupling, as defined in the <a href="configuration-overview.html">preCICE configuration file</a>.
-            OpenFOAM loads a ready-to-use <a href="adapter-openfoam-overview.html">adapter</a>, while the C++ code uses the <a href="couple-your-code-api.html">preCICE API</a>.
-            OpenFOAM starts and waits for the other code. After they both start,
-            they find each other perform a black-box coupled simulation.
-          </p>
-        </div>
-      </div>
+      <p class="mb-4">
+        In this tutorial, we couple the CFD code OpenFOAM with a C++ rigid body solver for fluid-structure interaction, using a serial-explicit coupling, as defined in the <a href="configuration-overview.html">preCICE configuration file</a>.
+        OpenFOAM loads a ready-to-use <a href="adapter-openfoam-overview.html">adapter</a>, while the C++ code uses the <a href="couple-your-code-api.html">preCICE API</a>.
+        OpenFOAM starts and waits for the other code. After they both start,
+        they find each other perform a black-box coupled simulation.
+      </p>
 
-      <div class="row">
-        <div class="col-lg-12">
-          <div class="hidden-sm hidden-xs">
-            <script id="asciicast-RqGhiiS8jf2fKTaXgiNn73B1G" src="https://asciinema.org/a/RqGhiiS8jf2fKTaXgiNn73B1G.js" data-size="small" async></script>
-          </div>
-          <div class="visible-sm visible-xs" style="margin-bottom: 5px;">
-            <a class="no-icon" href="https://asciinema.org/a/RqGhiiS8jf2fKTaXgiNn73B1G" target="_blank"><img class="img-responsive center-block" src="https://asciinema.org/a/RqGhiiS8jf2fKTaXgiNn73B1G.svg" alt="code animation"/></a>
-          </div>
+      <div class="mb-4">
+        <div class="d-none d-md-block">
+          <script id="asciicast-RqGhiiS8jf2fKTaXgiNn73B1G" src="https://asciinema.org/a/RqGhiiS8jf2fKTaXgiNn73B1G.js" data-size="small" async></script>
+        </div>
+        <div class="d-block d-md-none mb-1">
+          <a class="no-icon" href="https://asciinema.org/a/RqGhiiS8jf2fKTaXgiNn73B1G" target="_blank"><img class="img-fluid mx-auto d-block" src="https://asciinema.org/a/RqGhiiS8jf2fKTaXgiNn73B1G.svg" alt="code animation"/></a>
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-lg-12">
-          <a href="community-channels.html" class="btn btn-default next-steps-link no-icon"
-            role="button">Follow preCICE &nbsp;<i class="fas fa-chevron-right"></i></a>
-          <a href="https://precice.discourse.group/c/what-is/9" class="btn btn-default next-steps-link no-icon"
-            role="button">Is preCICE for me? &nbsp;<i class="fas fa-chevron-right"></i></a>
-          <a href="quickstart.html" class="btn btn-primary next-steps-link no-icon"
-            role="button">Run this tutorial yourself &nbsp;<i class="fas fa-chevron-right"></i></a>
-        </div>
+      <div class="mt-4">
+        <a href="community-channels.html" class="btn btn-outline-secondary next-steps-link no-icon"
+          role="button">Follow preCICE &nbsp;<i class="fas fa-chevron-right"></i></a>
+        <a href="https://precice.discourse.group/c/what-is/9" class="btn btn-outline-secondary next-steps-link no-icon"
+          role="button">Is preCICE for me? &nbsp;<i class="fas fa-chevron-right"></i></a>
+        <a href="quickstart.html" class="btn btn-primary next-steps-link no-icon"
+          role="button">Run this tutorial yourself &nbsp;<i class="fas fa-chevron-right"></i></a>
       </div>
 
     </div> <!-- section -->
diff --git a/css/customstyles-precice.css b/css/customstyles-precice.css
index 15548bada71..ad071ecb557 100644
--- a/css/customstyles-precice.css
+++ b/css/customstyles-precice.css
@@ -8,58 +8,365 @@ body {
     display: flex;
     flex-direction: column;
 }
+
+.btn {
+  font-size: 14px;
+  line-height: 1.42857143;
+  padding: 6px 12px;
+  border-radius: 4px;
+}
+
+h1,
+.h1 {
+  font-size: 36px;
+}
+
 .page-content,
 main {
-    flex: 1;
+  flex: 1;
 }
 
 .banner-container {
   margin-top:-20px;
 }
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 750px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1170px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1170px;
+  }
+}
+
+.container {
+  --bs-gutter-x: 30px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.navbar-brand {
+  margin-bottom: 0;
+}
+
 a.navbar-brand {
-    padding-top: 12px;
+  padding-top: 15px;
+  padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.navbar-header-group .navbar-brand {
+  padding-left: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
+
 .navbar-brand-text {
     height: 28px;
     padding-left: 1px; /* 1px */
     display: inline;
     vertical-align: top;
 }
+
 /* use :before pseudo-class to rotate icon independent of text */
 .navbar-brand-icon:before {
-    width: 25px;
-    height: 25px;
-    content: '';
-    display: inline-block;
-    background: url('../images/icon.svg');
-    background-size: 25px 25px;
-    background-repeat: no-repeat;
-    background-position: top left;
-    transition: all 400ms;
+  width: 25px;
+  height: 25px;
+  content: '';
+  display: inline-block;
+  background: url('../images/icon.svg');
+  background-size: 25px 25px;
+  background-repeat: no-repeat;
+  background-position: top left;
+  transition: all 400ms;
+  vertical-align: middle;
 }
-a:hover > .navbar-brand-icon:before{
-    transform: rotate(180deg);
+
+a:hover>.navbar-brand-icon:before {
+  transform: rotate(180deg);
 }
+
 /* .nav styles both topnav and sidenav, so use .nav.navbar-nav */
-.nav.navbar-nav > li > a {
-    font-size: 14px;
-    line-height: 20px;
-    padding: 4px 10px;
-    font-weight: 500;
-    margin-top: 11px;
-}
-.nav > li > a {
-    font-size: 14px;
-    line-height: 20px;
-    padding: 4px 10px;
+.nav.navbar-nav>li>a,
+.navbar>.container.topnavlinks .nav.navbar-nav>li>a,
+.navbar>.container.topnavlinks .nav.navbar-nav .nav-link {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 10px;
+  font-weight: 500;
+  margin-top: 11px;
 }
+
 /* rightmost icons */
-.nav > li > a.nav-external {
+.nav>li>a.nav-external,
+.navbar>.container.topnavlinks .nav.navbar-nav>li>a.nav-external,
+.navbar>.container.topnavlinks .nav.navbar-nav .nav-link.nav-external {
+  font-size: 24px;
+  line-height: 20px;
+  padding: 2px 0;
+  margin-top: 11px;
+}
+
+@media (max-width: 1200px) {
+  .nav>li>a.nav-external {
+    float: left;
+  }
+}
+
+.navbar-header-group .navbar-toggler {
+  margin-right: 0;
+}
+
+@media (max-width: 1199.98px) {
+  .navbar>.container.topnavlinks {
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .navbar>.container.topnavlinks .navbar-header-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    position: static;
+    top: auto;
+    padding: 8px 0;
+  }
+
+  .navbar>.container.topnavlinks .navbar-header-group .navbar-brand {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-right: auto;
+    float: none;
+  }
+
+  .navbar>.container.topnavlinks .navbar-header-group .navbar-toggler {
+    flex-shrink: 0;
+    margin-left: 15px;
+    padding: 9px 10px;
+  }
+
+  .navbar>.container.topnavlinks .navbar-toggler:focus,
+  .navbar>.container.topnavlinks .navbar-toggler:active {
+    box-shadow: none;
+    outline: 0;
+  }
+
+  .navbar>.container.topnavlinks .navbar-toggler[aria-expanded="true"] {
+    background-color: #ecf7fe;
+  }
+
+  .navbar>.container.topnavlinks .navbar-collapse {
+    flex-basis: 100%;
+    width: 100%;
+    border-top: 1px solid transparent;
+    padding-bottom: 10px;
+  }
+
+  .navbar>.container.topnavlinks .navbar-nav.ms-auto {
+    display: block;
+    margin-left: 0 !important;
+    margin-right: 0;
+    width: 100%;
+    float: none;
+  }
+
+  .navbar>.container.topnavlinks .nav.navbar-nav>li>a,
+  .navbar>.container.topnavlinks .nav.navbar-nav .nav-link {
+    margin-top: 0;
+    padding: 10px 15px;
+    float: none;
+  }
+
+  .navbar>.container.topnavlinks .nav.navbar-nav>li {
+    float: none;
+    width: 100%;
+  }
+
+  .navbar>.container.topnavlinks .nav.navbar-nav>li.navbar-search-li {
+    width: 100%;
+    align-self: stretch;
+    display: block;
+    margin-top: 7.5px;
+    padding: 0 15px 10px;
+    box-sizing: border-box;
+  }
+
+  .navbar>.container.topnavlinks #search-demo-container {
+    width: 100%;
+  }
+
+  .navbar>.container.topnavlinks .ais-search-box {
+    width: 100% !important;
+    max-width: none;
+    margin: 0 !important;
+    height: 50px;
+  }
+
+  .navbar>.container.topnavlinks .nav.navbar-nav>li.navbar-search-li~li {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+
+  .navbar>.container.topnavlinks .nav.navbar-nav>li.navbar-search-li~li:first-of-type>a.nav-external {
+    padding-left: 15px;
+  }
+
+  .navbar>.container.topnavlinks .nav.navbar-nav>li.navbar-search-li~li>a.nav-external {
+    margin-top: 0;
+    padding: 10px 12px 10px 0;
     font-size: 24px;
-    line-height: 20px;
-    padding: 2px 0px;
-    margin-top: 11px;
+  }
+}
+
+#search-demo-container {
+  padding-top: 0;
+  position: relative;
+}
+
+.ais-search-box--powered-by {
+  margin-top: -15px;
+  padding-right: 5px;
+  pointer-events: none;
+}
+
+.nav li a.ais-search-box--powered-by-link {
+  padding: 0;
+  background-color: transparent;
+  display: inline-block;
+  pointer-events: auto;
+}
+
+.ais-search-box--reset {
+  z-index: 10;
+  cursor: pointer;
+}
+
+.ais-search-box--input {
+  padding-left: 10px;
+  border-color: #0a76bb;
+}
+
+.ais-search-box {
+  padding: 0.5em;
+  margin-bottom: 0;
+  margin-left: 10px;
+  margin-top: 0;
+  width: 20em;
+  font-size: 0.8em;
+  height: 50px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1200px) {
+  .navbar-expand-xl .navbar-toggler {
+    display: none !important;
+  }
+}
+
+/* Doc pages: align main title with sidebar title (li.sidebarTitle margin-top: 20px) */
+#tg-sb-content > .post-header {
+  margin-top: 20px;
+}
+
+#tg-sb-content .post-header h1.post-title-main {
+  margin-top: 0;
+}
+
+/* Sidebar (BS5 collapse accordion) */
+.sidebar-nav {
+  list-style: none;
+  padding: 0 !important;
+  margin: 0 !important;
 }
+
+.sidebar-nav a.nav-link {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 10px !important;
+  color: #333 !important;
+  background-color: #e8e8e8 !important;
+  border-top: 1px solid whitesmoke;
+}
+
+.sidebar-nav a.nav-link:hover {
+  background-color: #ED762C !important;
+  color: #ffffff !important;
+}
+
+.sidebar-nav>li.nav-item>a.nav-link:not(.collapsed)[data-bs-toggle="collapse"] {
+  background-color: #347DBE !important;
+  color: #ffffff !important;
+}
+
+.sidebar-nav li.nav-item .collapse a.nav-link:not(.collapsed)[data-bs-toggle="collapse"] {
+  background-color: #ED762C !important;
+  color: #ffffff !important;
+}
+
+.sidebar-nav a.nav-link.active:not([data-bs-toggle="collapse"]) {
+  background-color: #8D8D8D !important;
+  color: #ffffff !important;
+}
+
+.sidebar-nav .collapse a.nav-link {
+  background-color: #FAFAFA !important;
+  color: #333 !important;
+}
+
+.sidebar-nav .collapse a.nav-link:hover {
+  background-color: #ED762C !important;
+  color: #ffffff !important;
+}
+
+.sidebar-nav .collapse a.nav-link.active {
+  background-color: #8D8D8D !important;
+  color: #ffffff !important;
+}
+
+.sidebar-nav .collapse .nav-link {
+  padding-left: 20px !important;
+}
+
+.sidebar-nav .collapse .collapse .nav-link {
+  padding-left: 30px !important;
+}
+
+.sidebar-nav .collapse .collapse .collapse .nav-link {
+  padding-left: 40px !important;
+}
+
+.sidebar-nav .collapse .collapse .collapse .collapse .nav-link {
+  padding-left: 50px !important;
+}
+
+.sidebar-nav .nav-link[data-bs-toggle="collapse"]::after {
+  content: '\25be';
+  float: right;
+  transition: transform 0.2s;
+}
+
+.sidebar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed)::after {
+  transform: rotate(180deg);
+}
+
 @media (max-width: 1200px) {
     .nav > li > a.nav-external {
         float: left;
@@ -75,72 +382,59 @@ details > summary {
 
 h2.page-header {
   /*border-bottom: 1px solid #0A76BB;*/
-  border-bottom: 1px solid rgba(10,118,187, 0);
+  border-bottom: 1px solid rgba(10, 118, 187, 0);
   font-size: 28px;
 }
 .row {
   margin-bottom: 0px;
 }
-.panel-precice {
+
+.card.border-primary.panel-precice {
   padding-top: 5px;
+  margin-bottom: 20px;
+  background-color: #fff;
+}
+
+.card-precice {
+  padding-top: 0;
 }
-.panel-heading-precice {
+
+.card-header-precice {
   position: relative;
-  /*left: -5px;
-  padding: 10px 15px 10px 18px;
-  border-left: 2px solid #ED762C;*/
   margin-bottom: -15px;
   padding: 10px 15px;
+  min-height: 4em;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-bottom: none;
 }
-.panel-heading-precice strong {
+
+.card-header-precice strong {
   font-size: 1.2em;
   line-height: 1.2em;
   font-weight: 500;
 }
 
+.card.border-primary.panel-precice > .card-body {
+  padding: 15px;
+}
+
 /* General utility classes */
 
-.no-margin {
-  margin: 0;
-}
-.less-top-margin {
-  margin-top: -20px;
-}
 .less-bottom-margin {
   margin-bottom: -20px;
 }
 .citation-link {
   margin-top: 15px;
 }
-.vertical-align { /* https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025 */
-    display: flex;
-    align-items: center;
-}
-/* https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height */
-/* https://stackoverflow.com/questions/20503064/twitter-bootstrap-3-panels-of-equal-height-in-a-fluid-row */
-/*.equal {
-  display: flex;
-  display: -webkit-flex;
-  flex-wrap: wrap;
-}*/
-@media (min-width: 992px) {
-   .equal{
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-    }
-}
+
 /* add horizontal scoll on code blocks */
 pre > code {
   overflow: auto;
   word-wrap: normal;
   white-space: pre;
 }
-div.col-flex {
-  display: flex;
-  flex-flow: column;
-  align-content: stretch;  /* file up remaining space */
-}
 
 /* Search bar and results */
 #search-demo-container div#search-results {
@@ -419,3 +713,175 @@ div.highlighter-rouge:hover .copy-code-btn {
     color: white;
     border-color: #28a745;
 }
+
+/* Inline code highlight — site-wide (legacy theme color #c7254e on #f9f2f4) */
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 4px;
+}
+
+/* Fenced / block code: keep block styling, not inline highlight */
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+/* Exceptions (match customstyles.css; must follow global code rule) */
+.note code,
+.alert code,
+.warning code,
+div#toc code,
+h2 code,
+h3 code,
+h4 code {
+  color: inherit;
+  padding: 0;
+  background-color: transparent;
+}
+
+table code {
+  background-color: transparent;
+}
+
+a code {
+  color: #248ec2;
+}
+
+table th code {
+  color: #fff;
+  background-color: transparent;
+}
+
+table thead th code.highlighter-rouge {
+  background-color: transparent;
+}
+
+/* BS5 Migration: Restore rectangular boxes, borders, padding, and backgrounds on all pre/code blocks */
+pre,
+.highlight pre,
+pre.highlight,
+.highlighter-rouge pre {
+  display: block !important;
+  padding: 9.5px !important;
+  margin: 25px 0px !important;
+  font-size: 13px !important;
+  line-height: 1.42857143 !important;
+  color: #333 !important;
+  word-break: break-all !important;
+  word-wrap: break-word !important;
+  background-color: #f5f5f5 !important;
+  border: 1px solid #ccc !important;
+  border-radius: 4px !important;
+}
+
+/* BS5 Migration: Restore beautiful tables with gray headers, alternating rows, and full-width alignment */
+table,
+.post-content table {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin-bottom: 20px !important;
+  border: 1px solid #dedede !important;
+  border-collapse: collapse !important;
+}
+
+table th,
+table>thead>tr>th {
+  background-color: #777 !important;
+  color: white !important;
+  font-weight: bold !important;
+  padding: 8px !important;
+  border-top: 1px solid #ddd !important;
+  border-bottom: 2px solid #ddd !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+  border-style: solid !important;
+  text-align: left !important;
+}
+
+table td,
+table>tbody>tr>td {
+  background-color: inherit !important;
+  padding: 8px !important;
+  line-height: 1.42857143 !important;
+  vertical-align: top !important;
+  border-top: 1px solid #ddd !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+  border-bottom: 0 !important;
+  border-style: solid !important;
+}
+
+table tr:nth-of-type(odd),
+table>tbody>tr:nth-of-type(odd) {
+  background-color: #f9f9f9 !important;
+}
+
+table tr:nth-of-type(even),
+table>tbody>tr:nth-of-type(even) {
+  background-color: #ffffff !important;
+}
+
+/* --- Mobile Responsiveness and Typography Tuning (< 768px) --- */
+@media (max-width: 767.98px) {
+  .summary {
+    font-size: 105% !important;
+    margin: 15px 0 !important;
+    padding-left: 8px !important;
+  }
+
+  .container {
+    --bs-gutter-x: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .btn, .btn-outline-secondary {
+    font-size: 13px !important;
+    padding: 5px 10px !important;
+  }
+  
+  .post-header {
+    margin-top: 10px !important;
+  }
+}
+
+/* BS5 Migration: Restore Funding cards style in About page */
+.panel-custom {
+  border: 1px solid #ddd !important;
+  border-radius: 4px !important;
+  background-color: #fff !important;
+  margin-bottom: 20px !important;
+  box-shadow: 0 1px 1px rgba(0,0,0,.05) !important;
+}
+
+.panel-custom .card-body {
+  padding: 15px !important;
+}
+
+.panel-custom .card-title {
+  display: block !important;
+  font-size: 1.2em !important;
+  line-height: 1.2em !important;
+  font-weight: 500 !important;
+  margin-bottom: 15px !important;
+  text-decoration: none !important;
+  color: #111 !important;
+}
+
+.panel-custom .card-title:hover {
+  text-decoration: underline !important;
+}
+
+.panel-custom p {
+  margin-bottom: 8px !important;
+}
+
+.panel-custom p:last-child {
+  margin-bottom: 0 !important;
+}
\ No newline at end of file
diff --git a/css/customstyles.css b/css/customstyles.css
index bddcc538894..4e5f32721e8 100644
--- a/css/customstyles.css
+++ b/css/customstyles.css
@@ -1,3 +1,25 @@
+/* BS5 Reboot underlines links by default; match pre-BS5 body link styling */
+a {
+    text-decoration: none;
+}
+/* Nav, buttons, and card wrappers keep their own hover styles */
+.nav a:hover,
+.navbar a:hover,
+.navbar-nav a:hover,
+a.nav-link:hover,
+a.btn:hover,
+a.adapter:hover,
+a.github-link:hover {
+    text-decoration: none;
+}
+
+/* Cap wide diagrams on desktop without exceeding the viewport on mobile */
+.img-max-800 {
+    width: 100%;
+    max-width: min(800px, 100%);
+    height: auto;
+}
+
 .bs-callout {
     padding: 20px;
     margin: 20px 0;
@@ -118,8 +140,22 @@ margin-top: -40px
     color: gray;
 }
 
+/* BS5 migration fix: BS5 reboot sets border-style:solid and border-width:0
+   on all table elements, stripping borders. Reset border-style to none so
+   the explicit border rules below take full effect via their shorthands. */
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+    border-style: none;
+    border-width: 0;
+}
+
 table {
     background-color: transparent;
+    border-collapse: collapse;
 }
 caption {
     padding-top: 8px;
@@ -200,6 +236,13 @@ p.post-meta {font-size: 80%; color: #777;}
 .entry-date{font-size:14px;font-size:0.875rem;line-height:1.71429;margin-bottom:0;text-transform:uppercase;}
 
 /* search area */
+.navbar-nav .nav-item {
+    padding: 0;
+}
+#search-demo-container {
+    padding-top: 0;
+    margin-left: 0;
+}
 #search-demo-container ul#results-container {
     list-style: none;
     font-size: 12px;
@@ -221,20 +264,7 @@ ul#results-container a:hover {
 }
 
 
-/*#search-demo-container a:hover {
-    color: black;
-}
-#search-input {
-    padding: .5em;
-    margin-left:20px;
-    width:20em;
-    font-size: 0.8em;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    margin-top: 7px;
-    border-color: #0A76BB;
-}*/
+
 /* end search */
 
 .filter-options {
@@ -289,9 +319,9 @@ li.dropdownActive a {
 }
 
 
-.navbar-inverse .navbar-nav > li > a {
+.navbar .navbar-nav > li > a,
+.navbar .nav.navbar-nav > li > a {
     background-color: transparent;
-    margin-top:10px;
 }
 
 .post-content .rssfeedLink {
@@ -300,17 +330,10 @@ li.dropdownActive a {
 
 footer {
     font-size: smaller;
+    padding: 50px 0;
 }
 
-/* FAQ page */
-#accordion .panel-heading {
-    font-size: 12px;
-}
 
-a.accordion-toggle, a.accordion-collapsed {
-    font-size: 14px;
-    text-decoration: none;
-}
 
 /* navgoco sidebar styles (customized) */
 .nav, .nav ul, .nav li {
@@ -389,19 +412,19 @@ background-color: #347DBE;
 }
 
 ul#mysidebar {
-    border-radius:0px;
+    border-radius: 0px;
+    display: block !important;
+}
+
+ul#mysidebar li {
+    display: block !important;
 }
 
 .nav ul li ul li a {
     padding-left:40px;
 }
 
-.nav li.thirdlevel > a {
-    color: #248EC2;
-    font-weight:bold;
-    padding-left:20px;
-    background-color: whitesmoke !important;
-}
+
 
 
 .nav ul li a {
@@ -422,11 +445,16 @@ ul#mysidebar {
 }
 /* end sidebar */
 
-.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
+.navbar .navbar-nav > .active > a,
+.navbar .nav.navbar-nav > li.active > a,
+.navbar .navbar-nav > .active > a:hover,
+.navbar .nav.navbar-nav > li.active > a:hover,
+.navbar .navbar-nav > .active > a:focus,
+.navbar .nav.navbar-nav > li.active > a:focus {
     border-radius:4px;
 }
 
-.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
+.navbar .navbar-nav>.show>a, .navbar .navbar-nav>.show>a:focus, .navbar .navbar-nav>.show>a:hover {
     border-radius: 4px;
 }
 
@@ -435,9 +463,6 @@ span.projectTitle {
     font-weight: 500;
 }
 
-.footer {
-    text-align: right;
-}
 
 .footerMeta {
     background-color: whitesmoke;
@@ -543,17 +568,15 @@ button.cursorNorm {
     cursor: default;
 }
 
-a.dropdown-toggle, .navbar-inverse .navbar-nav > li > a  {
+a.dropdown-toggle, .navbar .navbar-nav > li > a,
+.navbar .nav.navbar-nav > li > a {
     margin-left: 10px;
 }
 
 hr.faded {
     border: 0;
     height: 1px;
-    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
-    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
-    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
-    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
+    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 }
 
 hr.shaded {
@@ -576,7 +599,7 @@ i.border {
     background-color: whitesmoke;
 }
 
-a[data-toggle] {
+a[data-bs-toggle] {
     color: #248EC2;
 }
 
@@ -606,10 +629,7 @@ h4 {color: #808080; font-weight:normal; font-size:120%; font-style:italic;}
     overflow: hidden;
 }
 
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
-    background-color: #248ec2;
-    color: white;
-}
+
 
 ol li ol li {list-style-type: lower-alpha;}
 ol li ul li {list-style-type: disc;}
@@ -658,12 +678,18 @@ div.tags {padding: 10px 5px;}
     font-weight: normal;
 }
 
+/* BS5 migration fix: BS5 sets border:0; border-top:1px solid; opacity:.25
+   which makes hr nearly invisible. Override all of these. */
 hr {
-    background: #999;
     margin: 30px 0px;
     width: 90%;
     margin-left: auto;
     margin-right: auto;
+    color: #999;
+    background-color: transparent;
+    border: 0;
+    border-top: 1px solid #999;
+    opacity: 1;
 }
 
 button.cursorNorm {
@@ -678,11 +704,7 @@ span.otherProgrammingLanguages {
     font-style: normal;
 }
 
-a[data-toggle="tooltip"] {
-    color: #649345;
-    font-style: italic;
-    cursor: default;
-}
+
 
 .seriesNext, .seriesContext {
     margin-top: 15px;
@@ -720,7 +742,7 @@ ol.series li {
 }
 
 /* not sure if using this ...*/
-.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
+.navbar .navbar-collapse, .navbar .navbar-form {
     border-color: #248ec2 !important;
 }
 
@@ -737,21 +759,11 @@ ol.series li {
 }
 .nav ul.series {
     padding-left: 30px;
-}
-
-.nav ul.series {
     background-color: #FAFAFA;
 }
 
-/*
-a.dropdown-toggle.otherProgLangs {
-    color: #f7e68f !important;
-}
-*/
-
 span.muted {color: #666;}
 
-table code {background-color: transparent;}
 
 .highlight .err {
     color: #a61717;
@@ -764,15 +776,22 @@ table p {
 }
 
 pre, table code {
-    white-space: pre-wrap;       /* css-3 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
 }
 
 pre {
+    display: block;
+    padding: 9.5px;
     margin: 25px 0px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
 #json-box-container pre {
@@ -798,9 +817,6 @@ dd {margin-left:20px;}
     margin:0px;
     margin-bottom:6px;
 }
-.panel-heading {
-    font-weight: bold;
-}
 
 .note code, .alert code, .warning code, div#toc code, h2 code, h3 code, h4 code {
     color: inherit;
@@ -858,7 +874,7 @@ span.soft {
 }
 
 @media (max-width: 767px) {
-    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+    .navbar .navbar-nav .show .dropdown-menu > li > a {
         color: #444;
     }
 }
@@ -883,33 +899,14 @@ span.soft {
     }
 }
 
-.col-md-9 img {
+.col-lg-9 img {
     max-width: 100%;
     max-height: 100%;
 }
 
 
-.post-content img {
-    margin: 12px 0px 3px 0px;
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-}
-.col-md-9 img {
-    max-width: 100%;
-    max-height: 100%;
-}
 
 
-.post-content img {
-    margin: 12px 0px 3px 0px;
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-}
-
 .videoThumbs img {
     float: left;
     margin:15px 15px 15px 0px;
@@ -917,12 +914,7 @@ span.soft {
 }
 
 
-/*@media only screen and (min-width: 900px), only screen and (min-device-width: 900px) {
-    .col-md-9 img {
-        max-width: 700px;
-        max-height: 700px;
-    }
-}*/
+
 
 *:hover > .anchorjs-link {
     transition: color .25s linear;
@@ -954,9 +946,6 @@ a.no_icon:after
     padding-left: 0;
 }
 
-.btn-default {
-    /*margin-bottom: 10px;*/
-}
 
 /* algolia search */
 
@@ -1005,11 +994,11 @@ p.post-meta time {
     margin-right: 0px;
 }
 
-span.label.label-default {
+span.badge.text-bg-secondary {
     background-color: gray;
 }
 
-span.label.label-primary {
+span.badge.text-bg-primary {
     background-color: #f0ad4e;
 }
 .col-lg-12 .nav li a {background-color: white}
@@ -1103,9 +1092,6 @@ div.content {
     float: left;
 }
 
-.clearfix {
-    clear: both;
-}
 
 
 #userMap div.arrow {
@@ -1142,30 +1128,11 @@ div.box.box1 {
 }
 
 #userMap .btn-lg  {
-        white-space: pre-wrap;       /* css-3 */
-        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-        white-space: -pre-wrap;      /* Opera 4-6 */
-        white-space: -o-pre-wrap;    /* Opera 7 */
-        word-wrap: break-word;       /* Internet Explorer 5.5+ */
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
         font-size: 14px;
     }
 
-/*
- * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
- *
- * [1] IE9
- * [2] IE10+
- */
-/* 1 */
-.ie9 img[src$=".svg"] {
-    width: 100%;
-}
-/* 2 */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    img[src$=".svg"] {
-        width: 100%;
-    }
-}
 
 h4.panel-title {
     padding-top: 0px;
@@ -1174,40 +1141,17 @@ h4.panel-title {
 
 /*set navbar breakpoint so that it converts to hamburger earlier */
 
-@media (max-width: 1200px) {
-    .navbar-header {
-        float: none;
-    }
-    .navbar-left,.navbar-right {
-        float: none !important;
-    }
-    .navbar-toggle {
-        display: block;
-    }
-    .navbar-collapse {
+@media (max-width: 1199.98px) {
+    .navbar .navbar-collapse {
         border-top: 1px solid transparent;
     }
-    .navbar-fixed-top {
-        top: 0;
-        border-width: 0 0 1px;
-    }
-    .navbar-collapse.collapse {
-        display: none!important;
-    }
-    .navbar-nav {
-        float: none!important;
+    .navbar .navbar-nav {
         margin-top: 7.5px;
     }
-    .navbar-nav>li {
-        float: none;
-    }
-    .navbar-nav>li>a {
+    .navbar .navbar-nav .nav-link {
         padding-top: 10px;
         padding-bottom: 10px;
     }
-    .collapse.in{
-        display:block !important;
-    }
 }
 
 /* News banner on pages other than the landing page */
@@ -1256,4 +1200,4 @@ h4.panel-title {
   color: #666;
   padding: 16px 0;
   text-align: center;
-}
+}
\ No newline at end of file
diff --git a/css/landing-page.css b/css/landing-page.css
index 85688b995d4..43f22328b0b 100644
--- a/css/landing-page.css
+++ b/css/landing-page.css
@@ -9,17 +9,17 @@ dt[id] {
 padding-top: 0px;
 margin-top: 0px
 }
-.panel {
+.card {
   margin-bottom: 0px;
 }
 
 /* general styles */
 
 @media (max-width: 992px) {
-  .panel{
+  .card{
     margin-top: 10px;
   }
-  img.col-xs-12{
+  img.col-12{
     margin-top: 20px;
   }
 }
@@ -28,7 +28,7 @@ margin-top: 0px
   padding-bottom: 65px; /* +20px margin-bottom of .row */
 }
 .section-header {
-  margin-bottom: 0px;
+  margin-bottom: 20px;
 }
 .row {
   margin-bottom: 20px;
@@ -76,7 +76,7 @@ ul.usp {
 li.usp {
   margin-bottom: 0.5em;
 }
-div.panel.usp {
+div.card.usp {
   margin-bottom: 0;
   flex: 1 1 auto;
 }
@@ -93,10 +93,10 @@ div.image-holder.usp > img {
 a.adapter {
   text-decoration: none;
 }
-a.adapter > div.panel-primary {
+a.adapter > .card.border-primary {
   border-color: rgba(10,118,187, .8);
 }
-a.adapter:hover > div.panel-primary {
+a.adapter:hover > .card.border-primary {
   background-color: rgba(10,118,187, .08);
 }
 img.adapter {
@@ -273,8 +273,6 @@ img.precice-support {
     word-wrap: normal;
     word-break: normal;
     hyphens: none;
-    -webkit-hyphens: none;
-    -ms-hyphens: none;
   }
 
   div.logo-holder {
@@ -314,8 +312,6 @@ img.precice-support {
     word-wrap: normal;
     word-break: normal;
     hyphens: none;
-    -webkit-hyphens: none;
-    -ms-hyphens: none;
   }
 }
 
@@ -354,8 +350,6 @@ p.institution {
   word-wrap: normal;
   word-break: normal;
   hyphens: none;
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
 }
 p.country {
   font-size: 0.85em;
@@ -367,8 +361,6 @@ p.country {
   word-wrap: normal;
   word-break: normal;
   hyphens: none;
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
 }
 div.logo-holder {
   height: 80px;
@@ -402,6 +394,8 @@ div.logo-holder > img {
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  flex: 1;
+  width: 100%;
 }
 
 .news-card a.news-link {
@@ -442,6 +436,7 @@ div.logo-holder > img {
 
 #news-container .col-md-4 {
   flex: 1;
+  display: flex;
 }
 
 
diff --git a/css/modern-business.css b/css/modern-business.css
deleted file mode 100644
index dfbcb4313ed..00000000000
--- a/css/modern-business.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/*!
- * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
- * Code licensed under the Apache License v2.0.
- * For details, see http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-/* Global Styles */
-
-html,
-body {
-    height: 100%;
-}
-
-.img-portfolio {
-    margin-bottom: 30px;
-}
-
-.img-hover:hover {
-    opacity: 0.8;
-}
-
-/* Home Page Carousel */
-
-header.carousel {
-    height: 50%;
-}
-
-header.carousel .item,
-header.carousel .item.active,
-header.carousel .carousel-inner {
-    height: 100%;
-}
-
-header.carousel .fill {
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-size: cover;
-}
-
-/* 404 Page Styles */
-
-.error-404 {
-    font-size: 100px;
-}
-
-/* Pricing Page Styles */
-
-.price {
-    display: block;
-    font-size: 50px;
-    line-height: 50px;
-}
-
-.price sup {
-    top: -20px;
-    left: 2px;
-    font-size: 20px;
-}
-
-.period {
-    display: block;
-    font-style: italic;
-}
-
-/* Footer Styles */
-
-footer {
-    padding: 50px 0;
-}
-
-/* Responsive Styles */
-
-@media(max-width:991px) {
-    .client-img,
-    .img-related {
-        margin-bottom: 30px;
-    }
-}
-
-@media(max-width:767px) {
-    .img-portfolio {
-        margin-bottom: 15px;
-    }
-
-    header.carousel .carousel {
-        height: 70%;
-    }
-}
diff --git a/css/printstyles.css b/css/printstyles.css
index a8fc64e7af0..0e16a0dd045 100644
--- a/css/printstyles.css
+++ b/css/printstyles.css
@@ -40,7 +40,7 @@ a[href^="http:"]::after, a[href^="https:"]::after, a[href^="ftp:"]::after {
 a[href] {
     color: #0A76BB !important;
 }
-a[href*="mailto"]::after, a[data-toggle="tooltip"]::after, a[href].noCrossRef::after, a[data-toggle="tab"]::after {
+a[href*="mailto"]::after, a[data-bs-toggle="tooltip"]::after, a[href].noCrossRef::after, a[data-bs-toggle="tab"]::after {
     content: "";
 }
 
diff --git a/css/theme-blue.css b/css/theme-blue.css
index db84521bf5f..c6b9866917e 100644
--- a/css/theme-blue.css
+++ b/css/theme-blue.css
@@ -8,7 +8,9 @@
 h3 {color: #ED1951; }
 h4 {color: #808080; }
 
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:hover,
+.nav-tabs .nav-link.active:focus {
     background-color: #248ec2;
     color: white;
 }
@@ -31,7 +33,7 @@ div.navbar-collapse .dropdown-menu > li > a:hover {
     font-weight: bold;
 }
 
-a[data-toggle="tooltip"] {
+a[data-bs-toggle="tooltip"] {
     color: #649345;
     font-style: italic;
     cursor: default;
diff --git a/css/theme-green.css b/css/theme-green.css
index 4991586b5a6..006b1e723c9 100644
--- a/css/theme-green.css
+++ b/css/theme-green.css
@@ -8,7 +8,9 @@
 h3 {color: #E50E51; }
 h4 {color: #808080; }
 
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:hover,
+.nav-tabs .nav-link.active:focus {
     background-color: #248ec2;
     color: white;
 }
@@ -39,7 +41,7 @@ div.navbar-collapse .dropdown-menu > li > a:hover {
     font-weight: bold;
 }
 
-a[data-toggle="tooltip"] {
+a[data-bs-toggle="tooltip"] {
     color: #649345;
     font-style: italic;
     cursor: default;
diff --git a/css/theme-precice.css b/css/theme-precice.css
index 77df59d5e56..ce964652a9e 100644
--- a/css/theme-precice.css
+++ b/css/theme-precice.css
@@ -57,7 +57,9 @@ light blue: #ECF7FE
     border-left: 5px solid #ED762C;
 }
 
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link.active:hover,
+.nav-tabs .nav-link.active:focus {
     background-color: #248ec2;
     color: white;
 }
@@ -82,48 +84,74 @@ div.navbar-collapse .dropdown-menu > li > a:hover {
     background-color: #FAFAFA !important;
     color: #248EC2;
     font-weight: bold;
+    padding-left: 20px;
 }
 
-a[data-toggle="tooltip"] {
+a[data-bs-toggle="tooltip"] {
     color: #649345;
     font-style: italic;
     cursor: default;
 }
 
-.navbar-inverse {
+.navbar {
     background-color: white;
-    /*border-color: #0A76BB;*/
     border-bottom: 2px solid #0A76BB;
-    /*background-color: #0A76BB;
-    border-color: #0A76BB;*/
+    padding: 0 !important;
+    margin: 0 0 20px 0;
 }
-.navbar-inverse .navbar-nav>li>a, .navbar-inverse, .navbar-inverse .navbar-nav>li>a:focus{
+
+.navbar > .container.topnavlinks {
+    width: 100%;
+}
+.navbar .navbar-nav .nav-link,
+.navbar .navbar-nav>li>a,
+.navbar .nav.navbar-nav>li>a,
+.navbar .navbar-nav>li>a:focus,
+.navbar .nav.navbar-nav>li>a:focus {
     color: #0A76BB;
-    /*color: white;*/
 }
 
-.navbar-inverse .navbar-nav>li>a:hover, a.fa.fa-home.fa-lg.navbar-brand:hover {
+.navbar .navbar-nav .nav-link:hover,
+.navbar .navbar-nav>li>a:hover,
+.navbar .nav.navbar-nav>li>a:hover,
+a.fa.fa-home.fa-lg.navbar-brand:hover {
      color: #ED762C;
 }
 
-.navbar-inverse .navbar-brand {
-    /*color: #040606;*/
+.navbar .navbar-brand {
     color: white;
 }
-.navbar-inverse .navbar-brand:hover {
+.navbar .navbar-brand:hover {
     color: #ED762C;
 }
 
-.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
-    color: #015CAE;
+.navbar .navbar-nav .nav-item.active > .nav-link,
+.navbar .navbar-nav .nav-item.active > .nav-link:hover,
+.navbar .navbar-nav .nav-item.active > .nav-link:focus,
+.navbar .nav.navbar-nav > li.active > a,
+.navbar .nav.navbar-nav > li.active > a:hover,
+.navbar .nav.navbar-nav > li.active > a:focus,
+.navbar .navbar-nav .nav-item.show > .nav-link {
+    background-color: #347DBE;
+    color: white !important;
 }
 
-.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
+.navbar .navbar-nav .nav-item > .nav-link:hover,
+.navbar .navbar-nav .nav-item > .nav-link:focus,
+.navbar .nav.navbar-nav > li > a:hover,
+.navbar .nav.navbar-nav > li > a:focus {
+    color: #ED762C;
+    background-color: transparent;
+}
+
+.navbar .navbar-nav > .show > a,
+.navbar .navbar-nav > .show > a:hover,
+.navbar .navbar-nav > .show > a:focus {
     background-color: #015CAE;
     color: #ffffff;
 }
 
-.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
+.navbar .navbar-collapse, .navbar .navbar-form {
     border-color: #248ec2 !important;
 }
 
@@ -134,6 +162,7 @@ a[data-toggle="tooltip"] {
 }
 .btn-secondary {
     color: #040606;
+    background-color: #fff;
     border-color: #ED762C;
     margin-bottom: 10px;
 }
@@ -142,17 +171,28 @@ a[data-toggle="tooltip"] {
     border-color: #ED762C;
     background-color: #e6e6e6;
 }
-.btn-default {
+
+
+/* BS5 migration alias — precice.org used btn-default, not gray outline-secondary */
+.btn-outline-secondary {
     color: #040606;
+    background-color: #fff;
     border-color: #040606;
 }
-.btn-default:hover, .btn-default:focus {
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus {
     color: #040606;
+    background-color: #e6e6e6;
     border-color: #040606;
 }
 
 
-.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
+.navbar .navbar-nav > .active > a,
+.navbar .nav.navbar-nav > li.active > a,
+.navbar .navbar-nav > .active > a:hover,
+.navbar .nav.navbar-nav > li.active > a:hover,
+.navbar .navbar-nav > .active > a:focus,
+.navbar .nav.navbar-nav > li.active > a:focus {
     background-color: #347DBE;
 }
 
@@ -160,7 +200,7 @@ a[data-toggle="tooltip"] {
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active,
-.open .dropdown-toggle.btn-primary {
+.show .dropdown-toggle.btn-primary {
     background-color: #248ec2;
     border-color: #347DBE;
 }
@@ -192,35 +232,41 @@ li.sidebarTitle {
 
 }
 
-.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
+.navbar .navbar-toggler:focus, .navbar .navbar-toggler:hover {
     background-color: #ECF7FE;
 }
 
-.navbar-inverse .navbar-toggle {
+.navbar .navbar-toggler {
     border-color: #0A76BB;
+    border: 1px solid #0A76BB;
+    padding: 9px 10px;
+    box-shadow: none;
 }
 
-.navbar-inverse .navbar-toggle .icon-bar {
-    background-color: #0A76BB;
+.navbar .navbar-toggler:focus {
+    box-shadow: none;
 }
 
-.nav a:hover {
+/* Sidebar hover only — topnav uses .navbar rules above */
+.sidebar-nav a.nav-link:hover {
     background-color: #ED762C;
     color: #f5f5f5;
 }
-
-.nav li a:hover {
-    background-color: #ED762C;
-}
-.panel-primary>panel-heading {
+.border-primary>.card-header {
     background-color: #0A76BB;
 }
-.panel-primary{
+.border-primary,
+.panel-primary,
+.panel.panel-primary {
     border-color: #0A76BB;
 }
 a {
     color: #0A76BB;
 }
+a:hover {
+    color: #085E95;
+    text-decoration: underline;
+}
 strong {
   color: #040606;
 }
@@ -238,7 +284,7 @@ strong {
   background-color: rgba(10,118,187,.08); /* a shade of #0a76bb*/
   border: 1px solid rgba(10,118,187, .10);
 }
-.background-light .panel-primary {
+.background-light .border-primary {
   /*border-color: #085E95;*/
   border-color: rgba(10,118,187,.10);
 }
@@ -251,13 +297,13 @@ strong {
   background-color: #0A76BB;
   /*color: white;*/
 }
-.background-dark .panel {
+.background-dark .card {
   /*background-color: #0A76BB;*/
   /*background-color: #ECF7FE;*/
   background-color: white;
   color: #040606;
 }
-.background-dark .panel-primary {
+.background-dark .border-primary {
   border-color: white;
 }
 .background-dark h2.section-header {
@@ -280,7 +326,7 @@ strong {
 .background-dark a {
   color: white;
 }
-.background-dark .panel p {
+.background-dark .card p {
   color: #040606;
 }
 .background-dark p:not(.quote)>a {
diff --git a/js/customscripts.js b/js/customscripts.js
index 0ceed66b3ee..cdb42929ab4 100644
--- a/js/customscripts.js
+++ b/js/customscripts.js
@@ -1,80 +1,74 @@
-$('#mysidebar').height($(".nav").height());
-
-
-$( document ).ready(function() {
-
-    //this script says, if the height of the viewport is greater than 800px, then insert affix class, which makes the nav bar float in a fixed
-    // position as your scroll. if you have a lot of nav items, this height may not work for you.
-    var h = $(window).height();
-    //console.log (h);
-    if (h > 700) {
-        $( "#mysidebar" ).attr("class", "nav affix");
+/**
+ * Site-wide behaviors (Bootstrap 5 native APIs + vanilla DOM).
+ * jQuery is still loaded in head.html for toc.js and Algolia instantsearch only.
+ */
+
+// DOMContentLoaded: replaces $(document).ready() for sidebar, tooltips, anchors, collapse
+document.addEventListener('DOMContentLoaded', function () {
+  // Viewport height > 700px → sticky doc sidebar (#mysidebar)
+  if (window.innerHeight > 700) {
+    var sidebar = document.getElementById('mysidebar');
+    if (sidebar) {
+      sidebar.classList.add('sticky-top');
+      sidebar.style.top = '20px';
     }
-    // activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
-    $('[data-toggle="tooltip"]').tooltip({
-        placement : 'top'
-    });
-
-    /**
-     * AnchorJS
-     */
-    anchors.add('main h2:not(.no-anchor),main h3:not(.no-anchor),main h4:not(.no-anchor),main h5:not(.no-anchor)');
-
-});
-
-// needed for nav tabs on pages. See Formatting > Nav tabs for more details.
-// script from http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
-$(function() {
-    var json, tabsState;
-    $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
-        var href, json, parentId, tabsState;
-
-        tabsState = localStorage.getItem("tabs-state");
-        json = JSON.parse(tabsState || "{}");
-        parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
-        href = $(e.target).attr('href');
-        json[parentId] = href;
-
-        return localStorage.setItem("tabs-state", JSON.stringify(json));
-    });
+  }
 
-    tabsState = localStorage.getItem("tabs-state");
-    json = JSON.parse(tabsState || "{}");
+  // bootstrap.Tooltip replaces $.fn.tooltip()
+  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
+    bootstrap.Tooltip.getOrCreateInstance(el, { placement: 'top' });
+  });
 
-    $.each(json, function(containerId, href) {
-        return $("#" + containerId + " a[href=" + href + "]").tab('show');
-    });
-
-    $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
-        var $this = $(this);
-        if (!json[$this.attr("id")]) {
-            return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
+  if (typeof anchors !== 'undefined') {
+    anchors.add('main h2:not(.no-anchor),main h3:not(.no-anchor),main h4:not(.no-anchor),main h5:not(.no-anchor)');
+  }
+
+  // Leaf nav clicks: bootstrap.Collapse.hide() replaces $('.collapse.show').collapse('hide')
+  document.querySelectorAll('.sidebar-nav a.nav-link:not([data-bs-toggle="collapse"])').forEach(function (link) {
+    link.addEventListener('click', function () {
+      var parentUl = link.closest('ul');
+      if (!parentUl) return;
+      parentUl.querySelectorAll('.collapse.show').forEach(function (collapseEl) {
+        var instance = bootstrap.Collapse.getInstance(collapseEl);
+        if (instance) {
+          instance.hide();
+        } else {
+          bootstrap.Collapse.getOrCreateInstance(collapseEl, { toggle: false }).hide();
         }
+      });
     });
-});
-
-// this makes the logos toggle as per the option chosen by clicking on the specific buttons.
-$(function() {
-    $(document).on('click', '.logowall-filter .filter-btn', function(event) {
-        var $button = $(this);
-        var filter = String($button.data('filter') || '').toLowerCase();
-        var $filterBar = $button.closest('.logowall-filter');
-        var targetSel = $filterBar.attr('data-logowall-target');
-        var $grid = targetSel ? $(targetSel) : $();
-        var $items = $grid.find('.logo-item');
+  });
 
-        if (!$grid.length || !$items.length) {
-            return;
-        }
-
-        event.preventDefault();
-
-        $filterBar.find('.filter-btn').removeClass('active btn-primary').addClass('btn-default').attr('aria-pressed', 'false');
-        $button.addClass('active btn-primary').removeClass('btn-default').attr('aria-pressed', 'true');
+});
 
-        $items.each(function() {
-            var matches = filter === 'all' || String($(this).data('category') || '').toLowerCase() === filter;
-            $(this).toggleClass('hidden', !matches);
-        });
-    });
-});
\ No newline at end of file
+// Click delegation: logo wall filter (replaces $(document).on('click', '.logowall-filter .filter-btn', ...))
+document.addEventListener('click', function (event) {
+  var button = event.target.closest('.logowall-filter .filter-btn');
+  if (!button) return;
+
+  var filter = String(button.dataset.filter || '').toLowerCase();
+  var filterBar = button.closest('.logowall-filter');
+  var targetSel = filterBar && filterBar.getAttribute('data-logowall-target');
+  var grid = targetSel ? document.querySelector(targetSel) : null;
+  if (!grid) return;
+
+  var items = grid.querySelectorAll('.logo-item');
+  if (!items.length) return;
+
+  event.preventDefault();
+
+  filterBar.querySelectorAll('.filter-btn').forEach(function (btn) {
+    btn.classList.remove('active', 'btn-primary');
+    btn.classList.add('btn-secondary');
+    btn.setAttribute('aria-pressed', 'false');
+  });
+  button.classList.add('active', 'btn-primary');
+  button.classList.remove('btn-secondary');
+  button.setAttribute('aria-pressed', 'true');
+
+  items.forEach(function (item) {
+    var category = String(item.dataset.category || '').toLowerCase();
+    var matches = filter === 'all' || category === filter;
+    item.classList.toggle('d-none', !matches);
+  });
+});
diff --git a/js/github-queries.js b/js/github-queries.js
index 5cbabecbf8f..26c07840fae 100644
--- a/js/github-queries.js
+++ b/js/github-queries.js
@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
           var link = document.createElement('a');
           link.setAttribute('href', 'https://github.com/precice/precice/');
-          link.className = 'btn btn-default no-icon action-button';
+          link.className = 'btn btn-secondary no-icon action-button';
           link.setAttribute('role', 'button');
           link.setAttribute('target', '_blank');
           link.setAttribute('rel', 'noopener noreferrer');
diff --git a/js/jquery.navgoco.min.js b/js/jquery.navgoco.min.js
deleted file mode 100644
index 4ba44753323..00000000000
--- a/js/jquery.navgoco.min.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * jQuery Navgoco Menus Plugin v0.2.1 (2014-04-11)
- * https://github.com/tefra/navgoco
- *
- * Copyright (c) 2014 Chris T (@tefra)
- * BSD - https://github.com/tefra/navgoco/blob/master/LICENSE-BSD
- */
-!function(a){"use strict";var b=function(b,c,d){return this.el=b,this.$el=a(b),this.options=c,this.uuid=this.$el.attr("id")?this.$el.attr("id"):d,this.state={},this.init(),this};b.prototype={init:function(){var b=this;b._load(),b.$el.find("ul").each(function(c){var d=a(this);d.attr("data-index",c),b.options.save&&b.state.hasOwnProperty(c)?(d.parent().addClass(b.options.openClass),d.show()):d.parent().hasClass(b.options.openClass)?(d.show(),b.state[c]=1):d.hide()});var c=a("<span></span>").prepend(b.options.caretHtml),d=b.$el.find("li > a");b._trigger(c,!1),b._trigger(d,!0),b.$el.find("li:has(ul) > a").prepend(c)},_trigger:function(b,c){var d=this;b.on("click",function(b){b.stopPropagation();var e=c?a(this).next():a(this).parent().next(),f=!1;if(c){var g=a(this).attr("href");f=void 0===g||""===g||"#"===g}if(e=e.length>0?e:!1,d.options.onClickBefore.call(this,b,e),!c||e&&f)b.preventDefault(),d._toggle(e,e.is(":hidden")),d._save();else if(d.options.accordion){var h=d.state=d._parents(a(this));d.$el.find("ul").filter(":visible").each(function(){var b=a(this),c=b.attr("data-index");h.hasOwnProperty(c)||d._toggle(b,!1)}),d._save()}d.options.onClickAfter.call(this,b,e)})},_toggle:function(b,c){var d=this,e=b.attr("data-index"),f=b.parent();if(d.options.onToggleBefore.call(this,b,c),c){if(f.addClass(d.options.openClass),b.slideDown(d.options.slide),d.state[e]=1,d.options.accordion){var g=d.state=d._parents(b);g[e]=d.state[e]=1,d.$el.find("ul").filter(":visible").each(function(){var b=a(this),c=b.attr("data-index");g.hasOwnProperty(c)||d._toggle(b,!1)})}}else f.removeClass(d.options.openClass),b.slideUp(d.options.slide),d.state[e]=0;d.options.onToggleAfter.call(this,b,c)},_parents:function(b,c){var d={},e=b.parent(),f=e.parents("ul");return f.each(function(){var b=a(this),e=b.attr("data-index");return e?void(d[e]=c?b:1):!1}),d},_save:function(){if(this.options.save){var b={};for(var d in this.state)1===this.state[d]&&(b[d]=1);c[this.uuid]=this.state=b,a.cookie(this.options.cookie.name,JSON.stringify(c),this.options.cookie)}},_load:function(){if(this.options.save){if(null===c){var b=a.cookie(this.options.cookie.name);c=b?JSON.parse(b):{}}this.state=c.hasOwnProperty(this.uuid)?c[this.uuid]:{}}},toggle:function(b){var c=this,d=arguments.length;if(1>=d)c.$el.find("ul").each(function(){var d=a(this);c._toggle(d,b)});else{var e,f={},g=Array.prototype.slice.call(arguments,1);d--;for(var h=0;d>h;h++){e=g[h];var i=c.$el.find('ul[data-index="'+e+'"]').first();if(i&&(f[e]=i,b)){var j=c._parents(i,!0);for(var k in j)f.hasOwnProperty(k)||(f[k]=j[k])}}for(e in f)c._toggle(f[e],b)}c._save()},destroy:function(){a.removeData(this.$el),this.$el.find("li:has(ul) > a").unbind("click"),this.$el.find("li:has(ul) > a > span").unbind("click")}},a.fn.navgoco=function(c){if("string"==typeof c&&"_"!==c.charAt(0)&&"init"!==c)var d=!0,e=Array.prototype.slice.call(arguments,1);else c=a.extend({},a.fn.navgoco.defaults,c||{}),a.cookie||(c.save=!1);return this.each(function(f){var g=a(this),h=g.data("navgoco");h||(h=new b(this,d?a.fn.navgoco.defaults:c,f),g.data("navgoco",h)),d&&h[c].apply(h,e)})};var c=null;a.fn.navgoco.defaults={caretHtml:"",accordion:!1,openClass:"open",save:!0,cookie:{name:"navgoco",expires:!1,path:"/"},slide:{duration:400,easing:"swing"},onClickBefore:a.noop,onClickAfter:a.noop,onToggleBefore:a.noop,onToggleAfter:a.noop}}(jQuery);
\ No newline at end of file
diff --git a/js/news-collect.js b/js/news-collect.js
index a00749dd249..41625b7a97a 100644
--- a/js/news-collect.js
+++ b/js/news-collect.js
@@ -24,7 +24,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
     for (const topic of topics.slice(0, 3)) {
       const col = document.createElement("div");
-      col.className = "col-md-4 col-sm-6 col-xs-12";
+      col.className = "col-md-4 col-sm-6 col-12";
 
       const card = document.createElement("div");
       card.className = "news-card";
