diff --git a/app/Http/Livewire/Profile/Settings/ShippingAddress.php b/app/Http/Livewire/Profile/Settings/ShippingAddress.php
new file mode 100644
index 000000000000..39ce3aec426e
--- /dev/null
+++ b/app/Http/Livewire/Profile/Settings/ShippingAddress.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Livewire\Profile\Settings;
+
+use Livewire\Component;
+
+class ShippingAddress extends Component
+{
+    public $profile;
+
+    public $shipping_address1;
+    public $shipping_address2;
+    public $shipping_city;
+    public $shipping_state;
+    public $shipping_postal_code;
+    public $shipping_country_id;
+
+    public $countries;
+
+    public $saved;
+
+    protected $rules = [
+        'shipping_address1' => ['required'],
+        'shipping_address2' => ['required'],
+        'shipping_city' => ['required'],
+        'shipping_state' => ['required'],
+        'shipping_postal_code' => ['required'],
+        'shipping_country_id' => ['required'],
+    ];
+
+    public function mount($countries)
+    {
+        $this->fill([
+            'profile' => auth()->user('contact')->client,
+            'shipping_address1' => auth()->user('contact')->client->shipping_address1,
+            'shipping_address2' => auth()->user('contact')->client->shipping_address2,
+            'shipping_city' => auth()->user('contact')->client->shipping_city,
+            'shipping_state' => auth()->user('contact')->client->shipping_state,
+            'shipping_postal_code' => auth()->user('contact')->client->shipping_postal_code,
+            'shipping_country_id' => auth()->user('contact')->client->shipping_country_id,
+
+            'countries' => $countries,
+            'saved' => ctrans('texts.save'),
+        ]);
+    }
+
+    public function render()
+    {
+        return render('profile.settings.shipping-address');
+    }
+
+    public function submit()
+    {
+        $data = $this->validate($this->rules);
+
+        $this->profile
+            ->fill($data)
+            ->save();
+
+        $this->saved = ctrans('texts.saved_at', ['time' => now()->toTimeString()]);
+    }
+}
diff --git a/resources/views/portal/ninja2020/profile/index.blade.php b/resources/views/portal/ninja2020/profile/index.blade.php
index 4197ac83f771..e2a715303c84 100644
--- a/resources/views/portal/ninja2020/profile/index.blade.php
+++ b/resources/views/portal/ninja2020/profile/index.blade.php
@@ -17,106 +17,5 @@
     @livewire('profile.settings.personal-address', ['countries' => $countries])
 
     <!-- Client shipping address -->
-    <div class="mt-10 sm:mt-6">
-        <div class="md:grid md:grid-cols-3 md:gap-6">
-            <div class="md:col-span-1">
-                <div class="sm:px-0">
-                    <h3 class="text-lg font-medium leading-6 text-gray-900">{{ ctrans('texts.shipping_address') }}</h3>
-                    <p class="mt-1 text-sm leading-5 text-gray-500">
-                        {{ ctrans('texts.enter_your_shipping_address') }}
-                    </p>
-                </div>
-            </div>
-            <div class="mt-5 md:mt-0 md:col-span-2">
-                <form action="{{ route('client.profile.edit_client', auth()->user()->hashed_id) }}" method="POST"
-                      id="update_contact">
-                    @csrf
-                    @method('PUT')
-                    <div class="shadow overflow-hidden rounded">
-                        <div class="px-4 py-5 bg-white sm:p-6">
-                            <div class="grid grid-cols-6 gap-6">
-                                <div class="col-span-6 sm:col-span-4">
-                                    <label for="shipping_address1"
-                                           class="input-label">@lang('texts.shipping_address1')</label>
-                                    <input id="shipping_address1" class="input w-full" name="shipping_address1"
-                                           value="{{ auth()->user()->client->shipping_address1 }}"/>
-                                    @error('shipping_address1')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-3">
-                                    <label for="shipping_address2"
-                                           class="input-label">@lang('texts.shipping_address2')</label>
-                                    <input id="shipping_address2" class="input w-full" name="shipping_address2"
-                                           value="{{ auth()->user()->client->shipping_address2 }}"/>
-                                    @error('shipping_address2')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-3">
-                                    <label for="shipping_city" class="input-label">@lang('texts.shipping_city')</label>
-                                    <input id="shipping_city" class="input w-full" name="shipping_city"
-                                           value="{{ auth()->user()->client->shipping_city }}"/>
-                                    @error('shipping_city')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-2">
-                                    <label for="shipping_state"
-                                           class="input-label">@lang('texts.shipping_state')</label>
-                                    <input id="shipping_state" class="input w-full" name="shipping_state"
-                                           value="{{ auth()->user()->client->shipping_state }}"/>
-                                    @error('shipping_state')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-2">
-                                    <label for="shipping_postal_code"
-                                           class="input-label">@lang('texts.shipping_postal_code')</label>
-                                    <input id="shipping_postal_code" class="input w-full" name="shipping_postal_code"
-                                           value="{{ auth()->user()->client->shipping_postal_code }}"/>
-                                    @error('shipping_postal_code')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-4 sm:col-span-2">
-                                    <label for="shipping_country"
-                                           class="input-label">@lang('texts.shipping_country')</label>
-                                    <select id="shipping_country" class="input w-full form-select" name="shipping_country">
-                                        @foreach($countries as $country)
-                                            <option
-                                                {{ $country == isset(auth()->user()->client->shipping_country->id) ? 'selected' : null }} value="{{ $country->id }}">
-                                                {{ $country->iso_3166_2 }}
-                                                ({{ $country->name }})
-                                            </option>
-                                        @endforeach
-                                    </select>
-                                    @error('country')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                            </div>
-                        </div>
-                        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                            <button class="button button-primary">
-                                @lang('texts.save')
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
+    @livewire('profile.settings.shipping-address', ['countries' => $countries])
 @endsection
diff --git a/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php b/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php
new file mode 100644
index 000000000000..40fe14053507
--- /dev/null
+++ b/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php
@@ -0,0 +1,88 @@
+<div class="mt-10 sm:mt-6">
+    <div class="md:grid md:grid-cols-3 md:gap-6">
+        <div class="md:col-span-1">
+            <div class="sm:px-0">
+                <h3 class="text-lg font-medium leading-6 text-gray-900">{{ ctrans('texts.shipping_address') }}</h3>
+                <p class="mt-1 text-sm leading-5 text-gray-500">
+                    {{ ctrans('texts.enter_your_shipping_address') }}
+                </p>
+            </div>
+        </div>
+        <div class="mt-5 md:mt-0 md:col-span-2">
+            <form wire:submit.prevent="submit" method="POST" id="update_contact">
+                @csrf
+                <div class="shadow overflow-hidden rounded">
+                    <div class="px-4 py-5 bg-white sm:p-6">
+                        <div class="grid grid-cols-6 gap-6">
+                            <div class="col-span-6 sm:col-span-4">
+                                <label for="shipping_address1" class="input-label">{{ ctrans('texts.shipping_address1') }}</label>
+                                <input id="shipping_address1" class="input w-full" name="shipping_address1" wire:model.defer="shipping_address1" />
+                                @error('shipping_address1')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                            <div class="col-span-6 sm:col-span-3">
+                                <label for="shipping_address2" class="input-label">@lang('texts.shipping_address2')</label>
+                                <input id="shipping_address2" class="input w-full" name="shipping_address2" wire:model.defer="shipping_address2" />
+                                @error('shipping_address2')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                            <div class="col-span-6 sm:col-span-3">
+                                <label for="shipping_city" class="input-label">@lang('texts.shipping_city')</label>
+                                <input id="shipping_city" class="input w-full" name="shipping_city" wire:model.defer="shipping_city" />
+                                @error('shipping_city')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                            <div class="col-span-6 sm:col-span-2">
+                                <label for="shipping_state" class="input-label">@lang('texts.shipping_state')</label>
+                                <input id="shipping_state" class="input w-full" name="shipping_state" wire:model.defer="shipping_state" />
+                                @error('shipping_state')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                            <div class="col-span-6 sm:col-span-2">
+                                <label for="shipping_postal_code" class="input-label">@lang('texts.shipping_postal_code')</label>
+                                <input id="shipping_postal_code" class="input w-full" name="shipping_postal_code" wire:model.defer="shipping_postal_code" />
+                                @error('shipping_postal_code')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                            <div class="col-span-4 sm:col-span-2">
+                                <label for="shipping_country" class="input-label">@lang('texts.shipping_country')</label>
+                                <select id="shippking_country" class="input w-full form-select" wire:model.defer="shipping_country_id">
+                                    @foreach($countries as $country)
+                                    <option value="{{ $country->id }}">
+                                        {{ $country->iso_3166_2 }} ({{ $country->name }})
+                                    </option>
+                                    @endforeach
+                                </select>
+                                @error('country')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+                        <button class="button button-primary">
+                            {{ $saved }}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>