diff --git a/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue b/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue
new file mode 100644
index 00000000..d4217fd5
--- /dev/null
+++ b/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue
@@ -0,0 +1,22 @@
+<template>
+    <i v-show="data.address_change_request&&$store.getters.isAdmin" class="fa fa-exclamation pointer requestModal"  data-type="approveChangeAddress">
+        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="approveChangeAddress" size="large">
+            <approve-change-address-form-component :data="data" :section="section" class="text-center"></approve-change-address-form-component>
+        </modal-component>
+    </i>
+</template>
+<script>
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: true,
+            }
+        },
+        data() {
+            return {
+                section:"changeAddressSection"
+            }
+        },
+    }
+</script>
diff --git a/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue b/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
index e8c2636d..dc82ede2 100644
--- a/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
+++ b/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <i class="fa fa-edit pointer requestModal"  data-type="addressesList" v-tooltip:right="data.address_change_request.reference">
+    <i class="fa fa-edit pointer requestModal"  data-type="addressesList">
         <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addressesList" size="large">
             <change-order-address-form-component :data="data" :section="section" class="text-center"></change-order-address-form-component>
         </modal-component>
diff --git a/resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue b/resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue
new file mode 100644
index 00000000..ce9f4769
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="row justify-content-center">
+        <div class="col col-md-10">
+            <div class="row m-b-20">
+                <div class="col">
+                    <div class="row m-b-20 text-info">
+                        <div class="col text-center">
+                            <h3>Approve</h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row justify-content-center animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
+                <div class="col col-md-8 no-padding">
+                    <div class="row">
+                        <div class="col p-l-5">
+                            <button type="button" class="btn btn-lg btn-block btn-primary b-rad-none" @click="approveChangeAddress()" >Approve</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: true,
+            }
+        },
+        data() {
+            return {
+                parameters : {
+                    order_id: this.data.id,
+                }
+            }
+        },
+        methods:{
+            approveChangeAddress(){
+                this.submit((this.route('api.order.address.change.approve')), 'post', 'orderListSection', true, true);
+            },
+        },
+        mixins: [componentHandler, 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 ad49af1c..4e52c1e3 100644
--- a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
@@ -24,7 +24,9 @@
                             <div class="row m-b-10">
                                 <div class="col-auto">
                                     <h6 class="no-margin"><b>Delivery Address:</b> {{order.address.reference}} <i class="fa fa-info-circle m-l-10" v-tooltip:right="order.address.street_one+' '+(order.address.street_two ? order.address.street_two : '')+', '+ order.address.district.name+', '+order.address.post_code+' '+order.address.state.name+', '+order.address.country.name" ></i>
-                                    <change-address-component :data="order"></change-address-component></h6>
+                                    <change-address-component :data="order"></change-address-component>
+                                    <approve-change-address-component :data="order"></approve-change-address-component>
+                                    </h6>
                                 </div>
                                 <div class="col-auto">
                                     <h6 class="no-margin"><b>Warehouse:</b> {{order.warehouse.id === 3 ? 'Guang Zhou' : 'Yiwu'}}</h6>