diff --git a/assets/css/src/components/_welcomeWizard.scss b/assets/css/src/components/_welcomeWizard.scss
index ae3a28934e..f8d76e4c9b 100644
--- a/assets/css/src/components/_welcomeWizard.scss
+++ b/assets/css/src/components/_welcomeWizard.scss
@@ -17,6 +17,40 @@
}
}
+.mailpoet_welcome_wizard_flex {
+ align-items: center;
+ display: flex;
+}
+
+.mailpoet_welcome_wizard_illustration {
+ flex-grow: 1;
+ padding: 60px 40px 40px 60px;
+ text-align: right;
+ width: 50%;
+
+ img {
+ height: 400px;
+ max-width: 100%;
+ width: auto;
+ }
+
+ @media screen and (max-width: 782px) {
+ display: none;
+ }
+}
+
+.mailpoet_welcome_wizard_step {
+ flex-grow: 1;
+ padding: 60px 60px 40px 40px;
+ text-align: left;
+ width: 50%;
+
+ @media screen and (max-width: 782px) {
+ padding: 30px;
+ width: 100%;
+ }
+}
+
.mailpoet_welcome_wizard_step_content {
margin-top: 40px;
max-width: 620px;
diff --git a/assets/js/src/welcome_wizard/steps/email_course_step.jsx b/assets/js/src/welcome_wizard/steps/email_course_step.jsx
index 7e91caad52..6f7f9610e4 100644
--- a/assets/js/src/welcome_wizard/steps/email_course_step.jsx
+++ b/assets/js/src/welcome_wizard/steps/email_course_step.jsx
@@ -7,12 +7,6 @@ const WelcomeWizardEmailCourseStep = props => (
{MailPoet.I18n.t('welcomeWizardEmailCourseTitle')}
{MailPoet.I18n.t('welcomeWizardEmailCourseText')}
-
);
};
diff --git a/plugin_repository/assets/welcome-wizard/step1.20190409.png b/plugin_repository/assets/welcome-wizard/step1.20190409.png
new file mode 100644
index 0000000000..b57c6dcf5e
Binary files /dev/null and b/plugin_repository/assets/welcome-wizard/step1.20190409.png differ
diff --git a/plugin_repository/assets/welcome-wizard/step2.20190409.png b/plugin_repository/assets/welcome-wizard/step2.20190409.png
new file mode 100644
index 0000000000..2e9b857e83
Binary files /dev/null and b/plugin_repository/assets/welcome-wizard/step2.20190409.png differ
diff --git a/plugin_repository/assets/welcome-wizard/step3.20190409.png b/plugin_repository/assets/welcome-wizard/step3.20190409.png
new file mode 100644
index 0000000000..56b5263689
Binary files /dev/null and b/plugin_repository/assets/welcome-wizard/step3.20190409.png differ
diff --git a/plugin_repository/assets/welcome-wizard/step4-woocommerce.20190409.png b/plugin_repository/assets/welcome-wizard/step4-woocommerce.20190409.png
new file mode 100644
index 0000000000..79552513d0
Binary files /dev/null and b/plugin_repository/assets/welcome-wizard/step4-woocommerce.20190409.png differ
diff --git a/plugin_repository/assets/welcome-wizard/step4.20190409.png b/plugin_repository/assets/welcome-wizard/step4.20190409.png
new file mode 100644
index 0000000000..36ee70e4c2
Binary files /dev/null and b/plugin_repository/assets/welcome-wizard/step4.20190409.png differ
diff --git a/views/welcome_wizard.html b/views/welcome_wizard.html
index 5ec092c45d..47e68d9c5e 100644
--- a/views/welcome_wizard.html
+++ b/views/welcome_wizard.html
@@ -3,8 +3,11 @@
<% block content %>