diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php
index 175575cf..bb4b2a06 100644
--- a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/CreateContainerRemarkLogic.php
@@ -53,9 +53,9 @@ class CreateContainerRemarkLogic extends AbstractControllerLogic
     public function logic(Request $request) : JsonResponse
     {
 
-        $container = $this->fetchesContainer->execute(['id' => $request->input('container_id')]);
+        $container = $this->fetchesContainer->execute(['id' => $request->route('id')]);
 
-        $object = new RemarkObject($request->input('content'), 1);
+        $object = new RemarkObject($request->input('content'), auth()->user()->id);
 
         $this->createRemarkProcessor->execute($container, $object);
 
diff --git a/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php b/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
index ffd7a701..f120efab 100644
--- a/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
+++ b/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
@@ -57,7 +57,7 @@ class UpdateRemarkLogic extends AbstractControllerLogic
      */
     public function logic(Request $request) : JsonResponse
     {
-        $object = new RemarkObject($request->input('content'), $request->input('commenter_id'));
+        $object = new RemarkObject($request->input('content'), auth()->user()->id);
 
         $this->canUpdateRemark->passes($object);
 
diff --git a/app/Http/Resources/ContainerResource.php b/app/Http/Resources/ContainerResource.php
index b9daa54f..23cb7817 100644
--- a/app/Http/Resources/ContainerResource.php
+++ b/app/Http/Resources/ContainerResource.php
@@ -3,6 +3,7 @@
 namespace App\Http\Resources;
 
 use App\Classes\ValueObjects\Constants\ContainerTypes;
+use App\Models\Remark;
 use Illuminate\Http\Resources\Json\JsonResource;
 
 class ContainerResource extends JsonResource
@@ -26,6 +27,7 @@ class ContainerResource extends JsonResource
             'packing_lists' => PackingListResource::collection($this->whenLoaded('packingLists', function(){
                 return $this->packingLists()->whereHas('packages')->get();
             })),
+            'remarks' => RemarkResource::collection($this->remarks),
             'status' => $this->status
         ];
     }
diff --git a/app/Http/Resources/RemarkResource.php b/app/Http/Resources/RemarkResource.php
index d5f93d79..24081934 100644
--- a/app/Http/Resources/RemarkResource.php
+++ b/app/Http/Resources/RemarkResource.php
@@ -16,8 +16,11 @@ class RemarkResource extends JsonResource
     {
         return [
             'id' => $this->id,
-            'commenter_id' => $this->commenter_id,
+            'commenter' => new UserResource($this->commenter),
+            'owner_id' => $this->owner_id,
             'content' => $this->content,
+            'created_at' => $this->created_at->format('d-m-Y H:i'),
+            'long_ago' => $this->created_at->diffForHumans()
         ];
     }
 }
diff --git a/app/Models/Remark.php b/app/Models/Remark.php
index 863c3001..f2de3a5c 100644
--- a/app/Models/Remark.php
+++ b/app/Models/Remark.php
@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Relations\MorphTo;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
 class Remark extends AbstractModel
 {
@@ -15,4 +16,12 @@ class Remark extends AbstractModel
     {
         return $this->morphTo();
     }
+
+    /**
+     * @return BelongsTo
+     */
+    public function commenter(): BelongsTo
+    {
+        return $this->BelongsTo(User::class, 'commenter_id', 'id');
+    }
 }
diff --git a/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue b/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
new file mode 100644
index 00000000..9cc32c2f
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/ContainerCommentComponent.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="row m-b-20 parentContainer">
+        <div class="col">
+            <div class="row justify-content-center align-items-center">
+                <div class="hide col-auto btn-rounded padding-10 d-flex justify-content-center align-items-center bg-master-lighter" style="width: 30px;height: 30px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);">
+                    <span class="bold">{{item.commenter.name.substr(0, 1)}}</span>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto">
+                            <p class="no-margin muted bold fs-14">{{item.commenter.name}}</p>
+                        </div>
+                        <div class="col-auto">
+                            <span class="fs-12 muted normal">{{item.long_ago}}</span>
+                        </div>
+                        <div class="col d-flex justify-content-end">
+                            <div class="row">
+                                <div class="col p-t-5 p-b-5 b-a b-grey">
+                                    <div class="row" v-if="!isEdit">
+                                        <div class="col">
+                                            <i class="fa fa-edit pointer" @click="isEdit = !isEdit"></i>
+                                        </div>
+                                        <div class="col">
+                                                <div class="requestModal pointer" data-type="deleteComment">
+                                                <i class="fa fa-trash"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row" v-if="isEdit">
+                                        <div class="col">
+                                            <i class="fa fa-times pointer" @click="isEdit = !isEdit"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <p v-if="!isEdit">{{item.content}}</p>
+                    <container-comment-form-component :section="section" :data="item" :id="item.owner_id" v-on:submit="isEdit=false" v-if="isEdit"></container-comment-form-component>
+                </div>
+            </div>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteComment">
+                <delete-container-comment-form-component :section="section" :data="item"></delete-container-comment-form-component>
+            </modal-component>
+        </div>  
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+
+    export default {
+        props: {
+            section: {
+                type: String,
+                required: true,
+            }  
+        },
+        data(){
+            return {
+                isEdit: false,
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue b/resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue
deleted file mode 100644
index 25df6f59..00000000
--- a/resources/assets/vue/components/containers/elements/EditContainerFormComponent.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <div class="row" style="width: 600px; margin: auto;" @keyup.enter="submitForm">
-        <div class="col bg-white padding-20 b-rad-lg">
-            <div class="row m-b-10">
-                <div class="col">
-                    <h3 class="bold fs-20 m-b-0">Edit Package</h3>
-                    <p class="normal-text muted">Process of editing the container needs to verify from the warehouse</p>
-                </div>
-            </div>
-            <div class="row m-t-20">
-                <div class="col">
-                    <div class="row m-auto mt-10 mb-10">
-                        <div class="col p-l-0 p-r-10">
-                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_number">
-                                <label class="semi-bold text-primary">Container Number</label>
-                                <input type="text" class="form-control fs-12">
-                            </validation-wrapper-component>
-                        </div>
-                        <div class="col p-r-0 p-l-10">
-                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.sealing_number">
-                                <label class="semi-bold text-primary">Sealing Number</label>
-                                <input type="text" class="form-control">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row m-t-15">
-                <div class="col d-flex justify-content-end">
-                    <div class="btn btn-default btn-sm bg-master-light m-r-10 text-white padding-10 p-l-40 p-r-40 rounded" data-dismiss="modal">Cancel</div>
-                    <div class="btn btn-default btn-sm b-primary btn-outline-primary padding-10 p-l-40 p-r-40 rounded">Upload</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-    import modalFormHandler from '../../../general/mixins/modalFormHandler';
-    import { required } from "vuelidate/lib/validators";
-
-    export default {
-        data() {
-            return {
-                parameters: {
-                    container_number: this.container_number, 
-                    sealing_number: this.sealing_number, 
-                }
-            };
-        },
-        validations: {
-            parameters: {
-                container_number: { required },
-                sealing_number: { required },
-            }
-        },
-        mixins: [modalFormHandler]
-    }
-
-</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerArrivalFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/ContainerArrivalFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ContainerArrivalFormComponent.vue
diff --git a/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
new file mode 100644
index 00000000..a77807fa
--- /dev/null
+++ b/resources/assets/vue/components/containers/forms/ContainerCommentFormComponent.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="row m-t-5">
+        <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">
+            </validation-wrapper-component>
+        </div>
+        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
+            <i class="fa fa-paper-plane" @click="submitForm"></i>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        props: {
+            id: {
+                type: Number,
+                required: true
+            }
+        },
+        data() {
+            return {
+                parameters: {
+                    content: this.content,
+                },
+            };
+        },
+        validations: {
+            parameters: {
+                content: { required },
+            }
+        },
+        created() {
+            if (this.data) {
+                this.parameters.content = this.data.content
+            }
+        },
+        methods: {
+            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]
+    }
+</script>
diff --git a/resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue b/resources/assets/vue/components/containers/forms/ContainerDepatureFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/ContainerDepatureFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ContainerDepatureFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue b/resources/assets/vue/components/containers/forms/ContainerUnpackingFormContainer.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/containerUnpackingFormContainer.vue
rename to resources/assets/vue/components/containers/forms/ContainerUnpackingFormContainer.vue
diff --git a/resources/assets/vue/components/containers/elements/CreateDeliveryPackinglistFormComponent.vue b/resources/assets/vue/components/containers/forms/CreateDeliveryPackinglistFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/CreateDeliveryPackinglistFormComponent.vue
rename to resources/assets/vue/components/containers/forms/CreateDeliveryPackinglistFormComponent.vue
diff --git a/resources/assets/vue/components/containers/forms/DeleteContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/DeleteContainerCommentFormComponent.vue
new file mode 100644
index 00000000..3bd97a45
--- /dev/null
+++ b/resources/assets/vue/components/containers/forms/DeleteContainerCommentFormComponent.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to delete this comment?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.remark.delete', item.id), 'delete', section, true, true)">Delete</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/forms/EditContainerCommentFormComponent.vue b/resources/assets/vue/components/containers/forms/EditContainerCommentFormComponent.vue
new file mode 100644
index 00000000..6101f736
--- /dev/null
+++ b/resources/assets/vue/components/containers/forms/EditContainerCommentFormComponent.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="row m-t-20">
+                <div class="col">
+                    <div class="row m-auto mt-10 mb-10">
+                        <div class="col">
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.content">
+                                <label class="text-primary">Comment</label>
+                                <input type="text" class="form-control fs-12" v-model="parameters.content">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-5">
+                            <div class="btn btn-lg btn-default b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.remark.update', data.id), 'put', section, true, true)">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    content: this.content,
+                    commenter_id: this.$store.getters.getUserId
+                },
+            };
+        },
+        validations: {
+            parameters: {
+                content: { required },
+            }
+        },  
+        mixins: [componentHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/containers/elements/ListPackagelistFormComponent.vue b/resources/assets/vue/components/containers/forms/ListPackagelistFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/ListPackagelistFormComponent.vue
rename to resources/assets/vue/components/containers/forms/ListPackagelistFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue b/resources/assets/vue/components/containers/forms/RescheduleDateFormComponent.vue
similarity index 100%
rename from resources/assets/vue/components/containers/elements/RescheduleDateFormComponent.vue
rename to resources/assets/vue/components/containers/forms/RescheduleDateFormComponent.vue
diff --git a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue b/resources/assets/vue/components/containers/sections/ContainerProfileSectionComponent.vue
similarity index 93%
rename from resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
rename to resources/assets/vue/components/containers/sections/ContainerProfileSectionComponent.vue
index f2e0e2a7..a9d22e9c 100644
--- a/resources/assets/vue/components/containers/elements/ContainerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/containers/sections/ContainerProfileSectionComponent.vue
@@ -616,41 +616,13 @@
                             </div>
                             <div class="row" v-if="tabShowing === 'Comments'">
                                 <div class="col">
-                                    <div class="row m-b-20">
+                                            
+                                    <div class="row" v-for="remarks in container.remarks">
                                         <div class="col">
-                                            <div class="row justify-content-center align-items-center m-l-5 m-b-15">
-                                                <div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
-                                                    <i class="fa fa-user"></i>
-                                                </div>
-                                                <div class="col">
-                                                    <p class="no-margin muted bold fs-20">Jacob Arlington</p>
-                                                </div>
-                                            </div>
-                                            <div class="row">
-                                                <div class="col">
-                                                    <p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
-                                                </div>
-                                            </div>
+                                            <container-comment-component :section="section" :data="remarks"></container-comment-component>
                                         </div>
                                     </div>
-                                    <div class="row m-b-20">
-                                        <div class="col">
-                                            <div class="row justify-content-center align-items-center m-l-5 m-b-15">
-                                                <div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
-                                                    <i class="fa fa-user"></i>
-                                                </div>
-                                                <div class="col">
-                                                    <p class="no-margin muted bold fs-20">Jacob Arlington</p>
-                                                </div>
-                                            </div>
-                                            <div class="row">
-                                                <div class="col">
-                                                    <p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Write your comments...">
+                                    <container-comment-form-component :section="section" :id="container.id"></container-comment-form-component>
                                 </div>    
                             </div>
                         </div>
@@ -661,9 +633,7 @@
     </div>
     </template>
     <script>
-        import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
         export default {
-        components: { RescheduleDateFormComponent },
             props: {
                 id: {
                     type: Number,
@@ -679,7 +649,8 @@
                     CBMcapacity: 30,
                     tabShowing: 'Timeline',
                     selectAllPackingList: false,
-                    selectedPackageList: []
+                    selectedPackageList: [],
+                    deleteCommentId: '',
                 }
             },
             computed: {
diff --git a/routes/packing_list.php b/routes/packing_list.php
index 7ee3a3ca..f32533c7 100644
--- a/routes/packing_list.php
+++ b/routes/packing_list.php
@@ -30,6 +30,7 @@ Route::group(['namespace' => 'PackingLists', 'as' => 'packing_list.', 'prefix' =
         Route::put('/update-dispatch-date/{id}', 'UpdateDispatchDateContainerController@update')->name('update_dispatch_date');
         Route::put('/update-drop-date/{id}', 'UpdateDropDateContainerController@update')->name('update_drop_date');
         Route::put('/complete/{id}', 'CompleteContainerController@complete')->name('complete');
+        Route::post('/{id}/remark/create', 'CreateContainerRemarkController@create')->name('remark.create');
     });
 
     Route::group(['namespace' => 'Packages', 'as' => 'package.', 'prefix' => 'package'], function () {