diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
new file mode 100644
index 000000000..c4af7112d
--- /dev/null
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -0,0 +1,216 @@
+<template>
+    <SlideYUpTransition :duration="animationDuration">
+    <div class="modal modal-add-new fade"
+         @click.self="closeModal"
+         :class="[{'show d-block': show}, {'d-none': !show}]"
+         v-show="show"
+         tabindex="-1"
+         role="dialog"
+         :aria-hidden="!show">
+        <div class="modal-dialog">
+            <slot name="modal-content">
+            <div class="modal-content">
+                <div class="card-header pb-2">
+                    <slot name="card-header">
+                        <h4 class="float-left"> {{ title }} </h4>
+                        <button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
+                    </slot>
+                </div>
+                <slot name="modal-body">
+                    <div class="modal-body" v-if="!is_component" v-html="message">
+                    </div>
+                    <div class="modal-body" v-else>
+                        <form id="form-create" method="POST" action="#"/>
+                        <component v-bind:is="component"></component>
+                    </div>
+                </slot>
+                <div class="card-footer border-top-0">
+                    <slot name="card-footer">
+                        <div class="float-right">
+                            <button type="button" class="btn btn-icon" :class="buttons.cancel.class" @click="onCancel">
+                                <span class="btn-inner--icon"><i :class="buttons.cancel.icon"></i></span>
+                                <span class="btn-inner--text">{{ buttons.cancel.text }}</span>
+                            </button>
+
+                            <button :disabled="form.loading" type="button" class="btn btn-icon button-submit" :class="buttons.confirm.class" @click="onSubmit">
+                                <div v-if="form.loading" class="aka-loader-frame btn-delete"><div class="aka-loader"></div></div>
+                                <span v-if="!form.loading" class="btn-inner--icon"><i :class="buttons.confirm.icon"></i></span>
+                                <span v-if="!form.loading" class="btn-inner--text">{{ buttons.confirm.text }}</span>
+                            </button>
+                        </div>
+                    </slot>
+                </div>
+            </div>
+            </slot>
+        </div>
+    </div>
+    </SlideYUpTransition>
+</template>
+
+<script>
+import { SlideYUpTransition } from "vue2-transitions";
+import AkauntingModal from './AkauntingModal';
+import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
+import AkauntingSelect from './AkauntingSelect';
+import AkauntingDate from './AkauntingDate';
+import AkauntingRecurring from './AkauntingRecurring';
+
+import Form from './../plugins/form';
+import { Alert, ColorPicker } from 'element-ui';
+
+export default {
+    name: 'akaunting-modal-add-new',
+
+    components: {
+        SlideYUpTransition,
+        AkauntingRadioGroup,
+        AkauntingSelect,
+        AkauntingModal,
+        AkauntingDate,
+        AkauntingRecurring,
+        [ColorPicker.name]: ColorPicker,
+    },
+
+    props: {
+        show: Boolean,
+        is_component: Boolean,
+
+        title: {
+            type: String,
+            default: '',
+            description: "Modal header title"
+        },
+
+        message: {
+            type: String,
+            default: '',
+            description: "Modal body message"
+        },
+
+        buttons: {
+            type: Object,
+            default: function () {
+                return {
+                    cancel: {
+                        text: 'Cancel',
+                        icon: 'fas fa-times',
+                        class: 'btn-outline-secondary',
+                    },
+                    confirm: {
+                        text: 'Save',
+                        icon: 'fas fa-save',
+                        class: 'btn-success',
+                    }
+                };
+            },
+            description: "Modal footer button"
+        },
+
+        animationDuration: {
+            type: Number,
+            default: 800,
+            description: "Modal transition duration"
+        }
+    },
+
+    data() {
+        return {
+            form: new Form('form-create'),
+
+            display: this.show,
+            component:'',
+        };
+    },
+
+    mounted() {
+        if (this.is_component) {
+            this.component = Vue.component('add-new-component', (resolve, reject) => {
+                resolve({
+                    template : '<div id="modal-add-new-form">' + this.message + '</div>',
+
+                    components: {
+                        AkauntingRadioGroup,
+                        AkauntingSelect,
+                        AkauntingModal,
+                        AkauntingDate,
+                        AkauntingRecurring,
+                        [ColorPicker.name]: ColorPicker,
+                    },
+
+                    created: function() {
+                        this.form = new Form('form-create');
+                    },
+
+                    mounted() {
+                        let form_id = document.getElementById('modal-add-new-form').children[0].id;
+
+                        this.form = new Form(form_id);
+                    },
+
+                    data: function () {
+                        return {
+                            form: {},
+                            color: '#55588b',
+                            predefineColors: [
+                                '#3c3f72',
+                                '#55588b',
+                                '#e5e5e5',
+                                '#328aef',
+                                '#efad32',
+                                '#ef3232',
+                                '#efef32'
+                            ]
+                        }
+                    },
+
+                    methods: {
+                        onChangeColor() {
+                            this.form.color = this.color;
+                        },
+
+                        onChangeColorInput() {
+                            this.color = this.form.color;
+                        }
+                    }
+                })
+            });
+        }
+    },
+
+    methods: {
+        closeModal() {
+            this.$emit("update:show", false);
+            this.$emit("close");
+        },
+
+        onSubmit() {
+            this.form = this.$children[0].$children[0].form;
+            this.form.loading = true;
+
+            this.$emit("submit", this.form);
+        },
+
+        onCancel() {
+            this.$emit("cancel");
+        }
+    },
+
+    watch: {
+        show(val) {
+            let documentClasses = document.body.classList;
+
+            if (val) {
+                documentClasses.add("modal-open");
+            } else {
+                documentClasses.remove("modal-open");
+            }
+        }
+    }
+}
+</script>
+
+<style>
+    .modal.show {
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+</style>
diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 6ce4e5298..6a7738602 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -6,15 +6,16 @@
 
         <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
             :placeholder="placeholder">
-            <div v-if="addNew.status && selectOptions.lenght > 0" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <span></span>
             </div>
-            <div v-if="selectOptions.lenght <= 0" class="el-select-dropdown__wrap" slot="empty">
-                <span>
-                    <li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
+
+            <div v-else-if="addNew.status && options.length == 0" 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>
-                </span>
+                </ul>
             </div>
 
             <template slot="prefix">
@@ -49,10 +50,18 @@
 
         <el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
             :placeholder="placeholder">
-            <div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <span></span>
             </div>
 
+            <div v-else-if="addNew.status && options.length == 0" 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>
+
             <template slot="prefix">
                 <span class="el-input__suffix-inner el-select-icon">
                     <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
@@ -85,10 +94,18 @@
 
         <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
             :placeholder="placeholder">
-            <div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <span></span>
             </div>
 
+            <div v-else-if="addNew.status && options.length == 0" 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>
+
             <template slot="prefix">
                 <span class="el-input__suffix-inner el-select-icon">
                     <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
@@ -121,10 +138,18 @@
 
         <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
             :placeholder="placeholder">
-            <div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <span></span>
             </div>
 
+            <div v-else-if="addNew.status && options.length == 0" 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>
+
             <template slot="prefix">
                 <span class="el-input__suffix-inner el-select-icon">
                     <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
@@ -155,13 +180,14 @@
             </li>
         </el-select>
 
-        <component v-bind:is="add_new_html" @interface="onRedirectConfirm"></component>
+        <component v-bind:is="add_new_html" @submit="onSubmit"></component>
     </base-input>
 </template>
 
 <script>
-import { Select, Option, OptionGroup } from 'element-ui';
+import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
 
+import AkauntingModalAddNew from './AkauntingModalAddNew';
 import AkauntingModal from './AkauntingModal';
 import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
 import AkauntingSelect from './AkauntingSelect';
@@ -177,6 +203,13 @@ export default {
         [Select.name]: Select,
         [Option.name]: Option,
         [OptionGroup.name]: OptionGroup,
+        [ColorPicker.name]: ColorPicker,
+        AkauntingModalAddNew,
+        AkauntingRadioGroup,
+        AkauntingSelect,
+        AkauntingModal,
+        AkauntingDate,
+        AkauntingRecurring,
     },
 
     props: {
@@ -209,7 +242,8 @@ export default {
                     status: false,
                     path: null,
                     type: 'modal', // modal, inline
-                    field: 'name'
+                    field: 'name',
+                    buttons: {}
                 };
             },
             description: "Selectbox Add New Item Feature"
@@ -223,10 +257,12 @@ export default {
 
     data() {
         return {
+            add_new: this.addNew,
             add_new_text: this.addNew.text,
             selectOptions: this.options,
             real_model: this.model,
             add_new_html: '',
+            form: {},
         }
     },
 
@@ -246,18 +282,11 @@ export default {
             // Get Select Input value
             var value = this.$children[0].$children[0].$children[0].$refs.input.value;
 
-            if (this.addNew.type == 'inline') {
+            if (this.add_new.type == 'inline') {
                 this.addInline(value);
             } else {
                 this.onModal(value);
             }
-            /*
-            this.$emit('new_item', {
-                value: value,
-                path: this.addNew.path,
-                title: this.addNew.text,
-            });
-            */
         },
 
         addInline(value) {
@@ -265,70 +294,42 @@ export default {
         },
 
         onModal(value) {
-            let add_new = this.addNew;
+            let add_new = this.add_new;
 
-            axios.get(this.addNew.path)
+            axios.get(this.add_new.path)
             .then(response => {
-                add_new.modal = true;
+                add_new.status = true;
                 add_new.html = response.data.html;
 
+                this.$children[0].$children[0].visible = false;
+
                 this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
                     resolve({
-                        template: '<div><akaunting-modal :show="addNew.modal" @cancel="addNew.modal = false" :title="addNew.text" :message="addNew.html">' +
-                        +    '<template #card-footer>'
-                        +        '<div class="float-right">'
-                        +            '<button type="button" class="btn btn-outline-secondary">'
-                        +                '<span>Cancel</span>'
-                        +            '</button>'
-                        +            '<button type="button" class="btn btn-success button-submit">'
-                        +                '<div class="aka-loader d-none"></div>'
-                        +                '<span>Confirm</span>'
-                        +            '</button>'
-                        +        '</div>'
-                        +    '</template>'
-                        + '</akaunting-modal></div>',
+                        template: '<div><akaunting-modal-add-new :show="add_new.status" @submit="onSubmit" @cancel="add_new.status = false" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
 
                         components: {
+                            AkauntingModalAddNew,
                             AkauntingRadioGroup,
                             AkauntingSelect,
                             AkauntingModal,
                             AkauntingDate,
                             AkauntingRecurring,
+                            [ColorPicker.name]: ColorPicker,
                         },
 
                         data: function () {
                             return {
-                                form:  new Form('form-create-category'),
-                                addNew: add_new,
+                                add_new: add_new,
                             }
                         },
 
                         methods: {
-                            onRedirectConfirm() {
-                                let redirect_form = new Form('redirect-form');
-
-                                this.$emit('interface', redirect_form);
+                            onSubmit(event) {
+                                this.$emit('submit', event);
                             }
                         }
                     })
                 });
-
-                /*
-                this.selectOptions[3] = value;
-
-                let newOption = {
-                    value: "3",
-                    currentLabel: value,
-                    label: value
-                };
-
-                this.$children[0].$children[0].handleOptionSelect(newOption);
-                this.$children[0].$children[0].onInputChange('3');
-
-                this.real_model = "3";
-
-                this.$emit('change', this.real_model);
-                */
             })
             .catch(e => {
                 this.errors.push(e);
@@ -338,20 +339,27 @@ export default {
             });
         },
 
-        onRedirectConfirm() {
-            this.redirectForm = new Form('redirect-form');
+        onSubmit(event) {
+            this.form = event;
 
-            axios.post(this.redirectForm.action, this.redirectForm.data())
+            axios.post(this.form.action, this.form.data())
             .then(response => {
-                if (response.data.redirect) {
-                    location = response.data.redirect;
-                }
+                this.form.loading = false;
 
                 if (response.data.success) {
-                    location.reload();
+                    this.selectOptions[response.data.data.id] = response.data.data['name'];
+                    this.real_model = response.data.data.id.toString();
+
+                    this.change();
+
+                    this.add_new.status = false;
                 }
             })
             .catch(error => {
+                this.form.loading = false;
+
+                this.form.onFail(error);
+
                 this.method_show_html = error.message;
             });
         },
@@ -364,8 +372,14 @@ export default {
     watch: {
         options: function (options) {
             // update options
-            this.selectOptions = options;
+            //this.selectOptions = options;
         }
     },
 }
 </script>
+
+<style scoped>
+    .form-group .modal {
+        z-index: 3050;
+    }
+</style>
diff --git a/resources/views/modals/categories/create.blade.php b/resources/views/modals/categories/create.blade.php
index e96da3636..236995682 100644
--- a/resources/views/modals/categories/create.blade.php
+++ b/resources/views/modals/categories/create.blade.php
@@ -10,6 +10,21 @@
     <div class="row">
         {{ Form::textGroup('name', trans('general.name'), 'id-card-o') }}
 
+        @stack('color_input_start')
+            <div class="form-group col-md-6 required {{ $errors->has('color') ? 'has-error' : ''}}">
+                {!! Form::label('color', trans('general.color'), ['class' => 'form-control-label']) !!}
+                <div class="input-group input-group-merge" id="category-color-picker">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text">
+                            <el-color-picker v-model="color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
+                        </span>
+                    </div>
+                    {!! Form::text('color', '#55588b', ['v-model' => 'form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
+                </div>
+                {!! $errors->first('color', '<p class="help-block">:message</p>') !!}
+            </div>
+        @stack('color_input_end')
+
         {!! Form::hidden('type', $type, []) !!}
         {!! Form::hidden('enabled', '1', []) !!}
     </div>
diff --git a/resources/views/modals/customers/create.blade.php b/resources/views/modals/customers/create.blade.php
index e7ebca0d7..836b48c5b 100644
--- a/resources/views/modals/customers/create.blade.php
+++ b/resources/views/modals/customers/create.blade.php
@@ -18,6 +18,7 @@
 
         {{ Form::textareaGroup('address', trans('general.address')) }}
 
+        {{ Form::hidden('type', 'customer') }}
         {!! Form::hidden('enabled', '1', []) !!}
     </div>
 {!! Form::close() !!}
diff --git a/resources/views/modals/vendors/create.blade.php b/resources/views/modals/vendors/create.blade.php
index c02784e2d..00f589e8b 100644
--- a/resources/views/modals/vendors/create.blade.php
+++ b/resources/views/modals/vendors/create.blade.php
@@ -18,6 +18,7 @@
 
         {{ Form::textareaGroup('address', trans('general.address')) }}
 
+        {{ Form::hidden('type', 'vendor') }}
         {!! Form::hidden('enabled', '1', []) !!}
     </div>
 {!! Form::close() !!}
diff --git a/resources/views/partials/form/multi_select_add_new_group.blade.php b/resources/views/partials/form/multi_select_add_new_group.blade.php
index 083a5aba8..380ebb40b 100644
--- a/resources/views/partials/form/multi_select_add_new_group.blade.php
+++ b/resources/views/partials/form/multi_select_add_new_group.blade.php
@@ -15,7 +15,19 @@
         'text' => trans('general.form.add_new', ['field' => $text]),
         'path' => isset($attributes['path']) ? $attributes['path']: false,
         'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
-        'field' => isset($attributes['field']) ? $attributes['field'] : 'name'
+        'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+        'buttons' => [
+            'cancel' => [
+                'text' => trans('general.cancel'),
+                'icon' => 'fas fa-times',
+                'class' => 'btn-outline-secondary'
+            ],
+            'confirm' => [
+                'text' => trans('general.save'),
+                'icon' => 'fas fa-save',
+                'class' => 'btn-success'
+            ]
+        ]
     ])}}"
     @if (!empty($attributes['collapse']))
     :collapse="true"
diff --git a/resources/views/partials/form/select_add_new_group.blade.php b/resources/views/partials/form/select_add_new_group.blade.php
index 0db550016..31119f05d 100644
--- a/resources/views/partials/form/select_add_new_group.blade.php
+++ b/resources/views/partials/form/select_add_new_group.blade.php
@@ -13,7 +13,19 @@
             'text' => trans('general.form.add_new', ['field' => $text]),
             'path' => isset($attributes['path']) ? $attributes['path']: false,
             'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
-            'field' => isset($attributes['field']) ? $attributes['field'] : 'name'
+            'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+            'buttons' => [
+                'cancel' => [
+                    'text' => trans('general.cancel'),
+                    'icon' => 'fas fa-times',
+                    'class' => 'btn-outline-secondary'
+                ],
+                'confirm' => [
+                    'text' => trans('general.save'),
+                    'icon' => 'fas fa-save',
+                    'class' => 'btn-success'
+                ]
+            ]
         ])}}"
         @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : 'form.' . $name . ' = $event' }}"
         @if (!empty($attributes['change']))
diff --git a/resources/views/partials/form/select_group_add_new_group.blade.php b/resources/views/partials/form/select_group_add_new_group.blade.php
index 9d691951e..5488d78da 100644
--- a/resources/views/partials/form/select_group_add_new_group.blade.php
+++ b/resources/views/partials/form/select_group_add_new_group.blade.php
@@ -13,7 +13,19 @@
             'text' => trans('general.form.add_new', ['field' => $text]),
             'path' => isset($attributes['path']) ? $attributes['path']: false,
             'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
-            'field' => isset($attributes['field']) ? $attributes['field'] : 'name'
+            'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+            'buttons' => [
+                'cancel' => [
+                    'text' => trans('general.cancel'),
+                    'icon' => 'fas fa-times',
+                    'class' => 'btn-outline-secondary'
+                ],
+                'confirm' => [
+                    'text' => trans('general.save'),
+                    'icon' => 'fas fa-save',
+                    'class' => 'btn-success'
+                ]
+            ]
         ])}}"
         :group="true"
         @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : 'form.' . $name . ' = $event' }}"