diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 67b219317644e13dfd45d9ee4e9e3848b865ea8a..da7ff68910feb5b74a4fcae19ee9635a5b5b4d8b 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -125,7 +125,6 @@ $btn-padding-x: px2rem(20) !default
 $btn-padding-y: px2rem(13) !default
 $btn-border-radius: px2rem(4) !default
 
-
 // Spacing
 $spacing0: px2rem(12) !default
 $spacing1: px2rem(24) !default
@@ -135,7 +134,10 @@ $spacing4: px2rem(128) !default
 $spacing5: px2rem(256) !default
 $spacing-section-y: px2rem(36) !default
 
-// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
+// Form
+$form-btn-color: $color-background !default
+$form-btn-background-color: $color-accent !default
+$form-input-border-radius: 4px !default
 
 // Grid
 $grid-gutter: px2rem(64) !default
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index d80a093d7a250add3c87f8bacd2b106e4eacae4e..07eae3ebe08cf57e8ab3f0aa3f30f55ce86f4678 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -118,12 +118,16 @@ h2, .h2
 .lead
     @include lead
 
-.p,
-.li
+@mixin body-text
+    font-family: $body-font-family
     font-size: $body-size
     @include media-breakpoint-up(desktop)
         font-size: $body-size-desktop
 
+.p,
+.li
+    @include body-text
+
 @mixin meta
     font-family: $meta-font-family
     font-size: $meta-size
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index aa3da63802a896f8155ff7b1330a348b25778fdd..6ca12414382461f5b1ce7dd1f0c471663126935a 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -20,6 +20,7 @@
 @import "design-system/breadcrumb"
 @import "design-system/contacts"
 @import "design-system/footer"
+@import "design-system/form"
 @import "design-system/header"
 @import "design-system/hero"
 @import "design-system/image"
diff --git a/layouts/administrators/list.html b/layouts/administrators/list.html
index 64d780d483a76930c4c1706fe5045d0dc82ef185..6e858438cefc5c90a41846729b8b59b7770d4d0b 100644
--- a/layouts/administrators/list.html
+++ b/layouts/administrators/list.html
@@ -1,18 +1,100 @@
 {{ define "main" }}
 
-  {{ partial "persons/hero.html" . }}
+{{ partial "persons/hero.html" . }}
 
-  <div class="document-content">
+<div class="document-content">
 
-    {{ partial "persons/summary.html" (dict
-        "with_container" true
-        "context" .
-      ) }}
+  {{ partial "persons/summary.html" (dict
+  "with_container" true
+  "context" .
+  ) }}
 
-    {{ partial "blocks/list.html" . }}
-  
-    <div class="container">
-      {{ partial "persons/list-specific.html" . }}
-    </div>
+  {{ partial "blocks/list.html" . }}
+
+  <div class="container">
+    {{ partial "persons/list-specific.html" . }}
   </div>
+</div>
 {{ end }}
+
+<form id="sb_form"
+  onsubmit="process2(
+    'https://services.sarbacane.com/core/v1/forms/contacts/upsert?listID&#x3D;vhKgX3wYTZa0vabzulTh5A&amp;formID&#x3D;a5w328xDREGY2iicsu2ktA&amp;timezone&#x3D;Europe/Paris', 'https://forms.sbc28.com/', '5a82a798b85b5345e11ca5a8', 'false', 'message',
+    '', 'https://services.sarbacane.com/core/v1/transactional/sendmessage/optin', 'Merci', 'Vos informations ont été ajoutées avec succès.',
+    'Vous allez recevoir un email', 'Vous devrez cliquer sur le lien de confirmation pour valider votre inscription', 'Erreur',
+    'Une erreur inattendue s%27est produite.', 'Le formulaire est en cours d%27édition, veuillez patienter quelques minutes avant d%27essayer à nouveau.', '',
+    '', ''
+  );
+  return false;"
+  method="post">
+
+  <fieldset>
+    <div style="display: flex;flex-direction: row;">
+      <label id="label-CIVILITY_ID">Civilité *</label>
+    </div>
+    <div style="display: flex;flex-direction: row;">
+
+      <div class="radio" style="display: flex; flex-direction: row;">
+
+        <label class="control control--radio">
+
+          <input type="radio" value="Madame" name="CIVILITY_ID"  id="CIVILITY_ID_0" required="true" sb-form-input="">
+
+          <div id="indicator-CIVILITY_ID" class="control__indicator"></div>
+
+        </label>
+
+        <label id="label-opt-CIVILITY_ID" for="CIVILITY_ID_0">Madame</label>
+
+      </div>
+
+      <div class="radio" style="display: flex; flex-direction: row;">
+
+        <label class="control control--radio">
+
+          <input type="radio" value="Monsieur" id="CIVILITY_ID_1" name="CIVILITY_ID" required="true" sb-form-input="">
+
+          <div id="indicator-CIVILITY_ID" class="control__indicator"></div>
+
+        </label>
+
+        <label id="label-opt-CIVILITY_ID" for="CIVILITY_ID_1">Monsieur</label>
+
+      </div>
+
+    </div>
+  </fieldset>
+
+  <fieldset>
+
+    <span style="display: flex;flex-direction: row;">
+      <label id="label-FIRSTNAME_ID" for="input-FIRSTNAME_ID">Prénom *</label>
+    </span>
+
+    <input id="input-FIRSTNAME_ID" type="text" name="FIRSTNAME_ID" required="true" sb-form-input="">
+
+  </fieldset>
+
+  <fieldset>
+
+    <span style="display: flex;flex-direction: row;">
+      <label id="label-LASTNAME_ID" for="input-LASTNAME_ID">Nom *</label>
+    </span>
+
+    <input id="input-LASTNAME_ID" type="text" name="LASTNAME_ID" required="true" sb-form-input="">
+  </fieldset>
+
+  <fieldset>
+    <span style="display: flex;flex-direction: row;">
+      <label id="label-EMAIL_ID">Email *</label>
+    </span>
+
+    <input id="input-email" type="email" name="email" required="true" sb-form-input="">
+  </fieldset>
+
+  <div id="div-submitInput" class="submit">
+    <button id="submitInput" type="submit" value="VALIDER" class="mobile-FW"><span style="margin:0;">Valider</span></button>
+    <div class="loader" style="display:none"></div>
+  </div>
+  <label class="meta" id="form-footer-mandatory">* Champs obligatoires</label>
+</form>
\ No newline at end of file