From 3b0447b31602a478020db590e456ec72c2280ebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Bouzour=C3=A8ne?= <william@bouzourene.ch>
Date: Sat, 12 Jul 2025 15:50:10 +0200
Subject: [PATCH] Improve UI (titles, lists, sympathisant)

---
 views/field.html           |   2 +-
 views/field_form.html      |  10 +--
 views/fields.html          | 159 ++++++++++++++++++++-----------------
 views/lists.html           |  70 ++++++++--------
 views/partials/header.html |   2 +-
 views/people.html          |  81 ++++++++++---------
 views/person.html          |  14 ++--
 views/person_form.html     |   2 +-
 views/role.html            |  20 ++---
 views/role_form.html       |   4 +-
 views/roles.html           |  49 ++++++------
 views/section.html         |   2 +-
 views/section_form.html    |   2 +-
 views/sections.html        |  17 ++--
 views/users.html           |  80 ++++++++++---------
 15 files changed, 276 insertions(+), 238 deletions(-)

diff --git a/views/field.html b/views/field.html
index 6f0aaed..91d09c0 100644
--- a/views/field.html
+++ b/views/field.html
@@ -79,7 +79,7 @@
               <span class="input-group-text">
                 <a href="/admin/lists/{{ Field.List.ID }}">
                   Afficher
-                  <i class="bi-box-arrow align-items-center-up-right ms-1"></i>
+                  <i class="bi-box-arrow-up-right ms-1"></i>
                 </a>
               </span>
             </div>
diff --git a/views/field_form.html b/views/field_form.html
index 6b34789..2a8ba57 100644
--- a/views/field_form.html
+++ b/views/field_form.html
@@ -36,7 +36,7 @@
       {% endif %}
 
       <div class="row align-items-center mb-3">
-        <label for="name" class="form-label col-md-2"> Nom du champ </label>
+        <label for="name" class="form-label mb-0 col-md-2"> Nom du champ </label>
         <div class="col-md-10">
           <input
             id="name"
@@ -53,7 +53,7 @@
 
       {% if !Field.ID %}
         <div class="row align-items-center mb-3">
-          <label for="person_type" class="form-label col-md-2">
+          <label for="person_type" class="form-label mb-0 col-md-2">
             Population
           </label>
           <div class="col-md-10">
@@ -65,13 +65,13 @@
               required
             >
               <option value="member">Membre</option>
-              <option value="contact">Contact</option>
+              <option value="contact">Sympathisant</option>
             </select>
           </div>
         </div>
 
         <div class="row align-items-center mb-3">
-          <label for="field_type" class="form-label col-md-2">
+          <label for="field_type" class="form-label mb-0 col-md-2">
             Type de champ
           </label>
           <div class="col-md-10">
@@ -92,7 +92,7 @@
         </div>
 
         <div class="row align-items-center mb-3">
-          <label for="list" class="form-label col-md-2"> Liste </label>
+          <label for="list" class="form-label mb-0 col-md-2"> Liste </label>
           <div class="col-md-10">
             <select
               name="list"
diff --git a/views/fields.html b/views/fields.html
index bca87cb..7d7ab58 100644
--- a/views/fields.html
+++ b/views/fields.html
@@ -13,39 +13,48 @@
       <hr />
     </div>
 
-    <div class="my-3 text-end">
-      <a class="btn btn-outline-primary" href="/admin/fields/add">
-        <i class="bi-plus-lg"></i>
-        Ajouter
-      </a>
-    </div>
+		<div class="row my-3">
+			<div class="col-sm-6">
+				<span class="h2 d-none d-sm-inline">Champs supplémentaires</span>
+			</div>
+			<div class="col-sm-6 text-end">
+				<a class="btn btn-outline-primary" href="/admin/fields/add">
+					<i class="bi-plus-lg"></i>
+					Ajouter
+				</a>
+			</div>
+		</div>
 
-    <div class="h4 my-2">Membres</div>
-    <div class="table-responsive">
-      <table class="table">
-        <thead>
-          <tr>
-            <th class="w-50">Nom</th>
-            <th class="w-25">Type de champ</th>
-            <th class="w-25"></th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for Field in Fields %}
-            {% if Field.PersonType == "member" %}
-              <tr>
-                <td>
-                  <a href="/admin/fields/{{ Field.ID }}"> {{ Field.Name }} </a>
-                </td>
-                <td>
-                  {% for Key, Value in FieldTypes %}
-                    {% if Key == Field.FieldType %}
-                      {{ Value }}
-                    {% endif %}
-                  {% endfor %}
-                </td>
-                <td class="text-end">
-                  <div class="btn-group">
+		<div class="card mb-3">
+    	<div class="card-header">Membres</div>
+      <div class="card-body">
+				{% for Field in Fields %}
+					{% if Field.PersonType == "member" %}
+						<div class="card card-body my-2 py-2 bg-body-tertiary">
+							<div class="row align-items-center">
+
+								<div class="col-12 col-md-8 col-lg-6">
+									<div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
+									<div>
+										<a href="/admin/fields/{{ Field.ID }}"> {{ Field.Name }} </a>
+									</div>
+								</div>
+
+								<div class="col-12 col-md-4 col-lg-3">
+									<div class="text-bold fs-7 mt-xxl-0 mt-2">Type de champ</div>
+									<div>
+										{% for Key, Value in FieldTypes %}
+											{% if Key == Field.FieldType %}
+												<span class="badge text-bg-primary">
+													{{ Value }}
+												</span>
+											{% endif %}
+										{% endfor %}
+									</div>
+								</div>
+
+								<div class="col text-lg-end">
+									<div class="btn-group mb-2 mt-3 mt-lg-0 mb-lg-0">
                     <a
                       class="btn btn-sm btn-outline-primary"
                       href="/admin/fields/{{ Field.ID }}/move-up"
@@ -61,40 +70,45 @@
                       Descendre
                     </a>
                   </div>
-                </td>
-              </tr>
-            {% endif %}
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
+								</div>
 
-    <div class="h4 my-2">Contacts</div>
-    <div class="table-responsive">
-      <table class="table">
-        <thead>
-          <tr>
-            <th class="w-50">Nom</th>
-            <th class="w-25">Type de champ</th>
-            <th class="w-25"></th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for Field in Fields %}
-            {% if Field.PersonType == "contact" %}
-              <tr>
-                <td>
-                  <a href="/admin/fields/{{ Field.ID }}"> {{ Field.Name }} </a>
-                </td>
-                <td>
-                  {% for Key, Value in FieldTypes %}
-                    {% if Key == Field.FieldType %}
-                      {{ Value }}
-                    {% endif %}
-                  {% endfor %}
-                </td>
-                <td class="text-end">
-                  <div class="btn-group">
+							</div>
+						</div>
+					{% endif %}
+				{% endfor %}
+			</div>
+		</div>
+
+		<div class="card">
+    	<div class="card-header">Sympathisants</div>
+      <div class="card-body">
+				{% for Field in Fields %}
+					{% if Field.PersonType == "contact" %}
+						<div class="card card-body my-2 py-2 bg-body-tertiary">
+							<div class="row align-items-center">
+
+								<div class="col-12 col-md-8 col-lg-6">
+									<div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
+									<div>
+										<a href="/admin/fields/{{ Field.ID }}"> {{ Field.Name }} </a>
+									</div>
+								</div>
+
+								<div class="col-12 col-md-4 col-lg-3">
+									<div class="text-bold fs-7 mt-xxl-0 mt-2">Type de champ</div>
+									<div>
+										{% for Key, Value in FieldTypes %}
+											{% if Key == Field.FieldType %}
+												<span class="badge text-bg-primary">
+													{{ Value }}
+												</span>
+											{% endif %}
+										{% endfor %}
+									</div>
+								</div>
+
+								<div class="col text-lg-end">
+									<div class="btn-group mb-2 mt-3 mt-lg-0 mb-lg-0">
                     <a
                       class="btn btn-sm btn-outline-primary"
                       href="/admin/fields/{{ Field.ID }}/move-up"
@@ -110,12 +124,13 @@
                       Descendre
                     </a>
                   </div>
-                </td>
-              </tr>
-            {% endif %}
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
+								</div>
+
+							</div>
+						</div>
+					{% endif %}
+				{% endfor %}
+			</div>
+		</div>
   </div>
 {% endblock %}
diff --git a/views/lists.html b/views/lists.html
index a71d350..8be34e0 100644
--- a/views/lists.html
+++ b/views/lists.html
@@ -13,42 +13,44 @@
       <hr />
     </div>
 
-    <div class="my-3 text-end">
-      <a class="btn btn-outline-primary" href="/admin/lists/add">
-        <i class="bi-plus-lg"></i>
-        Ajouter
-      </a>
-    </div>
+		<div class="row my-3">
+			<div class="col-sm-6">
+				<span class="h2 d-none d-sm-inline">Listes</span>
+			</div>
+			<div class="col-sm-6 text-end">
+				<a class="btn btn-outline-primary" href="/admin/lists/add">
+					<i class="bi-plus-lg"></i>
+					Ajouter
+				</a>
+			</div>
+		</div>
 
     {% if Lists %}
-      <div class="table-responsive">
-        <table class="table">
-          <thead>
-            <tr>
-              <th class="w-75">Nom</th>
-              <th class="w-25">Choix multiples</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for List in Lists %}
-              <tr>
-                <td>
-                  <a href="/admin/lists/{{ List.ID }}"> {{ List.Name }} </a>
-                </td>
-                <td>
-                  {% if List.Multi %}
-                    <i class="bi-check-lg text-success me-1"></i>
-                    Oui
-                  {% else %}
-                    <i class="bi-x-lg text-danger me-1"></i>
-                    Non
-                  {% endif %}
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
+			{% for List in Lists %}
+				<div class="card card-body my-2 py-2 bg-body-tertiary">
+          <div class="row">
+
+						<div class="col-12 col-sm-8 col-md-9 col-xl-6">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
+              <div>
+								<a href="/admin/lists/{{ List.ID }}"> {{ List.Name }} </a>
+							</div>
+						</div>
+
+						<div class="col">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Choix multiples</div>
+              <div>
+								{% if List.Multi %}
+									<span class="badge text-bg-success">Oui</span>
+								{% else %}
+									<span class="badge text-bg-danger">Non</span>
+								{% endif %}
+							</div>
+						</div>
+
+					</div>
+				</div>
+			{% endfor %}
     {% else %}
       <div class="my-4">Pas de liste pour le moment</div>
     {% endif %}
diff --git a/views/partials/header.html b/views/partials/header.html
index fb3b051..741708c 100644
--- a/views/partials/header.html
+++ b/views/partials/header.html
@@ -33,7 +33,7 @@
           {% if Globals.AllowContactsPage %}
             <li class="nav-item">
               <a class="nav-link active" href="/contacts">
-                <i class="bi-telephone me-2"></i>Contacts
+                <i class="bi-telephone me-2"></i>Sympathisants
               </a>
             </li>
           {% endif %}
diff --git a/views/people.html b/views/people.html
index b4b5469..d31fe1c 100644
--- a/views/people.html
+++ b/views/people.html
@@ -10,44 +10,53 @@
           {% if MembersPage %}
             <li class="breadcrumb-item active">Membres</li>
           {% else %}
-            <li class="breadcrumb-item active">Contacts</li>
+            <li class="breadcrumb-item active">Sympathisants</li>
           {% endif %}
         </ol>
       </nav>
       <hr />
     </div>
 
-    <div class="my-3 text-end">
-      {% if MembersPage %}
-        <div class="btn-group">
-          <a class="btn btn-outline-primary" href="/members/add">
-            <i class="bi-plus-lg"></i>
-            Ajouter
-          </a>
-          <a
-            class="btn btn-outline-primary"
-            href="/members/export?s={{ SearchJSON|urlencode }}"
-          >
-            <i class="bi-filetype-csv"></i>
-            Exporter
-          </a>
-        </div>
-      {% else %}
-        <div class="btn-group">
-          <a class="btn btn-outline-primary" href="/contacts/add">
-            <i class="bi-plus-lg"></i>
-            Ajouter
-          </a>
-          <a
-            class="btn btn-outline-primary"
-            href="/contacts/export?s={{ SearchJSON|urlencode }}"
-          >
-            <i class="bi-filetype-csv"></i>
-            Exporter
-          </a>
-        </div>
-      {% endif %}
-    </div>
+		<div class="row my-3">
+			<div class="col-sm-6">
+				{% if MembersPage %}
+					<span class="h2 d-none d-sm-inline">Membres</span>
+				{% else %}
+					<span class="h2 d-none d-sm-inline">Sympathisants</span>
+				{% endif %}
+			</div>
+			<div class="col-sm-6 text-end">
+				{% if MembersPage %}
+					<div class="btn-group">
+						<a class="btn btn-outline-primary" href="/members/add">
+							<i class="bi-plus-lg"></i>
+							Ajouter
+						</a>
+						<a
+							class="btn btn-outline-primary"
+							href="/members/export?s={{ SearchJSON|urlencode }}"
+						>
+							<i class="bi-filetype-csv"></i>
+							Exporter
+						</a>
+					</div>
+				{% else %}
+					<div class="btn-group">
+						<a class="btn btn-outline-primary" href="/contacts/add">
+							<i class="bi-plus-lg"></i>
+							Ajouter
+						</a>
+						<a
+							class="btn btn-outline-primary"
+							href="/contacts/export?s={{ SearchJSON|urlencode }}"
+						>
+							<i class="bi-filetype-csv"></i>
+							Exporter
+						</a>
+					</div>
+				{% endif %}
+			</div>
+		</div>
 
     <div id="search-container" class="h-100 p-4 mb-3 bg-body-tertiary border">
       <div class="row">
@@ -95,7 +104,7 @@
                 >
               {% else %}
                 <label class="form-check-label" for="active"
-                  >Afficher contacts actifs</label
+                  >Afficher sympathisants actifs</label
                 >
               {% endif %}
             </div>
@@ -116,7 +125,7 @@
                 >
               {% else %}
                 <label class="form-check-label" for="archive"
-                  >Afficher contacts archivés</label
+                  >Afficher sympathisants archivés</label
                 >
               {% endif %}
             </div>
@@ -203,7 +212,7 @@
       </div>
 
       <div class="row mt-2">
-        <div class="col-6">
+        <div class="col-12 col-sm-8 col-md-6 d-grid d-sm-block">
           <button
             class="btn btn-outline-primary"
             id="advanced"
@@ -220,7 +229,7 @@
             <i class="bi-arrow-clockwise me-1"></i> Réinitialiser
           </button>
         </div>
-        <div class="col-6 text-end">
+        <div class="col-12 col-sm-4 col-md-6 text-end d-grid d-sm-block">
           <button class="btn btn-outline-success" id="search" type="button">
             <i class="bi-search me-1"></i> Recherche
           </button>
diff --git a/views/person.html b/views/person.html
index e7b958c..c2b7e7f 100644
--- a/views/person.html
+++ b/views/person.html
@@ -10,7 +10,7 @@
           {% if Person.IsMember %}
             <li class="breadcrumb-item"><a href="/members">Membres</a></li>
           {% else %}
-            <li class="breadcrumb-item"><a href="/contacts">Contacts</a></li>
+            <li class="breadcrumb-item"><a href="/contacts">Sympathisants</a></li>
           {% endif %}
 
           <li class="breadcrumb-item active">
@@ -274,7 +274,7 @@
                     data-bs-target="#modal-convert"
                   >
                     <i class="bi-arrow-repeat align-items-center-repeat"></i>
-                    Convertir en contact
+                    Convertir en sympathisant
                   </button>
                 {% endif %}
               {% endif %}
@@ -403,7 +403,7 @@
           {% if Person.IsMember %}
             <p>Êtes-vous sûr de vouloir supprimer ce membre ?</p>
           {% else %}
-            <p>Êtes-vous sûr de vouloir supprimer ce contact ?</p>
+            <p>Êtes-vous sûr de vouloir supprimer ce sympathisant ?</p>
           {% endif %}
         </div>
         <div class="modal-footer">
@@ -451,7 +451,7 @@
           {% if Person.IsMember %}
             <p>Êtes-vous sûr de vouloir archiver ce membre ?</p>
           {% else %}
-            <p>Êtes-vous sûr de vouloir archiver ce contact ?</p>
+            <p>Êtes-vous sûr de vouloir archiver ce sympathisant ?</p>
           {% endif %}
         </div>
         <div class="modal-footer">
@@ -499,7 +499,7 @@
           {% if Person.IsMember %}
             <p>Êtes-vous sûr de vouloir restaurer ce membre ?</p>
           {% else %}
-            <p>Êtes-vous sûr de vouloir restaurer ce contact ?</p>
+            <p>Êtes-vous sûr de vouloir restaurer ce sympathisant ?</p>
           {% endif %}
         </div>
         <div class="modal-footer">
@@ -545,9 +545,9 @@
       <div class="modal-content">
         <div class="modal-body">
           {% if Person.IsMember %}
-            <p>Êtes-vous sûr de vouloir convertir ce membre en contact ?</p>
+            <p>Êtes-vous sûr de vouloir convertir ce membre en sympathisant ?</p>
           {% else %}
-            <p>Êtes-vous sûr de vouloir convertir ce contact en membre ?</p>
+            <p>Êtes-vous sûr de vouloir convertir ce sympathisant en membre ?</p>
           {% endif %}
         </div>
         <div class="modal-footer">
diff --git a/views/person_form.html b/views/person_form.html
index 62dcfe4..196a2e1 100644
--- a/views/person_form.html
+++ b/views/person_form.html
@@ -10,7 +10,7 @@
           {% if Person.IsMember or MembersPage %}
             <li class="breadcrumb-item"><a href="/members">Membres</a></li>
           {% else %}
-            <li class="breadcrumb-item"><a href="/contacts">Contacts</a></li>
+            <li class="breadcrumb-item"><a href="/contacts">Sympathisants</a></li>
           {% endif %}
 
           {% if Person.ID %}
diff --git a/views/role.html b/views/role.html
index 58e8871..020d5c6 100644
--- a/views/role.html
+++ b/views/role.html
@@ -251,7 +251,7 @@
           </div>
 
           <div class="row align-items-center">
-            <div class="col-md-2 col-xl-3">Convertir membres en contacts</div>
+            <div class="col-md-2 col-xl-3">Convertir membres en sympathisants</div>
             <div class="col">
               {% if Role.ConvertMemberToContact %}
                 <div class="input-group">
@@ -284,10 +284,10 @@
       </div>
 
       <div class="card">
-        <div class="card-header">Permissions contacts</div>
+        <div class="card-header">Permissions sympathisants</div>
         <div class="card-body">
           <div class="row align-items-center mb-3">
-            <div class="col-md-2 col-xl-3">Afficher contacts</div>
+            <div class="col-md-2 col-xl-3">Afficher sympathisants</div>
             <div class="col">
               {% if Role.ShowContact %}
                 <div class="input-group">
@@ -318,7 +318,7 @@
           </div>
 
           <div class="row align-items-center mb-3">
-            <div class="col-md-2 col-xl-3">Créer contacts</div>
+            <div class="col-md-2 col-xl-3">Créer sympathisants</div>
             <div class="col">
               {% if Role.CreateContact %}
                 <div class="input-group">
@@ -349,7 +349,7 @@
           </div>
 
           <div class="row align-items-center mb-3">
-            <div class="col-md-2 col-xl-3">Modifier contacts</div>
+            <div class="col-md-2 col-xl-3">Modifier sympathisants</div>
             <div class="col">
               {% if Role.EditContact %}
                 <div class="input-group">
@@ -380,7 +380,7 @@
           </div>
 
           <div class="row align-items-center mb-3">
-            <div class="col-md-2 col-xl-3">Afficher contacts archivés</div>
+            <div class="col-md-2 col-xl-3">Afficher sympathisants archivés</div>
             <div class="col">
               {% if Role.ShowArchivedContact %}
                 <div class="input-group">
@@ -411,7 +411,7 @@
           </div>
 
           <div class="row align-items-center mb-3">
-            <div class="col-md-2 col-xl-3">Archiver contacts</div>
+            <div class="col-md-2 col-xl-3">Archiver sympathisants</div>
             <div class="col">
               {% if Role.ArchiveContact %}
                 <div class="input-group">
@@ -442,7 +442,7 @@
           </div>
 
           <div class="row align-items-center mb-3">
-            <div class="col-md-2 col-xl-3">Restaurer contacts</div>
+            <div class="col-md-2 col-xl-3">Restaurer sympathisants</div>
             <div class="col">
               {% if Role.RestoreContact %}
                 <div class="input-group">
@@ -474,7 +474,7 @@
 
           <div class="row align-items-center mb-3">
             <div class="col-md-2 col-xl-3">
-              Purger contacts (suppression définitive)
+              Purger sympathisants (suppression définitive)
             </div>
             <div class="col">
               {% if Role.PurgeContact %}
@@ -506,7 +506,7 @@
           </div>
 
           <div class="row align-items-center">
-            <div class="col-md-2 col-xl-3">Convertir contacts en membres</div>
+            <div class="col-md-2 col-xl-3">Convertir sympathisants en membres</div>
             <div class="col">
               {% if Role.ConvertContactToMember %}
                 <div class="input-group">
diff --git a/views/role_form.html b/views/role_form.html
index 015627d..f624c74 100644
--- a/views/role_form.html
+++ b/views/role_form.html
@@ -152,7 +152,7 @@
               {% if Role.ConvertMemberToContact %}checked{% endif %}
             />
             <label for="convert_member_to_contact" class="form-label">
-              Convertir en contacts
+              Convertir en sympathisants
             </label>
           </div>
         </div>
@@ -160,7 +160,7 @@
 
       <div class="row mb-3">
         <div class="col-md-2">
-          <div class="mb-2">Permissions contacts</div>
+          <div class="mb-2">Permissions sympathisants</div>
         </div>
         <div class="col-md-10">
           <div class="mb-1">
diff --git a/views/roles.html b/views/roles.html
index 00e8943..615faa3 100644
--- a/views/roles.html
+++ b/views/roles.html
@@ -13,32 +13,33 @@
       <hr />
     </div>
 
-    <div class="my-3 text-end">
-      <a class="btn btn-outline-primary" href="/admin/roles/add">
-        <i class="bi-plus-lg"></i>
-        Ajouter
-      </a>
-    </div>
+		<div class="row my-3">
+			<div class="col-sm-6">
+				<span class="h2 d-none d-sm-inline">Rôles</span>
+			</div>
+			<div class="col-sm-6 text-end">
+				<a class="btn btn-outline-primary" href="/admin/roles/add">
+					<i class="bi-plus-lg"></i>
+					Ajouter
+				</a>
+			</div>
+		</div>
 
     {% if Roles %}
-      <div class="table-responsive">
-        <table class="table">
-          <thead>
-            <tr>
-              <th>Nom</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for Role in Roles %}
-              <tr>
-                <td>
-                  <a href="/admin/roles/{{ Role.ID }}"> {{ Role.Name }} </a>
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
+			{% for Role in Roles %}
+				<div class="card card-body my-2 py-2 bg-body-tertiary">
+          <div class="row">
+
+						<div class="col">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
+              <div>
+								<a href="/admin/roles/{{ Role.ID }}"> {{ Role.Name }} </a>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			{% endfor %}
     {% else %}
       <div class="my-4">Pas de rôle pour le moment</div>
     {% endif %}
diff --git a/views/section.html b/views/section.html
index 635eb17..abec7d8 100644
--- a/views/section.html
+++ b/views/section.html
@@ -87,7 +87,7 @@
       </div>
 
       <div class="row align-items-center mb-3">
-        <div class="col-md-2 col-xl-3">Peut contenir des contacts</div>
+        <div class="col-md-2 col-xl-3">Peut contenir des sympathisants</div>
         <div class="col-md-10 col-xl-9">
           {% if Section.ContainsContacts %}
             <div class="input-group">
diff --git a/views/section_form.html b/views/section_form.html
index 0f43b29..4d34ad3 100644
--- a/views/section_form.html
+++ b/views/section_form.html
@@ -128,7 +128,7 @@
             {% endif %}
           />
           <label for="contains_contacts" class="form-label mb-0">
-            Contient des contacts
+            Contient des sympathisants
           </label>
         </div>
       </div>
diff --git a/views/sections.html b/views/sections.html
index 937d621..a5b8ac3 100644
--- a/views/sections.html
+++ b/views/sections.html
@@ -13,12 +13,17 @@
       <hr />
     </div>
 
-    <div class="my-3 text-end">
-      <a class="btn btn-outline-primary" href="/admin/sections/add">
-        <i class="bi-plus-lg"></i>
-        Ajouter
-      </a>
-    </div>
+		<div class="row my-3">
+			<div class="col-sm-6">
+				<span class="h2 d-none d-sm-inline">Sections</span>
+			</div>
+			<div class="col-sm-6 text-end">
+				<a class="btn btn-outline-primary" href="/admin/sections/add">
+					<i class="bi-plus-lg"></i>
+					Ajouter
+				</a>
+			</div>
+		</div>
 
     {% if Sections %}
 			{% for Section in Sections %}
diff --git a/views/users.html b/views/users.html
index 041b634..3112867 100644
--- a/views/users.html
+++ b/views/users.html
@@ -13,45 +13,51 @@
       <hr />
     </div>
 
-    <div class="my-3 text-end">
-      <a class="btn btn-outline-primary" href="/admin/users/add">
-        <i class="bi-plus-lg"></i>
-        Ajouter
-      </a>
-    </div>
+		<div class="row my-3">
+			<div class="col-sm-6">
+				<span class="h2 d-none d-sm-inline">Utilisateurs</span>
+			</div>
+			<div class="col-sm-6 text-end">
+				<a class="btn btn-outline-primary" href="/admin/users/add">
+					<i class="bi-plus-lg"></i>
+					Ajouter
+				</a>
+			</div>
+		</div>
 
     {% if Users %}
-      <div class="table-responsive">
-        <table class="table">
-          <thead>
-            <tr>
-              <th class="w-50">Nom complet</th>
-              <th class="w-25">Email</th>
-              <th class="w-25">Administrateur</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for User in Users %}
-              <tr>
-                <td>
-                  <span class="user-photo me-2">{{ User.Name|first }}</span>
-                  <a href="/admin/users/{{ User.ID }}"> {{ User.Name }} </a>
-                </td>
-                <td>{{ User.Email }}</td>
-                <td>
-                  {% if User.IsAdmin %}
-                    <i class="bi-check-lg text-success me-1"></i>
-                    Oui
-                  {% else %}
-                    <i class="bi-x-lg text-danger me-1"></i>
-                    Non
-                  {% endif %}
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
+			{% for User in Users %}
+				<div class="card card-body my-2 py-2 bg-body-tertiary">
+          <div class="row">
+
+						<div class="col-12 col-sm-8 col-md-9 col-xl-5 order-1">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
+              <div>
+                <a href="/admin/users/{{ User.ID }}"> {{ User.Name }} </a>
+							</div>
+						</div>
+
+						<div class="col-12 col-xl-5 order-2 order-sm-3 order-xl-2">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Email</div>
+              <div>
+								{{ User.Email }}
+							</div>
+						</div>
+
+						<div class="col order-3 order-sm-2 order-xl-3">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Administrateur</div>
+              <div>
+								{% if User.IsAdmin %}
+									<span class="badge text-bg-success">Oui</span>
+								{% else %}
+									<span class="badge text-bg-danger">Non</span>
+								{% endif %}
+							</div>
+						</div>
+
+					</div>
+				</div>
+			{% endfor %}
     {% else %}
       <div class="my-4">Pas d'utilisateurs pour le moment</div>
     {% endif %}