diff --git a/app/Http/Resources/AddressResource.php b/app/Http/Resources/AddressResource.php
index 95a60b9f..f86d5c29 100644
--- a/app/Http/Resources/AddressResource.php
+++ b/app/Http/Resources/AddressResource.php
@@ -5,6 +5,8 @@ namespace App\Http\Resources;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Models\Order;
 use Illuminate\Http\Resources\Json\JsonResource;
+use App\Models\SegmentConstant;
+use App\Classes\ValueObjects\Constants\SegmentConstants;
 
 class AddressResource extends JsonResource
 {
@@ -17,6 +19,14 @@ class AddressResource extends JsonResource
     public function toArray($request)
     {
 
+        $centerPostcodeConstantObject = SegmentConstant::where('reference', SegmentConstants::CENTER_POSTCODE)->get();
+        $centerPostcodeConstant = $centerPostcodeConstantObject->isEmpty() ? [] : (array)$centerPostcodeConstantObject->first()->value;
+        $postcodeArea = in_array($this->postcode, $centerPostcodeConstant) ? 'CENTER_POSTCODE' : '';
+        
+        $outstationPostcodeConstantObject = SegmentConstant::where('reference', SegmentConstants::OUTSTATION_POSTCODE)->get();
+        $outstationPostcodeConstant = $outstationPostcodeConstantObject->isEmpty() ? [] : (array)$outstationPostcodeConstantObject->first()->value;
+        in_array($this->postcode, $outstationPostcodeConstant) ? $postcodeArea = 'OUTSTATION_POSTCODE' : '';
+
         return [
             'id' => $this->id,
             'reference' => $this->reference,
@@ -25,6 +35,7 @@ class AddressResource extends JsonResource
             'district' => $this->district,
             'state' => $this->state,
             'post_code' => $this->postcode,
+            'post_code_area' => $postcodeArea,
             'country' => $this->country,
             'default' => (int) $this->default,
             'status' => (int) $this->status,
diff --git a/app/Http/Resources/DistrictResource.php b/app/Http/Resources/DistrictResource.php
index 0f5a01dc..a922f2ed 100644
--- a/app/Http/Resources/DistrictResource.php
+++ b/app/Http/Resources/DistrictResource.php
@@ -20,6 +20,7 @@ class DistrictResource extends JsonResource
             'state' => $this->state,
             'country' => $this->country,
             'postcode' => $this->postcode,
+            'postcodeArray' => PostcodeResource::collection(json_decode($this->postcode)),
         ];
     }
 }
diff --git a/app/Http/Resources/PostcodeResource.php b/app/Http/Resources/PostcodeResource.php
new file mode 100644
index 00000000..92c9abb0
--- /dev/null
+++ b/app/Http/Resources/PostcodeResource.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+use App\Models\SegmentConstant;
+use App\Classes\ValueObjects\Constants\SegmentConstants;
+
+
+class PostcodeResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        $centerPostcodeConstantObject = SegmentConstant::where('reference', SegmentConstants::CENTER_POSTCODE)->get();
+        $centerPostcodeConstant = $centerPostcodeConstantObject->isEmpty() ? [] : (array)$centerPostcodeConstantObject->first()->value;
+        $postcodeArea = in_array($this->resource, $centerPostcodeConstant) ? 'CENTER_POSTCODE' : '';
+        
+        $outstationPostcodeConstantObject = SegmentConstant::where('reference', SegmentConstants::OUTSTATION_POSTCODE)->get();
+        $outstationPostcodeConstant = $outstationPostcodeConstantObject->isEmpty() ? [] : (array)$outstationPostcodeConstantObject->first()->value;
+        in_array($this->resource, $outstationPostcodeConstant) ? $postcodeArea = 'OUTSTATION_POSTCODE' : '';
+
+        return [
+            'postcode' => $this->resource,
+            'postcodeArea' => $postcodeArea,
+        ];
+    }
+}
diff --git a/resources/assets/vue/components/containers/elements/PackingListComponent.vue b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
index 1139f971..991eccc5 100644
--- a/resources/assets/vue/components/containers/elements/PackingListComponent.vue
+++ b/resources/assets/vue/components/containers/elements/PackingListComponent.vue
@@ -18,7 +18,7 @@
                 {{item.order.address.street_one+' '+(item.order.address.street_two ? item.order.address.street_two : '')+', '+ item.order.address.district.name+', '+item.order.address.post_code+' '+item.order.address.state.name+', '+item.order.address.country.name}}<br>{{item.order.address.remark ? item.order.address.remark.content: ''}}
                 <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="item.order.address.post_code"></declare-postcode-area-form-component>
+                    <declare-postcode-area-form-component :data="{postcode: item.order.address.post_code, postcodeArea: item.order.address.post_code_area}"></declare-postcode-area-form-component>
                 </modal-component>
             </div>
         </div>
diff --git a/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue b/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue
index e04d8e5b..e4e464d0 100644
--- a/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue
+++ b/resources/assets/vue/components/containers/forms/DeclarePostcodeAreaFormComponent.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
+    <div class="row" style="width: 450px; margin: auto;">
         <div class="col bg-white padding-40 b-rad-lg">
             <div class="row m-b-10">
                 <div class="col">
-                    <h2 class="text-center text-complete bold">{{data}}</h2>
+                    <h2 class="text-center text-complete bold">{{data.postcode}}</h2>
                     <p class="text-center" v-show="parameters.reference=== ''">This postcode is yet to be declare. Plase choose the area.</p>
                 </div>
             </div>
@@ -45,7 +45,7 @@
     export default {
         props: {
             data: {
-                type: String,
+                type: Object,
                 required: false
             },
             section: {
@@ -55,8 +55,8 @@
         data() {
             return {
                 parameters: {
-                    reference: '',
-                    postcode: this.data
+                    reference: this.data.postcodeArea,
+                    postcode: this.data.postcode
                 } 
             };
         },
diff --git a/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue b/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
index efa2a171..fd9df462 100644
--- a/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
+++ b/resources/assets/vue/components/settings/elements/ListPostcodeComponent.vue
@@ -15,7 +15,19 @@
                     </div>
                     <div class="row">
                         <div class="col">
-                            <div class="font-heading all-caps">{{data}}</div>
+                            <div class="font-heading all-caps">{{data.postcode}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row">
+                        <div class="col-auto p-r-10">
+                            <div class="font-heading all-caps fs-8 muted">Location</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="font-heading all-caps">{{data.postcodeArea == '' ? '-' : data.postcodeArea.replaceAll('_', ' ') }}</div>
                         </div>
                     </div>
                 </div>
@@ -40,7 +52,7 @@
     export default {
         props: {
             data: {
-                type: String,
+                type: Object,
                 required: false
             },
             section: {
diff --git a/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue b/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue
index f16c4981..e513a24c 100644
--- a/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/EditStateChargesFormComponent.vue
@@ -23,7 +23,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.segment.constant.update', 1), 'put', section, true, true)">Confirm</div>
+                    <div class="btn btn-primary w-100 btn-lg" @click="submitForm()">Confirm</div>
                 </div>
             </div>
         </div>
@@ -65,6 +65,11 @@
                 }
             }
         },
+        methods: {
+            submitForm(){
+                this.submit(this.route('api.segment.constant.update', 1), 'put', this.section, true, true)
+            },
+        },
         mixins: [modalFormHandler]
     }
 
diff --git a/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue b/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue
index e9ee65dd..e72dacb4 100644
--- a/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/EditWarehouseChargesFormComponent.vue
@@ -17,7 +17,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.segment.constant.update', 1), 'put', section, true, true)">Confirm</div>
+                    <div class="btn btn-primary w-100 btn-lg" @click="submitForm()">Confirm</div>
                 </div>
             </div>
         </div>
@@ -55,6 +55,11 @@
                 }
             }
         },
+        methods: {
+            submitForm(){
+                this.submit(this.route('api.segment.constant.update', 1), 'put', this.section, true, true)
+            },
+        },
         mixins: [modalFormHandler]
     }
 
diff --git a/resources/views/pages/settings.blade.php b/resources/views/pages/settings.blade.php
index 40815289..7426821c 100644
--- a/resources/views/pages/settings.blade.php
+++ b/resources/views/pages/settings.blade.php
@@ -310,7 +310,7 @@
                                         <div class="col">
                                             <list-component section="allPostcodesSection" :endpoint="route('api.address.district.list')" :options="{country_id: 1}">
                                                 <template slot="list" slot-scope="{data}">
-                                                    <list-postcode-component :data="item" v-for="item in JSON.parse(data.postcode)"></list-postcode-component>
+                                                    <list-postcode-component :data="item" v-for="item in data.postcodeArray"></list-postcode-component>
                                                 </template>
                                             </list-component>
                                         </div>