diff --git a/views/section.html b/views/section.html
index 13790a9..635eb17 100644
--- a/views/section.html
+++ b/views/section.html
@@ -17,7 +17,7 @@
     </div>
 
     <div class="mw-1200">
-      <div class="row mb-3">
+      <div class="row align-items-center mb-3">
         <div class="col-md-2 col-xl-3">Nom</div>
         <div class="col-md-10 col-xl-9">
           <input
@@ -30,7 +30,7 @@
         </div>
       </div>
 
-      <div class="row mb-3">
+      <div class="row align-items-center mb-3">
         <div class="col-md-2 col-xl-3">Nom technique</div>
         <div class="col-md-10 col-xl-9">
           <input
@@ -43,7 +43,7 @@
         </div>
       </div>
 
-      <div class="row mb-3">
+      <div class="row align-items-center mb-3">
         <div class="col-md-2 col-xl-3">Section parente</div>
         <div class="col-md-10 col-xl-9">
           {% if Section.ParentSectionID %}
@@ -65,7 +65,7 @@
         </div>
       </div>
 
-      <div class="row mb-3">
+      <div class="row align-items-center mb-3">
         <div class="col-md-2 col-xl-3">Peut contenir des membres</div>
         <div class="col-md-10 col-xl-9">
           {% if Section.ContainsMembers %}
@@ -86,7 +86,7 @@
         </div>
       </div>
 
-      <div class="row mb-3">
+      <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-10 col-xl-9">
           {% if Section.ContainsContacts %}
@@ -107,7 +107,7 @@
         </div>
       </div>
 
-      <div class="my-4 row">
+      <div class="my-4 row align-items-center">
         <div class="col-6">
           <a
             class="btn btn-outline-primary"
diff --git a/views/section_form.html b/views/section_form.html
index df74627..0f43b29 100644
--- a/views/section_form.html
+++ b/views/section_form.html
@@ -35,8 +35,8 @@
         </div>
       {% endif %}
 
-      <div class="row mb-3">
-        <label for="name" class="form-label col-md-2 col-xl-3"> Nom </label>
+      <div class="row align-items-center mb-3">
+        <label for="name" class="form-label mb-0 col-md-2 col-xl-3"> Nom </label>
         <div class="col-md-10 col-xl-9">
           <input
             id="name"
@@ -51,8 +51,8 @@
         </div>
       </div>
 
-      <div class="row mb-3">
-        <label for="short_name" class="form-label col-md-2 col-xl-3">
+      <div class="row align-items-center mb-3">
+        <label for="short_name" class="form-label mb-0 col-md-2 col-xl-3">
           Nom technique
         </label>
         <div class="col-md-10 col-xl-9">
@@ -68,8 +68,8 @@
         </div>
       </div>
 
-      <div class="row mb-3">
-        <label for="parent_section" class="form-label col-md-2 col-xl-3">
+      <div class="row align-items-center mb-3">
+        <label for="parent_section" class="form-label mb-0 col-md-2 col-xl-3">
           Section parente
         </label>
         <div class="col-md-10 col-xl-9">
@@ -97,7 +97,7 @@
         </div>
       </div>
 
-      <div class="row mb-3">
+      <div class="row align-items-center mb-3">
         <div class="col-md-10 col-xl-9 offset-md-2 offset-xl-3">
           <input
             type="checkbox"
@@ -109,13 +109,13 @@
               checked
             {% endif %}
           />
-          <label for="contains_members" class="form-label">
+          <label for="contains_members" class="form-label mb-0">
             Contient des membres
           </label>
         </div>
       </div>
 
-      <div class="row mb-3">
+      <div class="row align-items-center mb-3">
         <div class="col-md-10 col-xl-9 offset-md-2 offset-xl-3">
           <input
             type="checkbox"
@@ -127,7 +127,7 @@
               checked
             {% endif %}
           />
-          <label for="contains_contacts" class="form-label">
+          <label for="contains_contacts" class="form-label mb-0">
             Contient des contacts
           </label>
         </div>
diff --git a/views/sections.html b/views/sections.html
index 76acfa0..937d621 100644
--- a/views/sections.html
+++ b/views/sections.html
@@ -21,55 +21,57 @@
     </div>
 
     {% if Sections %}
-      <div class="table-responsive">
-        <table class="table">
-          <thead>
-            <tr>
-              <th class="w-25">Nom</th>
-              <th class="w-25">Section parente</th>
-              <th class="w-25">Membres</th>
-              <th class="w-25">Contacts</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for Section in Sections %}
-              <tr>
-                <td>
-                  <a href="/admin/sections/{{ Section.ID }}">
-                    {{ Section.Name }}
-                  </a>
-                </td>
-                <td>
-                  {% if Section.ParentSectionID %}
-                    {{ Section.ParentSection.Name }}
-                  {% else %}
-                    <i class="bi-x-lg text-danger me-1"></i>
-                    Non
-                  {% endif %}
-                </td>
-                <td>
-                  {% if Section.ContainsMembers %}
-                    <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>
-                <td>
-                  {% if Section.ContainsContacts %}
-                    <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 Section in Sections %}
+				<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-3 order-1">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Nom</div>
+              <div>
+								<a href="/admin/sections/{{ Section.ID }}">
+									{{ Section.Name }}
+								</a>
+							</div>
+						</div>
+
+						<div class="col-12 col-sm-8 col-md-9 col-xl-3 order-2 order-sm-3 order-xl-2">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Section parente</div>
+              <div>
+								{% if Section.ParentSectionID %}
+									<a href="/admin/sections/{{ Section.ParentSectionID }}">
+										{{ Section.ParentSection.Name }}
+									</a>
+								{% else %}
+									<span class="badge text-bg-danger">Pas de section parente</span>
+								{% endif %}
+							</div>
+						</div>
+
+						<div class="col-12 col-sm-4 col-md-3 col-xl-3 order-3 order-sm-2 order-xl-3">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Membres</div>
+              <div>
+								{% if Section.ContainsMembers %}
+									<span class="badge text-bg-success">Oui</span>
+								{% else %}
+									<span class="badge text-bg-danger">Non</span>
+								{% endif %}
+							</div>
+						</div>
+
+						<div class="col-12 col-sm-4 col-md-3 col-xl-3 order-4">
+							<div class="text-bold fs-7 mt-xxl-0 mt-2">Sympathisants</div>
+              <div>
+								{% if Section.ContainsContacts %}
+									<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 section pour le moment</div>
     {% endif %}