diff --git a/packages/Webkul/Checkout/src/Cart.php b/packages/Webkul/Checkout/src/Cart.php
index 84cfe4534..b426d37d2 100755
--- a/packages/Webkul/Checkout/src/Cart.php
+++ b/packages/Webkul/Checkout/src/Cart.php
@@ -11,6 +11,7 @@ use Webkul\Product\Repositories\ProductRepository;
 use Webkul\Tax\Repositories\TaxCategoryRepository;
 use Webkul\Checkout\Models\CartPayment;
 use Webkul\Customer\Repositories\WishlistRepository;
+use Webkul\Customer\Repositories\CustomerAddressRepository;
 
 /**
  * Facades handler for all the methods to be implemented in Cart.
@@ -70,6 +71,13 @@ class Cart {
      */
     protected $wishlist;
 
+    /**
+     * CustomerAddressRepository model
+     *
+     * @var mixed
+     */
+     protected $customerAddress;
+
     /**
      * Suppress the session flash messages
      */
@@ -78,12 +86,13 @@ class Cart {
     /**
      * Create a new controller instance.
      *
-     * @param  Webkul\Checkout\Repositories\CartRepository        $cart
-     * @param  Webkul\Checkout\Repositories\CartItemRepository    $cartItem
-     * @param  Webkul\Checkout\Repositories\CartAddressRepository $cartAddress
-     * @param  Webkul\Customer\Repositories\CustomerRepository    $customer
-     * @param  Webkul\Product\Repositories\ProductRepository      $product
-     * @param  Webkul\Product\Repositories\TaxCategoryRepository  $taxCategory
+     * @param  Webkul\Checkout\Repositories\CartRepository            $cart
+     * @param  Webkul\Checkout\Repositories\CartItemRepository        $cartItem
+     * @param  Webkul\Checkout\Repositories\CartAddressRepository     $cartAddress
+     * @param  Webkul\Customer\Repositories\CustomerRepository        $customer
+     * @param  Webkul\Product\Repositories\ProductRepository          $product
+     * @param  Webkul\Product\Repositories\TaxCategoryRepository      $taxCategory
+     * @param  Webkul\Product\Repositories\CustomerAddressRepository  $customerAddress
      * @return void
      */
     public function __construct(
@@ -93,7 +102,8 @@ class Cart {
         CustomerRepository $customer,
         ProductRepository $product,
         TaxCategoryRepository $taxCategory,
-        WishlistRepository $wishlist
+        WishlistRepository $wishlist,
+        CustomerAddressRepository $customerAddress
     )
     {
         $this->customer = $customer;
@@ -110,6 +120,8 @@ class Cart {
 
         $this->wishlist = $wishlist;
 
+        $this->customerAddress = $customerAddress;
+
         $this->suppressFlash = false;
     }
 
@@ -617,6 +629,40 @@ class Cart {
         $shippingAddress = $data['shipping'];
         $billingAddress['cart_id'] = $shippingAddress['cart_id'] = $cart->id;
 
+        if (isset($data['billing']['address_id'])) {
+            $address = $this->customerAddress->findOneWhere(['id'=> $data['billing']['address_id']])->toArray();
+            $billingAddress['first_name'] = auth()->guard('customer')->user()->first_name;
+            $billingAddress['last_name'] = auth()->guard('customer')->user()->last_name;
+            $billingAddress['email'] = auth()->guard('customer')->user()->email;
+            $billingAddress['address1'] = $address['address1'];
+            $billingAddress['address2'] = $address['address2'];
+            $billingAddress['country'] = $address['country'];
+            $billingAddress['state'] = $address['state'];
+            $billingAddress['city'] = $address['city'];
+            $billingAddress['postcode'] = $address['postcode'];
+            $billingAddress['phone'] = $address['phone'];
+        }
+
+        if (isset($data['shipping']['address_id'])) {
+            $address = $this->customerAddress->findOneWhere(['id'=> $data['shipping']['address_id']])->toArray();
+            $shippingAddress['first_name'] = auth()->guard('customer')->user()->first_name;
+            $shippingAddress['last_name'] = auth()->guard('customer')->user()->last_name;
+            $shippingAddress['email'] = auth()->guard('customer')->user()->email;
+            $shippingAddress['address1'] = $address['address1'];
+            $shippingAddress['address2'] = $address['address2'];
+            $shippingAddress['country'] = $address['country'];
+            $shippingAddress['state'] = $address['state'];
+            $shippingAddress['city'] = $address['city'];
+            $shippingAddress['postcode'] = $address['postcode'];
+            $shippingAddress['phone'] = $address['phone'];
+        }
+
+        // if (auth()->guard('customer')->check()) {
+        //     if ($data['billing']['use_for_shipping'] == true) {
+        //         $shippingAddress = $billingAddress;
+        //     }
+        // }
+
         if ($billingAddressModel = $cart->billing_address) {
             $this->cartAddress->update($billingAddress, $billingAddressModel->id);
 
@@ -814,7 +860,7 @@ class Cart {
                     }
                 }
             }
-            
+
             return true;
         }
     }
diff --git a/packages/Webkul/Checkout/src/Http/Requests/CustomerAddressForm.php b/packages/Webkul/Checkout/src/Http/Requests/CustomerAddressForm.php
index ce619e8d6..0ead62731 100755
--- a/packages/Webkul/Checkout/src/Http/Requests/CustomerAddressForm.php
+++ b/packages/Webkul/Checkout/src/Http/Requests/CustomerAddressForm.php
@@ -26,30 +26,42 @@ class CustomerAddressForm extends FormRequest
      */
     public function rules()
     {
-        $this->rules = [
-            'billing.first_name' => ['required'],
-            'billing.last_name' => ['required'],
-            'billing.email' => ['required'],
-            'billing.address1' => ['required'],
-            'billing.city' => ['required'],
-            'billing.state' => ['required'],
-            'billing.postcode' => ['required'],
-            'billing.phone' => ['required'],
-            'billing.country' => ['required']
-        ];
+        if (isset($this->get('billing')['address_id'])) {
+            $this->rules = [
+                'billing.address_id' => ['required'],
+            ];
+        } else {
+            $this->rules = [
+                'billing.first_name' => ['required'],
+                'billing.last_name' => ['required'],
+                'billing.email' => ['required'],
+                'billing.address1' => ['required'],
+                'billing.city' => ['required'],
+                'billing.state' => ['required'],
+                'billing.postcode' => ['required'],
+                'billing.phone' => ['required'],
+                'billing.country' => ['required']
+            ];
+        }
 
         if (isset($this->get('billing')['use_for_shipping']) && !$this->get('billing')['use_for_shipping']) {
-            $this->rules = array_merge($this->rules, [
-                'shipping.first_name' => ['required'],
-                'shipping.last_name' => ['required'],
-                'shipping.email' => ['required'],
-                'shipping.address1' => ['required'],
-                'shipping.city' => ['required'],
-                'shipping.state' => ['required'],
-                'shipping.postcode' => ['required'],
-                'shipping.phone' => ['required'],
-                'shipping.country' => ['required']
-            ]);
+            if (isset($this->get('shipping')['address_id'])) {
+                $this->rules = array_merge($this->rules, [
+                    'shipping.address_id' => ['required'],
+                ]);
+            } else {
+                $this->rules = array_merge($this->rules, [
+                    'shipping.first_name' => ['required'],
+                    'shipping.last_name' => ['required'],
+                    'shipping.email' => ['required'],
+                    'shipping.address1' => ['required'],
+                    'shipping.city' => ['required'],
+                    'shipping.state' => ['required'],
+                    'shipping.postcode' => ['required'],
+                    'shipping.phone' => ['required'],
+                    'shipping.country' => ['required']
+                ]);
+            }
         }
 
         return $this->rules;
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index 2d89c9907..ee8f5c9c8 100755
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -9,7 +9,7 @@ return [
         'wishlist' => 'Wishlist',
         'orders' => 'Orders',
     ],
-    
+
     'common' => [
         'error' => 'Something went wrong, please try again later.'
     ],
@@ -421,7 +421,8 @@ return [
             'billing-address' => 'Billing Address',
             'shipping-address' => 'Shipping Address',
             'contact' => 'Contact',
-            'place-order' => 'Place Order'
+            'place-order' => 'Place Order',
+            'new-address' => 'Add New Address'
         ],
 
         'total' => [
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
index cf1198d82..86d9fec57 100755
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
@@ -117,17 +117,6 @@
         var paymentHtml = '';
         var reviewHtml = '';
         var summaryHtml = Vue.compile(`<?php echo view('shop::checkout.total.summary', ['cart' => $cart])->render(); ?>`);
-        var customerAddress = null;
-        @auth('customer')
-            @if (auth('customer')->user()->default_address)
-                customerAddress = @json(auth('customer')->user()->default_address);
-            @else
-                customerAddress = {};
-            @endif
-            customerAddress.email = "{{ auth('customer')->user()->email }}";
-            customerAddress.first_name = "{{ auth('customer')->user()->first_name }}";
-            customerAddress.last_name = "{{ auth('customer')->user()->last_name }}";
-        @endauth
 
         Vue.component('checkout', {
 
@@ -142,7 +131,7 @@
 
                 address: {
                     billing: {
-                        use_for_shipping: true
+                        use_for_shipping: true,
                     },
 
                     shipping: {},
@@ -154,16 +143,13 @@
 
                 disable_button: false,
 
+                new_shipping_address: false,
+
+                new_billing_address: false,
+
                 countryStates: @json(core()->groupedStatesByCountries())
             }),
 
-            created() {
-                if (customerAddress) {
-                    this.address.billing = customerAddress;
-                    this.address.use_for_shipping = true;
-                }
-            },
-
             methods: {
                 navigateToStep (step) {
                     if (step <= this.completedStep) {
@@ -175,7 +161,7 @@
                 haveStates(addressType) {
                     if (this.countryStates[this.address[addressType].country] && this.countryStates[this.address[addressType].country].length)
                         return true;
-                    
+
                     return false;
                 },
 
@@ -300,6 +286,14 @@
 
                 paymentMethodSelected (paymentMethod) {
                     this.selected_payment_method = paymentMethod;
+                },
+
+                newBillingAddress() {
+                    this.new_billing_address = true;
+                },
+
+                newShippingAddress() {
+                    this.new_shipping_address = true;
                 }
             }
         })
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
index 4934a0b5f..550e4739e 100755
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
@@ -1,300 +1,697 @@
 <form data-vv-scope="address-form">
+    <?php
+        $enableMultiAddress = false;
 
-    <div class="form-container">
+        if(auth()->guard('customer')->check()) {
+            $addresses = auth()->guard('customer')->user()->addresses;
 
-        <div class="form-header">
-            <h1>{{ __('shop::app.checkout.onepage.billing-address') }}</h1>
+            if(isset($addresses) && count($addresses)) {
+                $enableMultiAddress = true;
+            }
+        }
+    ?>
 
-            @guest('customer')
-                <a href="{{ route('customer.session.index') }}" class="btn btn-lg btn-primary">
-                    {{ __('shop::app.checkout.onepage.sign-in') }}
+    @if ($enableMultiAddress)
+        <div class="form-container" v-if="!this.new_billing_address">
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.billing-address') }}</h1>
+
+                <a class="btn btn-lg btn-primary" @click = newBillingAddress()>
+                    {{ __('shop::app.checkout.onepage.new-address') }}
                 </a>
-            @endguest
-        </div>
+            </div>
+            <div class="address-holder">
+                @foreach ($addresses as $address)
+                    <div class="address-card-1">
+                        <div class="details" style="margin-left: 20px">
 
-        <div class="control-group" :class="[errors.has('address-form.billing[first_name]') ? 'has-error' : '']">
-            <label for="billing[first_name]" class="required">
-                {{ __('shop::app.checkout.onepage.first-name') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="billing[first_name]" name="billing[first_name]" v-model="address.billing.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
-                @{{ errors.first('address-form.billing[first_name]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[last_name]') ? 'has-error' : '']">
-            <label for="billing[last_name]" class="required">
-                {{ __('shop::app.checkout.onepage.last-name') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="billing[last_name]" name="billing[last_name]" v-model="address.billing.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
-                @{{ errors.first('address-form.billing[last_name]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[email]') ? 'has-error' : '']">
-            <label for="billing[email]" class="required">
-                {{ __('shop::app.checkout.onepage.email') }}
-            </label>
-
-            <input type="text" v-validate="'required|email'" class="control" id="billing[email]" name="billing[email]" v-model="address.billing.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[email]')">
-                @{{ errors.first('address-form.billing[email]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[address1]') ? 'has-error' : '']">
-            <label for="billing[address1]" class="required">
-                {{ __('shop::app.checkout.onepage.address1') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="billing[address1]" name="billing[address1]" v-model="address.billing.address1" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[address1]')">
-                @{{ errors.first('address-form.billing[address1]') }}
-            </span>
-        </div>
-
-        <div class="control-group">
-            <label for="billing[address2]">
-                {{ __('shop::app.checkout.onepage.address2') }}
-            </label>
-
-            <input type="text" class="control" id="billing[address2]" name="billing[address2]" v-model="address.billing.address2"/>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
-            <label for="billing[city]" class="required">
-                {{ __('shop::app.checkout.onepage.city') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="billing[city]" name="billing[city]" v-model="address.billing.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[city]')">
-                @{{ errors.first('address-form.billing[city]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
-            <label for="billing[state]" class="required">
-                {{ __('shop::app.checkout.onepage.state') }}
-            </label>
-
-
-            <input type="text" v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="!haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
-
-            <select v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
-
-                <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
-
-                <option v-for='(state, index) in countryStates[address.billing.country]' :value="state.code">
-                    @{{ state.default_name }}
-                </option>
-
-            </select>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[state]')">
-                @{{ errors.first('address-form.billing[state]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[postcode]') ? 'has-error' : '']">
-            <label for="billing[postcode]" class="required">
-                {{ __('shop::app.checkout.onepage.postcode') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="billing[postcode]" name="billing[postcode]" v-model="address.billing.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.billing[postcode]')">
-                @{{ errors.first('address-form.billing[postcode]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.billing[country]') ? 'has-error' : '']">
-            <label for="billing[country]" class="required">
-                {{ __('shop::app.checkout.onepage.country') }}
-            </label>
-
-            <select type="text" v-validate="'required'" class="control" id="billing[country]" name="billing[country]" v-model="address.billing.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
-                <option value=""></option>
-
-                @foreach (core()->countries() as $country)
-
-                    <option value="{{ $country->code }}">{{ $country->name }}</option>
+                            <label class="radio-container">
+                                <input type="radio" v-validate="'required'" id="billing[address_id]" name="billing[address_id]" v-model="address.billing.address_id" value="{{ $address->id }}" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.billing-address') }}&quot;"  style="border: 1px solid black;" >
+                                <span class="checkmark" style="left: -20px;
+                                top: 12px;"></span>
+                            </label>
 
+                            <span class="bold">{{ auth()->guard('customer')->user()->name }}</span>
+                            {{ $address->name }}</br>
+                            {{ $address->address1 }}, {{ $address->address2 ? $address->address2 . ',' : '' }}</br>
+                            {{ $address->city }}</br>
+                            {{ $address->state }}</br>
+                            {{ country()->name($address->country) }} {{ $address->postcode }}</br></br>
+                            {{ __('shop::app.customer.account.address.index.contact') }} : {{ $address->phone }}
+                        </div>
+                    </div>
                 @endforeach
-            </select>
 
-            <span class="control-error" v-if="errors.has('address-form.billing[country]')">
-                @{{ errors.first('address-form.billing[country]') }}
-            </span>
+                <div class="control-group" :class="[errors.has('address-form.billing[address_id]') ? 'has-error' : '']">
+                    <span class="control-error" v-if="errors.has('address-form.billing[address_id]')">
+                        @{{ errors.first('address-form.billing[address_id]') }}
+                    </span>
+                </div>
+
+            </div>
+            <div class="control-group">
+                <span class="checkbox">
+                    <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="address.billing.use_for_shipping"/>
+                        <label class="checkbox-view" for="billing[use_for_shipping]"></label>
+                        {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                </span>
+
+            </div>
         </div>
 
-        <div class="control-group" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
-            <label for="billing[phone]" class="required">
-                {{ __('shop::app.checkout.onepage.phone') }}
-            </label>
+        <div class="form-container" v-if="this.new_billing_address">
 
-            <input type="text" v-validate="'required'" class="control" id="billing[phone]" name="billing[phone]" v-model="address.billing.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.billing-address') }}</h1>
 
-            <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
-                @{{ errors.first('address-form.billing[phone]') }}
-            </span>
+                @guest('customer')
+                    <a class="btn btn-lg btn-primary">
+                        {{ __('shop::app.checkout.onepage.sign-in') }}
+                    </a>
+                @endguest
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[first_name]') ? 'has-error' : '']">
+                <label for="billing[first_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.first-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[first_name]" name="billing[first_name]" v-model="address.billing.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
+                    @{{ errors.first('address-form.billing[first_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[last_name]') ? 'has-error' : '']">
+                <label for="billing[last_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.last-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[last_name]" name="billing[last_name]" v-model="address.billing.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
+                    @{{ errors.first('address-form.billing[last_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[email]') ? 'has-error' : '']">
+                <label for="billing[email]" class="required">
+                    {{ __('shop::app.checkout.onepage.email') }}
+                </label>
+
+                <input type="text" v-validate="'required|email'" class="control" id="billing[email]" name="billing[email]" v-model="address.billing.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[email]')">
+                    @{{ errors.first('address-form.billing[email]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[address1]') ? 'has-error' : '']">
+                <label for="billing[address1]" class="required">
+                    {{ __('shop::app.checkout.onepage.address1') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[address1]" name="billing[address1]" v-model="address.billing.address1" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[address1]')">
+                    @{{ errors.first('address-form.billing[address1]') }}
+                </span>
+            </div>
+
+            <div class="control-group">
+                <label for="billing[address2]">
+                    {{ __('shop::app.checkout.onepage.address2') }}
+                </label>
+
+                <input type="text" class="control" id="billing[address2]" name="billing[address2]" v-model="address.billing.address2"/>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
+                <label for="billing[city]" class="required">
+                    {{ __('shop::app.checkout.onepage.city') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[city]" name="billing[city]" v-model="address.billing.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[city]')">
+                    @{{ errors.first('address-form.billing[city]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
+                <label for="billing[state]" class="required">
+                    {{ __('shop::app.checkout.onepage.state') }}
+                </label>
+
+
+                <input type="text" v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="!haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
+
+                <select v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
+
+                    <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
+
+                    <option v-for='(state, index) in countryStates[address.billing.country]' :value="state.code">
+                        @{{ state.default_name }}
+                    </option>
+
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[state]')">
+                    @{{ errors.first('address-form.billing[state]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[postcode]') ? 'has-error' : '']">
+                <label for="billing[postcode]" class="required">
+                    {{ __('shop::app.checkout.onepage.postcode') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[postcode]" name="billing[postcode]" v-model="address.billing.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[postcode]')">
+                    @{{ errors.first('address-form.billing[postcode]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[country]') ? 'has-error' : '']">
+                <label for="billing[country]" class="required">
+                    {{ __('shop::app.checkout.onepage.country') }}
+                </label>
+
+                <select type="text" v-validate="'required'" class="control" id="billing[country]" name="billing[country]" v-model="address.billing.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+                    <option value=""></option>
+
+                    @foreach (core()->countries() as $country)
+
+                        <option value="{{ $country->code }}">{{ $country->name }}</option>
+
+                    @endforeach
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[country]')">
+                    @{{ errors.first('address-form.billing[country]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
+                <label for="billing[phone]" class="required">
+                    {{ __('shop::app.checkout.onepage.phone') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[phone]" name="billing[phone]" v-model="address.billing.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
+                    @{{ errors.first('address-form.billing[phone]') }}
+                </span>
+            </div>
+
+            <div class="control-group">
+                <span class="checkbox">
+                    <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="address.billing.use_for_shipping"/>
+                    <label class="checkbox-view" for="billing[use_for_shipping]"></label>
+                    {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                </span>
+
+            </div>
         </div>
 
-        <div class="control-group">
-            <span class="checkbox">
-                <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="address.billing.use_for_shipping"/>
-                <label class="checkbox-view" for="billing[use_for_shipping]"></label>
-                {{ __('shop::app.checkout.onepage.use_for_shipping') }}
-            </span>
+        <div class="form-container" v-if="!address.billing.use_for_shipping && !this.new_shipping_address">
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.shipping-address') }}</h1>
 
-        </div>
-    </div>
+                <a class="btn btn-lg btn-primary" @click=newShippingAddress()>
+                    {{ __('shop::app.checkout.onepage.new-address') }}
+                </a>
+            </div>
+            <div class="address-holder">
+                @foreach ($addresses as $address)
+                    <div class="address-card-1">
+                        <div class="details" style="margin-left: 20px">
 
-    <div class="form-container" v-if="!address.billing.use_for_shipping">
+                            <label class="radio-container">
+                                <input v-validate="'required'" type="radio" id="shipping[address_id]" name="shipping[address_id]" v-model="address.shipping.address_id" value="{{ $address->id }}"
+                                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-address') }}&quot;"  style="border: 1px solid black;">
+                                <span class="checkmark" style="left: -20px;
+                                top: 12px;"></span>
+                            </label>
 
-        <div class="form-header">
-            <h1>{{ __('shop::app.checkout.onepage.shipping-address') }}</h1>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[first_name]') ? 'has-error' : '']">
-            <label for="shipping[first_name]" class="required">
-                {{ __('shop::app.checkout.onepage.first-name') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="shipping[first_name]" name="shipping[first_name]" v-model="address.shipping.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
-                @{{ errors.first('address-form.shipping[first_name]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[last_name]') ? 'has-error' : '']">
-            <label for="shipping[last_name]" class="required">
-                {{ __('shop::app.checkout.onepage.last-name') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="shipping[last_name]" name="shipping[last_name]" v-model="address.shipping.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[last_name]')">
-                @{{ errors.first('address-form.shipping[last_name]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[email]') ? 'has-error' : '']">
-            <label for="shipping[email]" class="required">
-                {{ __('shop::app.checkout.onepage.email') }}
-            </label>
-
-            <input type="text" v-validate="'required|email'" class="control" id="shipping[email]" name="shipping[email]" v-model="address.shipping.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[email]')">
-                @{{ errors.first('address-form.shipping[email]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[address1]') ? 'has-error' : '']">
-            <label for="shipping[address1]" class="required">
-                {{ __('shop::app.checkout.onepage.address1') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="shipping[address1]" name="shipping[address1]" v-model="address.shipping.address1" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[address1]')">
-                @{{ errors.first('address-form.shipping[address1]') }}
-            </span>
-        </div>
-
-        <div class="control-group">
-            <label for="shipping[address2]">
-                {{ __('shop::app.checkout.onepage.address2') }}
-            </label>
-
-            <input type="text" class="control" id="shipping[address2]" name="shipping[address2]" v-model="address.shipping.address2"/>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[city]') ? 'has-error' : '']">
-            <label for="shipping[city]" class="required">
-                {{ __('shop::app.checkout.onepage.city') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="shipping[city]" name="shipping[city]" v-model="address.shipping.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[city]')">
-                @{{ errors.first('address-form.shipping[city]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[state]') ? 'has-error' : '']">
-            <label for="shipping[state]" class="required">
-                {{ __('shop::app.checkout.onepage.state') }}
-            </label>
-
-
-            <input type="text" v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="!haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
-
-            <select v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
-
-                <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
-
-                <option v-for='(state, index) in countryStates[address.shipping.country]' :value="state.code">
-                    @{{ state.default_name }}
-                </option>
-
-            </select>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
-                @{{ errors.first('address-form.shipping[state]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[postcode]') ? 'has-error' : '']">
-            <label for="shipping[postcode]" class="required">
-                {{ __('shop::app.checkout.onepage.postcode') }}
-            </label>
-
-            <input type="text" v-validate="'required'" class="control" id="shipping[postcode]" name="shipping[postcode]" v-model="address.shipping.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
-
-            <span class="control-error" v-if="errors.has('address-form.shipping[postcode]')">
-                @{{ errors.first('address-form.shipping[postcode]') }}
-            </span>
-        </div>
-
-        <div class="control-group" :class="[errors.has('address-form.shipping[country]') ? 'has-error' : '']">
-            <label for="shipping[country]" class="required">
-                {{ __('shop::app.checkout.onepage.country') }}
-            </label>
-
-            <select type="text" v-validate="'required'" class="control" id="shipping[country]" name="shipping[country]" v-model="address.shipping.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
-                <option value=""></option>
-
-                @foreach (core()->countries() as $country)
-                    <option value="{{ $country->code }}">{{ $country->name }}</option>
+                            <span class="bold">{{ auth()->guard('customer')->user()->name }}</span>
+                            {{ $address->name }}</br>
+                            {{ $address->address1 }}, {{ $address->address2 ? $address->address2 . ',' : '' }}</br>
+                            {{ $address->city }}</br>
+                            {{ $address->state }}</br>
+                            {{ country()->name($address->country) }} {{ $address->postcode }}</br></br>
+                            {{ __('shop::app.customer.account.address.index.contact') }} : {{ $address->phone }}
+                        </div>
+                    </div>
                 @endforeach
-            </select>
 
-            <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
-                @{{ errors.first('address-form.shipping[country]') }}
-            </span>
+                <div class="control-group" :class="[errors.has('address-form.shipping[address_id]') ? 'has-error' : '']">
+                    <span class="control-error" v-if="errors.has('address-form.shipping[address_id]')">
+                        @{{ errors.first('address-form.shipping[address_id]') }}
+                    </span>
+                </div>
+
+            </div>
         </div>
 
-        <div class="control-group" :class="[errors.has('address-form.shipping[phone]') ? 'has-error' : '']">
-            <label for="shipping[phone]" class="required">
-                {{ __('shop::app.checkout.onepage.phone') }}
-            </label>
+        <div class="form-container" v-if="!address.billing.use_for_shipping && this.new_shipping_address">
 
-            <input type="text" v-validate="'required'" class="control" id="shipping[phone]" name="shipping[phone]" v-model="address.shipping.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.shipping-address') }}</h1>
+            </div>
 
-            <span class="control-error" v-if="errors.has('address-form.shipping[phone]')">
-                @{{ errors.first('address-form.shipping[phone]') }}
-            </span>
+            <div class="control-group" :class="[errors.has('address-form.shipping[first_name]') ? 'has-error' : '']">
+                <label for="shipping[first_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.first-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[first_name]" name="shipping[first_name]" v-model="address.shipping.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
+                    @{{ errors.first('address-form.shipping[first_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[last_name]') ? 'has-error' : '']">
+                <label for="shipping[last_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.last-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[last_name]" name="shipping[last_name]" v-model="address.shipping.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[last_name]')">
+                    @{{ errors.first('address-form.shipping[last_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[email]') ? 'has-error' : '']">
+                <label for="shipping[email]" class="required">
+                    {{ __('shop::app.checkout.onepage.email') }}
+                </label>
+
+                <input type="text" v-validate="'required|email'" class="control" id="shipping[email]" name="shipping[email]" v-model="address.shipping.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[email]')">
+                    @{{ errors.first('address-form.shipping[email]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[address1]') ? 'has-error' : '']">
+                <label for="shipping[address1]" class="required">
+                    {{ __('shop::app.checkout.onepage.address1') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[address1]" name="shipping[address1]" v-model="address.shipping.address1" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[address1]')">
+                    @{{ errors.first('address-form.shipping[address1]') }}
+                </span>
+            </div>
+
+            <div class="control-group">
+                <label for="shipping[address2]">
+                    {{ __('shop::app.checkout.onepage.address2') }}
+                </label>
+
+                <input type="text" class="control" id="shipping[address2]" name="shipping[address2]" v-model="address.shipping.address2"/>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[city]') ? 'has-error' : '']">
+                <label for="shipping[city]" class="required">
+                    {{ __('shop::app.checkout.onepage.city') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[city]" name="shipping[city]" v-model="address.shipping.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[city]')">
+                    @{{ errors.first('address-form.shipping[city]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[state]') ? 'has-error' : '']">
+                <label for="shipping[state]" class="required">
+                    {{ __('shop::app.checkout.onepage.state') }}
+                </label>
+
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="!haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
+
+                <select v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
+
+                    <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
+
+                    <option v-for='(state, index) in countryStates[address.shipping.country]' :value="state.code">
+                        @{{ state.default_name }}
+                    </option>
+
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
+                    @{{ errors.first('address-form.shipping[state]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[postcode]') ? 'has-error' : '']">
+                <label for="shipping[postcode]" class="required">
+                    {{ __('shop::app.checkout.onepage.postcode') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[postcode]" name="shipping[postcode]" v-model="address.shipping.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[postcode]')">
+                    @{{ errors.first('address-form.shipping[postcode]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[country]') ? 'has-error' : '']">
+                <label for="shipping[country]" class="required">
+                    {{ __('shop::app.checkout.onepage.country') }}
+                </label>
+
+                <select type="text" v-validate="'required'" class="control" id="shipping[country]" name="shipping[country]" v-model="address.shipping.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+                    <option value=""></option>
+
+                    @foreach (core()->countries() as $country)
+                        <option value="{{ $country->code }}">{{ $country->name }}</option>
+                    @endforeach
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
+                    @{{ errors.first('address-form.shipping[country]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[phone]') ? 'has-error' : '']">
+                <label for="shipping[phone]" class="required">
+                    {{ __('shop::app.checkout.onepage.phone') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[phone]" name="shipping[phone]" v-model="address.shipping.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[phone]')">
+                    @{{ errors.first('address-form.shipping[phone]') }}
+                </span>
+            </div>
         </div>
-    </div>
+    @else
+        <div class="form-container">
 
-</form>
\ No newline at end of file
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.billing-address') }}</h1>
+
+                @guest('customer')
+                    <a class="btn btn-lg btn-primary">
+                        {{ __('shop::app.checkout.onepage.sign-in') }}
+                    </a>
+                @endguest
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[first_name]') ? 'has-error' : '']">
+                <label for="billing[first_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.first-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[first_name]" name="billing[first_name]" v-model="address.billing.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
+                    @{{ errors.first('address-form.billing[first_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[last_name]') ? 'has-error' : '']">
+                <label for="billing[last_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.last-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[last_name]" name="billing[last_name]" v-model="address.billing.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
+                    @{{ errors.first('address-form.billing[last_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[email]') ? 'has-error' : '']">
+                <label for="billing[email]" class="required">
+                    {{ __('shop::app.checkout.onepage.email') }}
+                </label>
+
+                <input type="text" v-validate="'required|email'" class="control" id="billing[email]" name="billing[email]" v-model="address.billing.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[email]')">
+                    @{{ errors.first('address-form.billing[email]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[address1]') ? 'has-error' : '']">
+                <label for="billing[address1]" class="required">
+                    {{ __('shop::app.checkout.onepage.address1') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[address1]" name="billing[address1]" v-model="address.billing.address1" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[address1]')">
+                    @{{ errors.first('address-form.billing[address1]') }}
+                </span>
+            </div>
+
+            <div class="control-group">
+                <label for="billing[address2]">
+                    {{ __('shop::app.checkout.onepage.address2') }}
+                </label>
+
+                <input type="text" class="control" id="billing[address2]" name="billing[address2]" v-model="address.billing.address2"/>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
+                <label for="billing[city]" class="required">
+                    {{ __('shop::app.checkout.onepage.city') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[city]" name="billing[city]" v-model="address.billing.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[city]')">
+                    @{{ errors.first('address-form.billing[city]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
+                <label for="billing[state]" class="required">
+                    {{ __('shop::app.checkout.onepage.state') }}
+                </label>
+
+
+                <input type="text" v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="!haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
+
+                <select v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
+
+                    <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
+
+                    <option v-for='(state, index) in countryStates[address.billing.country]' :value="state.code">
+                        @{{ state.default_name }}
+                    </option>
+
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[state]')">
+                    @{{ errors.first('address-form.billing[state]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[postcode]') ? 'has-error' : '']">
+                <label for="billing[postcode]" class="required">
+                    {{ __('shop::app.checkout.onepage.postcode') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[postcode]" name="billing[postcode]" v-model="address.billing.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[postcode]')">
+                    @{{ errors.first('address-form.billing[postcode]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[country]') ? 'has-error' : '']">
+                <label for="billing[country]" class="required">
+                    {{ __('shop::app.checkout.onepage.country') }}
+                </label>
+
+                <select type="text" v-validate="'required'" class="control" id="billing[country]" name="billing[country]" v-model="address.billing.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+                    <option value=""></option>
+
+                    @foreach (core()->countries() as $country)
+
+                        <option value="{{ $country->code }}">{{ $country->name }}</option>
+
+                    @endforeach
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[country]')">
+                    @{{ errors.first('address-form.billing[country]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
+                <label for="billing[phone]" class="required">
+                    {{ __('shop::app.checkout.onepage.phone') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="billing[phone]" name="billing[phone]" v-model="address.billing.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
+                    @{{ errors.first('address-form.billing[phone]') }}
+                </span>
+            </div>
+
+            <div class="control-group">
+                <span class="checkbox">
+                    <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="address.billing.use_for_shipping"/>
+                    <label class="checkbox-view" for="billing[use_for_shipping]"></label>
+                    {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                </span>
+
+            </div>
+        </div>
+
+        <div class="form-container" v-if="!address.billing.use_for_shipping">
+
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.shipping-address') }}</h1>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[first_name]') ? 'has-error' : '']">
+                <label for="shipping[first_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.first-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[first_name]" name="shipping[first_name]" v-model="address.shipping.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
+                    @{{ errors.first('address-form.shipping[first_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[last_name]') ? 'has-error' : '']">
+                <label for="shipping[last_name]" class="required">
+                    {{ __('shop::app.checkout.onepage.last-name') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[last_name]" name="shipping[last_name]" v-model="address.shipping.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[last_name]')">
+                    @{{ errors.first('address-form.shipping[last_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[email]') ? 'has-error' : '']">
+                <label for="shipping[email]" class="required">
+                    {{ __('shop::app.checkout.onepage.email') }}
+                </label>
+
+                <input type="text" v-validate="'required|email'" class="control" id="shipping[email]" name="shipping[email]" v-model="address.shipping.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[email]')">
+                    @{{ errors.first('address-form.shipping[email]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[address1]') ? 'has-error' : '']">
+                <label for="shipping[address1]" class="required">
+                    {{ __('shop::app.checkout.onepage.address1') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[address1]" name="shipping[address1]" v-model="address.shipping.address1" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[address1]')">
+                    @{{ errors.first('address-form.shipping[address1]') }}
+                </span>
+            </div>
+
+            <div class="control-group">
+                <label for="shipping[address2]">
+                    {{ __('shop::app.checkout.onepage.address2') }}
+                </label>
+
+                <input type="text" class="control" id="shipping[address2]" name="shipping[address2]" v-model="address.shipping.address2"/>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[city]') ? 'has-error' : '']">
+                <label for="shipping[city]" class="required">
+                    {{ __('shop::app.checkout.onepage.city') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[city]" name="shipping[city]" v-model="address.shipping.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[city]')">
+                    @{{ errors.first('address-form.shipping[city]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[state]') ? 'has-error' : '']">
+                <label for="shipping[state]" class="required">
+                    {{ __('shop::app.checkout.onepage.state') }}
+                </label>
+
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="!haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
+
+                <select v-validate="'required'" class="control" id="shipping[state]" name="shipping[state]" v-model="address.shipping.state" v-if="haveStates('shipping')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;">
+
+                    <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>
+
+                    <option v-for='(state, index) in countryStates[address.shipping.country]' :value="state.code">
+                        @{{ state.default_name }}
+                    </option>
+
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
+                    @{{ errors.first('address-form.shipping[state]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[postcode]') ? 'has-error' : '']">
+                <label for="shipping[postcode]" class="required">
+                    {{ __('shop::app.checkout.onepage.postcode') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[postcode]" name="shipping[postcode]" v-model="address.shipping.postcode" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.postcode') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[postcode]')">
+                    @{{ errors.first('address-form.shipping[postcode]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[country]') ? 'has-error' : '']">
+                <label for="shipping[country]" class="required">
+                    {{ __('shop::app.checkout.onepage.country') }}
+                </label>
+
+                <select type="text" v-validate="'required'" class="control" id="shipping[country]" name="shipping[country]" v-model="address.shipping.country" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+                    <option value=""></option>
+
+                    @foreach (core()->countries() as $country)
+                        <option value="{{ $country->code }}">{{ $country->name }}</option>
+                    @endforeach
+                </select>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
+                    @{{ errors.first('address-form.shipping[country]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('address-form.shipping[phone]') ? 'has-error' : '']">
+                <label for="shipping[phone]" class="required">
+                    {{ __('shop::app.checkout.onepage.phone') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="shipping[phone]" name="shipping[phone]" v-model="address.shipping.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[phone]')">
+                    @{{ errors.first('address-form.shipping[phone]') }}
+                </span>
+            </div>
+        </div>
+    @endif
+
+</form>