diff --git a/app/Classes/Modules/Orders/ControllersLogic/CreateOrderRemarkLogic.php b/app/Classes/Modules/Orders/ControllersLogic/CreateOrderRemarkLogic.php
new file mode 100644
index 00000000..e134bcc7
--- /dev/null
+++ b/app/Classes/Modules/Orders/ControllersLogic/CreateOrderRemarkLogic.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Classes\Modules\Orders\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Orders\Services\FetchesOrder;
+use App\Classes\Modules\Remarks\DataTransferObjects\RemarkObject;
+use App\Classes\Modules\Remarks\Processors\CreateRemarkProcessor;
+use App\Http\Resources\OrderResource;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class CreateOrderRemarkLogic extends AbstractControllerLogic
+{
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Created Order',
+            'message' => 'You have successfully created a new Order'
+        ];
+    }
+
+    /** @var FetchesOrder */
+    private $fetchesOrder;
+
+    /** @var CreateRemarkProcessor */
+    private $createRemarkProcessor;
+
+    /**
+     * CreateOrderRemarkLogic constructor.
+     * @param FetchesOrder $fetchesOrder
+     * @param CreateRemarkProcessor $createRemarkProcessor
+     */
+    public function __construct(FetchesOrder $fetchesOrder, CreateRemarkProcessor $createRemarkProcessor)
+    {
+        $this->fetchesOrder = $fetchesOrder;
+        $this->createRemarkProcessor = $createRemarkProcessor;
+    }
+
+    /**
+     * @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
+    {
+        $order = $this->fetchesOrder->execute(['id' => $request->route('id')]);
+
+        $object = new RemarkObject($request->input('content'), auth()->user()->id);
+
+        $this->createRemarkProcessor->execute($order, $object);
+
+        return $this->resourceResponse(new OrderResource($order));
+
+    }
+}
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/CreateOrderRemarkController.php b/app/Http/Controllers/Orders/CreateOrderRemarkController.php
new file mode 100644
index 00000000..3464566a
--- /dev/null
+++ b/app/Http/Controllers/Orders/CreateOrderRemarkController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Orders;
+
+use App\Classes\Modules\Orders\ControllersLogic\CreateOrderRemarkLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class CreateOrderRemarkController
+{
+    public function create(Request $request, CreateOrderRemarkLogic $logic): JsonResponse{
+        return $logic->execute($request);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Resources/OrderResource.php b/app/Http/Resources/OrderResource.php
index 06e31b6f..0c30bb62 100644
--- a/app/Http/Resources/OrderResource.php
+++ b/app/Http/Resources/OrderResource.php
@@ -46,6 +46,7 @@ class OrderResource extends JsonResource
                     'received_packages' => PackageResource::collection($this->parcels()->warehouseReceiveList()->get()),
                 ];
             }),
+            'remarks' => RemarkResource::collection($this->remarks),
             'created_at' => $this->created_at->format('d-m-Y')
         ];
 
diff --git a/app/Models/Order.php b/app/Models/Order.php
index 401da1db..3923d913 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -5,6 +5,7 @@ namespace App\Models;
 use App\Classes\General\Interfaces\Addressable;
 use App\Classes\General\Interfaces\Contactable;
 use App\Classes\General\Interfaces\Packable;
+use App\Classes\General\Interfaces\Remarkable;
 use App\Classes\ValueObjects\Constants\RoleTypes;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Scopes\CustomerOrdersScope;
@@ -14,7 +15,7 @@ use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
 
-class Order extends AbstractModel implements Addressable, Packable
+class Order extends AbstractModel implements Addressable, Packable, Remarkable
 {
     use SoftDeletes;
 
@@ -147,4 +148,12 @@ class Order extends AbstractModel implements Addressable, Packable
     {
         return $this->morphMany(Transaction::class, 'owner');
     }
+
+    /**
+     * @return MorphMany
+     */
+    public function remarks(): morphMany
+    {
+        return $this->morphMany(Remark::class, 'owner');
+    }
 }
diff --git a/resources/assets/vue/components/orders/elements/OrderComponent.vue b/resources/assets/vue/components/orders/elements/OrderComponent.vue
index f4e8462d..597fa352 100644
--- a/resources/assets/vue/components/orders/elements/OrderComponent.vue
+++ b/resources/assets/vue/components/orders/elements/OrderComponent.vue
@@ -16,8 +16,19 @@
                 <div class="col-6">
                     <div class="row m-b-5">
                         <div class="col">
-                            <small class="fs-10 all-caps muted">Order No.</small>
-                            <h6 class="no-margin small">{{item.reference}}</h6>
+                            <div class="row">
+                                <div class="col">
+                                    <small class="fs-10 all-caps muted">Order No</small>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-9 p-r-0">
+                                    <h6 class="no-margin small" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.reference}}</h6>
+                                </div>
+                                <div class="col p-l-0" v-if="item.remarks.length >= 1">
+                                    <i class="fa fa-info-circle m-l-5" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>Remarks</h6><p class=\'text-white text-left lh-17 no-margin\'>'+item.remarks[0].content+'</p>'" ></i>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div class="row m-b-5">
diff --git a/resources/assets/vue/components/orders/forms/DeleteOrderRemarkFormComponent.vue b/resources/assets/vue/components/orders/forms/DeleteOrderRemarkFormComponent.vue
new file mode 100644
index 00000000..a23d077f
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/DeleteOrderRemarkFormComponent.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>
diff --git a/resources/assets/vue/components/orders/forms/OrderRemarkFormComponent.vue b/resources/assets/vue/components/orders/forms/OrderRemarkFormComponent.vue
new file mode 100644
index 00000000..79273650
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/OrderRemarkFormComponent.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <validation-wrapper-component :validator="$v.parameters.content">
+                <input type="text" class="form-control fs-12" placeholder="Make a remark on this order." 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.order.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/orders/sections/OrderProfileSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
index 3b663e3e..1e4ce119 100644
--- a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
@@ -21,6 +21,47 @@
                                     <h3 class="no-margin"><b>Order No.</b> {{order.reference}}</h3>
                                 </div>
                             </div>
+                            <div class="row m-b-20">
+                                <div class="col-12">
+                                    <div class="row">
+                                        <div class="col-auto d-flex align-items-center">
+                                            <h6 class="no-margin"><b>Remark:</b></h6>
+                                        </div>
+                                        <div class="col-auto p-l-0" v-if="!addComment">
+                                            <div class="btn btn-xs btn-outline-info b-rad-none pointer" @click="addComment = !addComment">Add a Remark</div>
+                                        </div>
+                                        <div class="col d-flex align-items-center pl-3 pl-md-0" v-if="order.remarks.length >= 1 && !isEditRemark">
+                                            <h6 class="no-margin">{{order.remarks[0].content}}</h6> 
+                                            <span class="btn btn-md btn-default m-l-10" @click="isEditRemark = !isEditRemark">
+                                                <i class="fa fa-edit"></i>
+                                            </span>
+                                            <span class="btn btn-md btn-default m-l-5 requestModal" data-type="deleteOrderRemark">
+                                                <i class="fa fa-trash"></i>
+                                            </span>
+                                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteOrderRemark">
+                                                <delete-order-remark-form-component :section="section" :data="order.remarks[0]" v-on:submit="addComment=false"></delete-order-remark-form-component>
+                                            </modal-component>
+                                        </div>
+                                        <div class="col pl-2 pl-md-0" v-if="isEditRemark">
+                                            <div class="row">
+                                                <div class="col">
+                                                    <order-remark-form-component :section="section" :data="order.remarks[0]" :id="order.id" v-on:submit="isEditRemark=false"></order-remark-form-component>
+                                                </div>
+                                                 <div class="col-auto d-flex align-items-center">
+                                                    <div class="row m-l-5">
+                                                        <div class="col b-a btn btn-sm btn-default" @click="isEditRemark = !isEditRemark">
+                                                            Cancel
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col p-l-0" v-if="order.remarks.length === 0 && addComment">
+                                            <order-remark-form-component :section="section" :id="order.id"></order-remark-form-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                             <div class="row m-b-20">
                                 <div class="col-12 col-sm-auto">
                                     <h6 class="no-margin"><b>Order Date:</b> {{order.created_at}}</h6>
@@ -412,7 +453,9 @@
             return {
                 section: 'orderProfileSection',
                 isLoading: true,
-                order: null
+                order: null,
+                isEditRemark: false,
+                addComment: false,
             }
         },
         computed: {
diff --git a/routes/order.php b/routes/order.php
index 2da8880f..ea7bc389 100644
--- a/routes/order.php
+++ b/routes/order.php
@@ -17,4 +17,6 @@ Route::group(['prefix' => 'order', 'as' => 'order.', 'namespace' => 'Orders'], f
     // Route::post('/create', 'CreateOrderController@create')->name('create');
 
     Route::get('/{id}/shipping-cost', 'ShippingCostController@calculate')->name('shipping.cost');
+    
+    Route::post('/{id}/remark/create', 'CreateOrderRemarkController@create')->name('remark.create');
 });