diff --git a/resources/assets/vue/components/address/elements/AddressComponent.vue b/resources/assets/vue/components/address/elements/AddressComponent.vue
new file mode 100644
index 00000000..a85f3758
--- /dev/null
+++ b/resources/assets/vue/components/address/elements/AddressComponent.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="row m-l-0 m-r-0 m-b-10 bg-white parentContainer">
+		<div class="col">
+			<div class="row align-items-center justify-content-center p-t-10 p-b-10">
+				<div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <span class="fs-15">{{addressBook.street_one}} {{addressBook.street_two}} {{addressBook.city}} {{addressBook.state.name}} {{addressBook.post_code}} {{addressBook.country.name}}</span>
+                        </div>
+                    </div>
+				</div>
+				<div class="col-auto b-l b-grey">
+					<div class="row h-100">
+						<div class="col">
+							<div class="row no-margin">
+                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest m-r-5 ml-auto">
+                                    <a class="requestModal pointer" data-type="deleteAddress">
+                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
+                                            <div class="col">
+                                                <i class="fa fa-times text-danger"></i>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                                <div class="col-auto text-right p-t-10 p-b-10 m-r-5" :class="[{'bg-warning': isDefault}, {'bg-master-lightest': !isDefault}]">
+                                    <a :class="[{'requestModal': !isDefault}, {'pointer': !isDefault}]" data-type="defaultAddress">
+                                        <div data-toggle="tooltip" class="row align-items-center justify-content-center" :class="{'link': !isDefault}">
+                                            <div class="col">
+                                                <i class="fa fa-star" :class="[{'text-white': isDefault}, {'text-master-light': !isDefault}]"></i>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+
+                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest">
+                                    <a class="requestModal pointer" data-type="editAddress">
+                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
+                                            <div class="col">
+                                                <i class="fa fa-pencil text-info"></i>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+						</div>
+					</div>
+				</div>
+			</div>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editAddress">
+                <new-edit-address-form-component :populateWith="addressBook" :section="section" :address_id="-1" :isEdit=true></new-edit-address-form-component>
+            </modal-component>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAddress">
+                <delete-address-form-component :data="addressBook" :section="section" class="text-center"></delete-address-form-component>
+            </modal-component>
+
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defaultAddress">
+                <set-default-address-form-component :data="addressBook" :section="section" class="text-center"></set-default-address-form-component>
+            </modal-component>
+
+		</div>
+	</div>
+</template>
+
+<script>
+    export default {
+        props: {
+            section: {
+                default: 'addressSection'
+            },
+            'data': {
+                type: Object,
+                required: true
+            }
+        },
+        data() {
+            return {
+                addressBookx: this.data,
+                isDefault: this.data.default,
+                isEditing: false,
+            }
+        },
+        watch: {
+            'data.default': function() {
+                this.isDefault = this.data.default;
+            }
+        },
+
+        computed: {
+            addressBook:{
+                get() {
+                     this.data.company_module_id = this.$store.getters.getCompanyModuleId;
+                     return this.data;
+                },
+                set(val) {
+                }
+            },
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/address/forms/DeleteAddressFormComponent.vue b/resources/assets/vue/components/address/forms/DeleteAddressFormComponent.vue
new file mode 100644
index 00000000..9fbc94a1
--- /dev/null
+++ b/resources/assets/vue/components/address/forms/DeleteAddressFormComponent.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to delete this address?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.address.delete', item.id), 'delete', section, true, true)">Delete</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler]
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/address/forms/NewEditAddressFormComponent.vue b/resources/assets/vue/components/address/forms/NewEditAddressFormComponent.vue
new file mode 100644
index 00000000..8f2fad2b
--- /dev/null
+++ b/resources/assets/vue/components/address/forms/NewEditAddressFormComponent.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="row p-t-25 text-left">
+        <div class="col">
+            <div class="shadow p-3 bg-white rounded">
+                <div class="d-flex flex-row align-items-center">
+                    <input v-show="!isEdit" type="radio" name="answer" id="answer-2"
+                        v-model="computeAddressId"
+                        :value='-1'
+                        :checked="new_address == true"
+                    >
+                    <label for="answer-2" data-question-number="2" class="mb-0 pl-2 pl-md-2 bold">{{isEdit?'Edit ':'Add New '}}Address</label>
+                </div>
+                <div class="col-0" v-if="computeAddressId==-1">
+                    <div class="d-flex flex-column flex-sm-row">
+                        <div class="col px-0 pr-sm-2">
+                            <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
+                            <label class="text-primary fs-12">District</label>
+                            <div class="controls">
+                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                            </div>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col px-0 pl-sm-2">
+                            <validation-wrapper-component :validator="$v.parameters.post_code">
+                            <label class="text-primary fs-12">Post Code</label>
+                            <div class="controls">
+                                <input type="text" class="form-control fs-12" v-model="parameters.post_code">
+                            </div>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+
+                    <div class="d-flex flex-column flex-sm-row">
+                        <div class="col px-0 pr-sm-2">
+                            <validation-wrapper-component :validator="$v.parameters.street_one">
+                            <label class="text-primary fs-12">Street one</label>
+                            <div class="controls">
+                                <input type="text" class="form-control fs-12"
+                                v-model="parameters.street_one"
+                                >
+                            </div>
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col px-0 pl-sm-2">
+                            <validation-wrapper-component :validator="$v.parameters.street_two">
+                            <label class="text-primary fs-12">Street two</label>
+                            <div class="controls">
+                                <input type="text" class="form-control fs-12"
+                                v-model="parameters.street_two"
+                                >
+                            </div>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+
+                    <div class="row  m-t-25">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col text-right">
+                                    <button type="button" class="btn btn-sm btn-primary b-rad-none" @click="submitForm()">{{isEdit?'Update':'Create'}}</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { required ,requiredIf } from "vuelidate/lib/validators";
+    export default {
+        props: {
+            section: {
+                default: 'addressForm'
+            },
+            isEdit:{
+                default: false
+            },
+            populateWith: {
+               type: Object,
+               default: () => ({ empty: true })
+             },
+            address_id: null
+        },
+        watch: {
+        },
+        data() {
+			return {
+                parameters : {
+                    company_module_id:this.$store.getters.getCompanyModuleId,
+                    street_one: '',
+                    street_two: '',
+                    district_id: '',
+                    post_code: '',
+				},
+                new_address:false
+
+            }
+		},
+
+        computed: {
+            computeAddressId:{
+                get() {
+                    if (!this.populateWith.empty) {
+                    this.parameters = this.populateWith;
+                    this.parameters.district_id = this.populateWith.district.id;
+                    this.parameters.id = this.populateWith.id;
+                    }
+                    return this.address_id;
+                },
+                set(val) {
+                    this.$emit('input', val);
+                }
+
+            },
+
+        },
+
+        validations: {
+            parameters: {
+                street_one: { required:requiredIf(function () { return this.computeAddressId === -1 }) },
+                street_two: {},
+                district_id: { required },
+                post_code: { required },
+            }
+        },
+        methods:{
+            submitForm(){
+                if(!this.validate()){
+                    return;
+                }
+                this.isLoading = true;
+                this.isEdit?this.submit(route('api.address.update', this.parameters.id), 'put', this.section, true, true):this.submit((this.route('api.address.create')), 'post', 'addressList', true, true);
+            },
+            successHandler(response){
+                this.$emit('input', response.payload.data.id);
+                this.resetForm();
+                this.closeModal();
+                this.isLoading = false;
+                this.updateList();
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/vue/components/address/forms/SetDefaultAddressFormComponent.vue b/resources/assets/vue/components/address/forms/SetDefaultAddressFormComponent.vue
new file mode 100644
index 00000000..e9e4809c
--- /dev/null
+++ b/resources/assets/vue/components/address/forms/SetDefaultAddressFormComponent.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to set this address as the default?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.address.default', item.id , item.companyModuleId), 'put', section, true, true)">Set Default</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file