diff --git a/README.md b/README.md
index c0304ebe9fb7f1a4e5e245626058d1435ef414aa..8deb2af337986c414e0099ad2e5de02a5ee8d155 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,7 @@ nav:
           - Services: ecolyo/application/services.md
           - Gitflow: ecolyo/application/gitflow.md
           - Deploy: ecolyo/application/deploy.md
+          - Mail: ecolyo/application/mail.md
       - Services: 
           - Description: ecolyo/services/index.md
           - Monthly report notification: ecolyo/services/monthly_report_notification.md
diff --git a/docs/ecolyo/application/mail.md b/docs/ecolyo/application/mail.md
new file mode 100644
index 0000000000000000000000000000000000000000..482d0aebe2ddcca5e2f7b6e2418ed37950b6ab93
--- /dev/null
+++ b/docs/ecolyo/application/mail.md
@@ -0,0 +1,72 @@
+## Explenation
+
+A templating system was needed for the app. In order to make it easy to use and also responsive, two libs has been used :
+- [Handelbars](https://handlebarsjs.com/)
+- [MJML](https://mjml.io/)
+
+Handlebars is used as a semantic template motor. It allow us to split email template in order to reuse some parts (header, footer ...)
+
+Mjml is a lib providing a syntax allowing developpers to easly build responsive templates.
+
+## Usage
+
+### Scaffolding
+
+Mails templates can be found inside `src/notifications`. All reusable parts can be found in `base` folder.
+
+All stylesheet must be include inside `style.hbs`.
+
+### Create your template
+Simply create your template file : `template.hbs` inside the notifications folder.
+
+```
+<mj-hero background-color="radial-gradient(96.2% 96.2% at 50% 3.8%, #343641 0%, #1B1C22 100%)" padding="17px">
+  <mj-text align="center" color="white" padding-top="20px" font-size="24px" font-family="Lato" font-weight="normal">
+    <img style="vertical-align: middle; margin-right: 12px" src="https://ecolyo.com/assets/ecolyo-icon.svg" alt="Ecolyo"/>
+  {{title}}
+  </mj-text>
+</mj-hero>
+```
+
+### How to use it ?
+
+#### Inside a cozy service
+
+1) Import the mjml lib in order to compile the template.
+
+```
+import mjml2html from 'mjml'
+```
+
+2) Link all the info mandatory to render your email :
+```
+ const template = monthlyReportTemplate({
+    title: 'Du nouveau dans votre espace Ecolyo !',
+  })
+```
+
+3) Build the email and send it:
+```
+  const mailData = {
+    mode: 'noreply',
+    subject: '[Ecolyo] - Votre bilan mensuel',
+    parts: [
+      {
+        type: 'text/html',
+        body: mjml2html(template).html,
+      },
+    ],
+  }
+  mailService.SendMail(client, mailData)
+```
+
+#### Inside the app
+It's very similar to service usage, but because we use react, the app rendering is done in the user browser. That's why wy need to change the import for mjml lib into :
+
+```
+const mjml2html = require('mjml-browser')
+```
+
+
+### Usefull links
+- [Mjml live editor](https://mjml.io/try-it-live/bohYnxKkCq-)
diff --git a/mkdocs.yml b/mkdocs.yml
index fd7524a89cdcdf289f0075c356ee544b75999362..a9f1ce39cd8929ef2c0b68e697e94f35e0d2f354 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -51,6 +51,7 @@ nav:
           - Scaffolding: ecolyo/application/scaffolding.md
           - Gitflow: ecolyo/application/gitflow.md
           - Deploy: ecolyo/application/deploy.md
+          - Mail: ecolyo/application/mail.md
       - Services:
           - Description: ecolyo/services/index.md
           - Monthly report notification: ecolyo/services/monthly_report_notification.md