diff --git a/resources/assets/vue/components/companies/elements/CompanyBankAccountComponent.vue b/resources/assets/vue/components/companies/elements/CompanyBankAccountComponent.vue
new file mode 100644
index 00000000..913dd328
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/CompanyBankAccountComponent.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="row m-l-0 m-r-0 m-b-10 parentContainer align-items-center">
+        <div class="col-auto">
+            <div class="padding-5 bg-master-lightest">
+                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                     width="30" height="30"
+                     viewBox="0 0 172 172"
+                     style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
+            </div>
+        </div>
+        <div class="col-4">
+            <div class="row">
+                <div class="col-auto p-r-10">
+                    <div class="font-heading all-caps fs-11">{{item.type === 2 ? item.reference : item.company_business_type === 1 ? 'Company\'s Bank Account' : 'Personal Bank Account'}}</div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="font-heading all-caps fs-10 muted">{{item.bank_name}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="font-heading fs-10">{{item.holder_name}}</div>
+            <div class="font-heading fs-11 text-complete m-b-5">{{item.type === 3 ? item.account_no : item.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim() }}</div>
+        </div>
+        <div class="col-auto b-l b-grey">
+            <div class="row h-100">
+                <div class="col">
+                    <div class="row no-margin">
+                        <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest requestModal" data-type="editBankModal">
+                            <a class="pointer">
+                                <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Edit">
+                                    <div class="col">
+                                        <i class="fa fa-pencil text-info"></i>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col-auto m-l-10 d-flex align-items-center">
+                            <div class="row align-items-center">
+                                <div class="col-auto text-right p-t-5 p-b-5" :class="[{'bg-warning-lighter': item.default}, {'bg-master-light': !item.default}]">
+                                    <div data-toggle="tooltip" class="row align-items-center justify-content-center" :class="{'link': !item.default}">
+                                        <div class="col">
+                                            <i class="fa fa-star" :class="[{'text-warning': item.default}, {'text-master': !item.default}]"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col bg-white p-t-5 p-b-5">
+                                    <small class="fs-12 all-caps bold" :class="[{'text-warning': item.default}, {'text-master': !item.default}]">Default Bank</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editBankModal">
+            <edit-bank-form-component :data="item" :section="section" :company_id="company_id"></edit-bank-form-component>
+        </modal-component>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        props: {
+            company_id: {
+                type: Number,
+                required: true
+            },
+            section: {
+                default: 'companyBanksSection'
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
index 8bc0b7a8..422c25dc 100644
--- a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
+++ b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
@@ -57,10 +57,20 @@
                     <i class="fa fa-pencil m-r-10"></i>Edit Profile Info
                 </div>
             </div>
-            <div class="col-12 p-0">
+            <div class="col-12 p-0 p-t-5">
+                <label class="muted m-b-0" :style="minWidth">Recipients Bank Accounts&nbsp;</label>
+            </div>
+            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
+                <list-component key="2" section="companyBanksSection" :endpoint="route('api.bank.list')" :options="{'company_id': this.company_details.id}" v-if="this.company_details.id">
+                    <template slot="list" slot-scope="{data}">
+                        <company-bank-account-component :data="data" :company_id="parseInt(company_details.id)" section="companyBanksSection"></company-bank-account-component>
+                    </template>
+                </list-component>
+            </div>
+            <div class="col-12 p-0 p-t-5">
                 <label class="muted m-b-0" :style="minWidth">Address&nbsp;</label>
             </div>
-            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-0">
+            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
                 <list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id':this.company_details.id}" v-if="this.company_details.id">
                     <template slot="list" slot-scope="{data}">
                         <address-component :data="data" section="addressListItem"></address-component>
diff --git a/resources/assets/vue/components/companies/forms/EditBankFormComponent.vue b/resources/assets/vue/components/companies/forms/EditBankFormComponent.vue
new file mode 100644
index 00000000..e32e68f5
--- /dev/null
+++ b/resources/assets/vue/components/companies/forms/EditBankFormComponent.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="row" @keyup.enter="submitForm">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps m-b-5 bold no-margin">Edit Bank Account</h3>
+                        </div>
+                    </div>
+                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                        <div class="col">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.reference">
+                                <label>Reference</label>
+                                <input type="text" class="form-control" v-model="parameters.reference">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.holder_name">
+                                <label>Account Holder Name / Company Name</label>
+                                <input type="text" class="form-control" v-model="parameters.holder_name">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.account_no">
+                                <label>Account No.</label>
+                                <input type="text" class="form-control" v-model="parameters.account_no">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row" v-if="parameters.type === 2">
+                        <div class="col">
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.bank_name">
+                                        <label>Bank Name</label>
+                                        <input type="text" class="form-control" v-model="parameters.bank_name">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.bank_branch">
+                                        <label>Bank Branch / 所在地</label>
+                                        <input type="text" class="form-control" v-model="parameters.bank_branch">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-b-20" v-if="parameters.type !== 2">
+                        <div class="col">
+                            <validation-wrapper-component selectable :validator="$v.parameters.bank_name">
+                                <label>Bank Name</label>
+                                <selectable-component endpoint="malaysian_banks.json" section="banksListSection" valueColumn="name" :labelColumn="['name']" v-model="parameters.bank_name"></selectable-component>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Update</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from "../../../general/mixins/modalFormHandler";
+    import { required } from "vuelidate/lib/validators";
+    export default {
+        props : {
+            company_id: {
+                type: Number,
+                required: true
+            },
+        },
+        created() {
+            console.log(this.parameters)
+            this.parameters.company_id = this.company_id;
+            this.parameters.account_type = this.data.type;
+        },
+        watch: {
+            'data': function() {
+                this.parameters = this.data;
+                this.parameters.company_id = this.company_id;
+                this.parameters.account_type = this.data.type;
+            }
+        },
+        data(){
+            return {
+                parameters: {
+                    company_id: this.company_id
+                }
+            }
+        },
+        validations: {
+            parameters: {
+                holder_name: {
+                    required
+                },
+                account_no: {
+                    required
+                },
+                bank_branch: {
+                    // required
+                },
+                swift: {
+                    // required
+                },
+                snap: {
+                    // required
+                },
+                bank_name: {
+                    required
+                },
+                reference: {
+                    // required
+                }
+            }
+        },
+        methods: {
+            submitForm(){
+                console.log(this.company_id)
+
+                this.submit(route('api.bank.update', this.data.id), 'put', this.section, true, true);
+            },
+        },
+        mixins: [modalFormHandler]
+
+    }
+</script>