diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index 697315d6..c499e6b3 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -143,7 +143,19 @@
                             <h6 class="font-heading all-caps bold">Total:</h6>
                         </div>
                         <div class="col-auto b-t b-grey p-t-10  p-r-0">
-                            <h6><span v-if="!submitted" class="bold m-r-5" :class="[{'text-danger' : (Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)}, {'text-success' : (Math.round((this.poTotal  + Number.EPSILON) * 1000) / 1000).toFixed(3) === (Math.round((this.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)}]">{{(Math.round(( poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3)}}/</span><span class="text-primary bold m-l-5">{{(Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)}} {{data.fixed_currency.short_code}}</span></h6>
+                            <!-- <h6><span v-if="!submitted" class="bold m-r-5" :class="[{'text-danger' : (Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)}, {'text-success' : (Math.round((this.poTotal  + Number.EPSILON) * 1000) / 1000).toFixed(3) === (Math.round((this.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)}]">{{(Math.round(( poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3)}}/</span><span class="text-primary bold m-l-5">{{(Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)}} {{data.fixed_currency.short_code}}</span></h6> -->
+                            <h6>
+                                <span
+                                    v-if="!submitted"
+                                    class="bold m-r-5"
+                                    :class="totalAmountClass"
+                                >
+                                    {{ totalFormattedPoTotal }}/
+                                </span>
+                                <span class="text-primary bold m-l-5">
+                                    {{ totalFormattedDataAmount }} {{ data.fixed_currency.short_code }}
+                                </span>
+                            </h6>
                         </div>
                     </div>
                     <div class="row" v-if="poTotal > 0 && !submitted">
@@ -267,7 +279,7 @@
                     return last + product.total;
                 }, 0);
             },
-           allowPOEditing() {
+            allowPOEditing() {
                 //Condition 1
                 const noPaymentsMade = Math.round((this.data.paid_amount + Number.EPSILON) * 100) / 100 === 0;
                 const noPaymentPendingVerifications = this.data.payment_history.every(payment => payment.status !== 1);
@@ -281,6 +293,23 @@
                 const adminBeforeApproval = this.$store.getters.isAdmin && !(this.data.purchase_order.status === 2);
 
                 return (noPaymentsMade && noPaymentPendingVerifications) || (paymentsMade && outstandingAmount && allPaymentApproved) || adminBeforeApproval;
+            },
+            totalFormattedPoTotal() {
+                return (Math.round((this.poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3);
+            },
+            totalFormattedDataAmount() {
+                if(this.data.amount === 0 && this.data.outstanding_amount === 0 && this.data.floating_amount === 0 && this.data.paid_amount === 0){
+                    return (Math.round((this.poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3);
+                }
+                else{
+                    return (Math.round((this.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3);
+                }
+            },
+            totalAmountClass() {
+                return {
+                    'text-danger': this.totalFormattedPoTotal !== this.totalFormattedDataAmount,
+                    'text-success': this.totalFormattedPoTotal === this.totalFormattedDataAmount,
+                };
             }
         },
         watch: {