diff --git a/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue b/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue
index 506d6472..e04d8e5b 100644
--- a/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue
+++ b/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue
@@ -4,24 +4,24 @@
             <div class="row m-b-10">
                 <div class="col">
                     <h2 class="text-center text-complete bold">{{data}}</h2>
-                    <p class="text-center" v-show="postcodeArea=== ''">This postcode is yet to be declare. Plase choose the area.</p>
+                    <p class="text-center" v-show="parameters.reference=== ''">This postcode is yet to be declare. Plase choose the area.</p>
                 </div>
             </div>
             <div class="row text-center justify-content-center">
                 <div class="col p-r-5">
-                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': postcodeArea === 'city_center', 'b-grey': postcodeArea !== 'city_center' }"  @click="postcodeArea = 'city_center'">
+                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': parameters.reference === 'CENTER_POSTCODE', 'b-grey': parameters.reference !== 'CENTER_POSTCODE' }"  @click="parameters.reference = 'CENTER_POSTCODE'">
                         <div class="row">
                             <div class="col">
-                                <h5 class="no-margin" :class="{ 'text-primary': postcodeArea === 'city_center', 'semi-bold': postcodeArea === 'city_center' }">City Center</h5>
+                                <h5 class="no-margin" :class="{ 'text-primary': parameters.reference === 'CENTER_POSTCODE', 'semi-bold': parameters.reference === 'CENTER_POSTCODE' }">City Center</h5>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="col p-l-5">
-                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': postcodeArea === 'outskirt', 'b-grey': postcodeArea !== 'outskirt' }"  @click="postcodeArea = 'outskirt'">
+                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': parameters.reference === 'OUTSTATION_POSTCODE', 'b-grey': parameters.reference !== 'OUTSTATION_POSTCODE' }"  @click="parameters.reference = 'OUTSTATION_POSTCODE'">
                         <div class="row">
                             <div class="col">
-                                <h5 class="no-margin" :class="{ 'text-primary': postcodeArea === 'outskirt', 'semi-bold': postcodeArea === 'outskirt'}">Outskirt</h5>
+                                <h5 class="no-margin" :class="{ 'text-primary': parameters.reference === 'OUTSTATION_POSTCODE', 'semi-bold': parameters.reference === 'OUTSTATION_POSTCODE'}">Outskirt</h5>
                             </div>
                         </div>
                     </div>
@@ -32,8 +32,7 @@
                     <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.packing_list.assign.order', data, orderNo), 'put', section, true, true)">Confirm</div> -->
-                    <div class="btn btn-primary w-100 btn-lg">Confirm</div>
+                    <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.segment.constant.update.postcode', 1), 'put', section, true, true)">Confirm</div>
                 </div>
             </div>
         </div>
@@ -55,13 +54,12 @@
         },
         data() {
             return {
-                postcodeArea: '', 
+                parameters: {
+                    reference: '',
+                    postcode: this.data
+                } 
             };
         },
-        validations: {
-            orderNo: '', 
-
-        },
         mixins: [modalFormHandler]
     }
 
diff --git a/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue b/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
index a23f3a7c..efa2a171 100644
--- a/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
+++ b/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
@@ -24,7 +24,7 @@
                         <div class="col">
                             <div class="btn btn-xs btn-primary pointer m-t-10 requestModal" data-type="defineLocation">Define Location</div>
                             <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defineLocation">
-                                <declare-postcode-area-form-component :data="data"></declare-postcode-area-form-component>
+                                <declare-postcode-area-form-component :data="data" section="allPostcodesSection"></declare-postcode-area-form-component>
                             </modal-component>
                         </div>
                     </div>