diff --git a/app/Http/Resources/ContainerResource.php b/app/Http/Resources/ContainerResource.php
index 49a33232..dd45412c 100644
--- a/app/Http/Resources/ContainerResource.php
+++ b/app/Http/Resources/ContainerResource.php
@@ -23,17 +23,25 @@ class ContainerResource extends JsonResource
             'container_specification' => ContainerTypes::CONTAINER_SPECIFICATION[$this->container_type],
             'container_number' => $this->container_number,
             'seal_reference' => $this->seal_reference,
-            'loading_date' => $this->loading_date ? $this->loading_date->format('d-m-Y') : $this->loading_date,
+            'loading_date' => optional($this->loading_date)->format('d-m-Y'),
             'transport' => new TransportResource($this->transports()->first()),
             'packages_count' => $this->packages()->where('packages.type', '!=', 2)->sum('quantity'),
             'total_cbm' => $this->packages()->sum(DB::raw('(width/100) * (height/100) * (length/100) * quantity')),
             'remarks' => RemarkResource::collection($this->remarks),
             'status' => $this->status,
-            'packing_lists' =>  $this->whenLoaded('packingLists', PackingListResource::collection($this->whenLoaded('packingLists', function(){
-                return $this->packingLists()->get()->sortBy(function ($packingList) {
-                    return $packingList->owner->company_module_id;
-                });
-            })))
+            'packing_lists' => $this->shouldIncludePackingListData($request) ? $this->getSortedPackingLists() : null,
         ];
     }
+
+    protected function shouldIncludePackingListData($request)
+    {
+        return (isset($request->all()['with_packing_list_data']) && ($request->all()['with_packing_list_data'] == false)) ? false : true;
+    }
+
+    protected function getSortedPackingLists()
+    {
+        return $this->whenLoaded('packingLists', PackingListResource::collection(
+            $this->packingLists()->get()->sortBy(fn ($packingList) => $packingList->owner->company_module_id)
+        ));
+    }
 }
diff --git a/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
index a77807fa..b38f7ebb 100644
--- a/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
+++ b/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="row m-t-5">
+    <div class="row m-t-5" @keyup.enter="submitForm">
         <div class="col">
             <validation-wrapper-component :validator="$v.parameters.content">
                 <input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
@@ -42,7 +42,7 @@
             submitForm() {
                 this.submit(this.data ? this.route('api.remark.update', this.data.id) : this.route('api.packing_list.container.remark.create', this.id), this.data ? 'put' : 'post', this.section, true, true);
                 this.$emit('submit')
-            }
+            },
         },
         mixins: [modalFormHandler]
     }
diff --git a/resources/assets/vue/components/containers/sections/ContainerProfileV2SectionComponent.vue b/resources/assets/vue/components/containers/sections/ContainerProfileV2SectionComponent.vue
new file mode 100644
index 00000000..9316eead
--- /dev/null
+++ b/resources/assets/vue/components/containers/sections/ContainerProfileV2SectionComponent.vue
@@ -0,0 +1,229 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row" v-if="container">
+                <div class="col">
+                    <div class="row align-items-center m-t-10">
+                        <div class="col bg-master-lightest rounded padding-20 m-l-10 m-r-10">
+                            <div class="row d-flex justify-content-between align-items-center">
+                                <div class="col b-r">
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="m-b-0 large-text normal m-b-10">Container Number</p>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="m-t-0 m-b-0 fs-20 bold">{{ container.container_reference }}</p>
+                                            <p class="m-t-0 m-b-0 small-text">{{ container.container_number }}</p>
+                                            <p class="m-t-0 m-b-0 small-text">seal number</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="fs-10 bold m-b-0">ETD</p>
+                                            <p class="small-text m-t-0">{{ container.transport.current_schedule.etd }} <a class="b-rad-none all-caps requestModal" data-type="rescheduleDate"><i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i></a>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="fs-10 bold m-b-0">ETA</p>
+                                            <p class="small-text m-t-0">{{ container.transport.current_schedule.eta }} <a class="b-rad-none all-caps requestModal" data-type="rescheduleDate"><i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i></a>
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="fs-10 bold m-b-0">Location</p>
+                                            <p class="small-text m-t-0">-tbc-</p>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="fs-10 bold m-b-0">Destination</p>
+                                            <p class="small-text m-t-0">-tbc-</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="fs-10 bold m-b-0">Container Type</p>
+                                            <p class="small-text m-t-0">{{ container.container_specification.name }}</p>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="fs-10 bold m-b-0">Owner</p>
+                                            <p class="small-text m-t-0">-tbc-</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-t-10 m-b-50">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row h-100">
+                                        <div class="col">
+                                            <h5 class="m-b-5 large-text bold l-20">Tracking:</h5>
+                                            <div class="row padding-10">
+                                                <div class="col rounded bg-master-lighter padding-15">
+                                                    <li class="m-t-10">
+                                                        <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
+                                                            data-type="containerDepature">Container Departure</a>
+                                                    </li>
+                                                    <li class="m-t-10">
+                                                        <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
+                                                            data-type="containerArrival">Arrival Date</a>
+                                                    </li>
+                                                    <li class="m-t-10">
+                                                        <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
+                                                            data-type="containerUnpacking">Date of Unpacking</a>
+                                                    </li>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
+                        type="rescheduleDate">
+                        <reschedule-date-form-component :section="section"
+                            :data="container"></reschedule-date-form-component>
+                    </modal-component>
+                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
+                        type="containerDepature">
+                        <container-depature-form-component :section="section"
+                            :data="container"></container-depature-form-component>
+                    </modal-component>
+                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
+                        type="containerArrival">
+                        <container-arrival-form-component :section="section"
+                            :data="container"></container-arrival-form-component>
+                    </modal-component>
+                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
+                        type="containerUnpacking">
+                        <container-unpacking-form-container :section="section"
+                            :data="container"></container-unpacking-form-container>
+                    </modal-component>
+
+                    <div class="row m-t-10">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col-auto padding-5 m-l-15 m-r-15 pointer" :class="[{ 'text-primary': tabShowing === 'Comments' }, { 'b-b': tabShowing === 'Comments' }]" @click="tabShowing = 'Comments'">
+                                    <h5 class="large-text bold l-20" :class="[{ 'text-primary': tabShowing === 'Comments' }]"> Comments</h5>
+                                </div>
+                                <!-- <div class="col-auto padding-5 m-l-15 m-r-15 pointer" :class="[{ 'text-primary': tabShowing === 'Timeline' }, { 'b-b': tabShowing === 'Timeline' }]" @click="tabShowing = 'Timeline'">
+                                    <h5 class="large-text bold l-20" :class="[{ 'text-primary': tabShowing === 'Timeline' }]"> Activity Timeline</h5>
+                                </div> -->
+                            </div>
+                            <div class="row p-l-10 p-r-10">
+                                <div class="col rounded padding-15">
+                                    <div class="row" v-if="tabShowing === 'Comments'">
+                                        <div class="col">
+                                            <div class="row" v-for="remarks in container.remarks">
+                                                <div class="col">
+                                                    <container-comment-component :section="section" :data="remarks"></container-comment-component>
+                                                </div>
+                                            </div>
+                                            <container-comment-form-component :section="section" :id="container.id"></container-comment-form-component>
+                                        </div>
+                                    </div>
+                                    <div class="row" v-if="tabShowing === 'Timeline'">
+                                        <div class="col">
+                                            <div class="row align-items-center justify-content-center p-t-50 p-b-50">
+                                                <div class="col-10">
+                                                    <div class="row align-items-center justify-content-center  hint-text">
+                                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
+                                                    </div>
+                                                    <div class="row text-center">
+                                                        <div class="col">
+                                                            <div class="row m-t-20">
+                                                                <div class="col">
+                                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row m-t-5 align-items-center justify-content-center hide">
+                                                                <div class="col">
+                                                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        id: {
+            type: Number,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            section: 'containerPofileSection',
+            isLoading: true,
+            container: null,
+            expanded: false,
+            CBMcapacity: 30,
+            // tabShowing: 'Timeline',
+            tabShowing: 'Comments',
+            selectAllPackingList: false,
+            selectedPackageList: [],
+            deleteCommentId: '',
+        }
+    },
+    computed: {
+        pendingQueue() {
+            return this.$store.getters.isInCompleteQueue(this.section);
+        },
+        loadedCBM() {
+            return (Math.ceil((this.container.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3)
+        },
+    },
+    watch: {
+        pendingQueue(inComplete) {
+            if (inComplete) {
+                this.fetchCompany();
+            }
+        }
+    },
+    created() {
+        this.$store.dispatch('updateListQueue', { 'name': this.section });
+    },
+    methods: {
+        fetchCompany() {
+            this.isLoading = true;
+            this.submit(route('api.packing_list.container.show', this.id) + '?with_packing_list_data=0', 'get', this.section, false, false)
+        },
+        successHandler(response) {
+            this.$store.dispatch('completeList', { 'name': this.section, 'data': [] });
+            this.isLoading = false;
+            this.container = response.payload.data;
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/orders/elements/PackageComponent.vue b/resources/assets/vue/components/orders/elements/PackageComponent.vue
index 92cc77c9..0d5782df 100644
--- a/resources/assets/vue/components/orders/elements/PackageComponent.vue
+++ b/resources/assets/vue/components/orders/elements/PackageComponent.vue
@@ -47,7 +47,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="row b-b b-grey p-b-20 align-items-center">
+                            <div class="row b-b b-grey p-b-20 align-items-center parentContainer">
                                 <div class="col">
                                     <div class="row m-b-5">
                                         <div class="col-auto">
@@ -59,8 +59,46 @@
                                             <p class="no-margin bold">{{item.container ? item.container.transport.schedule_complete && status === 'Shipping' ? 'Custom Clearance' : status : status}}</p>
                                         </div>
                                         <div class="col-auto" v-if="$store.getters.isAdmin">
-                                            <small class="fs-10 all-caps muted">Container</small>
-                                            <p class="no-margin bold">{{item.container ? item.container.container_reference : '-'}}</p>
+                                            <div class="row h-100 justify-content-center align-items-center">
+                                                <div class="col">
+                                                    <small class="fs-10 all-caps muted">Container</small>
+                                                    <p class="no-margin bold">{{ item.container ? item.container.container_reference : '-' }}</p>
+                                                </div>
+                                                <div class="col" v-if="$store.getters.isAdmin && item.container">
+                                                    <i class="fa fa-comment fs-15 pointer requestModal" data-type="commentsModal"></i>
+                                                    <modal-component type="commentsModal" styleType="fill-in">
+                                                        <div class="row">
+                                                            <div class="col bg-white padding-40 b-rad-lg">
+                                                                <div class="row" v-if="item.container.remarks.length">
+                                                                    <div class="col">
+                                                                        <div class="row" v-for="remarks in item.container.remarks">
+                                                                            <div class="col">
+                                                                                <container-comment-component :section="section" :data="remarks"></container-comment-component>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-else>
+                                                                    <div class="col-10">
+                                                                        <div class="row align-items-center justify-content-center  hint-text">
+                                                                            <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
+                                                                        </div>
+                                                                        <div class="row text-center">
+                                                                            <div class="col">
+                                                                                <div class="row m-t-20">
+                                                                                    <div class="col">
+                                                                                        <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here Yet!</p>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </modal-component>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                     <div class="row">
diff --git a/resources/views/pages/templates/warehouseFlow.blade.php b/resources/views/pages/templates/warehouseFlow.blade.php
index 6800fcd6..0bad1f1f 100644
--- a/resources/views/pages/templates/warehouseFlow.blade.php
+++ b/resources/views/pages/templates/warehouseFlow.blade.php
@@ -1,4 +1,5 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-    <container-profile-section-component :id="{{$id}}"></container-profile-section-component>
+    <!-- <container-profile-section-component :id="{{$id}}"></container-profile-section-component> -->
+    <container-profile-v2-section-component :id="{{$id}}"></container-profile-v2-section-component>
 @endsection
\ No newline at end of file