diff --git a/plinth/modules/networks/templates/connections_fields.html b/plinth/modules/networks/templates/connections_fields.html
index 99206e5c8..167ee624b 100644
--- a/plinth/modules/networks/templates/connections_fields.html
+++ b/plinth/modules/networks/templates/connections_fields.html
@@ -15,21 +15,19 @@
 {% endif %}
 
 <div class="accordion" id="accordion-connections-fields">
-  <div class='field-group'>
-    <div class="card-header" id="header-general">
-      <h4>
-        <button class="btn btn-block text-left dropdown-toggle" type="button"
-                data-toggle="collapse" data-target="#collapse-general"
-                aria-expanded="true" aria-controls="collapse-general">
-          {% trans "General" %}
-        </button>
-      </h4>
-    </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="header-general">
+      <button class="accordion-button" type="button"
+              data-bs-toggle="collapse" data-bs-target="#collapse-general"
+              aria-expanded="true" aria-controls="collapse-general">
+        {% trans "General" %}
+      </button>
+    </h2>
 
-    <div id="collapse-general" class="collapse show"
+    <div id="collapse-general" class="accordion-collpase collapse show"
          aria-labelledby="header-general"
-         data-parent="#accordion-connections-fields">
-      <div class="card-body">
+         data-bs-parent="#accordion-connections-fields">
+      <div class="accordion-body field-group">
         {{ form.name|bootstrap }}
         {{ form.interface|bootstrap }}
         {{ form.zone|bootstrap }}
@@ -50,23 +48,21 @@
   {% endif %}
 
   {% if form.ipv4_method %}
-    <div class="field-group">
-      <div class="card-header" id="header-ipv4">
-        <h4>
-          <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
-                  type="button" data-toggle="collapse"
-                  data-target="#collapse-ipv4"
-                  aria-expanded="{{ form.errors|yesno:"true,false" }}"
-                  aria-controls="collapse-ipv4">
-            {% trans "IPv4" %}
-          </button>
-        </h4>
-      </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="header-ipv4">
+        <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
+                type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-ipv4"
+                aria-expanded="{{ form.errors|yesno:"true,false" }}"
+                aria-controls="collapse-ipv4">
+          {% trans "IPv4" %}
+        </button>
+      </h2>
 
-      <div id="collapse-ipv4" class="collapse {{ form.errors|yesno:"show," }}"
+      <div id="collapse-ipv4" class="accordion-collpase collapse {{ form.errors|yesno:"show," }}"
            aria-labelledby="header-ipv4"
-           data-parent="#accordion-connections-fields">
-        <div class="card-body">
+           data-bs-parent="#accordion-connections-fields">
+        <div class="accordion-body field-group">
           {{ form.ipv4_method|bootstrap }}
           {{ form.ipv4_address|bootstrap }}
           {{ form.ipv4_netmask|bootstrap }}
@@ -79,23 +75,21 @@
   {% endif %}
 
   {% if form.ipv6_method %}
-    <div class="field-group">
-      <div class="card-header" id="header-ipv6">
-        <h4>
-          <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
-                  type="button" data-toggle="collapse"
-                  data-target="#collapse-ipv6"
-                  aria-expanded="{{ form.errors|yesno:"true,false" }}"
-                  aria-controls="collapse-ipv6">
-            {% trans "IPv6" %}
-          </button>
-        </h4>
-      </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="header-ipv6">
+        <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
+                type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-ipv6"
+                aria-expanded="{{ form.errors|yesno:"true,false" }}"
+                aria-controls="collapse-ipv6">
+          {% trans "IPv6" %}
+        </button>
+      </h2>
 
-      <div id="collapse-ipv6" class="collapse {{ form.errors|yesno:"show," }}"
+      <div id="collapse-ipv6" class="accordion-collpase collapse {{ form.errors|yesno:"show," }}"
            aria-labelledby="header-ipv6"
-           data-parent="#accordion-connections-fields">
-        <div class="card-body">
+           data-bs-parent="#accordion-connections-fields">
+        <div class="accordion-body field-group">
           {{ form.ipv6_method|bootstrap }}
           {{ form.ipv6_address|bootstrap }}
           {{ form.ipv6_prefix|bootstrap }}
diff --git a/plinth/modules/networks/templates/connections_fields_pppoe.html b/plinth/modules/networks/templates/connections_fields_pppoe.html
index f210d5faa..d5c7e96f3 100644
--- a/plinth/modules/networks/templates/connections_fields_pppoe.html
+++ b/plinth/modules/networks/templates/connections_fields_pppoe.html
@@ -5,23 +5,21 @@
 {% load bootstrap %}
 {% load i18n %}
 
-<div class="field-group">
-  <div class="card-header" id="header-pppoe">
-    <h4>
-      <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
-              type="button" data-toggle="collapse"
-              data-target="#collapse-pppoe"
-              aria-expanded="{{ form.errors|yesno:"true,false" }}"
-              aria-controls="collapse-pppoe">
-        {% trans "PPPoE" %}
-      </button>
-    </h4>
-  </div>
+<div class="accordion-item">
+  <h2 class="accordion-header" id="header-pppoe">
+    <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
+            type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapse-pppoe"
+            aria-expanded="{{ form.errors|yesno:"true,false" }}"
+            aria-controls="collapse-pppoe">
+      {% trans "PPPoE" %}
+    </button>
+  </h2>
 
-  <div id="collapse-pppoe" class="collapse  {{ form.errors|yesno:"show," }}"
+  <div id="collapse-pppoe" class="accordion-collapse collapse {{ form.errors|yesno:"show," }}"
        aria-labelledby="header-pppoe"
-       data-parent="#accordion-connections-fields">
-    <div class="card-body">
+       data-bs-parent="#accordion-connections-fields">
+    <div class="accordion-body field-group">
       {{ form.username|bootstrap }}
       {{ form.password|bootstrap }}
       {{ form.show_password|bootstrap }}
diff --git a/plinth/modules/networks/templates/connections_fields_privacy.html b/plinth/modules/networks/templates/connections_fields_privacy.html
index 9e292fc08..2196fb85c 100644
--- a/plinth/modules/networks/templates/connections_fields_privacy.html
+++ b/plinth/modules/networks/templates/connections_fields_privacy.html
@@ -5,23 +5,21 @@
 {% load bootstrap %}
 {% load i18n %}
 
-<div class='field-group'>
-  <div class="card-header" id="header-privacy">
-    <h4>
-      <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
-              type="button" data-toggle="collapse"
-              data-target="#collapse-privacy"
-              aria-expanded="{{ form.errors|yesno:"true,false" }}"
-              aria-controls="collapse-privacy">
-        {% trans "Privacy" %}
-      </button>
-    </h4>
-  </div>
+<div class="accordion-item">
+  <h2 class="accordion-header" id="header-privacy">
+    <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
+            type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapse-privacy"
+            aria-expanded="{{ form.errors|yesno:"true,false" }}"
+            aria-controls="collapse-privacy">
+      {% trans "Privacy" %}
+    </button>
+  </h2>
 
-  <div id="collapse-privacy" class="collapse {{ form.errors|yesno:"show," }}"
+  <div id="collapse-privacy" class="accordion-collapse collapse {{ form.errors|yesno:"show," }}"
        aria-labelledby="header-privacy"
-       data-parent="#accordion-connections-fields">
-    <div class="card-body">
+       data-bs-parent="#accordion-connections-fields">
+    <div class="accordion-body field-group">
       {{ form.dns_over_tls|bootstrap }}
     </div>
   </div>
diff --git a/plinth/modules/networks/templates/connections_fields_wifi.html b/plinth/modules/networks/templates/connections_fields_wifi.html
index cadea7b98..01fa779b5 100644
--- a/plinth/modules/networks/templates/connections_fields_wifi.html
+++ b/plinth/modules/networks/templates/connections_fields_wifi.html
@@ -5,23 +5,21 @@
 {% load bootstrap %}
 {% load i18n %}
 
-<div class="field-group">
-  <div class="card-header" id="header-wifi">
-    <h4>
-      <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
-              type="button" data-toggle="collapse"
-              data-target="#collapse-wifi"
-              aria-expanded="{{ form.errors|yesno:"true,false" }}"
-              aria-controls="collapse-wifi">
-        {% trans "Wi-Fi" %}
-      </button>
-    </h4>
-  </div>
+<div class="accordion-item">
+  <h2 class="accordion-header" id="header-wifi">
+    <button class="accordion-button {{ form.errors|yesno:",collapsed" }}"
+            type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapse-wifi"
+            aria-expanded="{{ form.errors|yesno:"true,false" }}"
+            aria-controls="collapse-wifi">
+      {% trans "Wi-Fi" %}
+    </button>
+  </h2>
 
-  <div id="collapse-wifi" class="collapse  {{ form.errors|yesno:"show," }}"
+  <div id="collapse-wifi" class="accordion-collapse collapse {{ form.errors|yesno:"show," }}"
        aria-labelledby="header-wifi"
-       data-parent="#accordion-connections-fields">
-    <div class="card-body">
+       data-bs-parent="#accordion-connections-fields">
+    <div class="accordion-body field-group">
       {{ form.ssid|bootstrap }}
       {{ form.mode|bootstrap }}
       {{ form.band|bootstrap }}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 37cbe4f6f..b2d7ed80f 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -975,6 +975,6 @@ img.notification-icon {
     margin-bottom: 1.25rem;
 }
 
-.accordion .card-header h4 {
+.accordion-header {
     margin: 0;
 }