diff --git a/app/Http/Livewire/Profile/Settings/General.php b/app/Http/Livewire/Profile/Settings/General.php
new file mode 100644
index 000000000000..249c832458aa
--- /dev/null
+++ b/app/Http/Livewire/Profile/Settings/General.php
@@ -0,0 +1,78 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2020. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+namespace App\Http\Livewire\Profile\Settings;
+
+use Illuminate\Support\Facades\Hash;
+use Livewire\Component;
+
+class General extends Component
+{
+    public $profile;
+
+    public $first_name;
+    public $last_name;
+    public $email;
+    public $phone;
+    public $password;
+    public $password_confirmation;
+
+    public $saved;
+
+    protected $rules = [
+        'first_name' => ['required'],
+        'last_name' => ['required'],
+        'email' => ['required', 'email'],
+    ];
+
+    public function mount()
+    {
+        $profile = auth()->user('contact');
+
+        $this->fill([
+            'profile' => $profile,
+            'first_name' => $profile->first_name,
+            'last_name' => $profile->last_name,
+            'email' => $profile->email,
+            'phone' => $profile->phone,
+            'saved' => ctrans('texts.save'),
+        ]);
+    }
+
+    public function render()
+    {
+        return render('profile.settings.general');
+    }
+
+    public function submit()
+    {
+        if ($this->profile->email != $this->email) {
+            $this->rules['email'][] = 'unique:client_contacts,email';
+        }
+
+        if (!empty($this->password)) {
+            $this->rules['password'] = ['sometimes', 'nullable', 'required', 'min:6', 'confirmed'];
+        }
+
+        $data = $this->validate($this->rules);
+
+         if (!empty($this->password)) {
+             $this->profile->password = Hash::make($this->password);
+         }
+
+        $this->profile
+            ->fill($data)
+            ->save();
+
+        $this->saved = ctrans('texts.saved_at', ['time' => now()->toTimeString()]);
+    }
+}
diff --git a/app/Http/Livewire/Profile/Settings/NameWebsiteLogo.php b/app/Http/Livewire/Profile/Settings/NameWebsiteLogo.php
new file mode 100644
index 000000000000..ea363872a9f0
--- /dev/null
+++ b/app/Http/Livewire/Profile/Settings/NameWebsiteLogo.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Livewire\Profile\Settings;
+
+use Livewire\Component;
+
+class NameWebsiteLogo extends Component
+{
+    public $profile;
+
+    public $name;
+    public $website;
+
+    public $saved;
+
+    public $rules = [
+        'name' => ['required', 'min:3'],
+        'website' => ['required', 'url'],
+    ];
+
+    public function mount()
+    {
+        $this->fill([
+            'profile' => auth()->user('contact')->client,
+            'name' => auth()->user('contact')->client->present()->name,
+            'website' => auth()->user('contact')->client->present()->website,
+            'saved' => ctrans('texts.save'),
+        ]);
+    }
+
+    public function render()
+    {
+        return render('profile.settings.name-website-logo');
+    }
+
+    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/app/Http/Livewire/Profile/Settings/PersonalAddress.php b/app/Http/Livewire/Profile/Settings/PersonalAddress.php
new file mode 100644
index 000000000000..7cd0030fcd81
--- /dev/null
+++ b/app/Http/Livewire/Profile/Settings/PersonalAddress.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Livewire\Profile\Settings;
+
+use Livewire\Component;
+
+class PersonalAddress extends Component
+{
+    public $profile;
+
+    public $address1;
+    public $address2;
+    public $city;
+    public $state;
+    public $postal_code;
+    public $country_id;
+
+    public $countries;
+
+    public $saved;
+
+    protected $rules = [
+        'address1' => ['required'],
+        'address2' => ['required'],
+        'city' => ['required'],
+        'state' => ['required'],
+        'postal_code' => ['required'],
+        'country_id' => ['required'],
+    ];
+
+    public function mount($countries)
+    {
+        $this->fill([
+            'profile' => auth()->user('contact')->client,
+            'address1' => auth()->user('contact')->client->address1,
+            'address2' => auth()->user('contact')->client->address2,
+            'city' => auth()->user('contact')->client->city,
+            'state' => auth()->user('contact')->client->state,
+            'postal_code' => auth()->user('contact')->client->postal_code,
+            'country_id' => auth()->user('contact')->client->country_id,
+
+            'countries' => $countries,
+            'saved' => ctrans('texts.save'),
+        ]);
+    }
+
+    public function render()
+    {
+        return render('profile.settings.personal-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/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/composer.json b/composer.json
index 4df67077406e..2b584ceebb40 100644
--- a/composer.json
+++ b/composer.json
@@ -103,7 +103,8 @@
         ],
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
-            "@php artisan package:discover --ansi"
+            "@php artisan package:discover --ansi",
+            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
         ]
     },
     "config": {
diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index ea2eec4f6e60..4d5e8e7e77eb 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -3279,4 +3279,6 @@ return [
     'over_payments_disabled' => 'Company doesn\'t support over payments.',
   
     'paused' => 'Paused',
+
+    'saved_at' => 'Saved at :time',
 ];
diff --git a/resources/views/portal/ninja2020/profile/index.blade.php b/resources/views/portal/ninja2020/profile/index.blade.php
index 3a7ce9549df8..e2a715303c84 100644
--- a/resources/views/portal/ninja2020/profile/index.blade.php
+++ b/resources/views/portal/ninja2020/profile/index.blade.php
@@ -7,355 +7,15 @@
 @endsection
 
 @section('body')
-
     <!-- Basic information: first & last name, e-mail address etc. -->
-    <div class="mt-2 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.profile') }}</h3>
-                    <p class="mt-1 text-sm leading-5 text-gray-500">
-                        @lang('texts.client_information_text')
-                    </p>
-                </div>
-            </div>
-            <div class="mt-5 md:mt-0 md:col-span-2">
-                <form action="{{ route('client.profile.update', 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-3">
-                                    <label for="first_name" class="input-label">@lang('texts.first_name')</label>
-                                    <input id="first_name" class="input w-full" name="first_name"
-                                           value="{{ auth()->user()->first_name }}"/>
-                                    @error('first_name')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-
-                                <div class="col-span-6 sm:col-span-3">
-                                    <label for="last_name" class="input-label">@lang('texts.last_name')</label>
-                                    <input id="last_name" class="input w-full" name="last_name"
-                                           value="{{ auth()->user()->last_name }}"/>
-                                    @error('last_name')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-
-                                <div class="col-span-6 sm:col-span-4">
-                                    <label for="email_address" class="input-label">@lang('texts.email_address')</label>
-                                    <input id="email_address" class="input w-full" type="email" name="email"
-                                           value="{{ auth()->user()->email }}"/>
-                                    @error('email')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-
-                                <div class="col-span-6 sm:col-span-4">
-                                    <label for="phone" class="input-label">@lang('texts.phone')</label>
-                                    <input id="phone" class="input w-full" name="phone" value="{{ auth()->user()->phone }}"/>
-                                    @error('phone')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-
-                                <div class="col-span-6 sm:col-span-6 lg:col-span-3">
-                                    <label for="password" class="input-label">@lang('texts.password')</label>
-                                    <input id="password" class="input w-full" name="password" type="password"/>
-                                    @error('password')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-
-                                <div class="col-span-6 sm:col-span-3 lg:col-span-3">
-                                    <label for="state" class="input-label">@lang('texts.confirm_password')</label>
-                                    <input id="state" class="input w-full" name="password_confirmation" type="password"/>
-                                    @error('password_confirmation')
-                                    <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.general')
+    
     <!-- Name, website & logo -->
-    <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.name_website_logo') }}</h3>
-                    <p class="mt-1 text-sm leading-5 text-gray-500">
-                       {{ ctrans('texts.make_sure_use_full_link') }}
-                    </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-3">
-                                    <label for="street" class="input-label">@lang('texts.name')</label>
-                                    <input id="name" class="input w-full" name="name"
-                                           value="{{ auth()->user()->client->present()->name }}"/>
-                                    @error('name')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-3">
-                                    <label for="website" class="input-label">@lang('texts.website')</label>
-                                    <input id="website" class="input w-full" name="last_name"
-                                           value="{{ auth()->user()->client->website }}"/>
-                                    @error('website')
-                                    <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.name-website-logo')
 
     <!-- Client personal 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.personal_address') }}</h3>
-                    <p class="mt-1 text-sm leading-5 text-gray-500">
-                        {{ ctrans('texts.enter_your_personal_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="address1" class="input-label">@lang('texts.address1')</label>
-                                    <input id="address1" class="input w-full" name="address1"
-                                           value="{{ auth()->user()->client->address1 }}"/>
-                                    @error('address1')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-3">
-                                    <label for="address2" class="input-label">@lang('texts.address2')</label>
-                                    <input id="address2" class="input w-full" name="address2"
-                                           value="{{ auth()->user()->client->address2 }}"/>
-                                    @error('address2')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-3">
-                                    <label for="city" class="input-label">@lang('texts.city')</label>
-                                    <input id="city" class="input w-full" name="city"
-                                           value="{{ auth()->user()->client->city }}"/>
-                                    @error('city')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-2">
-                                    <label for="state" class="input-label">@lang('texts.state')</label>
-                                    <input id="state" class="input w-full" name="state"
-                                           value="{{ auth()->user()->client->state }}"/>
-                                    @error('state')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-2">
-                                    <label for="postal_code" class="input-label">@lang('texts.postal_code')</label>
-                                    <input id="postal_code" class="input w-full" name="postal_code"
-                                           value="{{ auth()->user()->client->postal_code }}"/>
-                                    @error('postal_code')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
-                                    @enderror
-                                </div>
-                                <div class="col-span-6 sm:col-span-2">
-                                    <label for="country" class="input-label">@lang('texts.country')</label>
-                                    <select id="country" class="input w-full form-select" name="country">
-                                        @foreach($countries as $country)
-                                            <option
-                                                {{ $country == isset(auth()->user()->client->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.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/general.blade.php b/resources/views/portal/ninja2020/profile/settings/general.blade.php
new file mode 100644
index 000000000000..9d7c3b5f2a7b
--- /dev/null
+++ b/resources/views/portal/ninja2020/profile/settings/general.blade.php
@@ -0,0 +1,87 @@
+    <div class="mt-2 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.profile') }}</h3>
+                    <p class="mt-1 text-sm leading-5 text-gray-500">
+                        {{ ctrans('texts.client_information_text') }}
+                    </p>
+                </div>
+            </div>  <!-- End of left-side -->
+
+            <div class="mt-5 md:mt-0 md:col-span-2">
+                <form wire:submit.prevent="submit">
+                    @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-3">
+                                    <label for="first_name" class="input-label">@lang('texts.first_name')</label>
+                                    <input id="first_name" class="input w-full" name="first_name" wire:model.defer="first_name" />
+                                    @error('first_name')
+                                    <div class="validation validation-fail">
+                                        {{ $message }}
+                                    </div>
+                                    @enderror
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <label for="last_name" class="input-label">@lang('texts.last_name')</label>
+                                    <input id="last_name" class="input w-full" name="last_name" wire:model.defer="last_name" />
+                                    @error('last_name')
+                                    <div class="validation validation-fail">
+                                        {{ $message }}
+                                    </div>
+                                    @enderror
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-4">
+                                    <label for="email_address" class="input-label">@lang('texts.email_address')</label>
+                                    <input id="email_address" class="input w-full" type="email" name="email" wire:model.defer="email" />
+                                    @error('email')
+                                    <div class="validation validation-fail">
+                                        {{ $message }}
+                                    </div>
+                                    @enderror
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-4">
+                                    <label for="phone" class="input-label">@lang('texts.phone')</label>
+                                    <input id="phone" class="input w-full" name="phone" wire:model.defer="phone" />
+                                    @error('phone')
+                                    <div class="validation validation-fail">
+                                        {{ $message }}
+                                    </div>
+                                    @enderror
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-6 lg:col-span-3">
+                                    <label for="password" class="input-label">@lang('texts.password')</label>
+                                    <input id="password" class="input w-full" name="password" wire:model.defer="password" type="password" />
+                                    @error('password')
+                                    <div class="validation validation-fail">
+                                        {{ $message }}
+                                    </div>
+                                    @enderror
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3 lg:col-span-3">
+                                    <label for="state" class="input-label">@lang('texts.confirm_password')</label>
+                                    <input id="state" class="input w-full" name="password_confirmation" wire:model.defer="password_confirmation" type="password" />
+                                    @error('password_confirmation')
+                                    <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> <!-- End of main form -->
+        </div>
+    </div>
diff --git a/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php b/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
new file mode 100644
index 000000000000..177319bafe87
--- /dev/null
+++ b/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
@@ -0,0 +1,46 @@
+<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.name_website_logo') }}</h3>
+                <p class="mt-1 text-sm leading-5 text-gray-500">
+                    {{ ctrans('texts.make_sure_use_full_link') }}
+                </p>
+            </div>
+        </div> <!-- End of left side -->
+
+        <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-3">
+                                <label for="street" class="input-label">{{ ctrans('texts.name') }}</label>
+                                <input id="name" class="input w-full" name="name" wire:model.defer="name" />
+                                @error('name')
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
+                                @enderror
+                            </div>
+                            <div class="col-span-6 sm:col-span-3">
+                                <label for="website" class="input-label">{{ ctrans('texts.website') }}</label>
+                                <input id="website" class="input w-full" name="website" wire:model.defer="website" />
+                                @error('website')
+                                <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> <!-- End of right side -->
+    </div>
+</div>
diff --git a/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php b/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php
new file mode 100644
index 000000000000..e65126677740
--- /dev/null
+++ b/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php
@@ -0,0 +1,84 @@
+<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.personal_address') }}</h3>
+                <p class="mt-1 text-sm leading-5 text-gray-500">
+                    {{ ctrans('texts.enter_your_personal_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="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="address1" class="input-label">{{ ctrans('texts.address1') }}</label>
+                            <input id="address1" class="input w-full" name="address1" wire:model.defer="address1" />
+                            @error('address1')
+                            <div class="validation validation-fail">
+                                {{ $message }}
+                            </div>
+                            @enderror
+                        </div>
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="address2" class="input-label">{{ ctrans('texts.address2') }}</label>
+                            <input id="address2" class="input w-full" name="address2" wire:model.defer="address2" />
+                            @error('address2')
+                            <div class="validation validation-fail">
+                                {{ $message }}
+                            </div>
+                            @enderror
+                        </div>
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="city" class="input-label">{{ ctrans('texts.city') }}</label>
+                            <input id="city" class="input w-full" name="city" wire:model.defer="city" />
+                            @error('city')
+                            <div class="validation validation-fail">
+                                {{ $message }}
+                            </div>
+                            @enderror
+                        </div>
+                        <div class="col-span-6 sm:col-span-2">
+                            <label for="state" class="input-label">{{ ctrans('texts.state') }}</label>
+                            <input id="state" class="input w-full" name="state" wire:model.defer="state" />
+                            @error('state')
+                            <div class="validation validation-fail">
+                                {{ $message }}
+                            </div>
+                            @enderror
+                        </div>
+                        <div class="col-span-6 sm:col-span-2">
+                            <label for="postal_code" class="input-label">{{ ctrans('texts.postal_code') }}</label>
+                            <input id="postal_code" class="input w-full" name="postal_code" wire:model.defer="postal_code" />
+                            @error('postal_code')
+                            <div class="validation validation-fail">
+                                {{ $message }}
+                            </div>
+                            @enderror
+                        </div>
+                        <div class="col-span-6 sm:col-span-2">
+                            <label for="country" class="input-label">@lang('texts.country')</label>
+                            <select id="country" class="input w-full form-select" wire:model.defer="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>
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>