diff --git a/resources/assets/js/plugins/en.js b/resources/assets/js/plugins/en.js
index 6be999aa..9f21f6fd 100644
--- a/resources/assets/js/plugins/en.js
+++ b/resources/assets/js/plugins/en.js
@@ -549,6 +549,16 @@ export default {
       action: 'Action',
       add_currency: 'Add Currency'
     },
+    mail: {
+      host: 'Mail Host',
+      port: 'Mail Port',
+      driver: 'Mail Driver',
+      password: 'Mail Password',
+      username: 'Mail Username',
+      mail_config: 'Mail Configuration',
+      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.'
+    },
     pdf: {
       title: 'PDF Setting',
       footer_text: 'Footer Text',
diff --git a/resources/assets/js/router.js b/resources/assets/js/router.js
index c2801d14..5fb1a243 100644
--- a/resources/assets/js/router.js
+++ b/resources/assets/js/router.js
@@ -71,6 +71,7 @@ import Preferences from './views/settings/Preferences.vue'
 import UserProfile from './views/settings/UserProfile.vue'
 import TaxTypes from './views/settings/TaxTypes.vue'
 import ExpenseCategory from './views/settings/ExpenseCategory.vue'
+import MailConfig from './views/settings/MailConfig.vue'
 
 import Wizard from './views/wizard/Index.vue'
 
@@ -327,6 +328,11 @@ const routes = [
             name: 'expense.category',
             component: ExpenseCategory
           },
+          {
+            path: 'mail-configuration',
+            name: 'mailconfig',
+            component: MailConfig
+          },
           {
             path: 'notifications',
             name: 'notifications',
diff --git a/resources/assets/js/views/settings/MailConfig.vue b/resources/assets/js/views/settings/MailConfig.vue
new file mode 100644
index 00000000..e3f83ac6
--- /dev/null
+++ b/resources/assets/js/views/settings/MailConfig.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="setting-main-container">
+    <div class="card setting-card">
+      <div class="page-header">
+        <h3 class="page-title">{{ $t('settings.mail.mail_config') }}</h3>
+        <p class="page-sub-title">
+          {{ $t('settings.mail.mail_config_desc') }}
+        </p>
+      </div>
+      <form action="" @submit.prevent="saveEmailConfig()">
+        <div class="row my-2 mt-5">
+          <div class="col-md-6 my-2">
+            <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.mail.password') }}</label>
+            <span class="text-danger"> *</span>
+            <base-input
+              :invalid="$v.mailConfigData.mail_password.$error"
+              v-model.trim="mailConfigData.mail_password"
+              type="mail_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('settings.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('settings.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>
+        <base-button
+          :loading="loading"
+          class="pull-right mt-5"
+          icon="save"
+          color="theme"
+          type="submit"
+        >
+          {{ $t('wizard.save_cont') }}
+        </base-button>
+      </form>
+    </div>
+  </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')
+
+export default {
+  components: {
+    MultiSelect
+  },
+  mixins: [validationMixin],
+  data () {
+    return {
+      mailConfigData: {
+        mail_driver: 'smtp',
+        mail_host: 'mailtrap.io',
+        mail_port: 2525,
+        mail_username: 'cc3c64516febd4',
+        mail_password: 'e6a0176301f587',
+        mail_encryption: 'tls'
+      },
+      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
+      }
+    }
+  },
+  mounted () {
+    // this.getMailDrivers()
+  },
+  methods: {
+    async getMailDrivers () {
+      this.loading = true
+
+      let response = await window.axios.get('/api/admin/onboarding/environment/mail')
+
+      if (response.data) {
+        this.mail_drivers = response.data
+        this.loading = false
+      }
+    },
+    async saveEmailConfig () {
+      this.$v.mailConfigData.$touch()
+      if (this.$v.mailConfigData.$invalid) {
+        return true
+      }
+      this.loading = true
+      try {
+        let response = await window.axios.post('/api/admin/onboarding/environment/mail', this.mailConfigData)
+        if (response.data.success) {
+          window.toastr['success'](this.$t('wizard.success.' + response.data.success))
+        } else {
+          window.toastr['error'](this.$t('wizard.errors.' + response.data.error))
+        }
+        this.loading = false
+        return true
+      } catch (e) {
+        window.toastr['error']('Something went wrong')
+      }
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/settings/layout/Index.vue b/resources/assets/js/views/settings/layout/Index.vue
index f032e576..0bb6bca3 100644
--- a/resources/assets/js/views/settings/layout/Index.vue
+++ b/resources/assets/js/views/settings/layout/Index.vue
@@ -63,6 +63,12 @@ export default {
           icon: 'list-alt',
           iconType: 'far'
         },
+        {
+          link: '/admin/settings/mail-configuration',
+          title: 'settings.mail.mail_config',
+          icon: 'envelope',
+          iconType: 'fa'
+        },
         {
           link: '/admin/settings/notifications',
           title: 'settings.menu_title.notifications',