diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
index d39b1de6..30f0cca6 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
@@ -40,9 +40,12 @@
                             </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">
+                            <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">
diff --git a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
index 1cc2c81a..3a2e5363 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
         <div class="col bg-white rounded">
-            <div class="row" :class="[{'b-danger': item.status == 5, 'b-a': item.status == 5}]">
+            <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">
@@ -12,12 +12,14 @@
                             <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" v-else>Pending Payment</div>
                         </div>
                         <div class="col">
                             <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">
                             <p class="no-margin fs-10 all-caps">Billing Question</p>
                             <div>
@@ -25,7 +27,7 @@
                                 <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 hide" v-if="item.remarks.length" data-type="deleteRemark">
+                                   <span class="btn requestModal no-border" v-if="item.remarks.length" data-type="deleteRemark">
                                     <i class="fa fa-trash"></i>
                                 </span>
                             </div>
@@ -60,7 +62,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto">
+                        <div class="col-auto" v-if="![5, 6].includes(item.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>
diff --git a/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue
index f4579a18..bd7dc400 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/DeleteDisputeFormComponent.vue
@@ -7,7 +7,7 @@
                     <div class="row m-b-20">
                         <div class="col text-center">
                             <h3 class="all-caps">Are you Sure?</h3>
-                            <div class="fs-11">Are you sure you want to delete this displute.</div>
+                            <div class="fs-11">Are you sure you want to delete this displute?</div>
                         </div>
                     </div>
                     <div class="row">
@@ -15,7 +15,6 @@
                             <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.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.shippng_transaction.id, 'approve'), 'put', section, true, true)">Delete</div>
                         </div>
                     </div>
diff --git a/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue
new file mode 100644
index 00000000..9285759c
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="row">
+        <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" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col text-center">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to regenerate this invoice?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <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="submitForm()">Delete</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template> 
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        data(){
+            return {
+                parameters: {
+                    packing_list_id: this.data.id,
+                },
+            }
+        },
+        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.invoice.create'), 'post', this.section, true, true);
+            }
+        },
+        mixins: [componentHandler, ModalFormHandler]    
+
+    }
+</script>
\ No newline at end of file
diff --git a/routes/transaction.php b/routes/transaction.php
index 89545b7c..5da80295 100644
--- a/routes/transaction.php
+++ b/routes/transaction.php
@@ -6,6 +6,7 @@ Route::group(['prefix' => 'transactions', 'namespace' => 'Transactions', 'as' =>
 
     Route::get('/list', 'ListTransactionsController@list')->name('list');
     Route::delete('/suspend/{id}', 'SuspendTransactionController@suspend')->name('suspend');
+    Route::put('{id}/status/update/{status}', 'UpdateTransactionStatusController@update')->where('status', 'approve|expire')->name('update');
 
     Route::group(['prefix' => 'payment', 'as' => 'payment.'], function () {
         Route::post('/create', 'CreatePaymentTransactionController@create')->name('create');