diff --git a/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php b/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
index e9c0738f..5b3af8f8 100644
--- a/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
+++ b/app/Classes/Modules/Remarks/ControllersLogic/UpdateRemarkLogic.php
@@ -55,7 +55,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/resources/assets/vue/components/orders/elements/OrderComponent.vue b/resources/assets/vue/components/orders/elements/OrderComponent.vue
index 31cc56af..e1f1db48 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 5e4a5732..2ebb27ce 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: {