diff --git a/web/client/plugins/Tutorial.jsx b/web/client/plugins/Tutorial.jsx
index 76393c48b2..1e53aec439 100644
--- a/web/client/plugins/Tutorial.jsx
+++ b/web/client/plugins/Tutorial.jsx
@@ -104,7 +104,7 @@ const {Glyphicon} = require('react-bootstrap');
     SELECTORS
     every selector must be unique, start with # and different from '#error-tutorial'.
 
-    TRANSLATION
+    TRANSLATION - TRANSLATION HTML
     to add the title and text of the step with property translation
     insert a new object in the translation file at the tutorial section
     with title and text properties
@@ -122,6 +122,10 @@ const {Glyphicon} = require('react-bootstrap');
         {
             translation: 'mySecondStepTranslation',
             selector: '#second-selector'
+        },
+        {
+            translationHTML: 'myHTMLStepTranslation',
+            selector: '#html-translation-selector'
         }
     ]
 
@@ -141,6 +145,10 @@ const {Glyphicon} = require('react-bootstrap');
             "title": "My second step title",
             "text": "My second step description"
         },
+        "myHTMLStepTranslation": {
+            "title": "<div style="color:blue;">My html step title</div>",
+            "text": "<div style="color:red;">My html step description</div>"
+        }
         ...
     }
     ...
diff --git a/web/client/plugins/tutorial/preset/map.js b/web/client/plugins/tutorial/preset/map.js
index f39d8fb664..bb98a40dff 100644
--- a/web/client/plugins/tutorial/preset/map.js
+++ b/web/client/plugins/tutorial/preset/map.js
@@ -13,7 +13,7 @@ module.exports = [
         selector: '#intro-tutorial'
     },*/
     {
-        translation: 'drawerMenu',
+        translationHTML: 'drawerMenu',
         selector: '#drawer-menu-button'
     },
     {
diff --git a/web/client/reducers/tutorial.js b/web/client/reducers/tutorial.js
index db45a2acf1..5df13cddea 100644
--- a/web/client/reducers/tutorial.js
+++ b/web/client/reducers/tutorial.js
@@ -44,8 +44,12 @@ function tutorial(state = initialState, action) {
             setup.steps = setup.steps.filter((step) => {
                 return step.selector && step.selector.substring(0, 1) === '#';
             }).map((step) => {
-                let title = step.title || step.translation ? step.title || < I18N.Message msgId = {"tutorial." + step.translation + ".title"}/> : '';
-                let text = step.text || step.translation ? step.text || < I18N.Message msgId = {"tutorial." + step.translation + ".text"}/> : '';
+                let title = step.title ? step.title : '';
+                title = step.translation ? <I18N.Message msgId = {"tutorial." + step.translation + ".title"}/> : title;
+                title = step.translationHTML ? <I18N.HTML msgId = {"tutorial." + step.translationHTML + ".title"}/> : title;
+                let text = step.text ? step.text : '';
+                text = step.translation ? <I18N.Message msgId = {"tutorial." + step.translation + ".text"}/> : text;
+                text = step.translationHTML ? <I18N.HTML msgId = {"tutorial." + step.translationHTML + ".text"}/> : text;
                 text = (step.selector === '#intro-tutorial') ? <div><div>{text}</div>{action.checkbox}</div> : text;
                 let style = (step.selector === '#intro-tutorial') ? action.style : {};
                 let isFixed = (step.selector === '#intro-tutorial') ? true : step.isFixed || false;