diff --git a/app/Classes/Modules/Transactions/ControllersLogic/ApproveShippingInvoiceTransactionLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/ApproveShippingInvoiceTransactionLogic.php
index 5bcb33ce..d038bae9 100644
--- a/app/Classes/Modules/Transactions/ControllersLogic/ApproveShippingInvoiceTransactionLogic.php
+++ b/app/Classes/Modules/Transactions/ControllersLogic/ApproveShippingInvoiceTransactionLogic.php
@@ -69,7 +69,7 @@ class ApproveShippingInvoiceTransactionLogic extends AbstractControllerLogic
     {
         $packing_list = $this->fetchesPackingList->execute(['id' => $request->route('id')]);
 
-        $invoice_transaction = $packing_list->transactions->where('type', TransactionType::SHIPPING_INVOICE)->first();
+        $invoice_transaction = $packing_list->transactions()->where('transactions.type', TransactionType::SHIPPING_INVOICE)->whereIn('status', [ApprovalStatus::PENDING_VERIFICATION, ApprovalStatus::PENDING_SUBMISSION])->first();
 
         $this->updatesTransactionStatus->execute($invoice_transaction, ApprovalStatus::APPROVED);
 
diff --git a/app/Http/Resources/PackingListResource.php b/app/Http/Resources/PackingListResource.php
index 5256e3de..7dcd6a68 100644
--- a/app/Http/Resources/PackingListResource.php
+++ b/app/Http/Resources/PackingListResource.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Resources;
 
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Classes\ValueObjects\Constants\PackingListType;
 use App\Classes\ValueObjects\Constants\TransactionType;
 use App\Classes\ValueObjects\Constants\RoleTypes;
@@ -34,7 +35,9 @@ class PackingListResource extends JsonResource
             $this->mergeWhen($this->owner instanceof Order, [
                 'order' => New OrderResource($this->owner)
             ]),
-            'shippng_transaction' => new TransactionResource($this->transactions()->where('type', TransactionType::SHIPPING_INVOICE)->first()), 
+            'shippng_transaction' => new TransactionResource($this->transactions()->where('type', TransactionType::SHIPPING_INVOICE)->whereNotIn('status', [ApprovalStatus::SUSPENDED, ApprovalStatus::EXPIRED])->first()), 
+            'suspended_invoice' => new TransactionResource($this->transactions()->where('type', TransactionType::SHIPPING_INVOICE)->whereIn('status', [ApprovalStatus::SUSPENDED])->first()), 
+            // 'suspended_invoices' => TransactionResource::collection($this->transactions()->where('type', TransactionType::SHIPPING_INVOICE)->whereIn('status', [ApprovalStatus::SUSPENDED])->get()), 
         ];
     }
 }
diff --git a/resources/assets/vue/components/general/elements/RemarkComponent.vue b/resources/assets/vue/components/general/elements/RemarkComponent.vue
new file mode 100644
index 00000000..f2f9bf30
--- /dev/null
+++ b/resources/assets/vue/components/general/elements/RemarkComponent.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="row w-100">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <!-- <div class="row justify-content-center padding-30" v-show="!isLoading"> -->
+            <div class="row justify-content-center"  v-show="!isLoading">
+
+                <div class="col">
+                    <div class="row" v-for="remark in data.remarks">
+                        <div class="col">
+                            <remark-list-component :section="section" :data="remark"></remark-list-component>
+                        </div>
+                    </div>
+                    <remark-comment-form-component :section="section" :module_type="module_type" :id="data.id"></remark-comment-form-component>
+                </div>
+            
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            module_type: {
+                type: String,
+                required: true
+            }
+        },
+        mixins: [ModalFormHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/general/elements/RemarkListComponent.vue b/resources/assets/vue/components/general/elements/RemarkListComponent.vue
new file mode 100644
index 00000000..da218ea9
--- /dev/null
+++ b/resources/assets/vue/components/general/elements/RemarkListComponent.vue
@@ -0,0 +1,71 @@
+<template>
+    <!-- <div class="row m-b-20 parentContainer"> -->
+    <div class="row m-b-20 parentContainer bg-white padding-10 rounded" style="margin: 10px">
+        <div class="col">
+            <div class="row justify-content-center align-items-center">
+                <div class="hide col-auto btn-rounded padding-10 d-flex justify-content-center align-items-center bg-master-lighter" style="width: 30px;height: 30px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);">
+                    <span class="bold">{{item.commenter.name.substr(0, 1)}}</span>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto">
+                            <p class="no-margin muted bold fs-14">{{item.commenter.name}}</p>
+                        </div>
+                        <div class="col-auto">
+                            <span class="fs-12 muted normal">{{item.long_ago}}</span>
+                        </div>
+                        <div class="col d-flex justify-content-end">
+                            <div class="row">
+                                <div class="col p-t-5 p-b-5 b-a b-grey">
+                                    <div class="row" v-if="!isEdit && $store.getters.isAdmin">
+                                        <div class="col">
+                                            <i class="fa fa-edit pointer" @click="isEdit = !isEdit"></i>
+                                        </div>
+                                        <div class="col">
+                                            <div class="requestModal pointer" data-type="deleteComment">
+                                                <i class="fa fa-trash"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row" v-if="isEdit">
+                                        <div class="col">
+                                            <i class="fa fa-times pointer" @click="isEdit = !isEdit"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <p v-if="!isEdit">{{item.content}}</p>
+                    <container-comment-form-component :section="section" :data="item" :id="item.owner_id" v-on:submit="isEdit=false" v-if="isEdit"></container-comment-form-component>
+                </div>
+            </div>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteComment">
+                <delete-container-comment-form-component :section="section" :data="item"></delete-container-comment-form-component>
+            </modal-component>
+        </div>  
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+
+    export default {
+        props: {
+            section: {
+                type: String,
+                required: true,
+            }  
+        },
+        data(){
+            return {
+                isEdit: false,
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue b/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue
new file mode 100644
index 00000000..7da26ca8
--- /dev/null
+++ b/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="row m-t-5">
+        <div class="col">
+            <validation-wrapper-component :validator="$v.parameters.content">
+                <input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
+            </validation-wrapper-component>
+        </div>
+        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
+            <i class="fa fa-paper-plane" @click="submitForm"></i>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            id: {
+                type: Number,
+                required: true
+            },
+            module_type: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                parameters: {
+                    // content: this.data.remarks.length > 0 ? this.data.remarks[0].content : '',
+                    content: '',
+                    model_type: this.module_type
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                content: { required },
+            }
+        },
+        created() {
+            if (this.data) {
+                this.parameters.content = this.data.content;
+            }
+        },
+        methods: {
+            submitForm() {
+                this.submit(this.data ? this.route('api.remark.update', this.data.id) : this.route('api.remark.create', this.id), this.data ? 'put' : 'post', this.section, true, true);
+                this.$emit('submit')
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminDisputePaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminDisputePaymentsBillingComponent.vue
new file mode 100644
index 00000000..1f0416ca
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminDisputePaymentsBillingComponent.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
+        <div class="col bg-white rounded">
+            <div class="row">
+                <div class="col padding-20">
+                    <div class="row align-items-center">         
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Marking</p>
+                            <div class="no-margin">
+                                <div v-if="item.order">
+                                    <a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a>/<a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a>
+                                </div>
+                                <div v-else class="text-danger">Unclaimed Packing List</div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Invoice Date</p>
+                            <div v-if="!item.suspended_invoice">n/a</div>
+                            <div v-if="item.suspended_invoice"> {{ item.suspended_invoice.updated_at }}</div>
+                        </div>
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Status</p>
+                            <div class="all-caps">{{ invoice_status }}</div>
+                        </div>
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Amount</p>
+                            <div v-if="!item.suspended_invoice">n/a</div>
+                            <div v-if="item.suspended_invoice">MYR  {{ item.suspended_invoice.amount.toFixed(2) }}</div>
+                        </div>
+                        <div class="col" v-if="invoice_status == 'Suspended Invoice'">
+                            <p class="no-margin fs-10 all-caps">Billing Question</p>
+                            <div>{{ latestComment.content }} </div>
+                        </div>
+                        <div class="col-auto p-l-0 p-r-0" v-if="['Suspended Invoice'].includes(invoice_status)">
+                            <div class="btn bg-grey no-border muted requestModal" data-type="deleteDispute">
+                                <i class="fa fa-close"></i>
+                            </div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteDispute">
+                                <delete-dispute-form-component :data="item" :section="section"></delete-dispute-form-component>
+                            </modal-component>
+                        </div>
+                        <div class="col-auto p-l-0 p-r-0" v-if="['Suspended Invoice'].includes(invoice_status)">
+                            <div class="btn bg-grey no-border muted requestModal" data-type="regenerateInvoice">
+                                <i class="fa fa-refresh"></i>
+                            </div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateInvoice">
+                                <regenerate-dispute-invoice-form-component :data="item" :section="section"></regenerate-dispute-invoice-form-component>
+                            </modal-component>
+                        </div>
+                        <div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
+                            <div v-for="file in item.suspended_invoice.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 class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
+                            <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 m-l-5 m-r-5" v-show="expanded">
+                <div class="col padding-20">
+                    <div class="row bg-master-lightest h-100 padding-20">
+                        <div class="col">
+                            <h6 class="all-caps m-b-5 no-margin text-underline bold">Billing question</h6>
+                            <remark-component :section="section" :data="item.suspended_invoice" module_type="Transaction"></remark-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        props: {
+            invoice_status: {
+                type: String,
+                required: true
+            },
+            section:{
+                type: String,
+                required: true
+            }
+        },
+        data(){
+            return {
+                parameters: {
+                    packing_list_id: null,
+                    transaction_details: [],
+                },
+                expanded: false,
+            }
+        },
+        computed: {
+            cbm () {
+                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? 0 : obj.cbm) + total, 0)) * 1000) / 1000).toFixed(3)
+            },
+            overweight(){
+                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? obj.cbm : 0) + total, 0)) * 1000) / 1000).toFixed(3)
+            },
+            latestComment() {
+                let questions = this.item.suspended_invoice.remarks;
+                return questions.slice().reverse()[0];
+            }
+        },
+        created(){
+            this.parameters.packing_list_id = this.data.id;
+        },
+        methods: {
+            generateInvoice() {
+                this.submit(this.route('api.transaction.invoice.create'), 'post', this.section, true, true);
+            },
+            successHandler(response){
+                this.item = response.payload.data;
+                // this.$forceUpdate();
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
index 30f0cca6..f67da627 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
@@ -27,26 +27,6 @@
                             <div v-if="!item.shippng_transaction">n/a</div>
                             <div v-if="item.shippng_transaction">MYR  {{ item.shippng_transaction.amount.toFixed(2) }}</div>
                         </div>
-                        <div class="col" v-if="invoice_status == 'Suspended Invoice'">
-                            <p class="no-margin fs-10 all-caps">Billing Question</p>
-                            <div>{{ item.shippng_transaction.remarks[0].content }} </div>
-                        </div>
-                        <div class="col-auto p-l-0 p-r-0" v-if="['Suspended Invoice'].includes(invoice_status)">
-                            <div class="btn bg-grey no-border muted requestModal" data-type="deleteDispute">
-                                <i class="fa fa-close"></i>
-                            </div>
-                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteDispute">
-                                <delete-dispute-form-component :data="item" :section="section"></delete-dispute-form-component>
-                            </modal-component>
-                        </div>
-                        <div class="col-auto p-l-0 p-r-0" v-if="['Suspended Invoice'].includes(invoice_status)">
-                            <div class="btn bg-grey no-border muted requestModal" data-type="regenerateInvoice">
-                                <i class="fa fa-refresh"></i>
-                            </div>
-                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateInvoice">
-                                <regenerate-dispute-invoice-form-component :data="item" :section="section"></regenerate-dispute-invoice-form-component>
-                            </modal-component>
-                        </div>
                         <div class="col-auto p-l-0 p-r-0" v-if="['Pending Payment', 'Paid Invoice', 'Suspended Invoice'].includes(invoice_status)">
                             <div v-if="item.shippng_transaction">
                                 <div v-if="item.shippng_transaction.documents.length">
diff --git a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
index 3a2e5363..d309dfea 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
@@ -4,42 +4,43 @@
             <div class="row" :class="[{'b-danger': item.status == 5 ||item.status == 6, 'b-a': item.status == 5||item.status == 6}]">
                 <div class="col padding-20">
                     <div class="row align-items-center">         
-                        <div class="col">
+                        <div class="col-2">
                             <p class="no-margin fs-10 all-caps">Invoice Date</p>
                             <div> {{ item.updated_at }}</div>
                         </div>
                         <div class="col">
                             <p class="no-margin fs-10 all-caps">Status</p>
                             <div class="all-caps" v-if="item.status == 3">Payment Completed</div>
-                            <div class="all-caps text-danger" v-else-if="item.status == 5">Suspended</div>
-                            <div class="all-caps text-danger" v-else-if="item.status == 6">Expired</div>
+                            <div class="all-caps text-danger" v-else-if="item.status == 5">Dispute in progress</div>
+                            <div class="all-caps" v-else-if="item.status == 6">Cancelled Invoice</div>
                             <div class="all-caps" v-else>Pending Payment</div>
                         </div>
-                        <div class="col">
+                        <div class="col-2">
                             <p class="no-margin fs-10 all-caps">Amount</p>
                             <div>MYR {{ item.amount.toFixed(2) }}</div>
                         </div>
-                        <!-- <div class="col" v-if="item.remarks.length && item.status == 5"> -->
-                        <div class="col" v-if="item.remarks.length">
+                        <div class="col-3" v-if="item.remarks.length">
                             <p class="no-margin fs-10 all-caps">Billing Question</p>
                             <div>
-                                {{ item.remarks[0].content }}
-                                <span class="btn requestModal no-border" v-if="item.remarks.length" data-type="editRemark">
-                                    <i class="fa fa-edit"></i>
-                                </span>
-                                   <span class="btn requestModal no-border" v-if="item.remarks.length" data-type="deleteRemark">
-                                    <i class="fa fa-trash"></i>
+                                {{ latestComment.content }}
+                                <span class="btn requestModal no-border" v-if="item.remarks.length" size="large" data-type="chatmodal">
+                                    <i class="fa fa-comment-o"></i>
                                 </span>
                             </div>
-                            <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteRemark">
-                                <delete-remark-form-component :section="section" :data="item.remarks[0]"></delete-remark-form-component>
-                            </modal-component>
-                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editRemark">
-                                <customer-invoice-remark-form-component module_type="Transaction" :data="item" :section="section"></customer-invoice-remark-form-component>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="chatmodal">
+                                <remark-component :section="section" :data="item" module_type="Transaction"></remark-component>
                             </modal-component>
                         </div>
+                        <div class="col-3" v-else>
+                            <p class="no-margin fs-10 all-caps invisible">Billing Question</p>
+                            <div>
+                                <span class="btn requestModal no-border invisible">
+                                    <i class="fa fa-edit"></i>
+                                </span>
+                            </div>
+                        </div>
                         <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center">
-                            <div v-if="!item.remarks.length">
+                            <div :class="[{'invisible': [5, 6].includes(item.status)}]">
                                 <span class="d-inline-block m-r-15 text-primary bold text-underline pointer requestModal" data-type="billingRemark">Billing Question?</span>
                             </div>
                             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="billingRemark">
@@ -62,7 +63,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto" v-if="![5, 6].includes(item.status)">
+                        <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>
@@ -70,7 +71,7 @@
                     </div>
                 </div>
             </div>
-            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded">
+            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="![5, 6].includes(item.status)">
                 <div class="col-12 col-md-7 padding-20">
                     <div class="row bg-master-lightest h-100">
                         <div class="col">
@@ -158,6 +159,16 @@
                     </div>
                 </div>
             </div>
+            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded" v-if="[5, 6].includes(item.status)">
+                <div class="col padding-20">
+                    <div class="row bg-master-lightest h-100 padding-20">
+                        <div class="col">
+                            <h6 class="all-caps m-b-5 no-margin text-underline bold">Billing question</h6>
+                            <remark-component :section="section" :data="item" module_type="Transaction"></remark-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -189,6 +200,10 @@
             },
             overweight(){
                 return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? obj.cbm : 0) + total, 0)) * 1000) / 1000).toFixed(3)
+            },
+            latestComment() {
+                let questions = this.item.remarks;
+                return questions.slice().reverse()[0];
             }
         },
         created(){
diff --git a/resources/assets/vue/components/paymentsBilling/forms/CustomerInvoiceRemarkFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/CustomerInvoiceRemarkFormComponent.vue
index 9d0da49d..b767c07e 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/CustomerInvoiceRemarkFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/CustomerInvoiceRemarkFormComponent.vue
@@ -27,7 +27,7 @@
                             <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-primary btn-block b-rad-none" @click="submitForm()">{{ data.remarks.length > 0 ? 'Edit' : 'Create' }}</div>
+                            <div class="btn btn-sm btn-primary btn-block b-rad-none" @click="submitForm()">Create</div>
                         </div>
                     </div>
                 </div>
@@ -51,7 +51,7 @@
         data(){
             return {
                 parameters: {
-                    content: this.data.remarks.length > 0 ? this.data.remarks[0].content : '',
+                    content: '',
                     model_type: this.module_type
                 }
             }
@@ -65,10 +65,8 @@
         },
         methods: {
             submitForm() {
-                if (!this.data.remarks.length) {
-                    this.submit(this.route('api.transaction.suspend', this.data.id), 'delete', this.section, false, true);
-                }
-                this.submit(this.data.remarks.length > 0 ? this.route('api.remark.update', this.data.remarks[0].id) : this.route('api.remark.create', this.data.id), this.data.remarks.length > 0 ? 'put' : 'post', this.section, true, true);
+                this.submit(this.route('api.transaction.suspend', this.data.id), 'delete', this.section, false, true);
+                this.submit(this.route('api.remark.create', this.data.id), 'post', this.section, true, true);
             }
         },
         mixins: [ModalFormHandler]
diff --git a/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue
index bd7dc400..bd3d00d7 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue
@@ -15,7 +15,7 @@
                             <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
                         </div>
                         <div class="col p-l-5">
-                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.transaction.update', item.shippng_transaction.id, 'approve'), 'put', section, true, true)">Delete</div>
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.transaction.update', item.suspended_invoice.id, 'approve'), 'put', section, true, true)">Delete</div>
                         </div>
                     </div>
                 </div>
diff --git a/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue
index 9285759c..547505a0 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue
@@ -36,7 +36,7 @@
         },
         methods: {
             submitForm() {
-                this.submit(this.route('api.transaction.update', this.item.shippng_transaction.id, 'expire'), 'put', this.section, false, true);
+                this.submit(this.route('api.transaction.update', this.item.suspended_invoice.id, 'expire'), 'put', this.section, false, true);
                 this.submit(this.route('api.transaction.invoice.create'), 'post', this.section, true, true);
             }
         },
diff --git a/resources/views/pages/paymentAndBilling.blade.php b/resources/views/pages/paymentAndBilling.blade.php
index b6f5bda4..21c8daf7 100644
--- a/resources/views/pages/paymentAndBilling.blade.php
+++ b/resources/views/pages/paymentAndBilling.blade.php
@@ -120,7 +120,7 @@
                                 <div class="col">
                                     <list-component section="suspendedInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [5]}">
                                         <template slot="list" slot-scope="{data}">
-                                            <admin-payments-billing-component :data="data" invoice_status="Suspended Invoice" section="suspendedInvoiceSection" ></admin-payments-billing-component>
+                                            <admin-dispute-payments-billing-component :data="data" invoice_status="Suspended Invoice" section="suspendedInvoiceSection" ></admin-dispute-payments-billing-component>
                                         </template>
                                     </list-component>
                                 </div>