diff --git a/app/Http/Resources/ContainerResource.php b/app/Http/Resources/ContainerResource.php
index 23cb7817..557ffe74 100644
--- a/app/Http/Resources/ContainerResource.php
+++ b/app/Http/Resources/ContainerResource.php
@@ -5,6 +5,7 @@ namespace App\Http\Resources;
 use App\Classes\ValueObjects\Constants\ContainerTypes;
 use App\Models\Remark;
 use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\DB;
 
 class ContainerResource extends JsonResource
 {
@@ -24,11 +25,13 @@ class ContainerResource extends JsonResource
             'seal_reference' => $this->seal_reference,
             'loading_date' => $this->loading_date ? $this->loading_date->format('d-m-Y') : $this->loading_date,
             'transport' => new TransportResource($this->transports()->first()),
-            'packing_lists' => PackingListResource::collection($this->whenLoaded('packingLists', function(){
-                return $this->packingLists()->whereHas('packages')->get();
-            })),
+            'packages_count' => $this->packages->sum('quantity'),
+            'total_cbm' => $this->packages()->sum(DB::raw('(width/100) * (height/100) * (length/100) * quantity')),
             'remarks' => RemarkResource::collection($this->remarks),
-            'status' => $this->status
+            'status' => $this->status,
+            'packing_lists' =>  $this->whenLoaded('packingLists', PackingListResource::collection($this->whenLoaded('packingLists', function(){
+                return $this->packingLists()->whereHas('packages')->get();
+            })))
         ];
     }
 }
diff --git a/resources/assets/vue/components/containers/elements/ContainerComponent.vue b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
index f894385c..0fa42763 100644
--- a/resources/assets/vue/components/containers/elements/ContainerComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
@@ -28,11 +28,11 @@
                         </div>
                         <div class="col-auto">
                             <p class="no-margin fs-10 all-caps">Packages</p>
-                            <p class="no-margin">{{ item.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.quantity + total, 0), 0) }}</p>
+                            <p class="no-margin">{{ item.packages_count }}</p>
                         </div>
                         <div class="col-auto">
                             <p class="no-margin fs-10 all-caps">Loaded CBM</p>
-                            <p class="no-margin">{{ (Math.ceil((item.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3) }}</p>
+                            <p class="no-margin">{{ (Math.ceil(item.total_cbm * 1000) / 1000).toFixed(3) }}</p>
                         </div>
                         <div class="col-auto">
                             <p class="no-margin fs-10 all-caps">Status</p>
@@ -49,52 +49,7 @@
                     </div>
                 </div>
             </div>
-            <div class="row" v-show="expanded">
-                <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 item.packing_lists">
-                                        <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  class="col-auto hide">
-                                            <a class="btn btn-xs btn-warning all-caps b-rad-none pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                                Report&nbsp;<i class="fa fa-download m-r-10"></i>
-                                            </a>
-                                            <div class="dropdown-menu">
-                                                <a class="dropdown-item" :href="route('report.customclearance',packingList.order.id)">Origin custom cleared</a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <packing-list-component :data="item" v-if="expanded"></packing-list-component>
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/containers/elements/PackingListComponent.vue b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
new file mode 100644
index 00000000..62126d44
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
@@ -0,0 +1,68 @@
+<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, 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>
+        </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: {
+            successHandler(response){
+                this.packingLists = response.payload.data.packing_lists;
+                this.isLoading = false;
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/views/pages/containers.blade.php b/resources/views/pages/containers.blade.php
index b876abab..b8ab329b 100644
--- a/resources/views/pages/containers.blade.php
+++ b/resources/views/pages/containers.blade.php
@@ -87,7 +87,7 @@
             <div class="col bg-master-lightest p-1 p-sm-4">
                 <div class="row tabsContainer tabContent" tab-name="active">
                     <div class="col">
-                        <list-component section="activeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, 'status_in': [1], order_by: {column: 'loading_date', DESC: true}}">
+                        <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>
                             </template>
@@ -96,7 +96,7 @@
                 </div>
                 <div class="row tabsContainer tabContent hide" tab-name="arrived">
                     <div class="col">
-                        <list-component section="arrivedContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, 'status_in': [3], 'has_pending_delivery': true, order_by: {column: 'loading_date', DESC: true}}">
+                        <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>
                             </template>
@@ -105,7 +105,7 @@
                 </div>
                 <div class="row tabsContainer tabContent hide" tab-name="complete">
                     <div class="col">
-                        <list-component section="completeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, 'status_in': [3], 'has_pending_delivery': false, order_by: {column: 'loading_date', DESC: true}}">
+                        <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>
                             </template>