diff --git a/app/Http/Resources/AddressResource.php b/app/Http/Resources/AddressResource.php
index f86d5c29..a4df7e4f 100644
--- a/app/Http/Resources/AddressResource.php
+++ b/app/Http/Resources/AddressResource.php
@@ -41,6 +41,7 @@ class AddressResource extends JsonResource
             'status' => (int) $this->status,
             'contact' => new ContactResource($this->contacts->first()),
             'remark' => new RemarkResource($this->remarks->first()),
+            'type' => $this->type,
             $this->mergeWhen($this->relationLoaded('owner'), [
                 'owner' => $this->when($this->owner instanceof Order, [
                     'reference' => $this->owner->reference,
diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
index 4d9d28a2..a56c9f2d 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
@@ -51,9 +51,18 @@
                             <div class="btn bg-grey no-border" @click="expanded = !expanded" v-if="['Pending Approval', 'Pending Payment'].includes(invoice_status)">
                                 <i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
                             </div>
-                            <div v-if="item.order">
-                                <div v-if="!item.shippng_transaction">
-                                    <div class="btn btn-outline-primary btn-lg pointer" @click="generateInvoice()">Generate Invoice</div>
+                            <div v-if="item.order"> <!-- used to filter out 'Unclaimed Packing List' -->
+                                <div v-if="!item.shippng_transaction"> <!-- only show this on 'PENDING INVOICE' and 'PENDING APPROVAL' tab -->
+                                    <!-- <div v-if="item.order.address"> -->
+                                    <div v-if="!item.order.address"> <!-- if order does not have address --> 
+                                        <div class="btn btn-primary btn-lg pointer requestModal" data-type="billingAddressComponent">Add Delivery Address</div>
+                                        <modal-component class="animate__animated animate__fast animate__fadeIn" size="extra-large" styleType="fill-in" type="billingAddressComponent">
+                                            <billing-address-form-component :section="section" :data="data"></billing-address-form-component>
+                                        </modal-component>
+                                    </div>
+                                    <div v-else>
+                                        <div class="btn btn-outline-primary btn-lg pointer" @click="generateInvoice()">Generate Invoice</div>
+                                    </div>
                                 </div>
                             </div>
                             <div class="btn bg-grey no-border muted requestModal" v-if="item.shippng_transaction && invoice_status == 'Pending Approval'" data-type="confirmInvoice">
diff --git a/resources/assets/vue/components/paymentsBilling/forms/BillingAddressFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/BillingAddressFormComponent.vue
new file mode 100644
index 00000000..c21a88b4
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/forms/BillingAddressFormComponent.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="row bg-white padding-25">
+        <div class="col">
+            <div class="row m-b-20 text-info">
+                <div class="col text-center">
+                    <h3>Please select the address where you want to receive this order</h3>
+                </div>
+            </div>
+            <div class="row justify-content-center m-b-15" v-if="error">
+                <div class="col-10">
+                    <small class="text-danger">{{error}}</small>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col col-md-10">
+                    <list-component style="min-height: 50px;" class="m-b-20" section="addressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 5, HasMorphCompanyModule: data.order.company_module.id}">
+                        <template slot="list" slot-scope="{data}">
+                            <select-address-component :data="data" :value="parameters.address_id" v-model="parameters.address_id"></select-address-component>
+                        </template>
+                    </list-component>
+                    <div class="row m-b-10 animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
+                        <div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': !parameters.address_id, 'b-grey': parameters.address_id}" @click="parameters.address_id = null">
+                            <div class="row align-items-center">
+                                <div class="col-auto p-r-0">
+                                    <i class="fa fs-20 p-t-5" :class="{'fa-circle-o': parameters.address_id, 'fa-check-circle': !parameters.address_id, 'text-primary': !parameters.address_id}"></i>
+                                </div>
+                                <div class="col-auto semi-bold">New Address</div>
+                            </div>
+                            <div class="row" v-show="!parameters.address_id">
+                                <div class="col">
+                                    <address-form-component :id="data.order.company_module.id" section="addressList" @input="parameters.address_id = $event"></address-form-component>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row m-t-15 justify-content-center">
+                <div class="col-6 col-md-4 p-r-5">
+                    <div class="btn btn-default w-100 btn-lg b-rad-none" data-dismiss="modal">Cancel</div>
+                </div>
+                <div class="col-6 col-md-4 p-l-5">
+                    <!-- <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 class="btn btn-primary w-100 btn-lg">Confirm</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        data() {
+            return {
+                error: '',
+                parameters : {
+                    warehouse_id: '',
+                    address_id: '',
+                }
+            }
+        },
+        mixins: [modalFormHandler]
+    }
+
+</script>
\ No newline at end of file