diff --git a/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue
index 0e59f9e7..b375eafd 100644
--- a/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue
@@ -7,9 +7,9 @@
                         <div class="col b-a b-grey rounded bg-master-light">
                             <div class="row">
                                 <div class="col padding-20">
-                                    <div class="row align-items-center justify-conten-center">
+                                    <div class="row align-items-center justify-conten-center" @click="chooseAllInvoice()">
                                         <div class="col-auto pointer">
-                                            <i class="fa fs-30 fa-fw fa-square-o"></i>
+                                            <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllInvoice, 'fa-check-square': selectAllInvoice, 'text-primary':selectAllInvoice}" ></i>
                                         </div>
                                         <div class="col">
                                             <h5 class="no-margin font-heading">Invoice No</h5>
@@ -23,9 +23,9 @@
                                         <div class="col">
                                             <h5 class="no-margin">Amount</h5>
                                         </div>
-                                        <div class="col-auto invisible">
-                                            <div class="btn btn-default no-border">
-                                                <i class="fa fa-angle-up"></i>
+                                        <div class="col-auto">
+                                            <div class="btn bg-grey no-border muted invisible">
+                                                <i class="fa fa-file-pdf-o"></i>
                                             </div>
                                         </div>
                                     </div>
@@ -33,17 +33,11 @@
                             </div>
                         </div>
                     </div>
-                    <!-- <list-component section="containerListSection" :endpoint="route('api.address.district.list')">
-                        <template slot="list" slot-scope="{data}">
-                            <payments-billing-components :data="data"></payments-billing-components>
-                        </template>
-                    </list-component> -->
-                    <payments-billing-components :data="invoice" v-for="invoice in invoices"></payments-billing-components>
-                    <!-- <div class="row" v-for="invoice in invoices">
+                    <div class="row" v-for="invoice in invoices">
                         <div class="col">
-                            {{ invoice.id }}
+                            <payments-billing-components :data="invoice" :selectedInvoice="selectedInvoice" v-on:input="updateList($event)"></payments-billing-components>
                         </div>
-                    </div> -->
+                    </div>
                 </div>
                 <div class="col-12 col-sm-12 col-md-3">
                     <div class="row align-items-center">
@@ -60,15 +54,12 @@
                                     </div>
                                 </div>
                                 <div class="col p-l-0">
-                                    <h6 class="semi-bold text-primary">2 Invoice Selected</h6>
+                                    <h6 class="semi-bold text-primary">{{selectedInvoice.length}} Invoice Selected</h6>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <div class="row">
-                                        <div class="col-auto">
-                                            <h6 class="no-margin">x1</h6>
-                                        </div>
+                                    <div class="row" v-for="invoice in selectedInvoice">
                                         <div class="col">
                                             <h6 class="no-margin">lorem ipsum</h6>
                                         </div>
@@ -76,42 +67,6 @@
                                             <h6 class="no-margin">52x62x635 CM</h6>
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-auto">
-                                            <h6 class="no-margin">x1</h6>
-                                        </div>
-                                        <div class="col">
-                                            <h6 class="no-margin">lorem ipsum</h6>
-                                        </div>
-                                        <div class="col-auto">
-                                            <h6 class="no-margin">52x62x635 CM</h6>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <hr>
-                            <div class="row">
-                                <div class="col">
-                                    <h6 class="normal m-t-5 m-b-5">Shipping Fee</h6>
-                                </div>
-                                <div class="col-auto">
-                                    <h6 class="normal m-t-5 m-b-5">RM 212.15</h6>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col">
-                                    <h6 class="normal m-t-5 m-b-5">Serrvice Fee</h6>
-                                </div>
-                                <div class="col-auto">
-                                    <h6 class="normal m-t-5 m-b-5">RM 41.25</h6>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col">
-                                    <h6 class="normal m-t-5 m-b-5">Discount</h6>
-                                </div>
-                                <div class="col-auto">
-                                    <h6 class="normal m-t-5 m-b-5">RM 0.00</h6>
                                 </div>
                             </div>
                             <hr>
@@ -125,6 +80,11 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="btn btn-xl btn-success pointer m-t-10 w-100" @click='makePayment'>Make Payments</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -136,13 +96,15 @@
             company_module_id: {
                 type: Number,
                 required: true,
-            }
+            },
         },
         data(){
             return {
                 section: 'customerPaymentBillingSectionComponent',
                 isLoading: true,
-                invoices: null
+                invoices: null,
+                selectedInvoice: [],
+                selectAllInvoice: false,
             }
         },
         computed: {
@@ -169,6 +131,22 @@
                 this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                 this.isLoading = false;
                 this.invoices = response.payload.data;
+            },
+            makePayment(){
+                var selectedId = this.selectedInvoice.map(s=>s.id);
+                console.log(selectedId);
+
+            },
+            updateList(packageList){
+                this.selectedInvoice.includes(packageList) ? this.selectedInvoice.splice(this.selectedInvoice.indexOf(packageList), 1) : this.selectedInvoice.push(packageList);
+                this.selectedInvoice.length === this.invoices.length ? this.selectAllInvoice = true : this.selectAllInvoice = false;
+            },
+            chooseAllInvoice(){
+                this.selectAllInvoice = !this.selectAllInvoice;
+                this.selectedInvoice = [];
+                if (this.selectAllInvoice) {
+                    this.selectedInvoice = this.invoices;
+                }
             }
         }
     }
diff --git a/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue b/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
index 7259430a..590a78ca 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
@@ -4,110 +4,36 @@
             <div class="row">
                 <div class="col padding-20">
                     <div class="row align-items-center">
-                        <div class="col-auto pointer align-items-center" @click="selected = !selected">
+                        <div class="col-auto pointer align-items-center" @click="activate()">
                             <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
                         </div>
                         <div class="col">
-                            <h5 class="no-margin">05052021</h5>
+                            <h5 class="no-margin">{{ item.bill_no }}</h5>
                         </div>
                         <div class="col">
-                            <h5 class="no-margin">Invoice Date Invoice Date</h5>
+                            <h5 class="no-margin">{{ item.created_at }}</h5>
                         </div>
                         <div class="col">
                             <h5 class="no-margin">Status</h5>
                         </div>
                         <div class="col">
-                            <h5 class="no-margin">Amount</h5>
+                            <h5 class="no-margin">MYR  {{ item.amount.toFixed(2) }}</h5>
                         </div>
                         <div class="col-auto">
-                            <div class="btn bg-grey no-border" @click="expanded = !expanded">
-                                <i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row b-t b-grey p-t-10" v-show="expanded">
-                <div class="col p-b-10">
-                    <div class="row">
-                        <div class="col p-l-20 p-r-20 p-t-10 p-b-10">
-                            <div class="row align-items-center">
-                                <div class="col-auto invisible">
-                                    <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
-                                </div>
-                                <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="m-b-0">Carrier Tracking Number</h5>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="m-b-0">Due Date</h5>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="semi-bold m-t-0 m-b-0 large-text">11.04.2021</h5>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="semi-bold m-t-0 m-b-0 large-text">Outstanding</h5>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="semi-bold m-t-0 m-b-0 large-text">RM0.00</h5>
-                                        </div>
-                                    </div>
+                            <div v-if="item.documents.length">
+                                <div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">
+                                    <document-file-viewer-component :file="file">
+                                        <template slot="button">
+                                            <div class="btn bg-grey no-border muted">
+                                                <i class="fa fa-file-pdf-o"></i>
+                                            </div>
+                                        </template>
+                                    </document-file-viewer-component>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col p-l-20 p-r-20 p-t-10 p-b-10">
-                            <div class="row align-items-center">
-                                <div class="col-auto invisible">
-                                    <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
-                                </div>
-                                <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="m-b-0 normal-text">This package was delivered by</h5>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="m-b-0">Date Paid</h5>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col">
-                                            <h5 class="semi-bold m-t-0 m-b-0 large-text">21.01.2021</h5>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col">
-                                    <div class="btn btn-outline-complete btn-lg">
-                                        Invoice Detail
-                                    </div>
+                            <div v-else>
+                                <div class="btn bg-grey no-border muted invisible">
+                                    <i class="fa fa-file-pdf-o"></i>
                                 </div>
                             </div>
                         </div>
@@ -120,10 +46,33 @@
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
     export default {
+        props: {
+            selectedInvoice: {
+                type: Array,
+                required: false,
+            }  
+        },
         data(){
             return {
                 expanded: false,
-                selected: false,
+                selectedValue: false,
+            }
+        },
+        methods: {
+            activate(){
+                this.select = !this.select;
+                this.$emit('input', this.data);
+            }
+        },
+        computed: {
+            selected() {
+                var response = false;
+                this.selectedInvoice.forEach((value, index) => {
+                    if (value.id == this.item.id) {
+                        response = true;
+                    }
+                });
+                return response;
             }
         },
         mixins: [componentHandler]