diff --git a/frontend/bootstrap.scss b/frontend/bootstrap.scss
new file mode 100644
index 0000000..45d1cf3
--- /dev/null
+++ b/frontend/bootstrap.scss
@@ -0,0 +1,6 @@
+$red: #cb0000;
+
+@use "npm:bootstrap/scss/bootstrap.scss" with (
+  $enable-rounded: false,
+  $danger: $red
+);
diff --git a/frontend/index.css b/frontend/index.css
index d60456d..a4e9322 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,4 +1,4 @@
-@import "npm:bootstrap/dist/css/bootstrap.css";
+@import "bootstrap.scss";
 @import "npm:bootstrap-icons/font/bootstrap-icons.css";
 
 img#header-logo {
diff --git a/package.json b/package.json
index 1771197..849758f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "url": "https://git.readonly.ch/bouzoure/pop-camarades"
   },
   "devDependencies": {
+    "@parcel/transformer-sass": "2.15.0",
     "parcel": "^2.15.0",
     "prettier": "^3.5.3",
     "prettier-plugin-jinja-template": "^2.1.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 233a827..15ee3fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,9 @@ importers:
         specifier: ^3.7.1
         version: 3.7.1
     devDependencies:
+      '@parcel/transformer-sass':
+        specifier: 2.15.0
+        version: 2.15.0(@parcel/core@2.15.0(@swc/helpers@0.5.17))
       parcel:
         specifier: ^2.15.0
         version: 2.15.0(@swc/helpers@0.5.17)
@@ -370,6 +373,10 @@ packages:
     resolution: {integrity: sha512-I108zq+ZwQrGXgkbdIXLW3VbUQhW0gjACiHVEXM380wWm/44bbrGLbD6VMupq5svP2Y5sKkopI9zzjuYUHplHw==}
     engines: {node: '>= 16.0.0', parcel: ^2.15.0}
 
+  '@parcel/transformer-sass@2.15.0':
+    resolution: {integrity: sha512-upcwFGc7fd0QlHSReLc4OTZTcwDGlHlDT70cQOCbAPRRE6YDGIJYqhAeqTWShEDsZBets4GJyu6SN1lDsXjTIQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.15.0}
+
   '@parcel/transformer-svg@2.15.0':
     resolution: {integrity: sha512-pbhbkxM4mWjH4kpg8F+0xmHbXNCTavJ4DzrCoYgLZszZKYMhOYQZZ/uHkx4wOZ+b3n4iPe4QDlByYkh0QACxbw==}
     engines: {node: '>= 16.0.0', parcel: ^2.15.0}
@@ -584,6 +591,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
   chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
@@ -643,6 +654,9 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  immutable@5.1.2:
+    resolution: {integrity: sha512-qHKXW1q6liAk1Oys6umoaZbDRqjcjgSrbnrifHsfsttza7zcvRAsL7mMV6xWcyhwQy7Xj5v4hhbr6b+iDYwlmQ==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -794,17 +808,30 @@ packages:
     resolution: {integrity: sha512-FPvF2XxTSikpJxcr+bHut2H4gJ17+18Uy20D5/F+SKzFap62R3cM5wH6b8WN3LyGSYeQilLEcJcR1fjBSI2S1A==}
     engines: {node: '>=0.10.0'}
 
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  sass@1.88.0:
+    resolution: {integrity: sha512-sF6TWQqjFvr4JILXzG4ucGOLELkESHL+I5QJhh7CNaE+Yge0SI+ehCatsXhJ7ymU1hAFcIS3/PBpjdIbXoyVbg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   semver@7.7.1:
     resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
     hasBin: true
 
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1426,6 +1453,15 @@ snapshots:
       - '@parcel/core'
       - napi-wasm
 
+  '@parcel/transformer-sass@2.15.0(@parcel/core@2.15.0(@swc/helpers@0.5.17))':
+    dependencies:
+      '@parcel/plugin': 2.15.0(@parcel/core@2.15.0(@swc/helpers@0.5.17))
+      '@parcel/source-map': 2.1.1
+      sass: 1.88.0
+    transitivePeerDependencies:
+      - '@parcel/core'
+      - napi-wasm
+
   '@parcel/transformer-svg@2.15.0(@parcel/core@2.15.0(@swc/helpers@0.5.17))':
     dependencies:
       '@parcel/diagnostic': 2.15.0
@@ -1626,6 +1662,10 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
   chrome-trace-event@1.0.4: {}
 
   clone@2.1.2: {}
@@ -1664,6 +1704,8 @@ snapshots:
 
   has-flag@4.0.0: {}
 
+  immutable@5.1.2: {}
+
   is-extglob@2.1.1: {}
 
   is-glob@4.0.3:
@@ -1811,12 +1853,24 @@ snapshots:
 
   react-refresh@0.16.0: {}
 
+  readdirp@4.1.2: {}
+
   regenerator-runtime@0.14.1: {}
 
   safe-buffer@5.2.1: {}
 
+  sass@1.88.0:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.2
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+
   semver@7.7.1: {}
 
+  source-map-js@1.2.1: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
diff --git a/views/people.html b/views/people.html
index e287c7a..10506bb 100644
--- a/views/people.html
+++ b/views/people.html
@@ -49,10 +49,7 @@
       {% endif %}
     </div>
 
-    <div
-      id="search-container"
-      class="h-100 p-4 mb-3 bg-body-tertiary border rounded-3"
-    >
+    <div id="search-container" class="h-100 p-4 mb-3 bg-body-tertiary border">
       <div class="row">
         <div class="col-lg-6 mb-3">
           <label for="name" class="form-label">Nom et prénom</label>
@@ -83,11 +80,10 @@
         </div>
         <div class="col-sm-6 col-lg-3 mb-3 pt-3">
           {% if PermShow %}
-            <div class="form-check form-switch">
+            <div class="form-check">
               <input
                 class="form-check-input"
                 type="checkbox"
-                role="switch"
                 data-search-field="active"
                 data-search-advanced="false"
                 id="active"
@@ -106,11 +102,10 @@
           {% endif %}
 
           {% if PermShowArchived %}
-            <div class="form-check form-switch">
+            <div class="form-check">
               <input
                 class="form-check-input"
                 type="checkbox"
-                role="switch"
                 data-search-field="archive"
                 data-search-advanced="false"
                 id="archive"
diff --git a/views/role_form.html b/views/role_form.html
index 9978f7f..c07e508 100644
--- a/views/role_form.html
+++ b/views/role_form.html
@@ -49,267 +49,221 @@
         </div>
       </div>
 
-      <div class="mt-4 mb-3 d-md-none">
-        <span class="h4"> Permissions membres </span>
+      <div class="row mb-3">
+        <div class="col-md-2">
+          <div class="mb-2">Permissions membres</div>
+        </div>
+        <div class="col-md-10">
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="show_member"
+              name="show_member"
+              autocomplete="off"
+              {% if Role.ShowMember %}checked{% endif %}
+            />
+            <label for="show_member" class="form-label"> Afficher </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="create_member"
+              name="create_member"
+              autocomplete="off"
+              {% if Role.CreateMember %}checked{% endif %}
+            />
+            <label for="create_member" class="form-label"> Créer </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="edit_member"
+              name="edit_member"
+              autocomplete="off"
+              {% if Role.EditMember %}checked{% endif %}
+            />
+            <label for="edit_member" class="form-label"> Modifier </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="show_archived_member"
+              name="show_archived_member"
+              autocomplete="off"
+              {% if Role.ShowArchivedMember %}checked{% endif %}
+            />
+            <label for="show_archived_member" class="form-label">
+              Afficher archivés
+            </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="archive_member"
+              name="archive_member"
+              autocomplete="off"
+              {% if Role.ArchiveMember %}checked{% endif %}
+            />
+            <label for="archive_member" class="form-label"> Archiver </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="restore_member"
+              name="restore_member"
+              autocomplete="off"
+              {% if Role.RestoreMember %}checked{% endif %}
+            />
+            <label for="restore_member" class="form-label"> Restaurer </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="purge_member"
+              name="purge_member"
+              autocomplete="off"
+              {% if Role.PurgeMember %}checked{% endif %}
+            />
+            <label for="purge_member" class="form-label">
+              Purger (suppression définitive)
+            </label>
+          </div>
+
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="convert_member_to_contact"
+              name="convert_member_to_contact"
+              autocomplete="off"
+              {% if Role.ConvertMemberToContact %}checked{% endif %}
+            />
+            <label for="convert_member_to_contact" class="form-label">
+              Convertir en contacts
+            </label>
+          </div>
+        </div>
       </div>
 
       <div class="row mb-3">
         <div class="col-md-2">
-          <div class="d-none d-md-block">Permissions membres</div>
+          <div class="mb-2">Permissions contacts</div>
         </div>
         <div class="col-md-10">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="show_member"
-            name="show_member"
-            autocomplete="off"
-            {% if Role.ShowMember %}checked{% endif %}
-          />
-          <label for="show_member" class="form-label"> Afficher membres </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="show_contact"
+              name="show_contact"
+              autocomplete="off"
+              {% if Role.ShowContact %}checked{% endif %}
+            />
+            <label for="show_contact" class="form-label"> Afficher </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="create_member"
-            name="create_member"
-            autocomplete="off"
-            {% if Role.CreateMember %}checked{% endif %}
-          />
-          <label for="create_member" class="form-label"> Créer membres </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="create_contact"
+              name="create_contact"
+              autocomplete="off"
+              {% if Role.CreateContact %}checked{% endif %}
+            />
+            <label for="create_contact" class="form-label"> Créer </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="edit_member"
-            name="edit_member"
-            autocomplete="off"
-            {% if Role.EditMember %}checked{% endif %}
-          />
-          <label for="edit_member" class="form-label"> Modifier membres </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="edit_contact"
+              name="edit_contact"
+              autocomplete="off"
+              {% if Role.EditContact %}checked{% endif %}
+            />
+            <label for="edit_contact" class="form-label"> Modifier </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="show_archived_member"
-            name="show_archived_member"
-            autocomplete="off"
-            {% if Role.ShowArchivedMember %}checked{% endif %}
-          />
-          <label for="show_archived_member" class="form-label">
-            Afficher membres archivés
-          </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="show_archived_contact"
+              name="show_archived_contact"
+              autocomplete="off"
+              {% if Role.ShowArchivedContact %}checked{% endif %}
+            />
+            <label for="show_archived_contact" class="form-label">
+              Afficher archivés
+            </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="archive_member"
-            name="archive_member"
-            autocomplete="off"
-            {% if Role.ArchiveMember %}checked{% endif %}
-          />
-          <label for="archive_member" class="form-label">
-            Archiver membres
-          </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="archive_contact"
+              name="archive_contact"
+              autocomplete="off"
+              {% if Role.ArchiveContact %}checked{% endif %}
+            />
+            <label for="archive_contact" class="form-label"> Archiver </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="restore_member"
-            name="restore_member"
-            autocomplete="off"
-            {% if Role.RestoreMember %}checked{% endif %}
-          />
-          <label for="restore_member" class="form-label">
-            Restaurer membres
-          </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="restore_contact"
+              name="restore_contact"
+              autocomplete="off"
+              {% if Role.RestoreContact %}checked{% endif %}
+            />
+            <label for="restore_contact" class="form-label"> Restaurer </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="purge_member"
-            name="purge_member"
-            autocomplete="off"
-            {% if Role.PurgeMember %}checked{% endif %}
-          />
-          <label for="purge_member" class="form-label">
-            Purger membres (suppression définitive)
-          </label>
-        </div>
-      </div>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="purge_contact"
+              name="purge_contact"
+              autocomplete="off"
+              {% if Role.PurgeContact %}checked{% endif %}
+            />
+            <label for="purge_contact" class="form-label">
+              Purger (suppression définitive)
+            </label>
+          </div>
 
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="convert_member_to_contact"
-            name="convert_member_to_contact"
-            autocomplete="off"
-            {% if Role.ConvertMemberToContact %}checked{% endif %}
-          />
-          <label for="convert_member_to_contact" class="form-label">
-            Convertir membres en contacts
-          </label>
-        </div>
-      </div>
-
-      <div class="mt-4 mb-3 d-md-none">
-        <span class="h4"> Permissions contacts </span>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-2">
-          <div class="d-none d-md-block">Permissions contacts</div>
-        </div>
-        <div class="col-md-10">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="show_contact"
-            name="show_contact"
-            autocomplete="off"
-            {% if Role.ShowContact %}checked{% endif %}
-          />
-          <label for="show_contact" class="form-label">
-            Afficher contacts
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="create_contact"
-            name="create_contact"
-            autocomplete="off"
-            {% if Role.CreateContact %}checked{% endif %}
-          />
-          <label for="create_contact" class="form-label">
-            Créer contacts
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="edit_contact"
-            name="edit_contact"
-            autocomplete="off"
-            {% if Role.EditContact %}checked{% endif %}
-          />
-          <label for="edit_contact" class="form-label">
-            Modifier contacts
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="show_archived_contact"
-            name="show_archived_contact"
-            autocomplete="off"
-            {% if Role.ShowArchivedContact %}checked{% endif %}
-          />
-          <label for="show_archived_contact" class="form-label">
-            Afficher contacts archivés
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="archive_contact"
-            name="archive_contact"
-            autocomplete="off"
-            {% if Role.ArchiveContact %}checked{% endif %}
-          />
-          <label for="archive_contact" class="form-label">
-            Archiver contacts
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="restore_contact"
-            name="restore_contact"
-            autocomplete="off"
-            {% if Role.RestoreContact %}checked{% endif %}
-          />
-          <label for="restore_contact" class="form-label">
-            Restaurer contacts
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="purge_contact"
-            name="purge_contact"
-            autocomplete="off"
-            {% if Role.PurgeContact %}checked{% endif %}
-          />
-          <label for="purge_contact" class="form-label">
-            Purger contacts (suppression définitive)
-          </label>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <div class="col-md-10 offset-md-2">
-          <input
-            type="checkbox"
-            class="form-check-input me-2"
-            id="convert_contact_to_member"
-            name="convert_contact_to_member"
-            autocomplete="off"
-            {% if Role.ConvertContactToMember %}checked{% endif %}
-          />
-          <label for="convert_contact_to_member" class="form-label">
-            Convertir contacts en membres
-          </label>
+          <div class="mb-1">
+            <input
+              type="checkbox"
+              class="form-check-input me-2"
+              id="convert_contact_to_member"
+              name="convert_contact_to_member"
+              autocomplete="off"
+              {% if Role.ConvertContactToMember %}checked{% endif %}
+            />
+            <label for="convert_contact_to_member" class="form-label">
+              Convertir en membres
+            </label>
+          </div>
         </div>
       </div>