diff --git a/app/Space/EnvironmentManager.php b/app/Space/EnvironmentManager.php
index 4f1bd799..456a0e0f 100755
--- a/app/Space/EnvironmentManager.php
+++ b/app/Space/EnvironmentManager.php
@@ -96,7 +96,7 @@ class EnvironmentManager
     {
 
         $mailData = $this->getMailData($request);
-
+        dd($mailData);
         try {
 
             file_put_contents($this->envPath, str_replace(
@@ -132,6 +132,10 @@ class EnvironmentManager
             'MAIL_USERNAME='.config('mail.username')."\n".
             'MAIL_PASSWORD='.config('mail.password')."\n";
 
+        $resetCredential =
+            'MAIL_USERNAME='."\n".
+            'MAIL_PASSWORD='."\n";
+
         switch ($request->mail_driver) {
             case 'smtp':
                 $mailCredential=
@@ -140,7 +144,7 @@ class EnvironmentManager
                 break;
 
             case 'mailgun':
-                $mailCredential = $oldMailCredential;
+                $mailCredential = $resetCredential;
                 $otherCredential=
                     'MAILGUN_DOMAIN='.$request->mail_mailgun_domain."\n".
                     'MAILGUN_SECRET='.$request->mail_mailgun_secret."\n".
@@ -156,7 +160,7 @@ class EnvironmentManager
                 break;
 
             case 'sparkpost':
-                $mailCredential = $oldMailCredential;
+                $mailCredential = $resetCredential;
                 $otherCredential=
                     'SPARKPOST_SECRET='.$request->mail_sparkpost_secret."\n\n";
 
@@ -167,7 +171,7 @@ class EnvironmentManager
                 break;
 
             case 'ses':
-                $mailCredential = $oldMailCredential;
+                $mailCredential = $resetCredential;
                 $otherCredential=
                     'SES_KEY='.$request->mail_ses_key."\n".
                     'SES_SECRET='.$request->mail_ses_secret."\n\n";
@@ -183,7 +187,7 @@ class EnvironmentManager
                 $existMailData = 'MAIL_DRIVER='.$request->mail_driver."\n".
                     'MAIL_HOST='.config('mail.host')."\n".
                     'MAIL_PORT='.config('mail.port')."\n".
-                    $oldMailCredential.
+                    $resetCredential.
                     'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
                     'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
                     'MAIL_FROM_NAME='.$request->from_name."\n\n".
@@ -194,7 +198,7 @@ class EnvironmentManager
                 $existMailData = 'MAIL_DRIVER='.$request->mail_driver."\n".
                     'MAIL_HOST='.config('mail.host')."\n".
                     'MAIL_PORT='.config('mail.port')."\n".
-                    $oldMailCredential.
+                    $resetCredential.
                     'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
                     'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
                     'MAIL_FROM_NAME='.$request->from_name."\n\n".
@@ -211,11 +215,6 @@ class EnvironmentManager
                         'MANDRILL_API_KEY='.config('services.mandrill.secret')."\n\n";
                 }
                 break;
-
-            default:
-                $mailCredential = "\n";
-                $otherCredential = "\n";
-                break;
         }
 
         $oldMailData =
diff --git a/resources/assets/js/plugins/en.js b/resources/assets/js/plugins/en.js
index 9b56b1f3..9358b746 100644
--- a/resources/assets/js/plugins/en.js
+++ b/resources/assets/js/plugins/en.js
@@ -743,9 +743,19 @@ export default {
       host: 'Mail Host',
       port: 'Mail Port',
       driver: 'Mail Driver',
+      domain: 'Domain',
+      secret: 'Secret',
+      sparkpost_secret: 'Sparkpost Secret',
+      mailgin_secret: 'Mailgun Secret',
+      ses_secret: 'SES Secret',
+      mandrill_secret: 'Mandrill Secret',
+      ses_key: 'SES Key',
       password: 'Mail Password',
       username: 'Mail Username',
+      endpoint: 'Mail Endpoint',
       mail_config: 'Mail Configuration',
+      from_name: 'From Mail Name',
+      from_mail: 'From Mail Address',
       encryption: 'Mail Encryption',
       mail_config_desc: 'Below details will be used to update the mail environment. Also you can change the details anytime after logging in.'
     },
diff --git a/resources/assets/js/views/settings/mailDriver/Basic.vue b/resources/assets/js/views/settings/mailDriver/Basic.vue
index bb265378..2d4f4b84 100644
--- a/resources/assets/js/views/settings/mailDriver/Basic.vue
+++ b/resources/assets/js/views/settings/mailDriver/Basic.vue
@@ -2,7 +2,7 @@
   <form @submit.prevent="saveEmailConfig()">
     <div class="row">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
         <span class="text-danger"> *</span>
         <base-select
           v-model="mailConfigData.mail_driver"
@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.host') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_host.$error"
@@ -37,7 +37,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_mail.$error"
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_name') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_name.$error"
diff --git a/resources/assets/js/views/settings/mailDriver/Mailgun.vue b/resources/assets/js/views/settings/mailDriver/Mailgun.vue
index 7194463d..a6fa165c 100644
--- a/resources/assets/js/views/settings/mailDriver/Mailgun.vue
+++ b/resources/assets/js/views/settings/mailDriver/Mailgun.vue
@@ -2,7 +2,7 @@
   <form @submit.prevent="saveEmailConfig()">
     <div class="row">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
         <span class="text-danger"> *</span>
         <base-select
           v-model="mailConfigData.mail_driver"
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.host') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_host.$error"
@@ -37,7 +37,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.port') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_port.$error"
@@ -56,13 +56,14 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.encryption') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
         <span class="text-danger"> *</span>
-        <base-input
-          :invalid="$v.mailConfigData.mail_encryption.$error"
+        <base-select
           v-model.trim="mailConfigData.mail_encryption"
-          type="text"
-          name="name"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
           @input="$v.mailConfigData.mail_encryption.$touch()"
         />
         <div v-if="$v.mailConfigData.mail_encryption.$error">
@@ -74,7 +75,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_mail.$error"
@@ -93,7 +94,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_name') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_name.$error"
@@ -111,7 +112,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.domain') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.domain') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_mailgun_domain.$error"
@@ -127,7 +128,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.mailgin_secret') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.mailgin_secret') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_mailgun_secret.$error"
@@ -146,7 +147,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.endpoint') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.endpoint') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_mailgun_endpoint.$error"
@@ -212,10 +213,11 @@ export default {
         mail_mailgun_domain: '',
         mail_mailgun_secret: '',
         mail_mailgun_endpoint: '',
-        mail_encryption: '',
+        mail_encryption: 'tls',
         from_mail: '',
         from_name: ''
-      }
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
     }
   },
   validations: {
diff --git a/resources/assets/js/views/settings/mailDriver/Mandrill.vue b/resources/assets/js/views/settings/mailDriver/Mandrill.vue
index ce496984..c7a60a59 100644
--- a/resources/assets/js/views/settings/mailDriver/Mandrill.vue
+++ b/resources/assets/js/views/settings/mailDriver/Mandrill.vue
@@ -2,7 +2,7 @@
   <form @submit.prevent="saveEmailConfig()">
     <div class="row">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
         <span class="text-danger"> *</span>
         <base-select
           v-model="mailConfigData.mail_driver"
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.host') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_host.$error"
@@ -37,7 +37,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.port') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_port.$error"
@@ -53,13 +53,14 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.encryption') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
         <span class="text-danger"> *</span>
-        <base-input
-          :invalid="$v.mailConfigData.mail_encryption.$error"
+        <base-select
           v-model.trim="mailConfigData.mail_encryption"
-          type="text"
-          name="name"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
           @input="$v.mailConfigData.mail_encryption.$touch()"
         />
         <div v-if="$v.mailConfigData.mail_encryption.$error">
@@ -71,7 +72,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_mail.$error"
@@ -90,7 +91,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_name') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_name.$error"
@@ -108,7 +109,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.mandrill_secret') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.mandrill_secret') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_mandrill_secret.$error"
@@ -170,10 +171,11 @@ export default {
         mail_host: '',
         mail_port: null,
         mail_mandrill_secret: '',
-        mail_encryption: '',
+        mail_encryption: 'tls',
         from_mail: '',
         from_name: ''
-      }
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
     }
   },
   validations: {
diff --git a/resources/assets/js/views/settings/mailDriver/Ses.vue b/resources/assets/js/views/settings/mailDriver/Ses.vue
index 17f517de..9733fe1e 100644
--- a/resources/assets/js/views/settings/mailDriver/Ses.vue
+++ b/resources/assets/js/views/settings/mailDriver/Ses.vue
@@ -2,7 +2,7 @@
   <form @submit.prevent="saveEmailConfig()">
     <div class="row">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
         <span class="text-danger"> *</span>
         <base-select
           v-model="mailConfigData.mail_driver"
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.host') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_host.$error"
@@ -37,7 +37,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.port') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_port.$error"
@@ -56,13 +56,14 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.encryption') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
         <span class="text-danger"> *</span>
-        <base-input
-          :invalid="$v.mailConfigData.mail_encryption.$error"
+        <base-select
           v-model.trim="mailConfigData.mail_encryption"
-          type="text"
-          name="name"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
           @input="$v.mailConfigData.mail_encryption.$touch()"
         />
         <div v-if="$v.mailConfigData.mail_encryption.$error">
@@ -74,7 +75,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_mail.$error"
@@ -93,7 +94,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_name') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_name.$error"
@@ -111,7 +112,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.ses_key') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.ses_key') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_ses_key.$error"
@@ -127,7 +128,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.ses_secret') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.ses_secret') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_ses_secret.$error"
@@ -190,10 +191,11 @@ export default {
         mail_port: null,
         mail_ses_key: '',
         mail_ses_secret: '',
-        mail_encryption: '',
+        mail_encryption: 'tls',
         from_mail: '',
         from_name: ''
-      }
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
     }
   },
   validations: {
diff --git a/resources/assets/js/views/settings/mailDriver/Smtp.vue b/resources/assets/js/views/settings/mailDriver/Smtp.vue
index 84fa896e..8bbea8d9 100644
--- a/resources/assets/js/views/settings/mailDriver/Smtp.vue
+++ b/resources/assets/js/views/settings/mailDriver/Smtp.vue
@@ -2,7 +2,7 @@
   <form @submit.prevent="saveEmailConfig()">
     <div class="row">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
         <span class="text-danger"> *</span>
         <base-select
           v-model="mailConfigData.mail_driver"
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.host') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_host.$error"
@@ -37,7 +37,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.username') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.username') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_username.$error"
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.password') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.password') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_password.$error"
@@ -72,7 +72,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.port') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_port.$error"
@@ -91,13 +91,14 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.encryption') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
         <span class="text-danger"> *</span>
-        <base-input
-          :invalid="$v.mailConfigData.mail_encryption.$error"
+        <base-select
           v-model.trim="mailConfigData.mail_encryption"
-          type="text"
-          name="name"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
           @input="$v.mailConfigData.mail_encryption.$touch()"
         />
         <div v-if="$v.mailConfigData.mail_encryption.$error">
@@ -109,7 +110,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_mail.$error"
@@ -128,7 +129,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_name') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_name.$error"
@@ -190,10 +191,11 @@ export default {
         mail_port: null,
         mail_username: '',
         mail_password: '',
-        mail_encryption: '',
+        mail_encryption: 'tls',
         from_mail: '',
         from_name: ''
-      }
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
     }
   },
   validations: {
diff --git a/resources/assets/js/views/settings/mailDriver/Sparkpost.vue b/resources/assets/js/views/settings/mailDriver/Sparkpost.vue
index 68f78611..ae08d2ba 100644
--- a/resources/assets/js/views/settings/mailDriver/Sparkpost.vue
+++ b/resources/assets/js/views/settings/mailDriver/Sparkpost.vue
@@ -2,7 +2,7 @@
   <form @submit.prevent="saveEmailConfig()">
     <div class="row">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
         <span class="text-danger"> *</span>
         <base-select
           v-model="mailConfigData.mail_driver"
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.host') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_host.$error"
@@ -37,7 +37,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.port') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_port.$error"
@@ -56,13 +56,14 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.encryption') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
         <span class="text-danger"> *</span>
-        <base-input
-          :invalid="$v.mailConfigData.mail_encryption.$error"
+        <base-select
           v-model.trim="mailConfigData.mail_encryption"
-          type="text"
-          name="name"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
           @input="$v.mailConfigData.mail_encryption.$touch()"
         />
         <div v-if="$v.mailConfigData.mail_encryption.$error">
@@ -74,7 +75,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_mail.$error"
@@ -93,7 +94,7 @@
         </div>
       </div>
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.from_name') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.from_name.$error"
@@ -111,7 +112,7 @@
     </div>
     <div class="row my-2">
       <div class="col-md-6 my-2">
-        <label class="form-label">{{ $t('settings.mail.sparkpost_secret') }}</label>
+        <label class="form-label">{{ $t('wizard.mail.sparkpost_secret') }}</label>
         <span class="text-danger"> *</span>
         <base-input
           :invalid="$v.mailConfigData.mail_sparkpost_secret.$error"
@@ -173,10 +174,11 @@ export default {
         mail_host: '',
         mail_port: null,
         mail_sparkpost_secret: '',
-        mail_encryption: '',
+        mail_encryption: 'tls',
         from_mail: '',
         from_name: ''
-      }
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
     }
   },
   validations: {
diff --git a/resources/assets/js/views/wizard/EmailConfiguration.vue b/resources/assets/js/views/wizard/EmailConfiguration.vue
index ecc92ad5..0c9e228e 100644
--- a/resources/assets/js/views/wizard/EmailConfiguration.vue
+++ b/resources/assets/js/views/wizard/EmailConfiguration.vue
@@ -3,184 +3,49 @@
     <form action="" @submit.prevent="next()">
       <p class="form-title">{{ $t('wizard.mail.mail_config') }}</p>
       <p class="form-desc">{{ $t('wizard.mail.mail_config_desc') }}</p>
-      <div class="row my-2 mt-5">
-        <div class="col-md-6 my-2">
-          <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
-          <span class="text-danger"> *</span>
-          <base-select
-            v-model="mailConfigData.mail_driver"
-            :invalid="$v.mailConfigData.mail_driver.$error"
-            :options="mail_drivers"
-            :searchable="true"
-            :show-labels="false"
-            @change="$v.mailConfigData.mail_driver.$touch()"
-          />
-          <div v-if="$v.mailConfigData.mail_driver.$error">
-            <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
-              {{ $tc('validation.required') }}
-            </span>
-          </div>
-        </div>
-        <div class="col-md-6 my-2">
-          <label class="form-label">{{ $t('wizard.mail.host') }}</label>
-          <span class="text-danger"> *</span>
-          <base-input
-            :invalid="$v.mailConfigData.mail_host.$error"
-            v-model.trim="mailConfigData.mail_host"
-            type="text"
-            name="mail_host"
-            @input="$v.mailConfigData.mail_host.$touch()"
-          />
-          <div v-if="$v.mailConfigData.mail_host.$error">
-            <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
-              {{ $tc('validation.required') }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="row my-2">
-        <div class="col-md-6 my-2">
-          <label class="form-label">{{ $t('wizard.mail.username') }}</label>
-          <span class="text-danger"> *</span>
-          <base-input
-            :invalid="$v.mailConfigData.mail_username.$error"
-            v-model.trim="mailConfigData.mail_username"
-            type="text"
-            name="db_name"
-            @input="$v.mailConfigData.mail_username.$touch()"
-          />
-          <div v-if="$v.mailConfigData.mail_username.$error">
-            <span v-if="!$v.mailConfigData.mail_username.required" class="text-danger">
-              {{ $tc('validation.required') }}
-            </span>
-          </div>
-        </div>
-        <div class="col-md-6 my-2">
-          <label class="form-label">{{ $t('wizard.mail.password') }}</label>
-          <span class="text-danger"> *</span>
-          <base-input
-            :invalid="$v.mailConfigData.mail_password.$error"
-            v-model.trim="mailConfigData.mail_password"
-            type="password"
-            show-password
-            name="name"
-            @input="$v.mailConfigData.mail_password.$touch()"
-          />
-          <div v-if="$v.mailConfigData.mail_password.$error">
-            <span v-if="!$v.mailConfigData.mail_password.required" class="text-danger">
-              {{ $tc('validation.required') }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="row my-2">
-        <div class="col-md-6 my-2">
-          <label class="form-label">{{ $t('wizard.mail.port') }}</label>
-          <span class="text-danger"> *</span>
-          <base-input
-            :invalid="$v.mailConfigData.mail_port.$error"
-            v-model.trim="mailConfigData.mail_port"
-            type="text"
-            name="mail_port"
-            @input="$v.mailConfigData.mail_port.$touch()"
-          />
-          <div v-if="$v.mailConfigData.mail_port.$error">
-            <span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
-              {{ $tc('validation.required') }}
-            </span>
-            <span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
-              {{ $tc('validation.numbers_only') }}
-            </span>
-          </div>
-        </div>
-        <div class="col-md-6 my-2">
-          <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
-          <span class="text-danger"> *</span>
-          <base-input
-            :invalid="$v.mailConfigData.mail_encryption.$error"
-            v-model.trim="mailConfigData.mail_encryption"
-            type="text"
-            name="name"
-            @input="$v.mailConfigData.mail_encryption.$touch()"
-          />
-          <div v-if="$v.mailConfigData.mail_encryption.$error">
-            <span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
-              {{ $tc('validation.required') }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="row mt-5">
-        <base-button
-          :loading="loading"
-          class="pull-right"
-          icon="save"
-          color="theme"
-          type="submit"
-        >
-          {{ $t('wizard.save_cont') }}
-        </base-button>
-        <base-button
-          :loading="loading"
-          class="pull-right ml-4"
-          outline
-          color="theme"
-          @click="$emit('next')"
-        >
-          {{ $t('wizard.skip') }}
-        </base-button>
-      </div>
+      <component
+        :is="mail_driver"
+        :config-data="mailConfigData"
+        :loading="loading"
+        :mail-drivers="mail_drivers"
+        @on-change-driver="(val) => mail_driver = mailConfigData.mail_driver = val"
+        @submit-data="next"
+      />
     </form>
   </div>
 </template>
 <script>
 import MultiSelect from 'vue-multiselect'
 import { validationMixin } from 'vuelidate'
-import Ls from '../../services/ls'
-const { required, email, numeric } = require('vuelidate/lib/validators')
+import Smtp from './mailDriver/Smtp'
+import Mailgun from './mailDriver/Mailgun'
+import Sparkpost from './mailDriver/Sparkpost'
+import Ses from './mailDriver/Ses'
+import Basic from './mailDriver/Basic'
+import Mandrill from './mailDriver/Mandrill'
 
 export default {
   components: {
-    MultiSelect
+    MultiSelect,
+    Smtp,
+    Mailgun,
+    Sparkpost,
+    Ses,
+    sendmail: Basic,
+    mail: Basic,
+    Mandrill
   },
   mixins: [validationMixin],
   data () {
     return {
       mailConfigData: {
-        mail_driver: 'smtp',
-        mail_host: 'mailtrap.io',
-        mail_port: null,
-        mail_username: null,
-        mail_password: null,
-        mail_encryption: null
+        mail_driver: 'smtp'
       },
+      mail_driver: 'smtp',
       loading: false,
       mail_drivers: []
     }
   },
-  validations: {
-    mailConfigData: {
-      mail_driver: {
-        required
-      },
-      mail_host: {
-        required
-      },
-      mail_port: {
-        required,
-        numeric
-      },
-      mail_username: {
-        required
-      },
-      mail_password: {
-        required
-      },
-      mail_encryption: {
-        required
-      }
-    }
-  },
   created () {
     this.getMailDrivers()
   },
@@ -195,14 +60,10 @@ export default {
         this.loading = false
       }
     },
-    async next () {
-      this.$v.mailConfigData.$touch()
-      if (this.$v.mailConfigData.$invalid) {
-        return true
-      }
+    async next (mailConfigData) {
       this.loading = true
       try {
-        let response = await window.axios.post('/api/admin/onboarding/environment/mail', this.mailConfigData)
+        let response = await window.axios.post('/api/settings/environment/mail', mailConfigData)
         if (response.data.success) {
           this.$emit('next')
           window.toastr['success'](this.$t('wizard.success.' + response.data.success))
diff --git a/resources/assets/js/views/wizard/mailDriver/Basic.vue b/resources/assets/js/views/wizard/mailDriver/Basic.vue
new file mode 100644
index 00000000..2d4f4b84
--- /dev/null
+++ b/resources/assets/js/views/wizard/mailDriver/Basic.vue
@@ -0,0 +1,156 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model="mailConfigData.mail_driver"
+          :invalid="$v.mailConfigData.mail_driver.$error"
+          :options="mailDrivers"
+          :searchable="true"
+          :show-labels="false"
+          @input="onChangeDriver"
+        />
+        <div v-if="$v.mailConfigData.mail_driver.$error">
+          <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <!-- <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_host.$error"
+          v-model.trim="mailConfigData.mail_host"
+          type="text"
+          name="mail_host"
+          @input="$v.mailConfigData.mail_host.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_host.$error">
+          <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div> -->
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_mail.$error"
+          v-model.trim="mailConfigData.from_mail"
+          type="text"
+          name="from_mail"
+          @input="$v.mailConfigData.from_mail.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_mail.$error">
+          <span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_name.$error"
+          v-model.trim="mailConfigData.from_name"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.from_name.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_name.$error">
+          <span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <base-button
+      :loading="loading"
+      class="pull-right mt-4"
+      icon="save"
+      color="theme"
+      type="submit"
+    >
+      {{ $t('general.save') }}
+    </base-button>
+  </form>
+</template>
+<script>
+import MultiSelect from 'vue-multiselect'
+import { validationMixin } from 'vuelidate'
+const { required, email } = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  props: {
+    configData: {
+      type: Object,
+      require: true,
+      default: Object
+    },
+    loading: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    mailDrivers: {
+      type: Array,
+      require: true,
+      default: Array
+    }
+  },
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: '',
+        mail_host: '',
+        from_mail: '',
+        from_name: ''
+      }
+    }
+  },
+  validations: {
+    mailConfigData: {
+      mail_driver: {
+        required
+      },
+      from_mail: {
+        required,
+        email
+      },
+      from_name: {
+        required
+      }
+    }
+  },
+  mounted () {
+    for (const key in this.mailConfigData) {
+      if (this.configData.hasOwnProperty(key)) {
+        this.mailConfigData[key] = this.configData[key]
+      }
+    }
+  },
+  methods: {
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (!this.$v.mailConfigData.$invalid) {
+        this.$emit('submit-data', this.mailConfigData)
+      }
+
+      return false
+    },
+    onChangeDriver () {
+      this.$v.mailConfigData.mail_driver.$touch()
+      this.$emit('on-change-driver', this.mailConfigData.mail_driver)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/wizard/mailDriver/Mailgun.vue b/resources/assets/js/views/wizard/mailDriver/Mailgun.vue
new file mode 100644
index 00000000..a6fa165c
--- /dev/null
+++ b/resources/assets/js/views/wizard/mailDriver/Mailgun.vue
@@ -0,0 +1,278 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model="mailConfigData.mail_driver"
+          :invalid="$v.mailConfigData.mail_driver.$error"
+          :options="mailDrivers"
+          :searchable="true"
+          :show-labels="false"
+          @input="onChangeDriver"
+        />
+        <div v-if="$v.mailConfigData.mail_driver.$error">
+          <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_host.$error"
+          v-model.trim="mailConfigData.mail_host"
+          type="text"
+          name="mail_host"
+          @input="$v.mailConfigData.mail_host.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_host.$error">
+          <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_port.$error"
+          v-model.trim="mailConfigData.mail_port"
+          type="text"
+          name="mail_port"
+          @input="$v.mailConfigData.mail_port.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_port.$error">
+          <span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model.trim="mailConfigData.mail_encryption"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
+          @input="$v.mailConfigData.mail_encryption.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_encryption.$error">
+          <span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_mail.$error"
+          v-model.trim="mailConfigData.from_mail"
+          type="text"
+          name="from_mail"
+          @input="$v.mailConfigData.from_mail.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_mail.$error">
+          <span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_name.$error"
+          v-model.trim="mailConfigData.from_name"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.from_name.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_name.$error">
+          <span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.domain') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_mailgun_domain.$error"
+          v-model.trim="mailConfigData.mail_mailgun_domain"
+          type="text"
+          name="db_name"
+          @input="$v.mailConfigData.mail_mailgun_domain.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_mailgun_domain.$error">
+          <span v-if="!$v.mailConfigData.mail_mailgun_domain.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.mailgin_secret') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_mailgun_secret.$error"
+          v-model.trim="mailConfigData.mail_mailgun_secret"
+          type="password"
+          name="name"
+          show-password
+          @input="$v.mailConfigData.mail_mailgun_secret.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_mailgun_secret.$error">
+          <span v-if="!$v.mailConfigData.mail_mailgun_secret.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.endpoint') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_mailgun_endpoint.$error"
+          v-model.trim="mailConfigData.mail_mailgun_endpoint"
+          type="text"
+          name="mail_mailgun_endpoint"
+          @input="$v.mailConfigData.mail_mailgun_endpoint.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_mailgun_endpoint.$error">
+          <span v-if="!$v.mailConfigData.mail_mailgun_endpoint.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.mail_mailgun_endpoint.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <base-button
+      :loading="loading"
+      class="pull-right mt-4"
+      icon="save"
+      color="theme"
+      type="submit"
+    >
+      {{ $t('general.save') }}
+    </base-button>
+  </form>
+</template>
+<script>
+import MultiSelect from 'vue-multiselect'
+import { validationMixin } from 'vuelidate'
+const { required, email, numeric } = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  props: {
+    configData: {
+      type: Object,
+      require: true,
+      default: Object
+    },
+    loading: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    mailDrivers: {
+      type: Array,
+      require: true,
+      default: Array
+    }
+  },
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_mailgun_domain: '',
+        mail_mailgun_secret: '',
+        mail_mailgun_endpoint: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: ''
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
+    }
+  },
+  validations: {
+    mailConfigData: {
+      mail_driver: {
+        required
+      },
+      mail_host: {
+        required
+      },
+      mail_port: {
+        required,
+        numeric
+      },
+      mail_mailgun_domain: {
+        required
+      },
+      mail_mailgun_endpoint: {
+        required
+      },
+      mail_mailgun_secret: {
+        required
+      },
+      mail_encryption: {
+        required
+      },
+      from_mail: {
+        required,
+        email
+      },
+      from_name: {
+        required
+      }
+    }
+  },
+  mounted () {
+    for (const key in this.mailConfigData) {
+      if (this.configData.hasOwnProperty(key)) {
+        this.mailConfigData[key] = this.configData[key]
+      }
+    }
+  },
+  methods: {
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (!this.$v.mailConfigData.$invalid) {
+        this.$emit('submit-data', this.mailConfigData)
+      }
+
+      return false
+    },
+    onChangeDriver () {
+      this.$v.mailConfigData.mail_driver.$touch()
+      this.$emit('on-change-driver', this.mailConfigData.mail_driver)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/wizard/mailDriver/Mandrill.vue b/resources/assets/js/views/wizard/mailDriver/Mandrill.vue
new file mode 100644
index 00000000..c7a60a59
--- /dev/null
+++ b/resources/assets/js/views/wizard/mailDriver/Mandrill.vue
@@ -0,0 +1,230 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model="mailConfigData.mail_driver"
+          :invalid="$v.mailConfigData.mail_driver.$error"
+          :options="mailDrivers"
+          :searchable="true"
+          :show-labels="false"
+          @input="onChangeDriver"
+        />
+        <div v-if="$v.mailConfigData.mail_driver.$error">
+          <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_host.$error"
+          v-model.trim="mailConfigData.mail_host"
+          type="text"
+          name="mail_host"
+          @input="$v.mailConfigData.mail_host.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_host.$error">
+          <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_port.$error"
+          v-model.trim="mailConfigData.mail_port"
+          type="text"
+          name="mail_port"
+          @input="$v.mailConfigData.mail_port.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_port.$error">
+          <span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model.trim="mailConfigData.mail_encryption"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
+          @input="$v.mailConfigData.mail_encryption.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_encryption.$error">
+          <span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_mail.$error"
+          v-model.trim="mailConfigData.from_mail"
+          type="text"
+          name="from_mail"
+          @input="$v.mailConfigData.from_mail.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_mail.$error">
+          <span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_name.$error"
+          v-model.trim="mailConfigData.from_name"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.from_name.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_name.$error">
+          <span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.mandrill_secret') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_mandrill_secret.$error"
+          v-model.trim="mailConfigData.mail_mandrill_secret"
+          type="password"
+          name="name"
+          show-password
+          @input="$v.mailConfigData.mail_mandrill_secret.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_mandrill_secret.$error">
+          <span v-if="!$v.mailConfigData.mail_mandrill_secret.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <base-button
+      :loading="loading"
+      class="pull-right mt-4"
+      icon="save"
+      color="theme"
+      type="submit"
+    >
+      {{ $t('general.save') }}
+    </base-button>
+  </form>
+</template>
+<script>
+import MultiSelect from 'vue-multiselect'
+import { validationMixin } from 'vuelidate'
+const { required, email, numeric } = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  props: {
+    configData: {
+      type: Object,
+      require: true,
+      default: Object
+    },
+    loading: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    mailDrivers: {
+      type: Array,
+      require: true,
+      default: Array
+    }
+  },
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_mandrill_secret: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: ''
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
+    }
+  },
+  validations: {
+    mailConfigData: {
+      mail_driver: {
+        required
+      },
+      mail_host: {
+        required
+      },
+      mail_port: {
+        required,
+        numeric
+      },
+      mail_mandrill_secret: {
+        required
+      },
+      mail_encryption: {
+        required
+      },
+      from_mail: {
+        required,
+        email
+      },
+      from_name: {
+        required
+      }
+    }
+  },
+  mounted () {
+    for (const key in this.mailConfigData) {
+      if (this.configData.hasOwnProperty(key)) {
+        this.mailConfigData[key] = this.configData[key]
+      }
+    }
+  },
+  methods: {
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (!this.$v.mailConfigData.$invalid) {
+        this.$emit('submit-data', this.mailConfigData)
+      }
+
+      return false
+    },
+    onChangeDriver () {
+      this.$v.mailConfigData.mail_driver.$touch()
+      this.$emit('on-change-driver', this.mailConfigData.mail_driver)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/wizard/mailDriver/Ses.vue b/resources/assets/js/views/wizard/mailDriver/Ses.vue
new file mode 100644
index 00000000..9733fe1e
--- /dev/null
+++ b/resources/assets/js/views/wizard/mailDriver/Ses.vue
@@ -0,0 +1,253 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model="mailConfigData.mail_driver"
+          :invalid="$v.mailConfigData.mail_driver.$error"
+          :options="mailDrivers"
+          :searchable="true"
+          :show-labels="false"
+          @input="onChangeDriver"
+        />
+        <div v-if="$v.mailConfigData.mail_driver.$error">
+          <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_host.$error"
+          v-model.trim="mailConfigData.mail_host"
+          type="text"
+          name="mail_host"
+          @input="$v.mailConfigData.mail_host.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_host.$error">
+          <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_port.$error"
+          v-model.trim="mailConfigData.mail_port"
+          type="text"
+          name="mail_port"
+          @input="$v.mailConfigData.mail_port.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_port.$error">
+          <span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model.trim="mailConfigData.mail_encryption"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
+          @input="$v.mailConfigData.mail_encryption.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_encryption.$error">
+          <span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_mail.$error"
+          v-model.trim="mailConfigData.from_mail"
+          type="text"
+          name="from_mail"
+          @input="$v.mailConfigData.from_mail.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_mail.$error">
+          <span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_name.$error"
+          v-model.trim="mailConfigData.from_name"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.from_name.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_name.$error">
+          <span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.ses_key') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_ses_key.$error"
+          v-model.trim="mailConfigData.mail_ses_key"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.mail_ses_key.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_ses_key.$error">
+          <span v-if="!$v.mailConfigData.mail_ses_key.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.ses_secret') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_ses_secret.$error"
+          v-model.trim="mailConfigData.mail_ses_secret"
+          type="password"
+          name="name"
+          show-password
+          @input="$v.mailConfigData.mail_ses_secret.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_ses_secret.$error">
+          <span v-if="!$v.mailConfigData.mail_ses_secret.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <base-button
+      :loading="loading"
+      class="pull-right mt-4"
+      icon="save"
+      color="theme"
+      type="submit"
+    >
+      {{ $t('general.save') }}
+    </base-button>
+  </form>
+</template>
+<script>
+import MultiSelect from 'vue-multiselect'
+import { validationMixin } from 'vuelidate'
+const { required, email, numeric } = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  props: {
+    configData: {
+      type: Object,
+      require: true,
+      default: Object
+    },
+    loading: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    mailDrivers: {
+      type: Array,
+      require: true,
+      default: Array
+    }
+  },
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_ses_key: '',
+        mail_ses_secret: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: ''
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
+    }
+  },
+  validations: {
+    mailConfigData: {
+      mail_driver: {
+        required
+      },
+      mail_host: {
+        required
+      },
+      mail_port: {
+        required,
+        numeric
+      },
+      mail_ses_key: {
+        required
+      },
+      mail_ses_secret: {
+        required
+      },
+      mail_encryption: {
+        required
+      },
+      from_mail: {
+        required,
+        email
+      },
+      from_name: {
+        required
+      }
+    }
+  },
+  mounted () {
+    for (const key in this.mailConfigData) {
+      if (this.configData.hasOwnProperty(key)) {
+        this.mailConfigData[key] = this.configData[key]
+      }
+    }
+  },
+  methods: {
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (!this.$v.mailConfigData.$invalid) {
+        this.$emit('submit-data', this.mailConfigData)
+      }
+
+      return false
+    },
+    onChangeDriver () {
+      this.$v.mailConfigData.mail_driver.$touch()
+      this.$emit('on-change-driver', this.mailConfigData.mail_driver)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/wizard/mailDriver/Smtp.vue b/resources/assets/js/views/wizard/mailDriver/Smtp.vue
new file mode 100644
index 00000000..8bbea8d9
--- /dev/null
+++ b/resources/assets/js/views/wizard/mailDriver/Smtp.vue
@@ -0,0 +1,253 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model="mailConfigData.mail_driver"
+          :invalid="$v.mailConfigData.mail_driver.$error"
+          :options="mailDrivers"
+          :searchable="true"
+          :show-labels="false"
+          @input="onChangeDriver"
+        />
+        <div v-if="$v.mailConfigData.mail_driver.$error">
+          <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_host.$error"
+          v-model.trim="mailConfigData.mail_host"
+          type="text"
+          name="mail_host"
+          @input="$v.mailConfigData.mail_host.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_host.$error">
+          <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.username') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_username.$error"
+          v-model.trim="mailConfigData.mail_username"
+          type="text"
+          name="db_name"
+          @input="$v.mailConfigData.mail_username.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_username.$error">
+          <span v-if="!$v.mailConfigData.mail_username.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.password') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_password.$error"
+          v-model.trim="mailConfigData.mail_password"
+          type="password"
+          name="name"
+          show-password
+          @input="$v.mailConfigData.mail_password.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_password.$error">
+          <span v-if="!$v.mailConfigData.mail_password.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_port.$error"
+          v-model.trim="mailConfigData.mail_port"
+          type="text"
+          name="mail_port"
+          @input="$v.mailConfigData.mail_port.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_port.$error">
+          <span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model.trim="mailConfigData.mail_encryption"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
+          @input="$v.mailConfigData.mail_encryption.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_encryption.$error">
+          <span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_mail.$error"
+          v-model.trim="mailConfigData.from_mail"
+          type="text"
+          name="from_mail"
+          @input="$v.mailConfigData.from_mail.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_mail.$error">
+          <span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_name.$error"
+          v-model.trim="mailConfigData.from_name"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.from_name.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_name.$error">
+          <span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <base-button
+      :loading="loading"
+      class="pull-right mt-4"
+      icon="save"
+      color="theme"
+      type="submit"
+    >
+      {{ $t('general.save') }}
+    </base-button>
+  </form>
+</template>
+<script>
+import MultiSelect from 'vue-multiselect'
+import { validationMixin } from 'vuelidate'
+const { required, email, numeric } = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  props: {
+    configData: {
+      type: Object,
+      require: true,
+      default: Object
+    },
+    loading: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    mailDrivers: {
+      type: Array,
+      require: true,
+      default: Array
+    }
+  },
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_username: '',
+        mail_password: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: ''
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
+    }
+  },
+  validations: {
+    mailConfigData: {
+      mail_driver: {
+        required
+      },
+      mail_host: {
+        required
+      },
+      mail_port: {
+        required,
+        numeric
+      },
+      mail_username: {
+        required
+      },
+      mail_password: {
+        required
+      },
+      mail_encryption: {
+        required
+      },
+      from_mail: {
+        required,
+        email
+      },
+      from_name: {
+        required
+      }
+    }
+  },
+  mounted () {
+    for (const key in this.mailConfigData) {
+      if (this.configData.hasOwnProperty(key)) {
+        this.mailConfigData[key] = this.configData[key]
+      }
+    }
+  },
+  methods: {
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (!this.$v.mailConfigData.$invalid) {
+        this.$emit('submit-data', this.mailConfigData)
+      }
+
+      return false
+    },
+    onChangeDriver () {
+      this.$v.mailConfigData.mail_driver.$touch()
+      this.$emit('on-change-driver', this.mailConfigData.mail_driver)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/wizard/mailDriver/Sparkpost.vue b/resources/assets/js/views/wizard/mailDriver/Sparkpost.vue
new file mode 100644
index 00000000..ae08d2ba
--- /dev/null
+++ b/resources/assets/js/views/wizard/mailDriver/Sparkpost.vue
@@ -0,0 +1,233 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.driver') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model="mailConfigData.mail_driver"
+          :invalid="$v.mailConfigData.mail_driver.$error"
+          :options="mailDrivers"
+          :searchable="true"
+          :show-labels="false"
+          @input="onChangeDriver"
+        />
+        <div v-if="$v.mailConfigData.mail_driver.$error">
+          <span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.host') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_host.$error"
+          v-model.trim="mailConfigData.mail_host"
+          type="text"
+          name="mail_host"
+          @input="$v.mailConfigData.mail_host.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_host.$error">
+          <span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.port') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_port.$error"
+          v-model.trim="mailConfigData.mail_port"
+          type="text"
+          name="mail_port"
+          @input="$v.mailConfigData.mail_port.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_port.$error">
+          <span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
+        <span class="text-danger"> *</span>
+        <base-select
+          v-model.trim="mailConfigData.mail_encryption"
+          :invalid="$v.mailConfigData.mail_encryption.$error"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
+          @input="$v.mailConfigData.mail_encryption.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_encryption.$error">
+          <span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_mail.$error"
+          v-model.trim="mailConfigData.from_mail"
+          type="text"
+          name="from_mail"
+          @input="$v.mailConfigData.from_mail.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_mail.$error">
+          <span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+          <span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
+            {{ $tc('validation.numbers_only') }}
+          </span>
+        </div>
+      </div>
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.from_name.$error"
+          v-model.trim="mailConfigData.from_name"
+          type="text"
+          name="name"
+          @input="$v.mailConfigData.from_name.$touch()"
+        />
+        <div v-if="$v.mailConfigData.from_name.$error">
+          <span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('wizard.mail.sparkpost_secret') }}</label>
+        <span class="text-danger"> *</span>
+        <base-input
+          :invalid="$v.mailConfigData.mail_sparkpost_secret.$error"
+          v-model.trim="mailConfigData.mail_sparkpost_secret"
+          type="password"
+          name="name"
+          show-password
+          @input="$v.mailConfigData.mail_sparkpost_secret.$touch()"
+        />
+        <div v-if="$v.mailConfigData.mail_sparkpost_secret.$error">
+          <span v-if="!$v.mailConfigData.mail_sparkpost_secret.required" class="text-danger">
+            {{ $tc('validation.required') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <base-button
+      :loading="loading"
+      class="pull-right mt-4"
+      icon="save"
+      color="theme"
+      type="submit"
+    >
+      {{ $t('general.save') }}
+    </base-button>
+  </form>
+</template>
+<script>
+import MultiSelect from 'vue-multiselect'
+import { validationMixin } from 'vuelidate'
+const { required, email, numeric } = require('vuelidate/lib/validators')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  props: {
+    configData: {
+      type: Object,
+      require: true,
+      default: Object
+    },
+    loading: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    mailDrivers: {
+      type: Array,
+      require: true,
+      default: Array
+    }
+  },
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_sparkpost_secret: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: ''
+      },
+      encryptions: ['tls', 'ssl', 'starttls']
+    }
+  },
+  validations: {
+    mailConfigData: {
+      mail_driver: {
+        required
+      },
+      mail_host: {
+        required
+      },
+      mail_port: {
+        required,
+        numeric
+      },
+      mail_sparkpost_secret: {
+        required
+      },
+      mail_encryption: {
+        required
+      },
+      from_mail: {
+        required,
+        email
+      },
+      from_name: {
+        required
+      }
+    }
+  },
+  mounted () {
+    for (const key in this.mailConfigData) {
+      if (this.configData.hasOwnProperty(key)) {
+        this.mailConfigData[key] = this.configData[key]
+      }
+    }
+  },
+  methods: {
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (!this.$v.mailConfigData.$invalid) {
+        this.$emit('submit-data', this.mailConfigData)
+      }
+
+      return false
+    },
+    onChangeDriver () {
+      this.$v.mailConfigData.mail_driver.$touch()
+      this.$emit('on-change-driver', this.mailConfigData.mail_driver)
+    }
+  }
+}
+</script>