diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl
index 66baec8176..bf1cc8bd43 100644
--- a/assets/css/src/admin.styl
+++ b/assets/css/src/admin.styl
@@ -34,3 +34,4 @@
 
 @require 'newsletter_templates'
 @require 'welcome_wizard'
+@require 'intro'
diff --git a/assets/css/src/intro.styl b/assets/css/src/intro.styl
new file mode 100644
index 0000000000..48c40fa96b
--- /dev/null
+++ b/assets/css/src/intro.styl
@@ -0,0 +1,18 @@
+.mailpoet-intro-active #adminmenuback
+  z-index: auto;
+
+#adminmenu li.introjs-showElement
+  background: inherit
+
+.introjs-helperLayer
+  border: none
+  border-radius: 3px
+  background-color: rgba(255, 255, 255, .7)
+
+.introjs-tooltip
+  min-width: 240px
+
+  // fix for wrong bottom-up tooltip vertical align, bottom-up tooltips
+  // have (negative) 'top' set in intro.js, no other way to select them
+  &[style*="top:"]
+    margin-top: -8px
diff --git a/assets/js/src/intro.jsx b/assets/js/src/intro.jsx
index a70950bd32..4b63a36d6b 100644
--- a/assets/js/src/intro.jsx
+++ b/assets/js/src/intro.jsx
@@ -29,6 +29,18 @@ function Intro() {
     skipLabel: 'Skip',
     doneLabel: 'Done',
     positionPrecedence: ['right', 'left', 'bottom', 'top'],
+    helperElementPadding: 12,
+    scrollToElement: false,
+    showStepNumbers: false,
+    tooltipPosition: 'auto',
+  });
+
+  intro.onafterchange(() => {
+    document.body.classList.add('mailpoet-intro-active');
+  });
+
+  intro.onexit(() => {
+    document.body.classList.remove('mailpoet-intro-active');
   });
 
   intro.start();