diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..3fe742a0ac
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "files.associations": {
+    "*.mjml": "erb"
+  }
+}
\ No newline at end of file
diff --git a/app/views/devise/mailer/invitation_instructions.html.haml b/app/views/devise/mailer/invitation_instructions.html.haml
deleted file mode 100644
index 8e44f5f34d..0000000000
--- a/app/views/devise/mailer/invitation_instructions.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-%p= t('devise.mailer.hello', user_full_name: @resource.full_name)
-
-%p= t('.description_html', antenne: @resource.antenne.name)
-
-%h2= t('.question_one')
-
-%p= t('.answer_one', institution_name: @resource.institution.name)
-
-%h2= t('.question_two')
-
-%p= t('.answer_two_html')
-
-%h2= t('.accept_user_invitation_instruction')
-
-.main-link
-  %a{ href: accept_user_invitation_url(invitation_token: @token) }= t('.accept')
-
-%p= t('.looking_forward')
-
-%p= t('mailers.team_html', link_to_root: link_to(t('app_name'), root_url))
-
-.info
-  %p= t('.support_contact_label')
-  = render 'mailers/expert_mailer/support_contacts', antenne: @resource.antenne
diff --git a/app/views/devise/mailer/invitation_instructions.mjml b/app/views/devise/mailer/invitation_instructions.mjml
new file mode 100644
index 0000000000..733b4e8616
--- /dev/null
+++ b/app/views/devise/mailer/invitation_instructions.mjml
@@ -0,0 +1,31 @@
+<mj-section>
+  <mj-column>
+    <mj-text>
+      <p><%= t('devise.mailer.hello', user_full_name: @resource.full_name) %></p>
+
+      <p><%= t('.description_html', antenne: @resource.antenne.name) %></p>
+
+      <h2 class='style_h3'><%= t('.question_one') %></h2>
+
+      <p><%= t('.answer_one', institution_name: @resource.institution.name) %></p>
+
+      <h2 class='style_h3'><%= t('.question_two') %></h2>
+
+      <p><%= t('.answer_two_html') %></p>
+
+      <h2 class='style_h3'><%= t('.accept_user_invitation_instruction') %></h2>
+    </mj-text>
+
+    <mj-button background-color="#000091" color="white" border-radius="0" font-weight="700">
+      <%= link_to t('.accept'), accept_user_invitation_url(invitation_token: @token), style: 'color: white; text-decoration: none'  %>
+    </mj-button>
+
+    <mj-text>
+      <p><%= t('.looking_forward') %></p>
+
+      <p><%= t('mailers.team_html', link_to_root: link_to(t('app_name'), root_url)) %></p>
+    </mj-text>
+  </mj-column>
+</mj-section>
+
+<%= render 'mailers/expert_mailer/support_contact_block', antenne: @user.antenne, support_contact_label: t('.support_contact_label') %>
diff --git a/app/views/devise/mailer/reset_password_instructions.html.haml b/app/views/devise/mailer/reset_password_instructions.html.haml
deleted file mode 100644
index 40f3791092..0000000000
--- a/app/views/devise/mailer/reset_password_instructions.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-%p= t('devise.mailer.hello', user_full_name: @resource.full_name)
-
-- if @resource.invitation_not_accepted?
-  %p= t('.account_but_never_connected_html')
-- else
-  %p= t('.someone_has_requested_a_link_html', date: l(@resource.reset_password_sent_at, format: :long_sentence), email: @resource.email)
-
-%p
-  .button
-    %a{ href: edit_password_url(@resource, reset_password_token: @token) }
-      = @resource.invitation_not_accepted? ? t('.choose_my_password') : t('.change_my_password')
-
-- if @resource.invitation_not_accepted?
-  %p.text-grey= t('.once_connected')
-- else
-  %p.text-grey= t('.ignore')
diff --git a/app/views/devise/mailer/reset_password_instructions.mjml b/app/views/devise/mailer/reset_password_instructions.mjml
new file mode 100644
index 0000000000..d5e68f9143
--- /dev/null
+++ b/app/views/devise/mailer/reset_password_instructions.mjml
@@ -0,0 +1,25 @@
+<mj-section>
+  <mj-column>
+    <mj-text>
+      <p><%= t('devise.mailer.hello', user_full_name: @resource.full_name) %></p>
+      <% if @resource.invitation_not_accepted? %>
+        <p><%= t('.account_but_never_connected_html') %></p>
+      <% else %>
+        <p><%= t('.someone_has_requested_a_link_html', date: l(@resource.reset_password_sent_at, format: :long_sentence), email: @resource.email) %></p>
+      <% end%>
+    </mj-text>
+
+    <mj-button background-color="#000091" color="white" border-radius="0" font-weight="700">
+      <% label = @resource.invitation_not_accepted? ? t('.choose_my_password') : t('.change_my_password') %>
+      <%= link_to label, edit_password_url(@resource, reset_password_token: @token), style: 'color: white; text-decoration: none' %>
+    </mj-button>
+
+    <mj-text>
+      <% if @resource.invitation_not_accepted? %>
+        <p><%= t('.once_connected') %></p>
+      <% else %>
+        <p><%= t('.ignore') %></p>
+      <% end %>
+    </mj-text>
+  </mj-column>
+</mj-section>
diff --git a/app/views/layouts/expert_mailers.mjml b/app/views/layouts/expert_mailers.mjml
index 901a9c5077..184b880ebc 100644
--- a/app/views/layouts/expert_mailers.mjml
+++ b/app/views/layouts/expert_mailers.mjml
@@ -59,6 +59,10 @@
       .label.orange {
         color: #B95E06FF;
       }
+      .style_h3 {
+        font-size: 16px;
+        line-height: 22px;
+      }
     </mj-style>
   </mj-head>
 
diff --git a/config/locales/devise.fr.yml b/config/locales/devise.fr.yml
index 52a611880d..461f7786b3 100644
--- a/config/locales/devise.fr.yml
+++ b/config/locales/devise.fr.yml
@@ -46,12 +46,12 @@ fr:
         support_contact_label: 'Si vous avez le moindre souci pour votre compte, contactez :'
         training_html: "<strong>Pour en savoir plus, inscrivez-vous à la prochaine démonstration du service</strong> : %{link}"
       reset_password_instructions:
-        account_but_never_connected: Vous disposez d’un accès au service Conseillers-Entreprises mais vous n’êtes pas encore connecté·e. Suivez le lien ci-dessous pour définir votre mot de passe et activer votre compte.
-        account_but_never_connected_html: "<p>Vous disposez d’un accès au service Conseillers-Entreprises mais vous n’êtes pas encore connecté·e. Cliquez sur le bouton ci-dessous pour définir votre mot de passe et activer votre compte.</p>"
+        account_but_never_connected: Vous disposez d’un accès au service Conseillers-Entreprises mais vous n’êtes pas encore connecté(e). Suivez le lien ci-dessous pour définir votre mot de passe et activer votre compte.
+        account_but_never_connected_html: "<p>Vous disposez d’un accès au service Conseillers-Entreprises mais vous n’êtes pas encore connecté(e). Cliquez sur le bouton ci-dessous pour définir votre mot de passe et activer votre compte.</p>"
         change_my_password: Changer de mot de passe
         choose_my_password: Choisir mon mot de passe
         ignore: Si vous n’êtes pas à l’origine de cette demande, vous pouvez ignorer cet e-mail. Votre mot de passe ne sera pas modifié.
-        once_connected: Une fois connecté, vous pourrez accéder à toutes les demandes qui vous ont été transmises ; vous pourrez aussi faire vous même des mises en relation.
+        once_connected: Une fois connecté(e), vous pourrez accéder à tous les besoins qui vous ont été transmis.
         someone_has_requested_a_link: Le %{date}, une demande de réinitalisation du mot de passe a été faite pour votre compte (%{email}). Suivez-le lien ci-dessous pour choisir un nouveau mot de passe.
         someone_has_requested_a_link_html: "<p>Le %{date}, une demande de réinitalisation du mot de passe a été faite pour votre compte (<code>%{email}</code>).</p><p>Cliquez sur le bouton ci-dessous pour choisir un nouveau mot de passe.</p>"
         subject: 'Conseillers-entreprises.service-public.fr : choisissez un mot de passe pour votre compte'