diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 0303a2dae..6e48f6d02 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -3,7 +3,8 @@
             :name="name"
             :class="formClasses"
             :error="formError">
-        <el-select v-model="real_model" @input="change" filterable v-if="!multiple"
+
+        <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
             :placeholder="placeholder">
             <div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
                 <ul class="el-scrollbar__view el-select-dropdown__list">
@@ -39,8 +40,43 @@
             </el-option-group>
         </el-select>
 
+        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
+            :placeholder="placeholder">
+            <div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item hover" @click="onAddItem">
+                        <span>{{ add_new_text }}</span>
+                    </li>
+                </ul>
+            </div>
 
-        <el-select v-model="real_model" @input="change" filterable v-if="multiple" multiple collapse-tags
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+               :key="value"
+               :label="label"
+               :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+        </el-select>
+
+        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple" multiple collapse-tags
             :placeholder="placeholder">
             <div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
                 <ul class="el-scrollbar__view el-select-dropdown__list">
@@ -115,7 +151,8 @@ export default {
         addNewText: null,
         addNewPath: null,
         group: false,
-        multiple:false
+        multiple:false,
+        disabled:false
     },
 
     data() {
diff --git a/resources/assets/js/views/settings/settings.js b/resources/assets/js/views/settings/settings.js
index b7c218850..78684bbde 100644
--- a/resources/assets/js/views/settings/settings.js
+++ b/resources/assets/js/views/settings/settings.js
@@ -28,22 +28,49 @@ const app = new Vue({
     data: function () {
         return {
             form: new Form('setting'),
-            bulk_action: new BulkAction('settings')
+            bulk_action: new BulkAction('settings'),
+            email:{
+                sendmailPath:true,
+                smtpHost:true,
+                smtpPort:true,
+                smtpUsername:true,
+                smtpPassword:true,
+                smtpEncryption:true,
+            }
         }
     },
 
-    methods: {
-        onProtocolChange(protocol) {
-            if (protocol === 'smtp') {
-                document.getElementById('smtp_host').disabled = false
-                document.getElementById('smtp_port').disabled = false
-                document.getElementById('smtp_username').disabled = false
-                document.getElementById('smtp_password').disabled = false
-            } else {
-                document.getElementById('smtp_host').disabled = true
-                document.getElementById('smtp_port').disabled = true
-                document.getElementById('smtp_username').disabled = true
-                document.getElementById('smtp_password').disabled = true
+    mounted(){
+        this.onChangeProtocol(this.form.protocol);
+    },
+
+    methods:{
+        onChangeProtocol(protocol){
+            switch(protocol){
+                case "smtp":
+                    this.email.sendmailPath = true;
+                    this.email.smtpHost = false;
+                    this.email.smtpPort = false;
+                    this.email.smtpUsername = false;
+                    this.email.smtpPassword = false;
+                    this.email.smtpEncryption = false;
+                    break;
+                case "sendmail":
+                    this.email.sendmailPath = false;
+                    this.email.smtpHost = true;
+                    this.email.smtpPort = true;
+                    this.email.smtpUsername = true;
+                    this.email.smtpPassword = true;
+                    this.email.smtpEncryption = true;
+                    break;
+                default:
+                    this.email.sendmailPath = true;
+                    this.email.smtpHost = true;
+                    this.email.smtpPort = true;
+                    this.email.smtpUsername = true;
+                    this.email.smtpPassword = true;
+                    this.email.smtpEncryption = true;
+                    break;
             }
         }
     }
diff --git a/resources/views/partials/form/select_group.blade.php b/resources/views/partials/form/select_group.blade.php
index 7aa40cfd4..e00f3bb03 100644
--- a/resources/views/partials/form/select_group.blade.php
+++ b/resources/views/partials/form/select_group.blade.php
@@ -12,6 +12,9 @@
         @if (!empty($attributes['change']))
         @change="{{ $attributes['change'] }}($event)"
         @endif
+        @if (isset($attributes['disabled']))
+        :disabled="{{ $attributes['disabled'] }}"
+        @endif
         @if(isset($attributes['v-error-message']))
         :form-error="{{ $attributes['v-error-message'] }}"
         @else
diff --git a/resources/views/settings/email/edit.blade.php b/resources/views/settings/email/edit.blade.php
index e2ca24dd2..6961cbdc8 100644
--- a/resources/views/settings/email/edit.blade.php
+++ b/resources/views/settings/email/edit.blade.php
@@ -252,20 +252,20 @@
                     <div id="collapse10" class="collapse hide" aria-labelledby="heading10" data-parent="#accordion10">
                         <div class="card-body">
                             <div class="row">
-                                {{ Form::selectGroup('protocol', trans('settings.email.protocol'), 'share', $email_protocols, !empty($setting['protocol']) ? $setting['protocol'] : null, ['change' => 'onProtocolChange']) }}
+                                {{ Form::selectGroup('protocol', trans('settings.email.protocol'), 'share', $email_protocols, !empty($setting['protocol']) ? $setting['protocol'] : null, ['change' => 'onChangeProtocol']) }}
 
-                                {{ Form::textGroup('sendmail_path', trans('settings.email.sendmail_path'), 'road', [':disabled' => '(form.protocol == "smtp") || (form.protocol != "sendmail") ? true : false']) }}
+                                {{ Form::textGroup('sendmail_path', trans('settings.email.sendmail_path'), 'road', [':disabled'=> 'email.sendmailPath']) }}
 
-                                {{ Form::textGroup('smtp_host', trans('settings.email.smtp.host'), 'paper-plane', [':disabled' => '(form.protocol != "smtp") ? true : false']) }}
+                                {{ Form::textGroup('smtp_host', trans('settings.email.smtp.host'), 'paper-plane', [':disabled' => 'email.smtpHost']) }}
 
-                                {{ Form::textGroup('smtp_port', trans('settings.email.smtp.port'), 'paper-plane', [':disabled' => '(form.protocol != "smtp") ? true : false']) }}
+                                {{ Form::textGroup('smtp_port', trans('settings.email.smtp.port'), 'paper-plane', [':disabled' => 'email.smtpPort']) }}
 
-                                {{ Form::textGroup('smtp_username', trans('settings.email.smtp.username'), 'paper-plane', [':disabled' => '(form.protocol != "smtp") ? true : false']) }}
+                                {{ Form::textGroup('smtp_username', trans('settings.email.smtp.username'), 'paper-plane', [':disabled' => 'email.smtpUsername']) }}
 
-                                {{ Form::textGroup('smtp_password', trans('settings.email.smtp.password'), 'paper-plane', ['type' => 'password', ':disabled' => '(form.protocol != "smtp") ? true : false']) }}
+                                {{ Form::textGroup('smtp_password', trans('settings.email.smtp.password'), 'paper-plane', ['type' => 'password', ':disabled' => 'email.smtpPassword']) }}
 
-                                {{ Form::selectGroup('smtp_encryption', trans('settings.email.smtp.encryption'), 'paper-plane', ['' => trans('settings.email.smtp.none'), 'ssl' => 'SSL', 'tls' => 'TLS'], !empty($setting['smtp_encryption']) ? $setting['smtp_encryption'] : null, [':disabled' => '(form.protocol != "smtp") ? true : false']) }}
-                            </div>
+                                {{ Form::selectGroup('smtp_encryption', trans('settings.email.smtp.encryption'), 'paper-plane', ['' => trans('settings.email.smtp.none'), 'ssl' => 'SSL', 'tls' => 'TLS'], !empty($setting['smtp_encryption']) ? $setting['smtp_encryption'] : null ,['disabled' => 'email.smtpEncryption']) }}
+                             </div>
                         </div>
                     </div>
                 </div>