diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index ba3a39b1..e63a6f9e 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -29,6 +29,7 @@
                                 </div>
                                 <div class="col-auto text-center">
                                     <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-check"></i></button>
+                                    <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
                                 </div>
                             </div>
                         </div>
@@ -61,38 +62,14 @@
                                         </div>
                                         <div class="col-auto">
                                             <button class="btn btn-xs btn-outline-success b-rad-none" @click="addProduct()"><i class="fa fa-check"></i></button>
+                                            <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="row" v-for="(product, index) in products">
                                 <div class="col p-b-10 p-t-10 b-b b-grey">
-                                    <div class="row  align-items-center">
-                                        <div class="col-auto p-r-0" style="min-width: 40px;">
-                                            <div class="font-heading all-caps fs-10">{{index + 1}}</div>
-                                        </div>
-                                        <div class="col p-r-5">
-                                            <div class="font-heading all-caps fs-10">{{product.stockCode}}</div>
-                                        </div>
-                                        <div class="col-4 p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{product.description}}</div>
-                                        </div>
-                                        <div class="col text-center p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{product.quantity}}</div>
-                                        </div>
-                                        <div class="col text-center p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{product.unit_price}}</div>
-                                        </div>
-                                        <div class="col-1 text-center p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{data.fixed_currency.short_code}}</div>
-                                        </div>
-                                        <div class="col-1 text-right p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{(Math.round((product.total + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
-                                        </div>
-                                        <div class="col-auto">
-                                            <button class="btn btn-xs btn-outline-danger b-rad-none" v-if="!submitted" @click="removeProduct(index)"><i class="fa fa-times"></i></button>
-                                        </div>
-                                    </div>
+                                     <purchase-order-item-form-component :data="product" :index="index" :currency="data.fixed_currency.short_code" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
                                 </div>
                             </div>
                         </div>
@@ -130,7 +107,7 @@
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
-                                        <button class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
+                                    <button class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
                                 </div>
                             </div>
                             <div class="row" v-if="(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== data.amount">
@@ -165,16 +142,16 @@
     import formHandler from '../../../general/mixins/formHandler';
     export default {
         data(){
-          return {
-              submitted: false,
-              product: {
-                  stockCode: '',
-                  description: '',
-                  quantity: 1,
-                  unit_price: 0,
-              },
-              products: []
-          }
+            return {
+                submitted: false,
+                    product: {
+                        stockCode: '',
+                        description: '',
+                        quantity: 1,
+                        unit_price: 0,
+                    },
+                products: [],
+            }
         },
         created() {
             this.products = this.data.purchase_order ? this.data.purchase_order.details : [];
@@ -231,7 +208,16 @@
                   quantity: 1,
                   unit_price: 0,
               };
-
+            },
+            updateProduct(product, index){
+                console.log(product);
+                this.products[index] = {
+                    stockCode: product.stockCode,
+                    description: product.description,
+                    quantity: product.quantity,
+                    unit_price: product.unit_price,
+                    total: product.quantity * parseFloat((product.unit_price).toString().replace(',', ''))
+                };
             },
             removeProduct(index){
                 this.products.splice(index, 1);
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
new file mode 100644
index 00000000..c25ad961
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="row  align-items-center">
+        <div class="col-auto p-r-0" style="min-width: 40px;">
+            <div class="font-heading all-caps fs-10">{{index + 1}}</div>
+        </div>
+        <div class="col p-r-5">
+            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
+            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
+        </div>
+        <div class="col-4 p-r-5 p-l-5">
+            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
+            <textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
+        </div>
+        <div class="col text-center p-r-5 p-l-5">
+            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
+            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
+        </div>
+        <div class="col text-center p-r-5 p-l-5">
+            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
+            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+        </div>
+        <div class="col-1 text-center p-r-5 p-l-5">
+            <div class="font-heading all-caps fs-10">{{currency}}</div>
+        </div>
+        <div class="col-1 text-right p-r-5 p-l-5">
+            <div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
+        </div>
+        <div class="col-auto">
+            <button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
+            <button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
+            <button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
+        </div>
+    </div>
+</template>
+<script>
+    import formHandler from '../../../general/mixins/formHandler';
+    export default {
+        props: {
+            currency:{
+                type: String,
+                required: true
+            },
+            index:{
+                type: Number,
+                required: true
+            }
+        },
+        data(){
+            return {
+                isEdit: false,
+                product: {
+                    stockCode: '',
+                    description: '',
+                    unit_price: 0,
+                },
+                products: []
+            }
+        },
+        created() {
+            this.product = this.data;
+        },
+        computed: {
+            productTotal(){
+                return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
+            },
+        },
+        methods: {
+            updateProduct(){
+                this.isEdit = !this.isEdit;
+
+                this.$emit('change', {
+                  stockCode: this.product.stockCode,
+                  description: this.product.description,
+                  quantity: this.product.quantity,
+                  unit_price: this.product.unit_price,
+                  total: this.productTotal
+              }, this.index);
+            },
+            onlyEnglish(event){
+                let value = event.target.value,
+                    regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
+
+                event.preventDefault();
+
+                if(regex.test(value)){
+                    this.product.description = value.replace(regex, '');
+                }
+            },
+        },
+        mixins: [formHandler]
+    }
+</script>
\ No newline at end of file