diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index a7c987373..abfdaec42 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -92,8 +92,9 @@ public function boot(): void
         TallStackUi::personalize()->card()
             ->block('wrapper.first')->replace('gap-4', 'gap-2')
             ->block('wrapper.second')->replace('rounded-lg', 'rounded')
-            ->block('header.wrapper', 'dark:border-b-dark-600 flex items-center justify-between border-b border-b-gray-100 p-2')
-            ->block('footer.wrapper', 'text-secondary-700 dark:text-dark-300 dark:border-t-dark-600 rounded rounded-t-none border-t p-2')
+            ->block('wrapper.second')->replace('dark:bg-dark-700', 'dark:bg-neutral-700')
+            ->block('header.wrapper', 'dark:border-b-neutral-600 flex items-center justify-between border-b border-b-gray-100 p-2')
+            ->block('footer.wrapper', 'text-secondary-700 dark:text-dark-300 dark:border-t-neutral-600 rounded rounded-t-none border-t p-2')
             ->block('footer.text', 'flex items-center justify-end gap-2');
 
         // -----------------------------------------------------------------------
diff --git a/resources/views/components/nav-link-footer.blade.php b/resources/views/components/nav-link-footer.blade.php
index b4e74e154..8cc23a105 100644
--- a/resources/views/components/nav-link-footer.blade.php
+++ b/resources/views/components/nav-link-footer.blade.php
@@ -3,7 +3,7 @@
 @php
     $classes =
         $active ?? false
-            ? 'text-warning-400 dark:text-warning-200 underline decoration-transparent transition duration-300 ease-in-out hover:decoration-inherit'
+            ? 'text-warning-500 dark:text-warning-200 underline decoration-transparent transition duration-300 ease-in-out hover:decoration-inherit'
             : 'text-blue-600 dark:text-blue-200 underline decoration-transparent transition duration-300 ease-in-out hover:decoration-inherit';
 @endphp
 
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
index 930ce57d5..e95748580 100644
--- a/resources/views/components/nav-link.blade.php
+++ b/resources/views/components/nav-link.blade.php
@@ -3,8 +3,8 @@
 @php
     $classes =
         $active ?? false
-            ? 'inline-flex items-center px-1 text-warning-400 dark:text-warning-200'
-            : 'inline-flex items-center px-1 text-gray-600 dark:text-gray-200 hover:text-warning-400 dark:hover:text-warning-200';
+            ? 'inline-flex items-center px-1 text-warning-500 dark:text-warning-200'
+            : 'inline-flex items-center px-1 text-gray-600 dark:text-gray-200 hover:text-warning-500 dark:hover:text-warning-200';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
diff --git a/resources/views/components/switchable-team.blade.php b/resources/views/components/switchable-team.blade.php
index 391c87c87..6ac6169e6 100644
--- a/resources/views/components/switchable-team.blade.php
+++ b/resources/views/components/switchable-team.blade.php
@@ -9,7 +9,7 @@
 
     <x-dynamic-component :component="$component" href="#" x-on:click.prevent="$root.submit();">
         <div class="flex items-center">
-            <div class="truncate @if (auth()->user()->isCurrentTeam($team)) text-warning-400 @endif">
+            <div class="truncate @if (auth()->user()->isCurrentTeam($team)) text-warning-500 dark:text-warning-200 @endif">
                 {{ $team->name }}
             </div>
 
diff --git a/resources/views/livewire/pagination/tailwind.blade.php b/resources/views/livewire/pagination/tailwind.blade.php
index 030b203d6..6e5e092b3 100644
--- a/resources/views/livewire/pagination/tailwind.blade.php
+++ b/resources/views/livewire/pagination/tailwind.blade.php
@@ -92,7 +92,7 @@ class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium te
                                 @if ($i == $paginator->currentPage())
                                     <span aria-current="page">
                                         <span
-                                            class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-warning-300 dark:bg-warning-200 border border-gray-300 cursor-default leading-5 select-none">
+                                            class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-warning-500 dark:bg-warning-200 border border-gray-300 cursor-default leading-5 select-none">
                                             {{ $i }}
                                         </span>
                                     </span>
diff --git a/resources/views/livewire/people/add/child.blade.php b/resources/views/livewire/people/add/child.blade.php
index 1ff3b98d9..735c8e1f2 100644
--- a/resources/views/livewire/people/add/child.blade.php
+++ b/resources/views/livewire/people/add/child.blade.php
@@ -9,22 +9,22 @@
                 <div class="grid grid-cols-6 gap-5">
                     {{-- firstname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="childForm.firstname" id="firstname" label="{{ __('person.firstname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="firstname" />
+                        <x-ts-input wire:model="childForm.firstname" id="firstname" label="{{ __('person.firstname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="firstname" />
                     </div>
 
                     {{-- surname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="childForm.surname" id="surname" label="{{ __('person.surname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="surname" />
+                        <x-ts-input wire:model="childForm.surname" id="surname" label="{{ __('person.surname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="surname" />
                     </div>
 
                     {{-- birthname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="childForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="birthname" />
+                        <x-ts-input wire:model="childForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="birthname" />
                     </div>
 
                     {{-- nickname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="childForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="nickname" />
+                        <x-ts-input wire:model="childForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="nickname" />
                     </div>
                     <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -44,24 +44,24 @@
                     {{-- gender_id --}}
                     <div class="col-span-6 md:col-span-3">
                         <x-ts-select.styled wire:model="childForm.gender_id" id="gender_id" label="{{ __('person.gender') }}" :options="$childForm->genders()" select="label:name|value:id"
-                            placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                            placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                     </div>
                     <x-hr.narrow class="col-span-6 !my-0" />
 
                     {{-- yob --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="childForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="yob" />
+                        <x-ts-input wire:model="childForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="yob" />
                     </div>
 
                     {{-- dob --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-date wire:model="childForm.dob" id="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
+                        <x-ts-date wire:model="childForm.dob" id="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
                             placeholder="{{ __('app.select') }} ..." />
                     </div>
 
                     {{-- pob --}}
                     <div class="col-span-6">
-                        <x-ts-input wire:model="childForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="pod" />
+                        <x-ts-input wire:model="childForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="pod" />
                     </div>
                     <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -104,7 +104,7 @@
                 {{-- person_id --}}
                 <div class="col-span-6">
                     <x-ts-select.styled wire:model="childForm.person_id" id="person_id" label="{{ __('person.person') }}" :options="$persons" select="label:name|value:id"
-                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
             </div>
 
diff --git a/resources/views/livewire/people/add/partner.blade.php b/resources/views/livewire/people/add/partner.blade.php
index 16cd73ce2..96395e794 100644
--- a/resources/views/livewire/people/add/partner.blade.php
+++ b/resources/views/livewire/people/add/partner.blade.php
@@ -9,22 +9,22 @@
                 <div class="grid grid-cols-6 gap-5">
                     {{-- firstname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="partnerForm.firstname" id="firstname" label="{{ __('person.firstname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="firstname" />
+                        <x-ts-input wire:model="partnerForm.firstname" id="firstname" label="{{ __('person.firstname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="firstname" />
                     </div>
 
                     {{-- surname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="partnerForm.surname" id="surname" label="{{ __('person.surname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="surname" />
+                        <x-ts-input wire:model="partnerForm.surname" id="surname" label="{{ __('person.surname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="surname" />
                     </div>
 
                     {{-- birthname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="partnerForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="birthname" />
+                        <x-ts-input wire:model="partnerForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="birthname" />
                     </div>
 
                     {{-- nickname --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="partnerForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="nickname" />
+                        <x-ts-input wire:model="partnerForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="nickname" />
                     </div>
                     <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -44,24 +44,24 @@
                     {{-- gender_id --}}
                     <div class="col-span-6 md:col-span-3">
                         <x-ts-select.styled wire:model="partnerForm.gender_id" id="gender_id" label="{{ __('person.gender') }}" :options="$partnerForm->genders()" select="label:name|value:id"
-                            placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                            placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                     </div>
                     <x-hr.narrow class="col-span-6 !my-0" />
 
                     {{-- yob --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-input wire:model="partnerForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="yob" />
+                        <x-ts-input wire:model="partnerForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="yob" />
                     </div>
 
                     {{-- dob --}}
                     <div class="col-span-6 md:col-span-3">
-                        <x-ts-date wire:model="partnerForm.dob" id="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
+                        <x-ts-date wire:model="partnerForm.dob" id="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
                             placeholder="{{ __('app.select') }} ..." />
                     </div>
 
                     {{-- pob --}}
                     <div class="col-span-6">
-                        <x-ts-input wire:model="partnerForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="pod" />
+                        <x-ts-input wire:model="partnerForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="pod" />
                     </div>
                     <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -80,13 +80,13 @@
                 <div class="grid grid-cols-6 gap-5">
                     {{-- date_start --}}
                     <div class="col-span-3">
-                        <x-ts-date wire:model="partnerForm.date_start" id="date_start" label="{{ __('couple.date_start') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                        <x-ts-date wire:model="partnerForm.date_start" id="date_start" label="{{ __('couple.date_start') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                             :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                     </div>
 
                     {{-- date_end --}}
                     <div class="col-span-3">
-                        <x-ts-date wire:model="partnerForm.date_end" id="date_end" label="{{ __('couple.date_end') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                        <x-ts-date wire:model="partnerForm.date_end" id="date_end" label="{{ __('couple.date_end') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                             :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                     </div>
 
@@ -133,18 +133,18 @@
                     {{-- person2_id --}}
                     <div class="col-span-6">
                         <x-ts-select.styled wire:model="partnerForm.person2_id" id="person2_id" label="{{ __('person.partner') }}" :options="$persons" select="label:name|value:id"
-                            placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable required />
+                            placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable required />
                     </div>
 
                     {{-- date_start --}}
                     <div class="col-span-3">
-                        <x-ts-date wire:model="partnerForm.date_start" id="date_start" label="{{ __('couple.date_start') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                        <x-ts-date wire:model="partnerForm.date_start" id="date_start" label="{{ __('couple.date_start') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                             :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                     </div>
 
                     {{-- date_end --}}
                     <div class="col-span-3">
-                        <x-ts-date wire:model="partnerForm.date_end" id="date_end" label="{{ __('couple.date_end') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                        <x-ts-date wire:model="partnerForm.date_end" id="date_end" label="{{ __('couple.date_end') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                             :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                     </div>
 
diff --git a/resources/views/livewire/people/add/person.blade.php b/resources/views/livewire/people/add/person.blade.php
index 6ce587e89..bae9e2b84 100644
--- a/resources/views/livewire/people/add/person.blade.php
+++ b/resources/views/livewire/people/add/person.blade.php
@@ -20,23 +20,23 @@
             <div class="grid grid-cols-6 gap-5">
                 {{-- firstname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="personForm.firstname" id="firstname" label="{{ __('person.firstname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="firstname"
+                    <x-ts-input wire:model="personForm.firstname" id="firstname" label="{{ __('person.firstname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="firstname"
                         autofocus />
                 </div>
 
                 {{-- surname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="personForm.surname" id="surname" label="{{ __('person.surname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="surname" />
+                    <x-ts-input wire:model="personForm.surname" id="surname" label="{{ __('person.surname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="surname" />
                 </div>
 
                 {{-- birthname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="personForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="birthname" />
+                    <x-ts-input wire:model="personForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="birthname" />
                 </div>
 
                 {{-- nickname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="personForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="nickname" />
+                    <x-ts-input wire:model="personForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="nickname" />
                 </div>
                 <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -56,24 +56,24 @@
                 {{-- gender_id --}}
                 <div class="col-span-6 md:col-span-3">
                     <x-ts-select.styled wire:model="gender_id" id="gender_id" label="{{ __('person.gender') }}" :options="$personForm->genders()" select="label:name|value:id" placeholder="{{ __('app.select') }} ..."
-                        wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
                 <x-hr.narrow class="col-span-6 !my-0" />
 
                 {{-- yob --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="personForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="yob" />
+                    <x-ts-input wire:model="personForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="yob" />
                 </div>
 
                 {{-- dob --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-date wire:model="personForm.dob" id="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
+                    <x-ts-date wire:model="personForm.dob" id="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
                         placeholder="{{ __('app.select') }} ..." />
                 </div>
 
                 {{-- pob --}}
                 <div class="col-span-6">
-                    <x-ts-input wire:model="personForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="pod" />
+                    <x-ts-input wire:model="personForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="pod" />
                 </div>
                 <x-hr.narrow class="col-span-6 !my-0" />
 
diff --git a/resources/views/livewire/people/edit/contact.blade.php b/resources/views/livewire/people/edit/contact.blade.php
index 15119c8e1..483e71825 100644
--- a/resources/views/livewire/people/edit/contact.blade.php
+++ b/resources/views/livewire/people/edit/contact.blade.php
@@ -20,39 +20,39 @@
             <div class="grid grid-cols-6 gap-5">
                 {{-- street --}}
                 <div class="col-span-4">
-                    <x-ts-input wire:model="contactForm.street" id="street" label="{{ __('person.street') }}" autocomplete="street" wire:dirty.class="bg-warning-100 dark:text-black" autofocus />
+                    <x-ts-input wire:model="contactForm.street" id="street" label="{{ __('person.street') }}" autocomplete="street" wire:dirty.class="bg-warning-200 dark:text-black" autofocus />
                 </div>
 
                 {{-- number --}}
                 <div class="col-span-2">
-                    <x-ts-input wire:model="contactForm.number" id="number" label="{{ __('person.number') }}" autocomplete="number" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="contactForm.number" id="number" label="{{ __('person.number') }}" autocomplete="number" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- postal_code --}}
                 <div class="col-span-2">
                     <x-ts-input wire:model="contactForm.postal_code" id="postal_code" label="{{ __('person.postal_code') }}" autocomplete="postal_code"
-                        wire:dirty.class="bg-warning-100 dark:text-black" />
+                        wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- city --}}
                 <div class="col-span-4">
-                    <x-ts-input wire:model="contactForm.city" id="postal_code" label="{{ __('person.city') }}" autocomplete="city" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="contactForm.city" id="postal_code" label="{{ __('person.city') }}" autocomplete="city" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- province --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="contactForm.province" id="province" label="{{ __('person.province') }}" autocomplete="province" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="contactForm.province" id="province" label="{{ __('person.province') }}" autocomplete="province" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- state --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="contactForm.state" id="province" label="{{ __('person.state') }}" autocomplete="state" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="contactForm.state" id="province" label="{{ __('person.state') }}" autocomplete="state" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- country_id --}}
                 <div class="col-span-5">
                     <x-ts-select.styled wire:model="contactForm.country_id" id="country_id" label="{{ __('person.country') }}" :options="$contactForm->countries()" select="label:name|value:id"
-                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
 
                 {{-- show on google maps button --}}
@@ -67,7 +67,7 @@
 
                 {{-- phone --}}
                 <div class="col-span-6">
-                    <x-ts-input wire:model="contactForm.phone" id="phone" label="{{ __('person.phone') }}" autocomplete="phone" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="contactForm.phone" id="phone" label="{{ __('person.phone') }}" autocomplete="phone" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/people/edit/death.blade.php b/resources/views/livewire/people/edit/death.blade.php
index a393d5d3a..8337dfd01 100644
--- a/resources/views/livewire/people/edit/death.blade.php
+++ b/resources/views/livewire/people/edit/death.blade.php
@@ -20,18 +20,18 @@
             <div class="grid grid-cols-6 gap-5">
                 {{-- yod --}}
                 <div class="col-span-3">
-                    <x-ts-input wire:model="deathForm.yod" id="yod" label="{{ __('person.yod') }}" wire:dirty.class="bg-warning-100 dark:text-black" autofocus />
+                    <x-ts-input wire:model="deathForm.yod" id="yod" label="{{ __('person.yod') }}" wire:dirty.class="bg-warning-200 dark:text-black" autofocus />
                 </div>
 
                 {{-- dod --}}
                 <div class="col-span-3">
-                    <x-ts-date wire:model="deathForm.dod" id="dod" label="{{ __('person.dod') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
+                    <x-ts-date wire:model="deathForm.dod" id="dod" label="{{ __('person.dod') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD" :max-date="now()"
                         placeholder="{{ __('app.select') }} ..." />
                 </div>
 
                 {{-- pod --}}
                 <div class="col-span-6">
-                    <x-ts-input wire:model="deathForm.pod" id="pod" label="{{ __('person.pod') }}" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="deathForm.pod" id="pod" label="{{ __('person.pod') }}" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
                 <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -53,25 +53,25 @@
                 {{-- cemetery_location_name --}}
                 <div class="col-span-6">
                     <x-ts-input wire:model="deathForm.cemetery_location_name" id="cemetery_location_name" label="{{ __('metadata.location_name') }}"
-                        wire:dirty.class="bg-warning-100 dark:text-black" />
+                        wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- cemetery_location_address --}}
                 <div class="col-span-6">
                     <x-ts-textarea wire:model="deathForm.cemetery_location_address" id="cemetery_location_address" label="{{ __('metadata.address') }}"
-                        wire:dirty.class="bg-warning-100 dark:text-black" resize-auto />
+                        wire:dirty.class="bg-warning-200 dark:text-black" resize-auto />
                 </div>
 
                 {{-- cemetery_location_latitude --}}
                 <div class="col-span-3">
                     <x-ts-input wire:model="deathForm.cemetery_location_latitude" id="cemetery_location_latitude" label="{{ __('metadata.latitude') }}"
-                        wire:dirty.class="bg-warning-100 dark:text-black" />
+                        wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- cemetery_location_longitude --}}
                 <div class="col-span-3">
                     <x-ts-input wire:model="deathForm.cemetery_location_longitude" id="cemetery_location_longitude" label="{{ __('metadata.longitude') }}"
-                        wire:dirty.class="bg-warning-100 dark:text-black" />
+                        wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/people/edit/family.blade.php b/resources/views/livewire/people/edit/family.blade.php
index 3aa5790ad..0cb33f344 100644
--- a/resources/views/livewire/people/edit/family.blade.php
+++ b/resources/views/livewire/people/edit/family.blade.php
@@ -21,13 +21,13 @@
                 {{-- father_id --}}
                 <div class="col-span-6">
                     <x-ts-select.styled wire:model="familyForm.father_id" id="father_id" label="{{ __('person.father') }} ({{ __('person.biological') }})" :options="$fathers"
-                        select="label:name|value:id" placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        select="label:name|value:id" placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
 
                 {{-- mother_id --}}
                 <div class="col-span-6">
                     <x-ts-select.styled wire:model="familyForm.mother_id" id="mother_id" label="{{ __('person.mother') }} ({{ __('person.biological') }})" :options="$mothers"
-                        select="label:name|value:id" placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        select="label:name|value:id" placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
 
                 <div class="col-span-6 text-sm rounded bg-warning-200 p-3 text-warning-700" role="alert">
@@ -40,7 +40,7 @@
                 {{-- parents_id --}}
                 <div class="col-span-6">
                     <x-ts-select.styled wire:model="familyForm.parents_id" id="parents_id" label="{{ __('person.parents') }}" :options="$parents" select="label:couple|value:id"
-                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/people/edit/partner.blade.php b/resources/views/livewire/people/edit/partner.blade.php
index b1a121784..d23e0d8a6 100644
--- a/resources/views/livewire/people/edit/partner.blade.php
+++ b/resources/views/livewire/people/edit/partner.blade.php
@@ -21,18 +21,18 @@
                 {{-- person2_id --}}
                 <div class="col-span-6">
                     <x-ts-select.styled wire:model="partnerForm.person2_id" id="person2_id" label="{{ __('person.partner') }}" :options="$persons" select="label:name|value:id"
-                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
 
                 {{-- date_start --}}
                 <div class="col-span-3">
-                    <x-ts-date wire:model="partnerForm.date_start" id="date_start" label="{{ __('couple.date_start') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                    <x-ts-date wire:model="partnerForm.date_start" id="date_start" label="{{ __('couple.date_start') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                         :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                 </div>
 
                 {{-- date_end --}}
                 <div class="col-span-3">
-                    <x-ts-date wire:model="partnerForm.date_end" id="date_end" label="{{ __('couple.date_end') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                    <x-ts-date wire:model="partnerForm.date_end" id="date_end" label="{{ __('couple.date_end') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                         :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                 </div>
 
diff --git a/resources/views/livewire/people/edit/photos.blade.php b/resources/views/livewire/people/edit/photos.blade.php
index 2677b5041..e32d2ea5b 100644
--- a/resources/views/livewire/people/edit/photos.blade.php
+++ b/resources/views/livewire/people/edit/photos.blade.php
@@ -46,7 +46,7 @@
                     @foreach ($images as $image)
                         <x-ts-card class="!p-2">
                             <x-slot:header>
-                                <div class="text-sm {{ $image['name'] == $person->photo ? ' text-primary-500' : '' }}">
+                                <div class="text-sm {{ $image['name'] == $person->photo ? ' text-warning-500 dark:text-warning-200' : '' }}">
                                     {{ $image['name'] }}
                                 </div>
                             </x-slot:header>
diff --git a/resources/views/livewire/people/edit/profile.blade.php b/resources/views/livewire/people/edit/profile.blade.php
index 7781bdfe8..aeafbd59c 100644
--- a/resources/views/livewire/people/edit/profile.blade.php
+++ b/resources/views/livewire/people/edit/profile.blade.php
@@ -20,22 +20,22 @@
             <div class="grid grid-cols-6 gap-5">
                 {{-- firstname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="profileForm.firstname" id="firstname" label="{{ __('person.firstname') }} *" wire:dirty.class="bg-warning-100 dark:text-black" required autofocus />
+                    <x-ts-input wire:model="profileForm.firstname" id="firstname" label="{{ __('person.firstname') }} *" wire:dirty.class="bg-warning-200 dark:text-black" required autofocus />
                 </div>
 
                 {{-- surname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="profileForm.surname" id="surname" label="{{ __('person.surname') }} *" wire:dirty.class="bg-warning-100 dark:text-black" required />
+                    <x-ts-input wire:model="profileForm.surname" id="surname" label="{{ __('person.surname') }} *" wire:dirty.class="bg-warning-200 dark:text-black" required />
                 </div>
 
                 {{-- birthname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="profileForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="profileForm.birthname" id="birthname" label="{{ __('person.birthname') }}" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- nickname --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="profileForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="profileForm.nickname" id="nickname" label="{{ __('person.nickname') }}" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
                 <x-hr.narrow class="col-span-6 !my-0" />
 
@@ -55,24 +55,24 @@
                 {{-- gender_id --}}
                 <div class="col-span-3">
                     <x-ts-select.styled wire:model="profileForm.gender_id" id="gender_id" label="{{ __('person.gender') }}" :options="$profileForm->genders()" select="label:name|value:id"
-                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-100 dark:text-black" searchable />
+                        placeholder="{{ __('app.select') }} ..." wire:dirty.class="bg-warning-200 dark:text-black" searchable />
                 </div>
                 <x-hr.narrow class="col-span-6 !my-0" />
 
                 {{-- yob --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-input wire:model="profileForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-100 dark:text-black" />
+                    <x-ts-input wire:model="profileForm.yob" id="yob" label="{{ __('person.yob') }}" wire:dirty.class="bg-warning-200 dark:text-black" />
                 </div>
 
                 {{-- dob --}}
                 <div class="col-span-6 md:col-span-3">
-                    <x-ts-date wire:model="profileForm.dob" id="dob" name="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-100 dark:text-black" format="YYYY-MM-DD"
+                    <x-ts-date wire:model="profileForm.dob" id="dob" name="dob" label="{{ __('person.dob') }}" wire:dirty.class="bg-warning-200 dark:text-black" format="YYYY-MM-DD"
                         :max-date="now()" placeholder="{{ __('app.select') }} ..." />
                 </div>
 
                 {{-- pob --}}
                 <div class="col-span-6">
-                    <x-ts-input wire:model="profileForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-100 dark:text-black" autocomplete="pod" />
+                    <x-ts-input wire:model="profileForm.pob" id="pob" label="{{ __('person.pob') }}" wire:dirty.class="bg-warning-200 dark:text-black" autocomplete="pod" />
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/people/photos.blade.php b/resources/views/livewire/people/photos.blade.php
index 5639fbb08..ad22adc82 100644
--- a/resources/views/livewire/people/photos.blade.php
+++ b/resources/views/livewire/people/photos.blade.php
@@ -23,7 +23,7 @@ class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray
                 @foreach (range(0, count($images) - 1) as $i)
                     @if ($i == $selected)
                         <span
-                            class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-warning-300 dark:bg-warning-200 border border-gray-300 cursor-default leading-5 select-none">
+                            class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-warning-500 dark:bg-warning-200 border border-gray-300 cursor-default leading-5 select-none">
                             {{ $i + 1 }}
                         </span>
                     @else
@@ -53,7 +53,7 @@ class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium te
                     @if ($i >= $selected - 1 && $i <= $selected + 1)
                         @if ($i == $selected)
                             <span
-                                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-warning-300 dark:bg-warning-200 border border-gray-300 cursor-default leading-5 select-none">
+                                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-warning-500 dark:bg-warning-200 border border-gray-300 cursor-default leading-5 select-none">
                                 {{ $i + 1 }}
                             </span>
                         @else