diff --git a/app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php b/app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php
new file mode 100644
index 00000000..e16886f6
--- /dev/null
+++ b/app/Classes/Modules/Orders/ControllersLogic/AssignOrderRemarkLogic.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Classes\Modules\Orders\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Orders\Services\CreatesOrderRemark;
+use App\Classes\Modules\Remarks\Standards\Rules\CanCreateRemark;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\Orders\Services\FetchesOrder;
+use App\Http\Resources\RemarkResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignOrderRemarkLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Order Remark',
+            'message' => 'You have successfully created a new Order Remark'
+        ];
+    }
+
+    /** @var CanCreateRemark */
+    private $canCreateRemark;
+
+    /** @var CreatesOrderRemark */
+    private $createsOrderRemark;
+
+    /** @var FetchesOrder */
+    private $fetchesOrder;
+
+    /**
+     * CreateRemarkLogic constructor.
+     * @param CanCreateRemark $canCreateRemark
+     * @param CreatesOrderRemark $createsOrderRemark
+     */
+    public function __construct(CanCreateRemark $canCreateRemark, CreatesOrderRemark $createsOrderRemark, FetchesOrder $fetchesOrder)
+    {
+        $this->canCreateRemark = $canCreateRemark;
+        $this->createsOrderRemark = $createsOrderRemark;
+        $this->fetchesOrder = $fetchesOrder;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new RemarkObject(
+            $request->input('content'), 
+            $request->route('id')
+        );
+
+        $this->canCreateRemark->passes($object);
+        $query = $this->createsOrderRemark->execute($this->fetchesOrder->execute(['id' => $request->route('id')]), $object);
+        return $this->resourceResponse( new RemarkResource($query));
+    }
+}
diff --git a/app/Classes/Modules/Orders/Services/CreatesOrderRemark.php b/app/Classes/Modules/Orders/Services/CreatesOrderRemark.php
new file mode 100644
index 00000000..50df32bc
--- /dev/null
+++ b/app/Classes/Modules/Orders/Services/CreatesOrderRemark.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\Modules\Orders\Services;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRelationshipRecord;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Models\Remark;
+use App\Models\Order;
+
+class CreatesOrderRemark extends AbstractUpdateRelationshipRecord
+{
+
+    /**
+     * @param Company $company
+     * @param RemarkObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(Order $order, RemarkObject $object) {
+        $model = new Remark();
+
+        $model->commenter_id = $object->getCommenterId();
+        $model->content = $object->getContent();
+
+        return $this->handler($order->remarks(), $model);
+
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php
new file mode 100644
index 00000000..980bc5b9
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/AssignPackingListRemarkLogic.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\PackingLists\Services\CreatesPackingListRemark;
+use App\Classes\Modules\Remarks\Standards\Rules\CanCreateRemark;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\PackingLists\Services\FetchesPackingList;
+use App\Http\Resources\RemarkResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignPackingListRemarkLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Packing List Remark',
+            'message' => 'You have successfully created a new Packing List Remark'
+        ];
+    }
+
+    /** @var CanCreateRemark */
+    private $canCreateRemark;
+
+    /** @var CreatesPackingListRemark */
+    private $createsPackingListRemark;
+
+    /** @var FetchesPackingList */
+    private $fetchesPackingList;
+
+    /**
+     * CreateRemarkLogic constructor.
+     * @param CanCreateRemark $canCreateRemark
+     * @param CreatesPackingListRemark $createsPackingListRemark
+     */
+    public function __construct(CanCreateRemark $canCreateRemark, CreatesPackingListRemark $createsPackingListRemark, FetchesPackingList $fetchesPackingList)
+    {
+        $this->canCreateRemark = $canCreateRemark;
+        $this->createsPackingListRemark = $createsPackingListRemark;
+        $this->fetchesPackingList = $fetchesPackingList;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new RemarkObject(
+            $request->input('content'), 
+            $request->route('id')
+        );
+
+        $this->canCreateRemark->passes($object);
+        $query = $this->createsPackingListRemark->execute($this->fetchesPackingList->execute(['id' => $request->route('id')]), $object);
+        return $this->resourceResponse( new RemarkResource($query));
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php
new file mode 100644
index 00000000..24e59b83
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/ControllersLogic/Containers/AssignContainerRemarkLogic.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\ControllersLogic\Containers;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\PackingLists\Services\Containers\CreatesContainerRemark;
+use App\Classes\Modules\Remarks\Standards\Rules\CanCreateRemark;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\PackingLists\Services\Containers\FetchesContainer;
+
+use App\Http\Resources\RemarkResource;
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignContainerRemarkLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Order Remark',
+            'message' => 'You have successfully created a new Order Remark'
+        ];
+    }
+
+    /** @var CanCreateRemark */
+    private $canCreateRemark;
+
+    /** @var CreatesContainerRemark */
+    private $createsContainerRemark;
+
+    /** @var FetchesContainer */
+    private $fetchesContainer;
+
+    /**
+     * CreateRemarkLogic constructor.
+     * @param CanCreateRemark $canCreateRemark
+     * @param CreatesContainerRemark $createsContainerRemark
+     */
+    public function __construct(CanCreateRemark $canCreateRemark, CreatesContainerRemark $createsContainerRemark, FetchesContainer $fetchesContainer)
+    {
+        $this->canCreateRemark = $canCreateRemark;
+        $this->createsContainerRemark = $createsContainerRemark;
+        $this->fetchesContainer = $fetchesContainer;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new RemarkObject(
+            $request->input('content'), 
+            $request->route('id')
+        );
+
+        $this->canCreateRemark->passes($object);
+        $query = $this->createsContainerRemark->execute($this->fetchesContainer->execute(['id' => $request->route('id')]), $object);
+        return $this->resourceResponse( new RemarkResource($query));
+    }
+}
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/PackingLists/Services/Containers/CreatesContainerRemark.php b/app/Classes/Modules/PackingLists/Services/Containers/CreatesContainerRemark.php
new file mode 100644
index 00000000..75a069b7
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/Services/Containers/CreatesContainerRemark.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\Services\Containers;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRelationshipRecord;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Models\Remark;
+use App\Models\Container;
+
+class CreatesContainerRemark extends AbstractUpdateRelationshipRecord
+{
+
+    /**
+     * @param Company $company
+     * @param RemarkObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(Container $container, RemarkObject $object) {
+        $model = new Remark();
+
+        $model->commenter_id = $object->getCommenterId();
+        $model->content = $object->getContent();
+
+        return $this->handler($container->remarks(), $model);
+
+    }
+}
diff --git a/app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php b/app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php
new file mode 100644
index 00000000..30f30358
--- /dev/null
+++ b/app/Classes/Modules/PackingLists/Services/CreatesPackingListRemark.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Classes\Modules\PackingLists\Services;
+
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRelationshipRecord;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Models\Remark;
+use App\Models\PackingList;
+
+class CreatesPackingListRemark extends AbstractUpdateRelationshipRecord
+{
+
+    /**
+     * @param Company $company
+     * @param RemarkObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(PackingList $packingList, RemarkObject $object) {
+        $model = new Remark();
+
+        $model->commenter_id = $object->getCommenterId();
+        $model->content = $object->getContent();
+
+        return $this->handler($packingList->remarks(), $model);
+
+    }
+}
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/Controllers/Orders/AssignOrderRemarkController.php b/app/Http/Controllers/Orders/AssignOrderRemarkController.php
new file mode 100644
index 00000000..09de096f
--- /dev/null
+++ b/app/Http/Controllers/Orders/AssignOrderRemarkController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Orders;
+
+use App\Classes\Modules\Orders\ControllersLogic\AssignOrderRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignOrderRemarkController
+{
+    /**
+     * @param Request $request
+     * @param AssignOrderRemarkLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, AssignOrderRemarkLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
diff --git a/app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php b/app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php
new file mode 100644
index 00000000..bcd6531c
--- /dev/null
+++ b/app/Http/Controllers/PackingLists/AssignPackingListRemarkController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\PackingLists;
+
+use App\Classes\Modules\PackingLists\ControllersLogic\AssignPackingListRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignPackingListRemarkController
+{
+    /**
+     * @param Request $request
+     * @param AssignPackingListRemarkLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, AssignPackingListRemarkLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
diff --git a/app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php b/app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php
new file mode 100644
index 00000000..d199aaf9
--- /dev/null
+++ b/app/Http/Controllers/PackingLists/Containers/AssignContainerRemarkController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\PackingLists\Containers;
+
+use App\Classes\Modules\PackingLists\ControllersLogic\Containers\AssignContainerRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AssignContainerRemarkController
+{
+    /**
+     * @param Request $request
+     * @param AssignContainerRemarkLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, AssignContainerRemarkLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
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/Container.php b/app/Models/Container.php
index 21f59843..61015f81 100644
--- a/app/Models/Container.php
+++ b/app/Models/Container.php
@@ -65,5 +65,4 @@ class Container extends AbstractModel implements Transportable, Remarkable
     {
         return $this->morphMany(Remark::class, 'owner');
     }
-
 }
diff --git a/app/Models/Order.php b/app/Models/Order.php
index 401da1db..995267ed 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -55,6 +55,14 @@ class Order extends AbstractModel implements Addressable, Packable
         return $this->morphMany(PackingList::class, 'owner');
     }
 
+    /**
+     * @return MorphMany
+     */
+    public function remarks(): morphMany
+    {
+        return $this->morphMany(Remark::class, 'owner');
+    }
+
     /**
      * @return HasManyThrough
      */
diff --git a/app/Models/PackingList.php b/app/Models/PackingList.php
index 550d5f6f..fc775ba2 100644
--- a/app/Models/PackingList.php
+++ b/app/Models/PackingList.php
@@ -56,6 +56,14 @@ class PackingList extends AbstractModel implements Transportable, Steppable
         return $this->morphMany(Transport::class, 'owner');
     }
 
+    /**
+     * @return MorphMany
+     */
+    public function remarks(): morphMany
+    {
+        return $this->morphMany(Remark::class, 'owner');
+    }
+
     /**
      * @return belongsToMany
      */
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/order.php b/routes/order.php
index 2da8880f..622bb105 100644
--- a/routes/order.php
+++ b/routes/order.php
@@ -14,7 +14,7 @@ Route::group(['prefix' => 'order', 'as' => 'order.', 'namespace' => 'Orders'], f
 
     Route::post('/create-warehouse-packing-list', 'CreateWarehousePackingListController@create')->name('create.warehouse.packing_list');
     Route::post('/create-shipping-packing-list', 'CreateShippingPackingListController@create')->name('create.shipping.packing_list');
-    // Route::post('/create', 'CreateOrderController@create')->name('create');
 
+    Route::put('/assign-remark/{id}', 'AssignOrderRemarkController@create')->name('assign.remark');
     Route::get('/{id}/shipping-cost', 'ShippingCostController@calculate')->name('shipping.cost');
 });
diff --git a/routes/packing_list.php b/routes/packing_list.php
index 7ee3a3ca..6716ada9 100644
--- a/routes/packing_list.php
+++ b/routes/packing_list.php
@@ -16,7 +16,7 @@ Route::group(['namespace' => 'PackingLists', 'as' => 'packing_list.', 'prefix' =
     Route::put('/update-dispatch-date/{id}', 'UpdateDispatchDatePackingListController@update')->name('update_dispatch_date');
     Route::put('/update-drop-date/{id}', 'UpdateDropDatePackingListController@update')->name('update_drop_date');
     Route::put('/complete/{id}', 'CompletePackingListController@complete')->name('complete');
-
+    Route::put('/assign-remark/{id}', 'AssignPackingListRemarkController@create')->name('assign.remark');
 
     Route::group(['namespace' => 'Containers', 'prefix' => 'container', 'as' => 'container.'], function () {
         Route::get('/{id}/show', 'FetchContainerController@fetch')->name('show');
@@ -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 () {