diff --git a/resources/assets/vue/components/orders/forms/ChangeOrderNumberFormComponent.vue b/resources/assets/vue/components/orders/forms/ChangeOrderNumberFormComponent.vue
new file mode 100644
index 00000000..ea9cb2e3
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/ChangeOrderNumberFormComponent.vue
@@ -0,0 +1,49 @@
+<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-b-10">
+                <div class="col text-center">
+                    <p>Plese enter the new order number.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.orderNo">
+                        <label class="text-primary">Order Number</label>
+                        <input class="form-control" name="orderNo" v-model="parameters.orderNo">
+                    </validation-wrapper-component>
+                </div>
+            </div>
+            <div class="row m-t-15">
+                <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.order.reference.update', data.id), 'post', section, true, true)">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+
+    export default {
+        data() {
+            return {
+                parameters: {
+                    id: this.data.id, 
+                    orderNo: this.orderNo, 
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                orderNo: { required },
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
index 26903e73..cd99ba43 100644
--- a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
@@ -17,9 +17,15 @@
                         </div>
                         <div class="col">
                             <div class="row m-b-20">
-                                <div class="col">
+                                <div class="col-auto">
                                     <h3 class="no-margin"><b>Order No.</b> {{order.reference}}</h3>
                                 </div>
+                                <div class="col">
+                                    <div class="btn btn-xs btn-outline-danger b-rad-none pointer requestModal" data-type="changeOrderNo">Change Order Number</div>
+                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeOrderNo">
+                                        <change-order-number-form-component :section="section" :data="order"></change-order-number-form-component>
+                                    </modal-component>
+                                </div>
                             </div>
                             <div class="row m-b-20">
                                 <div class="col-auto">