diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
index 74fa69ad..0da7bccb 100644
--- a/app/Http/Resources/TransactionResource.php
+++ b/app/Http/Resources/TransactionResource.php
@@ -24,11 +24,14 @@ class TransactionResource extends JsonResource
     {
         $order = null;
         $groupTransactions = null;
+        $packingListReference = null;
 
         if ($this->owner instanceof Transaction) {
             $order = new OrderResource($this->owner->owner->owner);
+            $packingListReference = $this->owner->owner->reference;
         } else if (!($this->owner instanceof Transaction) && !($this->owner instanceof Wallet)) {
             $order = new OrderResource($this->owner->owner);
+            $packingListReference = $this->owner->reference;
         } else {
             $group = Group::where('reference', $this->payment_reference)->first();
             if ($group) {
@@ -41,6 +44,7 @@ class TransactionResource extends JsonResource
             'id' => $this->id,
             'owner_type' => $this->owner_type,
             'order' => $order,
+            'packing_list_reference' => $packingListReference,
             'group_transactions' => $groupTransactions,
             'group_reference' => $groupTransactions ? $group->reference : null,
             'documents' => $groupTransactions ? DocumentResource::collection($this->documents->where('status', ApprovalStatus::PENDING_VERIFICATION)) : DocumentResource::collection($this->documents),
diff --git a/resources/assets/vue/components/orders/elements/PackageComponent.vue b/resources/assets/vue/components/orders/elements/PackageComponent.vue
index 92cc77c9..62b60567 100644
--- a/resources/assets/vue/components/orders/elements/PackageComponent.vue
+++ b/resources/assets/vue/components/orders/elements/PackageComponent.vue
@@ -19,7 +19,7 @@
                                     <p class="bold m-b-5 fs-12">{{item.description}}</p>
                                 </div>
                             </div>
-                            <div class="row m-b-10 align-items-center" v-if="$store.getters.isAdmin">
+                            <div class="row m-b-10 align-items-center">
                                 <div class="col-auto">
                                     <p class="no-margin all-caps fs-10 lh-10 light">Reference</p>
                                     <p class="no-margin fs-12">{{item.reference}}</p>
@@ -58,7 +58,7 @@
                                             <small class="fs-10 all-caps muted">Status</small>
                                             <p class="no-margin bold">{{item.container ? item.container.transport.schedule_complete && status === 'Shipping' ? 'Custom Clearance' : status : status}}</p>
                                         </div>
-                                        <div class="col-auto" v-if="$store.getters.isAdmin">
+                                        <div class="col-auto">
                                             <small class="fs-10 all-caps muted">Container</small>
                                             <p class="no-margin bold">{{item.container ? item.container.container_reference : '-'}}</p>
                                         </div>
@@ -66,7 +66,7 @@
                                     <div class="row">
                                         <div class="col-auto">
                                             <small class="fs-10 all-caps muted">Warehouse</small>
-                                            <h6 class="no-margin small">{{item.order.warehouse.name}} {{$store.getters.isAdmin ? item.order.warehouse.reference : ''}}</h6>
+                                            <h6 class="no-margin small">{{item.order.warehouse.name}} {{ item.order.warehouse.reference }}</h6>
                                         </div>
                                         <div class="col-auto">
                                             <small class="fs-10 all-caps muted">Delivery Address</small>
diff --git a/resources/assets/vue/components/orders/elements/ParcelComponent.vue b/resources/assets/vue/components/orders/elements/ParcelComponent.vue
index cef41560..ef992380 100644
--- a/resources/assets/vue/components/orders/elements/ParcelComponent.vue
+++ b/resources/assets/vue/components/orders/elements/ParcelComponent.vue
@@ -30,7 +30,7 @@
                             <p class="no-margin all-caps fs-10 light">Est. CBM</p>
                             <p class="no-margin">{{((parseFloat(item.cbm) * 1000) / 1000).toFixed(3)}}</p>
                         </div>
-                        <div class="col" v-if="$store.getters.isAdmin">
+                        <div class="col">
                             <p class="no-margin all-caps fs-10 light">Warehouse</p>
                             <p class="no-margin" v-if="item.order">{{item.order.warehouse.reference}}</p>
                             <span class='text-danger' v-if="!item.order">Unclaimed</span>
@@ -75,7 +75,7 @@
                             <p class="no-margin bold text-info fs-12"><a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a></p>
                         </div>
                     </div>
-                    <div class="row m-b-5" v-if="$store.getters.isAdmin">
+                    <div class="row m-b-5">
                         <div class="col-auto p-r-5">
                             <p class="no-margin all-caps fs-10 light">Reference</p>
                         </div>
diff --git a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
index f64b006c..4d809f2f 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
@@ -4,11 +4,19 @@
             <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-2">
+                            <p class="no-margin fs-10 all-caps">Invoice No</p>
+                            <div> {{ item.bill_no }}</div>
+                        </div>
+                        <div class="col-2">
+                            <p class="no-margin fs-10 all-caps">Reference</p>
+                            <div> {{ item.packing_list_reference }}</div>
+                        </div>
                         <div class="col-2">
                             <p class="no-margin fs-10 all-caps">Invoice Date</p>
                             <div> {{ item.updated_at }}</div>
                         </div>
-                        <div class="col">
+                        <div class="col-2">
                             <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">Dispute in progress</div>
@@ -19,7 +27,7 @@
                             <p class="no-margin fs-10 all-caps">Amount</p>
                             <div>MYR {{ item.amount.toFixed(2) }}</div>
                         </div>
-                        <div class="col-3" v-if="item.remarks.length">
+                        <div class="col-2" v-if="item.remarks.length">
                             <p class="no-margin fs-10 all-caps">Billing Question</p>
                             <div>
                                 {{ latestComment.content }}
@@ -31,49 +39,53 @@
                                 <remark-component :section="section" :data="item" module_type="Transaction"></remark-component>
                             </modal-component>
                         </div>
-                        <div class="col-3" v-else>
+                        <!-- <div class="col-2" >
                             <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 :class="[{'invisible': [5, 6, 3].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">
-                                <customer-invoice-remark-form-component module_type="Transaction" :data="item" :section="section"></customer-invoice-remark-form-component>
-                            </modal-component>
-                            <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 class="col-2">
+                            <div class="row p-l-15">
+                                <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center">
+                                    <div :class="[{'invisible': [5, 6, 3].includes(item.status)}]">
+                                        <span class="d-inline-block 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">
+                                        <customer-invoice-remark-form-component module_type="Transaction" :data="item" :section="section"></customer-invoice-remark-form-component>
+                                    </modal-component>
+                                    <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 v-else>
+                                        <div class="btn bg-grey no-border muted invisible">
+                                            <i class="fa fa-file-pdf-o"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center" v-if="$store.getters.isSuperAdmin">
+                                    <span class="d-inline-block text-primary bold text-underline pointer requestModal" data-type="deleteInvoice">
+                                        <i class="fa fa-close"></i>
+                                    </span>
+                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteInvoice">
+                                        <delete-invoice-form-component :data="item" :section="section"></delete-invoice-form-component>
+                                    </modal-component>
+                                </div>
+                                <div class="col-auto hide">
+                                    <div class="btn btn-sm all-caps b-rad-none btn-block" :class="{'btn-success': !expanded, 'btn-default': expanded}" @click="expanded = !expanded">
+                                        {{ expanded ? 'Cancel' : 'Make Payment' }}</div>
                                 </div>
                             </div>
-                            <div v-else>
-                                <div class="btn bg-grey no-border muted invisible">
-                                    <i class="fa fa-file-pdf-o"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center" v-if="$store.getters.isSuperAdmin">
-                            <span class="d-inline-block m-r-15 text-primary bold text-underline pointer requestModal" data-type="deleteInvoice">
-                                <i class="fa fa-close"></i>
-                            </span>
-                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteInvoice">
-                                <delete-invoice-form-component :data="item" :section="section"></delete-invoice-form-component>
-                            </modal-component>
-                        </div>
-                        <div class="col-auto hide">
-                            <div class="btn btn-sm all-caps b-rad-none btn-block" :class="{'btn-success': !expanded, 'btn-default': expanded}" @click="expanded = !expanded">
-                                {{ expanded ? 'Cancel' : 'Make Payment' }}</div>
                         </div>
                     </div>
                 </div>
diff --git a/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue b/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
index 1bbc1253..cbc564af 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
@@ -10,6 +10,8 @@
                         <div class="col">
                             <p class="no-margin fs-10 all-caps">Invoice No</p>
                             <div>{{ item.bill_no }}</div>
+                            <p class="no-margin fs-10 all-caps">Reference</p>
+                            <div>{{ item.packing_list_reference }}</div>
                         </div>
                         <div class="col">
                             <p class="no-margin fs-10 all-caps">Order</p>