diff --git a/app/Classes/Modules/Addresses/ControllersLogic/SetAddressToDefaultLogic.php b/app/Classes/Modules/Addresses/ControllersLogic/SetAddressToDefaultLogic.php
index 2f94809b..1d6f81bb 100644
--- a/app/Classes/Modules/Addresses/ControllersLogic/SetAddressToDefaultLogic.php
+++ b/app/Classes/Modules/Addresses/ControllersLogic/SetAddressToDefaultLogic.php
@@ -9,6 +9,8 @@ use App\Classes\Modules\Addresses\Standards\Rules\CanUpdateAddress;
 use App\Classes\Modules\Addresses\Services\ResetsAddressesDefault;
 use App\Classes\Modules\Addresses\Services\SetsAddressToDefault;
 
+use App\Classes\Modules\Companies\Services\FetchesCompanyModule;
+
 use App\Models\Address;
 use ErrorException;
 use Illuminate\Http\JsonResponse;
@@ -38,17 +40,21 @@ class SetAddressToDefaultLogic extends AbstractControllerLogic
     /** @var SetsAddressToDefault*/
     private $setsAddressToDefault;
 
+    /** @var FetchesCompanyModule*/
+    private $fetchesCompanyModule;
+
     /**
      * SetAddressToDefaultLogic constructor.
      * @param ResetsAddressesDefault $resetsAddressesDefault
      * @param FetchesAddress $fetchesAddress
      * @param SetsAddressToDefault $setsAddressToDefault
      */
-    public function __construct(ResetsAddressesDefault $resetsAddressesDefault, FetchesAddress $fetchesAddress, SetsAddressToDefault $setsAddressToDefault)
+    public function __construct(ResetsAddressesDefault $resetsAddressesDefault, FetchesAddress $fetchesAddress, SetsAddressToDefault $setsAddressToDefault , FetchesCompanyModule $fetchesCompanyModule)
     {
         $this->resetsAddressesDefault = $resetsAddressesDefault;
         $this->fetchesAddress = $fetchesAddress;
         $this->setsAddressToDefault = $setsAddressToDefault;
+        $this->fetchesCompanyModule = $fetchesCompanyModule;
     }
 
     /**
@@ -63,7 +69,9 @@ class SetAddressToDefaultLogic extends AbstractControllerLogic
 
         $address = $this->fetchesAddress->execute(['id' => $request->route('id')]);
 
-        $this->resetsAddressesDefault->execute($address);
+        $companyModule = $this->fetchesCompanyModule->execute(['id' => $request->input('company_module_id')]);
+
+        $this->resetsAddressesDefault->execute($companyModule);
 
         return $this->resourceResponse(new AddressResource($this->setsAddressToDefault->execute($address)));
     }
diff --git a/app/Classes/Modules/Addresses/Services/ResetsAddressesDefault.php b/app/Classes/Modules/Addresses/Services/ResetsAddressesDefault.php
index b9f6346e..1d441326 100644
--- a/app/Classes/Modules/Addresses/Services/ResetsAddressesDefault.php
+++ b/app/Classes/Modules/Addresses/Services/ResetsAddressesDefault.php
@@ -4,6 +4,7 @@ namespace App\Classes\Modules\Addresses\Services;
 
 use App\Classes\General\Eloquent\AbstractUpdateRecord;
 use App\Models\Address;
+use App\Models\CompanyModule;
 
 class ResetsAddressesDefault extends AbstractUpdateRecord
 {
@@ -12,8 +13,8 @@ class ResetsAddressesDefault extends AbstractUpdateRecord
      * @param Address $address
      * @return void
      */
-    public function execute(Address $address)
+    public function execute(CompanyModule $companyModule)
     {
-        $address->company->addresses()->update(['billing' => false]);
+        $companyModule->addresses()->update(['default' => false]);
     }
 }
diff --git a/app/Classes/Modules/Addresses/Services/SetsAddressToDefault.php b/app/Classes/Modules/Addresses/Services/SetsAddressToDefault.php
index 07d2a2fc..fad74a76 100644
--- a/app/Classes/Modules/Addresses/Services/SetsAddressToDefault.php
+++ b/app/Classes/Modules/Addresses/Services/SetsAddressToDefault.php
@@ -15,7 +15,7 @@ class SetsAddressToDefault extends AbstractUpdateRecord
      */
     public function execute(Address $model)
     {
-        $model->billing = true;
+        $model->default = true;
 
         return $this->handler($model);
     }
diff --git a/app/Http/Resources/AddressResource.php b/app/Http/Resources/AddressResource.php
index 4e545092..342c194e 100644
--- a/app/Http/Resources/AddressResource.php
+++ b/app/Http/Resources/AddressResource.php
@@ -22,7 +22,7 @@ class AddressResource extends JsonResource
             'state' => $this->state,
             'post_code' => $this->postcode,
             'country' => $this->country,
-            'billing' => (int) $this->billing
+            'default' => (int) $this->default
         ];
     }
 }
diff --git a/app/Models/Address.php b/app/Models/Address.php
index 15340b3c..e915ef41 100644
--- a/app/Models/Address.php
+++ b/app/Models/Address.php
@@ -27,6 +27,8 @@ class Address extends AbstractModel
     
     protected $dates = ['deleted_at'];
 
+    protected $fillable = ['default'];
+
     /**
      * @return BelongsTo
      */
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
diff --git a/resources/assets/vue/components/address/sections/AddressListComponent.vue b/resources/assets/vue/components/address/sections/AddressListComponent.vue
new file mode 100644
index 00000000..713b02e8
--- /dev/null
+++ b/resources/assets/vue/components/address/sections/AddressListComponent.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="parentContainer">
+        <div class="row">
+            <div class="col">
+                <div class="row m-b-20">
+                    <div class="col">
+                        <div class="font-heading fs-18 text-primary all-caps m-b-50">Select Address</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row  m-b-15">
+            <div class="col">
+                <loading-component style="height: 200px; top: 0;" color="success" v-show="isLoading"></loading-component>
+                <list-component v-show="!isLoading" :section="section" :endpoint="route('api.address.list')" :options="{per_page: 5, HasMorphCompanyModule :company_module_id}">
+                    <template slot="list" slot-scope="{data}">
+                        <div class="row shadow p-3 mb-3 bg-white rounded">
+                            <div class="col">
+                                <div class="row">
+                                    <div class="col">
+                                        <address-component :section="section" v-bind:key="data.id" :data="data" :default="data.default"></address-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </list-component>
+            </div>
+        </div>
+
+        <div class="row align-items-center justify-content-center">
+            <div class="col">
+                <div class="row">
+                    <div class="col">
+                        <button class="btn btn-sm btn-primary b-rad-none all-caps requestModal" data-type="addAddress">Add New Address</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addAddress">
+            <new-edit-address-form-component :section="section" :address_id="-1"></new-edit-address-form-component>
+        </modal-component>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            section: {
+                default: 'addressList'
+            },
+            company_module_id: {
+                type: Number,
+                default: 1
+            },
+        },
+        data(){
+            return {
+                isLoading: false,
+                item:{
+                    id:null
+                },
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/addresses/index.blade.php b/resources/views/pages/addresses/index.blade.php
index 5bf256c2..c7213ce3 100644
--- a/resources/views/pages/addresses/index.blade.php
+++ b/resources/views/pages/addresses/index.blade.php
@@ -1,4 +1,6 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-    {{-- @include('pages.dashboards.customer') --}}
-@endsection
\ No newline at end of file
+    <address-list-component v-show="!$store.getters.isShowing('createOrderForm')" section="addressList"
+        :company_module_id="$store.getters.getCompanyModuleId" completedOrder="">
+    </address-list-component>
+@endsection