diff --git a/app/javascript/new_design/user-sign_up.js b/app/javascript/new_design/user-sign_up.js
index ab7fafa66..ffcc6b96a 100644
--- a/app/javascript/new_design/user-sign_up.js
+++ b/app/javascript/new_design/user-sign_up.js
@@ -1,20 +1,30 @@
 import { on, show, hide } from '@utils';
+import { suggest } from 'email-butler';
 
-const USER_NEW_EMAIL_SELECTOR = '#new_user > #user_email';
+const user_new_email_selector = '#new_user > #user_email';
 const suspectSuggestionsBox = document.querySelector('.suspect-email');
-const emailSuggestionSpan = document.querySelector(".suspect-email .question .suggested-email");
+const emailSuggestionSpan = document.querySelector(
+  '.suspect-email .question .suggested-email'
+);
 
-on(USER_NEW_EMAIL_SELECTOR, 'blur', _ => {
-  emailSuggestionSpan.innerHTML = 'bidou@plop.com';
-  show(suspectSuggestionsBox)
+on(user_new_email_selector, 'blur', () => {
+  // When the user leaves the email input during account creation, we check if this account looks correct.
+  // If not (e.g if its "bidou@gmail.coo" or "john@yahoo.rf") we attempt to suggest a fix for the invalid email.
+  const suggestion = suggest(
+    document.querySelector(user_new_email_selector).value
+  );
+  if (suggestion.full) {
+    emailSuggestionSpan.innerHTML = suggestion.full;
+    show(suspectSuggestionsBox);
+  }
 });
 
 export function acceptEmailSuggestion() {
-  document.querySelector(USER_NEW_EMAIL_SELECTOR).value = emailSuggestionSpan.innerHTML;
+  document.querySelector(user_new_email_selector).value =
+    emailSuggestionSpan.innerHTML;
   hide(suspectSuggestionsBox);
 }
 
 export function discardEmailSuggestionBox() {
   hide(suspectSuggestionsBox);
 }
-
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 7dd25f25c..fbe2ee237 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -40,7 +40,10 @@ import {
 } from '../new_design/state-button';
 import { toggleChart } from '../new_design/toggle-chart';
 import { replaceSemicolonByComma } from '../new_design/avis';
-import { acceptEmailSuggestion, discardEmailSuggestionBox } from '../new_design/user-sign_up';
+import {
+  acceptEmailSuggestion,
+  discardEmailSuggestionBox
+} from '../new_design/user-sign_up';
 
 // This is the global application namespace where we expose helpers used from rails views
 const DS = {
diff --git a/package.json b/package.json
index 6a72eb949..8ccc7fce8 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "core-js": "^2.0.0",
     "debounce": "^1.2.0",
     "dom4": "^2.1.5",
+    "email-butler": "^1.0.12",
     "highcharts": "^6.1.2",
     "intersection-observer": "^0.7.0",
     "jquery": "^3.4.1",
diff --git a/yarn.lock b/yarn.lock
index 489582165..ff57a5c76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3110,6 +3110,11 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-butler@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/email-butler/-/email-butler-1.0.12.tgz#f504b45658fea6257dbc0f891be2cf822d29caa6"
+  integrity sha512-JcvRCjCpLp3fIHlP+KgdDadSmhETA/D4KUtIi3VnwEw2bJKilMOcd+xLJUHrD631bToxxxYRnxB3xTvAQeIRCQ==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"