diff --git a/app/Http/Livewire/Profile/Settings/General.php b/app/Http/Livewire/Profile/Settings/General.php
index e8a809acaf95..4b333431a671 100644
--- a/app/Http/Livewire/Profile/Settings/General.php
+++ b/app/Http/Livewire/Profile/Settings/General.php
@@ -32,6 +32,7 @@ class General extends Component
         'first_name' => ['sometimes'],
         'last_name' => ['sometimes'],
         'email' => ['required', 'email'],
+        'phone' => ['sometimes'],
     ];
 
     public function mount()
diff --git a/resources/views/portal/ninja2020/profile/settings/general.blade.php b/resources/views/portal/ninja2020/profile/settings/general.blade.php
index c891f046160e..259f0c934ce4 100644
--- a/resources/views/portal/ninja2020/profile/settings/general.blade.php
+++ b/resources/views/portal/ninja2020/profile/settings/general.blade.php
@@ -7,7 +7,7 @@
             </div>  <!-- End of left-side -->
 
             <div class="mt-5 md:mt-0 md:col-span-2">
-                <form wire:submit.prevent="submit">
+                <form wire:submit.prevent="submit" id="update_client">
                     @csrf
                     @method('PUT')
                     <div class="shadow overflow-hidden rounded">
@@ -15,7 +15,9 @@
                             <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 {{ in_array('contact_first_name', (array) session('missing_required_fields')) ? 'border border-red-400' : '' }}" name="first_name" wire:model.defer="first_name" />
+                                    <input id="contact_first_name"
+                                           class="input w-full {{ in_array('contact_first_name', (array) session('missing_required_fields')) ? 'border border-red-400' : '' }}"
+                                           name="first_name" wire:model.defer="first_name"/>
                                     @error('first_name')
                                     <div class="validation validation-fail">
                                         {{ $message }}
@@ -25,7 +27,9 @@
 
                                 <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 {{ in_array('contact_last_name', (array) session('missing_required_fields')) ? 'border border-red-400' : '' }}" name="last_name" wire:model.defer="last_name" />
+                                    <input id="contact_last_name"
+                                           class="input w-full {{ in_array('contact_last_name', (array) session('missing_required_fields')) ? 'border border-red-400' : '' }}"
+                                           name="last_name" wire:model.defer="last_name"/>
                                     @error('last_name')
                                     <div class="validation validation-fail">
                                         {{ $message }}
@@ -35,7 +39,9 @@
 
                                 <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 {{ in_array('contact_email', (array) session('missing_required_fields')) ? 'border border-red-400' : '' }}" type="email" name="email" wire:model.defer="email" />
+                                    <input id="contact_email_address"
+                                           class="input w-full {{ in_array('contact_email', (array) session('missing_required_fields')) ? 'border border-red-400' : '' }}"
+                                           type="email" name="email" wire:model.defer="email"/>
                                     @error('email')
                                     <div class="validation validation-fail">
                                         {{ $message }}
@@ -44,8 +50,9 @@
                                 </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" />
+                                    <label for="contact_phone" class="input-label">@lang('texts.phone')</label>
+                                    <input id="contact_phone" class="input w-full" name="phone"
+                                           wire:model.defer="phone"/>
                                     @error('phone')
                                     <div class="validation validation-fail">
                                         {{ $message }}
@@ -54,8 +61,9 @@
                                 </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" />
+                                    <label for="contact_password" class="input-label">@lang('texts.password')</label>
+                                    <input id="contact_password" class="input w-full" name="password"
+                                           wire:model.defer="password" type="password"/>
                                     @error('password')
                                     <div class="validation validation-fail">
                                         {{ $message }}
@@ -64,8 +72,11 @@
                                 </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" />
+                                    <label for="contact_password_confirmation"
+                                           class="input-label">@lang('texts.confirm_password')</label>
+                                    <input id="contact_password_confirmation" class="input w-full"
+                                           name="password_confirmation"
+                                           wire:model.defer="password_confirmation" type="password"/>
                                     @error('password_confirmation')
                                     <div class="validation validation-fail">
                                         {{ $message }}
@@ -75,7 +86,8 @@
                             </div>
                         </div>
                         <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                            <button class="button button-primary bg-primary">{{ $saved }}</button>
+                            <button data-ref="update-contact-details"
+                                    class="button button-primary bg-primary">{{ $saved }}</button>
                         </div>
                     </div>
                 </form>
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
index cd1f88afcb9d..a99547730af9 100644
--- a/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
+++ b/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
@@ -13,45 +13,49 @@
                     <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"/>
+                                <label for="client_name" class="input-label">{{ ctrans('texts.name') }}</label>
+                                <input id="client_name" class="input w-full" name="name" wire:model.defer="name"/>
                                 @error('name')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
                                 @enderror
                             </div>
 
                             <div class="col-span-6 sm:col-span-3">
-                                <label for="street" class="input-label">{{ ctrans('texts.vat_number') }}</label>
-                                <input id="vat_number" class="input w-full" name="vat_number" wire:model.defer="vat_number"/>
+                                <label for="client_vat_number"
+                                       class="input-label">{{ ctrans('texts.vat_number') }}</label>
+                                <input id="client_vat_number" class="input w-full" name="vat_number"
+                                       wire:model.defer="vat_number"/>
                                 @error('vat_number')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
                                 @enderror
                             </div>
 
                             <div class="col-span-6 sm:col-span-3">
-                                <label for="street" class="input-label">{{ ctrans('texts.phone') }}</label>
-                                <input id="phone" class="input w-full" name="phone" wire:model.defer="phone"/>
+                                <label for="client_phone" class="input-label">{{ ctrans('texts.phone') }}</label>
+                                <input id="client_phone" class="input w-full" name="phone" wire:model.defer="phone"/>
                                 @error('phone')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
                                 @enderror
                             </div>
 
                             <div class="col-span-6 sm:col-span-3">
                                 <div class="inline-flex items-center">
-                                    <label for="website" class="input-label">{{ ctrans('texts.website') }}</label>
+                                    <label for="client_website"
+                                           class="input-label">{{ ctrans('texts.website') }}</label>
                                     <span class="text-xs ml-2 text-gray-600">E.g. https://example.com</span>
                                 </div>
-                                <input id="website" class="input w-full" name="website" wire:model.defer="website"/>
+                                <input id="client_website" class="input w-full" name="website"
+                                       wire:model.defer="website"/>
                                 @error('website')
-                                    <div class="validation validation-fail">
-                                        {{ $message }}
-                                    </div>
+                                <div class="validation validation-fail">
+                                    {{ $message }}
+                                </div>
                                 @enderror
                             </div>
                         </div>
diff --git a/tests/Browser/ClientPortal/ProfileSettingsTest.php b/tests/Browser/ClientPortal/ProfileSettingsTest.php
index f685b5a6c8e6..2e5b5bcd71d3 100644
--- a/tests/Browser/ClientPortal/ProfileSettingsTest.php
+++ b/tests/Browser/ClientPortal/ProfileSettingsTest.php
@@ -47,7 +47,7 @@ class ProfileSettingsTest extends DuskTestCase
     {
         $original = [
             'name' => $this->faker->name,
-            'vat_number' => $this->faker->randomNumber(6),
+            'vat_number' => (string)$this->faker->randomNumber(6),
             'phone' => $this->faker->phoneNumber,
             'website' => $this->faker->url,
         ];
@@ -60,21 +60,67 @@ class ProfileSettingsTest extends DuskTestCase
                 ->waitForText('Client Information');
 
             $browser
-                ->type('name', $original['name'])
-                ->type('vat_number', $original['vat_number'])
-                ->type('phone', $original['phone'])
-                ->type('website', $original['website'])
-                ->press('Save')
-                ->refresh();
+                ->with('#update_contact', function (Browser $form) use ($original) {
+                    $form
+                        ->type('#client_name', $original['name'])
+                        ->type('#client_vat_number', $original['vat_number'])
+                        ->type('#client_phone', $original['phone'])
+                        ->type('#client_website', $original['website'])
+                        ->press('Save');
+                })
+                ->pause(2000)
+                ->refresh()
+                ->pause(2000);
 
             $updated = [
-                'name' => $browser->inputValue('name'),
-                'vat_number' => $browser->inputValue('vat_number'),
-                'phone' => $browser->inputValue('phone'),
-                'website' => $browser->inputValue('website')
+                'name' => $browser->value('#client_name'),
+                'vat_number' => $browser->value('#client_vat_number'),
+                'phone' => $browser->value('#client_phone'),
+                'website' => $browser->value('#client_website')
             ];
 
-            $this->assertNotSame($original, $updated);
+            $this->assertSame($original, $updated);
+        });
+    }
+
+    public function testContactDetailsUpdate()
+    {
+        $original = [
+            'first_name' => $this->faker->firstName,
+            'last_name' => $this->faker->lastName,
+            'email_address' => 'user@example.com',
+            'phone' => $this->faker->phoneNumber,
+        ];
+
+        $this->browse(function (Browser $browser) use ($original) {
+            $browser
+                ->visitRoute('client.invoices.index')
+                ->click('button[data-ref="client-profile-dropdown"]')
+                ->click('a[data-ref="client-profile-dropdown-settings"]')
+                ->waitForText('Client Information');
+
+            $browser
+                ->with('#update_client', function (Browser $form) use ($original) {
+                    $form
+                        ->type('#contact_first_name', $original['first_name'])
+                        ->type('#contact_last_name', $original['last_name'])
+                        ->scrollIntoView('#contact_email_address')
+                        ->type('#contact_email_address', $original['email_address'])
+                        ->type('#contact_phone', $original['phone'])
+                        ->click('button[data-ref="update-contact-details"]');
+                })
+                ->pause(2000)
+                ->refresh()
+                ->pause(2000);
+
+            $updated = [
+                'first_name' => $browser->value('#contact_first_name'),
+                'last_name' => $browser->value('#contact_last_name'),
+                'email_address' => $browser->value('#contact_email_address'),
+                'phone' => $browser->value('#contact_phone'),
+            ];
+
+            $this->assertSame($original, $updated);
         });
     }
 }