diff --git a/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php b/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php
index ae8ff933..74fb7f62 100644
--- a/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php
+++ b/app/Classes/Modules/Orders/Processors/UpdateDoFromVTPortalProcessor.php
@@ -46,10 +46,13 @@ class UpdateDoFromVTPortalProcessor
      * @param $address
      * @return array
      * @throws GuzzleException
-     * @throws InternalServerErrorException
      */
     public function execute($address) {
 
+        if(!app()->environment(['production'])){
+            return [];
+        }
+
         try {
             $order = $address->owner()->orderBy('id', 'desc')->first();
             $packing_list = $order->packingLists()->orderBy('id', 'desc')->first();
diff --git a/resources/assets/vue/components/containers/elements/ContainerComponent.vue b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
index 0fa42763..33a327fb 100644
--- a/resources/assets/vue/components/containers/elements/ContainerComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
@@ -49,7 +49,7 @@
                     </div>
                 </div>
             </div>
-            <packing-list-component :data="item" v-if="expanded"></packing-list-component>
+            <packing-list-section-component :data="item" v-if="expanded"></packing-list-section-component>
         </div>
     </div>
 </template>
@@ -59,21 +59,6 @@
         data(){
             return {
                 expanded: false,
-                index: null,
-            }
-        },
-        methods: {
-            updateStatus(index, status){
-                this.index = index;
-                this.submit(this.route('api.packing_list.status.update', this.item.packing_lists[index].id, status), 'put', 'containerListSection', true, true)
-            },
-            successHandler(response){
-                this.item.packing_lists[this.index] = response.payload.data;
-                this.$forceUpdate();
-                this.index = null;
-            },
-            errorHandler(){
-                this.index = null;
             }
         },
         mixins: [componentHandler]
diff --git a/resources/assets/vue/components/containers/elements/PackingListComponent.vue b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
index 62126d44..eb0a87f6 100644
--- a/resources/assets/vue/components/containers/elements/PackingListComponent.vue
+++ b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
@@ -1,66 +1,29 @@
 <template>
     <div class="row">
+        <div class="col-2"><a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a>/<a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></div>
+        <div class="col-1 text-center">{{item.packages.reduce((total, obj) => obj.quantity + total, 0)}}</div>
+        <div class="col-1">{{ (Math.ceil((item.packages.reduce((total, obj) => obj.cbm + total, 0)) * 1000) / 1000).toFixed(3)}}</div>
+        <div class="col-1 bold text-center" :class="{'text-danger': item.status === 5, 'text-success': item.status !== 5}">{{item.transport ? 'Delivery' : item.status === 5 ? 'On Hold' : 'Release'}}</div>
+        <div class="col-3">{{item.order.address.contact ? item.order.address.contact.reference+' '+item.order.address.contact.phone : ''}}<br>{{item.order.address.street_one+' '+(item.order.address.street_two ? item.order.address.street_two : '')+', '+ item.order.address.district.name+', '+item.order.address.post_code+' '+item.order.address.state.name+', '+item.order.address.country.name}}<br>{{item.order.address.remark ? item.order.address.remark.content: ''}}</div>
         <div class="col">
-            <loading-component v-if="isLoading" style="height: 200px; top: 0;"></loading-component>
-            <div class="row" v-show="!isLoading">
-                <div class="col">
-                    <div class="row">
-                        <div class="col">
-                            <div class="row align-items-center p-t-10 p-b-10 b-t b-grey muted all-caps fs-10">
-                                <div class="col-2">Marking</div>
-                                <div class="col-1 text-center">Quantity</div>
-                                <div class="col-1">CBM</div>
-                                <div class="col-1 text-center">status</div>
-                                <div class="col-3">Delivery Details</div>
-                                <div class="col">Delivery Date</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="row">
-                                <div class="col">
-                                    <div class="row align-items-center p-t-10 p-b-10 b-t b-grey" v-for="(packingList, index) in packingLists">
-                                        <div class="col-2"><a :href="route('customer.profile', packingList.order.company_module.marking)">{{packingList.order.company_module.marking}}</a>/<a :href="route('order.show', packingList.order.reference)">{{packingList.order.reference}}</a></div>
-                                        <div class="col-1 text-center">{{packingList.packages.reduce((total, obj) => obj.quantity + total, 0)}}</div>
-                                        <div class="col-1">{{ (Math.ceil((packingList.packages.reduce((total, obj) => obj.cbm + total, 0)) * 1000) / 1000).toFixed(3)}}</div>
-                                        <div class="col-1 bold text-center" :class="{'text-danger': packingList.status === 5, 'text-success': packingList.status !== 5}">{{packingList.transport ? 'Delivery' : packingList.status === 5 ? 'On Hold' : 'Release'}}</div>
-                                        <div class="col-3">{{packingList.order.address.contact ? packingList.order.address.contact.reference+' '+packingList.order.address.contact.phone : ''}}<br>{{packingList.order.address.street_one+' '+(packingList.order.address.street_two ? packingList.order.address.street_two : '')+', '+ packingList.order.address.district.name+', '+packingList.order.address.post_code+' '+packingList.order.address.state.name+', '+packingList.order.address.country.name}}<br>{{packingList.order.address.remark ? packingList.order.address.remark.content: ''}}</div>
-                                        <div class="col">
-                                            <p class="no-margin">{{packingList.transport ? packingList.transport.current_schedule.eta : 'n/a'}}</p>
-                                        </div>
-                                        <div class="col-auto text-right" v-if="!packingList.transport">
-                                            <div class="btn btn-xs btn-success pointer" v-if="packingList.status === 5" @click="updateStatus(index, item.status === 1 ? 1 : 2)"><i class="fa fa-check m-r-5"></i>Release</div>
-                                            <div class="btn btn-xs btn-danger pointer" v-if="packingList.status !== 5" @click="updateStatus(index, 5)"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <p class="no-margin">{{item.transport ? item.transport.current_schedule.eta : 'n/a'}}</p>
+        </div>
+        <div class="col-auto text-right" v-if="!item.transport">
+            <div class="btn btn-xs btn-success pointer" v-if="item.status === 5" @click="updateStatus(item.status === 1 ? 1 : 2)"><i class="fa fa-check m-r-5"></i>Release</div>
+            <div class="btn btn-xs btn-danger pointer" v-if="item.status !== 5" @click="updateStatus(5)"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
         </div>
     </div>
 </template>
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
-    import LoadingComponent from "../../general/elements/LoadingComponent";
     export default {
-        components: {LoadingComponent},
-        data(){
-            return {
-                isLoading: true,
-                packingLists: []
-            }
-        },
-        created(){
-            this.submit(route('api.packing_list.container.show', this.item.id), 'get', this.section, false, false);
-        },
         methods: {
+            updateStatus(status){
+                this.submit(this.route('api.packing_list.status.update', this.item.id, status), 'put', '', true, true)
+            },
             successHandler(response){
-                this.packingLists = response.payload.data.packing_lists;
-                this.isLoading = false;
+                this.item = response.payload.data;
+                // this.$forceUpdate();
             }
         },
         mixins: [componentHandler]
diff --git a/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue b/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue
new file mode 100644
index 00000000..84d91e33
--- /dev/null
+++ b/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component v-if="isLoading" style="height: 200px; top: 0;"></loading-component>
+            <div class="row" v-show="!isLoading">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <div class="row align-items-center p-t-10 p-b-10 b-t b-grey muted all-caps fs-10">
+                                <div class="col-2">Marking</div>
+                                <div class="col-1 text-center">Quantity</div>
+                                <div class="col-1">CBM</div>
+                                <div class="col-1 text-center">status</div>
+                                <div class="col-3">Delivery Details</div>
+                                <div class="col">Delivery Date</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row align-items-center p-t-10 p-b-10 b-t b-grey" v-for="packingList in packingLists">
+                                        <div class="col">
+                                            <packing-list-component :data="packingList"></packing-list-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import LoadingComponent from "../../general/elements/LoadingComponent";
+    import PackingListComponent from "../elements/PackingListComponent";
+    export default {
+        components: {PackingListComponent, LoadingComponent},
+        data(){
+            return {
+                isLoading: true,
+                packingLists: []
+            }
+        },
+        created(){
+            this.submit(route('api.packing_list.container.show', this.item.id), 'get', this.section, false, false);
+        },
+        methods: {
+            successHandler(response){
+                this.packingLists = response.payload.data.packing_lists;
+                this.isLoading = false;
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>