diff --git a/resources/assets/vue/components/order/elements/ConfirmOrderComponent.vue b/resources/assets/vue/components/order/elements/ConfirmOrderComponent.vue
index 22e3fd2..1013c10 100644
--- a/resources/assets/vue/components/order/elements/ConfirmOrderComponent.vue
+++ b/resources/assets/vue/components/order/elements/ConfirmOrderComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="inline">
-        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="receiveNote">Confirm Order</div>
+        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="receiveNote">Confirm Warehouse</div>
         <modal-component type="receiveNote">
             <loading-component style="left: 0;" v-show="isLoading"></loading-component>
             <div class="card card-default no-border">
@@ -8,7 +8,7 @@
                     <div class="row p-t-30">
                         <div class="col no-padding">
                             <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
-                                <h6 class="bold all-caps no-margin text-success">Confirm Order</h6>
+                                <h6 class="bold all-caps no-margin text-success">Confirm Warehouse</h6>
                                 <div class="muted all-caps fs-12">Setup and confirm order</div>
                             </div>
                         </div>
@@ -41,7 +41,7 @@
                                         <div class="row">
                                             <div class="col no-padding">
                                                 <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                                <button type="submit" class="btn b-rad-none btn-primary" @click="confirmOrder()" data-dismiss="modal">Confirm Order</button>
+                                                <button type="submit" class="btn b-rad-none btn-primary" @click="confirmOrder()" data-dismiss="modal">Confirm Warehouse</button>
                                             </div>
                                         </div>
                                     </div>
diff --git a/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue b/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue
index f56c9a6..4586538 100644
--- a/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="inline">
-        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="receiveNote">Order Received</div>
+        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="receiveNote">Warehouse Received</div>
         <modal-component type="receiveNote">
             <loading-component style="left: 0;" v-show="isLoading"></loading-component>
             <div class="card card-default no-border">
@@ -8,27 +8,27 @@
                     <div class="row p-t-30">
                         <div class="col no-padding">
                             <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
-                                <h6 class="bold all-caps no-margin text-success">Order Received</h6>
+                                <h6 class="bold all-caps no-margin text-success">Warehouse Received</h6>
                                 <div class="muted all-caps fs-12">Order Receive Note</div>
                             </div>
                         </div>
                     </div>
-                    <form method="post" >
+                    <form method="post" class="receiveForm" @submit.prevent="createReceiveNote()">
                         <div class="row">
                             <div class="col no-padding">
                                 <div class="form-group form-group-default input-group">
                                     <div class="row w-100">
                                         <div class="col no-padding">
                                             <label class="muted block">Tracking Number</label>
-                                            <input class="form-control block" v-model="receiveNote.tracking_no">
+                                            <input class="form-control block" name="tracking_no" v-model="receiveNote.tracking_no">
                                         </div>
                                     </div>
                                 </div>
                                 <div class="form-group form-group-default input-group" style=" overflow: visible; ">
                                     <div class="form-input-group">
                                         <label>Date Received</label>
-                                        <!--<date-picker-component v-on:updateDate="updateReceiveDate($event)"></date-picker-component>-->
-                                        <input class="form-control block datepicker" v-model="receiveNote.receive_date">
+                                        <date-picker-component name="receive_date" v-on:updateDate="setDate($event, 'receiveNote.receive_date')"></date-picker-component>
+                                        <!--<input class="form-control block datepicker" v-model="receiveNote.receive_date">-->
                                     </div>
                                 </div>
                                 <div class="row">
@@ -36,7 +36,7 @@
                                         <div class="row">
                                             <div class="col no-padding">
                                                 <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                                <button type="submit" class="btn b-rad-none btn-success" @click="createReceiveNote()" data-dismiss="modal">Confirm</button>
+                                                <button type="submit" class="btn b-rad-none btn-success">Confirm</button>
                                             </div>
                                         </div>
                                     </div>
@@ -67,30 +67,65 @@
                 isLoading: false
             }
         },
-        methods: {
-            createReceiveNote() {
+        mounted: function() {
+            $(this.$el).find('.receiveForm').validate({
+                rules: {
+                    tracking_no: "required",
+                    receive_date: "required"
+                },
+                errorPlacement: function ( error, element ) {
 
-                //turn on loading animation
-                this.isLoading = true;
-                fetch(route('api.order.step.update', {orderId: this.data}), {
-                    method: 'post',
-                    body: JSON.stringify(this.receiveNote),
-                    headers: {
-                        'content-type': 'application/json'
+                    if(element.parents('.form-group').hasClass('form-group')){
+                        error.insertAfter( element.parents('.form-group') );
+                    } else {
+                        error.insertAfter( element );
                     }
-                }).then(() => {
-                    this.clearForm();
 
-                    //turn off loading animation
-                    this.isLoading = false;
+                },
+                highlight: function(element) {
+                    $(element).parents(".form-group").addClass('has-error');
+                },
+                unhighlight: function(element) {
+                    $(element).parents(".form-group").removeClass('has-error')
+                }
+            });
+        },
+        methods: {
 
-                    Event.$emit('updateOrdersList', true);
+            setDate(date, field){
+                if (field === 'receiveNote.receive_date') {
+                    $(this.$el).find('.receiveForm').valid();
+                    this.receiveNote.receive_date = date;
+                }
+            },
+
+            createReceiveNote() {
+                if($(this.$el).find('.receiveForm').valid()) {
+
+                    //turn on loading animation
+                    this.isLoading = true;
+                    fetch(route('api.order.step.update', {orderId: this.data}), {
+                        method: 'post',
+                        body: JSON.stringify(this.receiveNote),
+                        headers: {
+                            'content-type': 'application/json'
+                        }
+                    }).then(() => {
+                        this.clearForm();
+
+                        //turn off loading animation
+                        this.isLoading = false;
+
+                        $(this.$el).find('.receiveForm').parents('.modal').modal('hide')
+
+                        Event.$emit('updateOrdersList');
 
 
-                })
+                    })
+                }
             },
             updateReceiveDate(value){
-                alert(value);
+                //alert(value);
                 this.receiveNote.receive_date = value;
             },
             clearForm(){
diff --git a/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue b/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
index 57ab9e7..5279254 100644
--- a/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
@@ -15,7 +15,7 @@
                             </div>
                         </div>
                     </div>
-                    <form method="post" >
+                    <form method="post" class="shippingForm" @submit.prevent="createShippingArrangement()">
                         <div class="row">
                             <div class="col no-padding">
                                 <div class="row">
@@ -24,7 +24,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">Container No.</label>
-                                                    <input class="form-control block" v-model="shippingArrangement.container_no">
+                                                    <input class="form-control block" name="container_no" v-model="shippingArrangement.container_no">
                                                 </div>
                                             </div>
                                         </div>
@@ -34,7 +34,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">Seal No.</label>
-                                                    <input class="form-control block" v-model="shippingArrangement.seal_no">
+                                                    <input class="form-control block" name="seal_no" v-model="shippingArrangement.seal_no">
                                                 </div>
                                             </div>
                                         </div>
@@ -46,7 +46,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">ETD</label>
-                                                    <input class="form-control block" v-model="shippingArrangement.ETD">
+                                                    <date-picker-component name="ETD" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETD')"></date-picker-component>
                                                 </div>
                                             </div>
                                         </div>
@@ -56,7 +56,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">ETA</label>
-                                                    <input class="form-control block" v-model="shippingArrangement.ETA">
+                                                    <date-picker-component name="ETA" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETA')"></date-picker-component>
                                                 </div>
                                             </div>
                                         </div>
@@ -67,7 +67,7 @@
                                         <div class="row">
                                             <div class="col no-padding">
                                                 <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                                <button type="submit" class="btn b-rad-none btn-success" @click="createShippingArrangement()" data-dismiss="modal">Create</button>
+                                                <button type="submit" class="btn b-rad-none btn-success">Create</button>
                                             </div>
                                         </div>
                                     </div>
@@ -90,7 +90,7 @@
                             </div>
                         </div>
                     </div>
-                    <form method="post" >
+                    <form method="post" class="rescheduleShipping"  @submit.prevent="rescheduleShipping()">
                         <div class="row">
                             <div class="col no-padding">
                                 <div class="row">
@@ -99,7 +99,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">ETD</label>
-                                                    <input class="form-control block" v-model="reschedule.ETD">
+                                                    <date-picker-component name="ETD" v-on:updateDate="setDate($event, 'reschedule.ETD')"></date-picker-component>
                                                 </div>
                                             </div>
                                         </div>
@@ -109,7 +109,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">ETA</label>
-                                                    <input class="form-control block" v-model="reschedule.ETA">
+                                                    <date-picker-component name="ETA" v-on:updateDate="setDate($event, 'reschedule.ETA')"></date-picker-component>
                                                 </div>
                                             </div>
                                         </div>
@@ -119,7 +119,7 @@
                                     <div class="row w-100">
                                         <div class="col no-padding">
                                             <label class="muted block">Remark</label>
-                                            <input class="form-control block" v-model="reschedule.remark">
+                                            <input class="form-control block" name="remark" v-model="reschedule.remark">
                                         </div>
                                     </div>
                                 </div>
@@ -128,7 +128,7 @@
                                         <div class="row">
                                             <div class="col no-padding">
                                                 <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                                <button type="submit" class="btn b-rad-none btn-success" @click="rescheduleShipping()" data-dismiss="modal">Reschedule</button>
+                                                <button type="submit" class="btn b-rad-none btn-success">Reschedule</button>
                                             </div>
                                         </div>
                                     </div>
@@ -177,6 +177,54 @@
                 isLoading: false
             }
         },
+        mounted: function() {
+            $(this.$el).find('.shippingForm').validate({
+                rules: {
+                    container_no: "required",
+                    seal_no: "required",
+                    ETD: "required",
+                    ETA: "required"
+                },
+                errorPlacement: function ( error, element ) {
+
+                    if(element.parents('.form-group').hasClass('form-group')){
+                        error.insertAfter( element.parents('.form-group') );
+                    } else {
+                        error.insertAfter( element );
+                    }
+
+                },
+                highlight: function(element) {
+                    $(element).parents(".form-group").addClass('has-error');
+                },
+                unhighlight: function(element) {
+                    $(element).parents(".form-group").removeClass('has-error')
+                }
+            });
+
+            $(this.$el).find('.rescheduleShipping').validate({
+                rules: {
+                    ETD: "required",
+                    ETA: "required",
+                    remark: "required"
+                },
+                errorPlacement: function ( error, element ) {
+
+                    if(element.parents('.form-group').hasClass('form-group')){
+                        error.insertAfter( element.parents('.form-group') );
+                    } else {
+                        error.insertAfter( element );
+                    }
+
+                },
+                highlight: function(element) {
+                    $(element).parents(".form-group").addClass('has-error');
+                },
+                unhighlight: function(element) {
+                    $(element).parents(".form-group").removeClass('has-error')
+                }
+            })
+        },
         created(){
             if(this.attachments !== null){
                 this.arrangementExist = true;
@@ -185,50 +233,76 @@
             }
         },
         methods: {
-            createShippingArrangement() {
-                //turn on loading animation
-                this.isLoading = true;
-                fetch(route('api.order.shipping.arrangement.create', {orderId: this.data}), {
-                    method: 'post',
-                    body: JSON.stringify(this.shippingArrangement),
-                    headers: {
-                        'content-type': 'application/json'
-                    }
-                }).then(response => response.json()).then((response) => {
+            setDate(date, field){
+                if(field === 'shippingArrangement.schedule.ETD'){
+                    $(this.$el).find('.shippingForm').valid();
+                    this.shippingArrangement.schedule.ETD = date;
+                }
 
-                    this.arrangementExist = true;
-                    //turn off loading animation
-                    this.isLoading = false;
+                if(field === 'shippingArrangement.schedule.ETA'){
+                    $(this.$el).find('.shippingForm').valid();
+                    this.shippingArrangement.schedule.ETA = date;
+                }
 
-                    Event.$emit('updateOrdersList', true);
+                if(field === 'reschedule.ETD'){
+                    $(this.$el).find('.rescheduleShipping').valid();
+                    this.reschedule.ETD = date;
+                }
 
+                if(field === 'reschedule.ETA'){
+                    $(this.$el).find('.rescheduleShipping').valid();
+                    this.reschedule.ETA = date;
+                }
 
-                })
             },
-            rescheduleShipping() {
-                //turn on loading animation
-                this.isLoading = true;
-                fetch(route('api.order.shipping.arrangement.reschedule', {orderId: this.data}), {
-                    method: 'post',
-                    body: JSON.stringify(this.reschedule),
-                    headers: {
-                        'content-type': 'application/json'
-                    }
-                }).then(response => response.json()).then((response) => {
-                    if(response === 200){
+            createShippingArrangement() {
+                if($(this.$el).find('.shippingForm').valid()) {
 
+                    //turn on loading animation
+                    this.isLoading = true;
+                    fetch(route('api.order.shipping.arrangement.create', {orderId: this.data}), {
+                        method: 'post',
+                        body: JSON.stringify(this.shippingArrangement),
+                        headers: {
+                            'content-type': 'application/json'
+                        }
+                    }).then(response => response.json()).then((response) => {
+
+                        this.arrangementExist = true;
                         //turn off loading animation
                         this.isLoading = false;
 
+
+                        $(this.$el).find('.shippingForm').parents('.modal').modal('hide')
+
+                        Event.$emit('updateOrdersList');
+
+
+                    })
+                }
+            },
+            rescheduleShipping() {
+                console.log(this.reschedule);
+                if($(this.$el).find('.rescheduleShipping').valid()) {
+                    //turn on loading animation
+                    this.isLoading = true;
+                    fetch(route('api.order.shipping.arrangement.reschedule', {orderId: this.data}), {
+                        method: 'post',
+                        body: JSON.stringify(this.reschedule),
+                        headers: {
+                            'content-type': 'application/json'
+                        }
+                    }).then(response => response.json()).then((response) => {
+                        //turn off loading animation
+                        this.isLoading = false;
+
+                        $(this.$el).find('.rescheduleShipping').parents('.modal').modal('hide')
+
                         Event.$emit('updateOrdersList', true);
 
-                    } else {
-                        //failed to update;
-                        this.isLoading = false;
-                    }
 
-
-                })
+                    })
+                }
             },
             completeShipping() {
 
diff --git a/resources/assets/vue/components/order/forms/OrderFormComponent.vue b/resources/assets/vue/components/order/forms/OrderFormComponent.vue
index 7edcd86..901dbc6 100644
--- a/resources/assets/vue/components/order/forms/OrderFormComponent.vue
+++ b/resources/assets/vue/components/order/forms/OrderFormComponent.vue
@@ -17,7 +17,7 @@
                             <div class="row w-100">
                                 <div class="col no-padding">
                                     <label class="muted block">Order No.</label>
-                                    <input class="form-control block" v-model="order.marking">
+                                    <input class="form-control block" name="marking" v-model="order.marking">
                                 </div>
                                 <div class="col-auto no-padding" @click="generateMarking()">
                                     <div class="input-group-addon pointer inline">
@@ -35,7 +35,7 @@
                                 <div class="row">
                                     <div class="col no-padding">
                                         <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
-                                        <button type="submit" class="btn b-rad-none btn-primary" @click="addOrder()" data-dismiss="modal">Create Order</button>
+                                        <button type="submit" class="btn b-rad-none btn-primary">Create Order</button>
                                     </div>
                                 </div>
                             </div>
@@ -63,28 +63,54 @@
                 isLoading: false
             }
         },
+        mounted: function() {
+            $(this.$el).find('form').validate({
+                rules: {
+                    marking: "required"
+                },
+                errorPlacement: function ( error, element ) {
+
+                    if(element.parents('.form-group').hasClass('form-group')){
+                        error.insertAfter( element.parents('.form-group') );
+                    } else {
+                        error.insertAfter( element );
+                    }
+
+                },
+                highlight: function(element) {
+                    $(element).parents(".form-group").addClass('has-error');
+                },
+                unhighlight: function(element) {
+                    $(element).parents(".form-group").removeClass('has-error')
+                }
+            })
+        },
         created() {
             this.generateMarking();
         },
         methods: {
             addOrder() {
+                if($(this.$el).find('form').valid()) {
 
-                //turn on loading animation
-                this.isLoading = true;
-                fetch(route('api.order.create', {companyId: this.data}), {
-                    method: 'post',
-                    body: JSON.stringify(this.order),
-                    headers: {
-                        'content-type': 'application/json'
-                    }
-                }).then(() => {
-                    this.clearForm();
-                    //turn off loading animation
-                    this.isLoading = false;
+                    //turn on loading animation
+                    this.isLoading = true;
+                    fetch(route('api.order.create', {companyId: this.data}), {
+                        method: 'post',
+                        body: JSON.stringify(this.order),
+                        headers: {
+                            'content-type': 'application/json'
+                        }
+                    }).then(() => {
+                        this.clearForm();
+                        //turn off loading animation
+                        this.isLoading = false;
 
-                    Event.$emit('updateOrdersList');
+                        $(this.$el).parents('.modal').modal('hide')
 
-                })
+                        Event.$emit('updateOrdersList');
+
+                    })
+                }
             },
             generateMarking(){
                 this.order.marking = Math.floor(Math.random() * 799999) + 200000;