diff --git a/resources/assets/vue/components/containers/elements/ContainerComponent.vue b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
index e60059a1..225a1651 100644
--- a/resources/assets/vue/components/containers/elements/ContainerComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
@@ -64,13 +64,19 @@
                     </div>
                 </div>
             </div>
-            <packing-list-section-component :data="item" v-if="expanded"></packing-list-section-component>
+            <packing-list-section-component :section="section" :data="item" v-if="expanded"></packing-list-section-component>
         </div>
     </div>
 </template>
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
     export default {
+        props: {
+            section:{
+                type: String,
+                default: ''
+            }
+        },
         data(){
             return {
                 expanded: false,
diff --git a/resources/assets/vue/components/containers/elements/PackingListComponent.vue b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
index d92f35a7..c5c19608 100644
--- a/resources/assets/vue/components/containers/elements/PackingListComponent.vue
+++ b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
@@ -18,7 +18,7 @@
                 {{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 class="btn btn-xs btn-primary pointer m-t-10 requestModal" data-type="defineLocation">Define Location</div>
                 <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defineLocation">
-                    <declare-postcode-area-form-component :data="{postcode: item.order.address.post_code, postcodeArea: item.order.address.post_code_area}"></declare-postcode-area-form-component>
+                    <declare-postcode-area-form-component :section="section" :data="{postcode: item.order.address.post_code, postcodeArea: item.order.address.post_code_area}"></declare-postcode-area-form-component>
                 </modal-component>
             </div>
         </div>
@@ -63,6 +63,12 @@
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
     export default {
+        props: {
+            section:{
+                type: String,
+                default: ''
+            }
+        },
         data(){
             return {
                 parameters: {
diff --git a/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue b/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue
index c015ceb2..ea78fb48 100644
--- a/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue
+++ b/resources/assets/vue/components/containers/sections/PackingListSectionComponent.vue
@@ -24,7 +24,7 @@
                                 <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>
+                                            <packing-list-component :section="section" :data="packingList"></packing-list-component>
                                         </div>
                                     </div>
                                 </div>
@@ -42,6 +42,12 @@
     import PackingListComponent from "../elements/PackingListComponent";
     export default {
         components: {PackingListComponent, LoadingComponent},
+        props: {
+            section:{
+                type: String,
+                default: ''
+            }
+        },
         data(){
             return {
                 isLoading: true,
diff --git a/resources/views/pages/containers.blade.php b/resources/views/pages/containers.blade.php
index b4f2acb8..3aef1377 100644
--- a/resources/views/pages/containers.blade.php
+++ b/resources/views/pages/containers.blade.php
@@ -82,7 +82,7 @@
                     <div class="col">
                         <list-component section="activeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'status_in': [1], order_by: {column: 'loading_date', DESC: true}}">
                             <template slot="list" slot-scope="{data}">
-                                <container-component :data="data"></container-component>
+                                <container-component section="activeContainerListSection" :data="data"></container-component>
                             </template>
                         </list-component>
                     </div>
@@ -91,7 +91,7 @@
                     <div class="col">
                         <list-component section="arrivedContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'status_in': [3], 'has_pending_delivery': true, order_by: {column: 'loading_date', DESC: true}}">
                             <template slot="list" slot-scope="{data}">
-                                <container-component :data="data"></container-component>
+                                <container-component section="arrivedContainerListSection" :data="data"></container-component>
                             </template>
                         </list-component>
                     </div>
@@ -100,7 +100,7 @@
                     <div class="col">
                         <list-component section="completeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'status_in': [3], 'has_pending_delivery': false, order_by: {column: 'loading_date', DESC: true}}">
                             <template slot="list" slot-scope="{data}">
-                                <container-component :data="data"></container-component>
+                                <container-component section="completeContainerListSection" :data="data"></container-component>
                             </template>
                         </list-component>
                     </div>