From ccc774064ce8b291158dc779573414b3a57410dc Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Fri, 25 Oct 2024 09:20:00 +0200
Subject: [PATCH] #431 - bump everything (#497)

* #431 - bump everything

* cs fix

* fix

* fix

* equipment export fix

* lint fix
---
 .eslintrc.js                                  |   28 -
 app/Domain/EquipmentExport.php                |    2 +-
 app/Domain/OvertimeTimesheetPerUserSheet.php  |   74 +-
 app/Domain/TimesheetPerUserSheet.php          |   74 +-
 app/Enums/EmploymentForm.php                  |   10 +-
 app/Enums/Month.php                           |   20 +-
 app/Enums/Role.php                            |   10 +-
 app/Enums/SettlementType.php                  |   10 +-
 app/Enums/UserHistoryType.php                 |   10 +-
 app/Enums/VacationType.php                    |   10 +-
 .../DashboardVacationRequestResource.php      |    3 +-
 .../Resources/VacationRequestResource.php     |    3 +-
 app/Models/EquipmentItem.php                  |    1 +
 codestyle.php                                 |    4 +-
 composer.json                                 |   47 +-
 composer.lock                                 |  603 ++---
 eslint.config.js                              |   10 +
 package-lock.json                             | 2089 ++++++++++++-----
 package.json                                  |   33 +-
 postcss.config.js                             |    2 +-
 resources/js/Composables/useGlobalProps.js    |   16 +
 resources/js/Pages/AnnualSummary.vue          |   55 +-
 .../AssignedBenefits/AssignedBenefits.vue     |  475 ++--
 resources/js/Pages/Benefits/Benefits.vue      |  438 ++--
 resources/js/Pages/BenefitsReport/Index.vue   |  230 +-
 resources/js/Pages/BenefitsReport/Show.vue    |  269 +--
 resources/js/Pages/Calendar.vue               |  306 +--
 resources/js/Pages/Dashboard.vue              |   87 +-
 resources/js/Pages/EmployeesMilestones.vue    |  339 +--
 resources/js/Pages/Equipment/Create.vue       |  440 ++--
 resources/js/Pages/Equipment/Edit.vue         |  440 ++--
 resources/js/Pages/Equipment/Index.vue        |  667 +++---
 .../js/Pages/Equipment/IndexForEmployee.vue   |  241 +-
 resources/js/Pages/EquipmentLabels.vue        |  372 +--
 resources/js/Pages/Error.vue                  |  145 +-
 resources/js/Pages/Holidays/Create.vue        |  148 +-
 resources/js/Pages/Holidays/Edit.vue          |  148 +-
 resources/js/Pages/Holidays/Index.vue         |  291 +--
 resources/js/Pages/Keys.vue                   |  650 ++---
 resources/js/Pages/LocalLogin.vue             |  151 +-
 resources/js/Pages/Login.vue                  |  127 +-
 resources/js/Pages/MonthlyUsage.vue           |  183 +-
 .../Pages/OvertimeRequest/ApproversIndex.vue  |  636 ++---
 resources/js/Pages/OvertimeRequest/Create.vue |  402 ++--
 resources/js/Pages/OvertimeRequest/Index.vue  |  378 +--
 .../OvertimeRequest/IndexForApprovers.vue     |  552 ++---
 resources/js/Pages/OvertimeRequest/Show.vue   |  394 ++--
 resources/js/Pages/Permissions/Edit.vue       |  216 +-
 resources/js/Pages/Resumes/Create.vue         |  938 ++++----
 resources/js/Pages/Resumes/Edit.vue           |  938 ++++----
 resources/js/Pages/Resumes/Index.vue          |  392 ++--
 resources/js/Pages/Technologies.vue           |  372 +--
 resources/js/Pages/UserHistory/Create.vue     |  470 ++--
 resources/js/Pages/UserHistory/Edit.vue       |  470 ++--
 resources/js/Pages/UserHistory/Index.vue      |  298 +--
 resources/js/Pages/Users/Create.vue           |  528 ++---
 resources/js/Pages/Users/Edit.vue             |  532 ++---
 resources/js/Pages/Users/Index.vue            |  622 ++---
 resources/js/Pages/Users/Show.vue             |  246 +-
 resources/js/Pages/VacationLimits.vue         |  352 +--
 resources/js/Pages/VacationRequest/Create.vue |  622 ++---
 resources/js/Pages/VacationRequest/Index.vue  |  400 ++--
 .../VacationRequest/IndexForApprovers.vue     |  686 +++---
 resources/js/Pages/VacationRequest/Show.vue   |  536 ++---
 resources/js/Shared/Activity.vue              |    4 +-
 resources/js/Shared/CalendarComponent.vue     |   12 +-
 resources/js/Shared/Feedbacks/EmptyState.vue  |    2 +-
 resources/js/Shared/Forms/Combobox.vue        |    6 +-
 resources/js/Shared/Forms/DynamicSection.vue  |    8 +-
 .../js/Shared/Forms/MultipleCombobox.vue      |   12 +-
 resources/js/Shared/Forms/YearPicker.vue      |    8 +-
 resources/js/Shared/InertiaLink.js            |   65 -
 resources/js/Shared/InertiaLink.vue           |   16 +
 resources/js/Shared/Layout/AppLayout.vue      |   40 +-
 resources/js/Shared/Layout/GuestLayout.vue    |    9 +-
 resources/js/Shared/MainMenu.vue              |   78 +-
 .../TakeVacationDaysFromPreviousYearModal.vue |   10 +-
 resources/js/Shared/SettlementType.vue        |    2 +-
 resources/js/Shared/Status.vue                |    2 +-
 resources/js/Shared/UserProfileLink.vue       |    5 +-
 resources/js/Shared/VacationPopup.vue         |    1 +
 resources/js/Shared/VacationType.vue          |    2 +-
 resources/js/Shared/Widgets/AbsenceList.vue   |    8 +-
 resources/js/Shared/Widgets/BenefitList.vue   |    2 +-
 resources/js/Shared/Widgets/BirthdaysList.vue |    4 +-
 .../Shared/Widgets/Calendar/DayComponent.vue  |   15 +-
 .../Widgets/PendingVacationRequests.vue       |    5 +-
 .../js/Shared/Widgets/RemoteWorkList.vue      |    4 +-
 .../js/Shared/Widgets/UpcomingHolidays.vue    |    2 +
 .../Shared/Widgets/UserOvertimeRequests.vue   |    3 +-
 .../Shared/Widgets/UserVacationRequests.vue   |    3 +-
 .../js/Shared/Widgets/VacationCalendar.vue    |   18 +-
 resources/js/Shared/Widgets/Welcome.vue       |    2 +-
 resources/js/app.js                           |   37 +-
 setup                                         |   14 -
 tailwind.config.js                            |   11 +-
 tests/DuskTestCase.php                        |   10 +-
 .../Commands/Users/CreateUserCommandTest.php  |   38 +-
 vite.config.js                                |   13 +-
 99 files changed, 10883 insertions(+), 9829 deletions(-)
 delete mode 100644 .eslintrc.js
 create mode 100644 eslint.config.js
 create mode 100644 resources/js/Composables/useGlobalProps.js
 delete mode 100644 resources/js/Shared/InertiaLink.js
 create mode 100644 resources/js/Shared/InertiaLink.vue
 delete mode 100644 setup

diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 26a4efb8..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,28 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    'vue/setup-compiler-macros': true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-  ],
-  rules: {
-    semi: [2, 'never'],
-    quotes: ['error', 'single'],
-    indent: ['error', 2],
-    'eol-last': ['error', 'always'],
-    'vue/html-indent': ['error', 2],
-    'comma-dangle': ['error', 'always-multiline'],
-    'comma-spacing': ['error'],
-    'key-spacing': ['error'],
-    'object-curly-spacing': ['error', 'always'],
-    'vue/require-default-prop': 0,
-    'vue/multi-word-component-names': 0,
-    'vue/padding-line-between-blocks': ['error', 'always'],
-    'vue/component-tags-order': ['error', {
-      'order': ['script', 'template', 'style']
-    }],
-    'vue/no-setup-props-destructure': 0,
-  },
-}
diff --git a/app/Domain/EquipmentExport.php b/app/Domain/EquipmentExport.php
index 01966703..d203ff7c 100644
--- a/app/Domain/EquipmentExport.php
+++ b/app/Domain/EquipmentExport.php
@@ -37,7 +37,7 @@ public function generator(): Generator
                 $equipmentItem->id_number,
                 $equipmentItem->name,
                 $equipmentItem->labels?->implode(", "),
-                $equipmentItem->is_mobile,
+                $equipmentItem->is_mobile ? "Tak" : "Nie",
                 $equipmentItem->assignee->profile->full_name ?? "",
                 $equipmentItem->assigned_at ? Date::dateTimeToExcel($equipmentItem->assigned_at) : "",
             ];
diff --git a/app/Domain/OvertimeTimesheetPerUserSheet.php b/app/Domain/OvertimeTimesheetPerUserSheet.php
index 246369cc..8ed969ce 100644
--- a/app/Domain/OvertimeTimesheetPerUserSheet.php
+++ b/app/Domain/OvertimeTimesheetPerUserSheet.php
@@ -37,6 +37,43 @@ public function __construct(
         protected Carbon $month,
     ) {}
 
+    public static function afterSheet(AfterSheet $event): void
+    {
+        $sheet = $event->getSheet();
+        $lastRow = $sheet->getDelegate()->getHighestRow();
+
+        $sheet->append([
+            __("Sum:"),
+            null,
+            null,
+            null,
+            "=SUM(E2:E{$lastRow})",
+        ]);
+
+        $lastRow++;
+
+        $sheet->getDelegate()->getStyle("A{$lastRow}")
+            ->getAlignment()
+            ->setHorizontal(Alignment::HORIZONTAL_RIGHT);
+
+        $sheet->getDelegate()->getStyle("A{$lastRow}")
+            ->getFont()
+            ->setBold(true);
+
+        $sheet->getDelegate()->getStyle("E{$lastRow}")
+            ->getAlignment()
+            ->setHorizontal(Alignment::HORIZONTAL_CENTER);
+
+        $sheet->getDelegate()->mergeCells("A{$lastRow}:D{$lastRow}");
+
+        $sheet->getDelegate()->getStyle("A{$lastRow}:E{$lastRow}")
+            ->getBorders()
+            ->getAllBorders()
+            ->setBorderStyle(Border::BORDER_THIN)
+            ->getColor()
+            ->setRGB("B7B7B7");
+    }
+
     public function title(): string
     {
         return $this->user->profile->full_name;
@@ -141,43 +178,6 @@ public function styles(Worksheet $sheet): void
             ->setRGB("B7B7B7");
     }
 
-    public static function afterSheet(AfterSheet $event): void
-    {
-        $sheet = $event->getSheet();
-        $lastRow = $sheet->getDelegate()->getHighestRow();
-
-        $sheet->append([
-            __("Sum:"),
-            null,
-            null,
-            null,
-            "=SUM(E2:E{$lastRow})",
-        ]);
-
-        $lastRow++;
-
-        $sheet->getDelegate()->getStyle("A{$lastRow}")
-            ->getAlignment()
-            ->setHorizontal(Alignment::HORIZONTAL_RIGHT);
-
-        $sheet->getDelegate()->getStyle("A{$lastRow}")
-            ->getFont()
-            ->setBold(true);
-
-        $sheet->getDelegate()->getStyle("E{$lastRow}")
-            ->getAlignment()
-            ->setHorizontal(Alignment::HORIZONTAL_CENTER);
-
-        $sheet->getDelegate()->mergeCells("A{$lastRow}:D{$lastRow}");
-
-        $sheet->getDelegate()->getStyle("A{$lastRow}:E{$lastRow}")
-            ->getBorders()
-            ->getAllBorders()
-            ->setBorderStyle(Border::BORDER_THIN)
-            ->getColor()
-            ->setRGB("B7B7B7");
-    }
-
     protected function getOvertimeForPeriod(User $user, CarbonPeriod $period): Collection
     {
         return $user->overtimeRequests()
diff --git a/app/Domain/TimesheetPerUserSheet.php b/app/Domain/TimesheetPerUserSheet.php
index c8e43ffd..56a0a291 100644
--- a/app/Domain/TimesheetPerUserSheet.php
+++ b/app/Domain/TimesheetPerUserSheet.php
@@ -44,6 +44,43 @@ public function __construct(
         protected Collection $types,
     ) {}
 
+    public static function afterSheet(AfterSheet $event): void
+    {
+        $sheet = $event->getSheet();
+        $lastRow = $sheet->getDelegate()->getHighestRow();
+
+        $sheet->append([
+            __("Sum:"),
+            null,
+            null,
+            null,
+            "=SUM(E2:E{$lastRow})",
+        ]);
+
+        $lastRow++;
+
+        $sheet->getDelegate()->getStyle("A{$lastRow}")
+            ->getAlignment()
+            ->setHorizontal(Alignment::HORIZONTAL_RIGHT);
+
+        $sheet->getDelegate()->getStyle("A{$lastRow}")
+            ->getFont()
+            ->setBold(true);
+
+        $sheet->getDelegate()->getStyle("E{$lastRow}")
+            ->getAlignment()
+            ->setHorizontal(Alignment::HORIZONTAL_CENTER);
+
+        $sheet->getDelegate()->mergeCells("A{$lastRow}:D{$lastRow}");
+
+        $sheet->getDelegate()->getStyle("A{$lastRow}:E{$lastRow}")
+            ->getBorders()
+            ->getAllBorders()
+            ->setBorderStyle(Border::BORDER_THIN)
+            ->getColor()
+            ->setRGB("B7B7B7");
+    }
+
     public function title(): string
     {
         return $this->user->profile->full_name;
@@ -146,43 +183,6 @@ public function styles(Worksheet $sheet): void
             ->setRGB("B7B7B7");
     }
 
-    public static function afterSheet(AfterSheet $event): void
-    {
-        $sheet = $event->getSheet();
-        $lastRow = $sheet->getDelegate()->getHighestRow();
-
-        $sheet->append([
-            __("Sum:"),
-            null,
-            null,
-            null,
-            "=SUM(E2:E{$lastRow})",
-        ]);
-
-        $lastRow++;
-
-        $sheet->getDelegate()->getStyle("A{$lastRow}")
-            ->getAlignment()
-            ->setHorizontal(Alignment::HORIZONTAL_RIGHT);
-
-        $sheet->getDelegate()->getStyle("A{$lastRow}")
-            ->getFont()
-            ->setBold(true);
-
-        $sheet->getDelegate()->getStyle("E{$lastRow}")
-            ->getAlignment()
-            ->setHorizontal(Alignment::HORIZONTAL_CENTER);
-
-        $sheet->getDelegate()->mergeCells("A{$lastRow}:D{$lastRow}");
-
-        $sheet->getDelegate()->getStyle("A{$lastRow}:E{$lastRow}")
-            ->getBorders()
-            ->getAllBorders()
-            ->setBorderStyle(Border::BORDER_THIN)
-            ->getColor()
-            ->setRGB("B7B7B7");
-    }
-
     protected function getVacationsForPeriod(User $user, CarbonPeriod $period): Collection
     {
         return $user->vacations()
diff --git a/app/Enums/EmploymentForm.php b/app/Enums/EmploymentForm.php
index 0a728ead..a428fbb6 100644
--- a/app/Enums/EmploymentForm.php
+++ b/app/Enums/EmploymentForm.php
@@ -11,11 +11,6 @@ enum EmploymentForm: string
     case B2bContract = "b2b_contract";
     case BoardMemberContract = "board_member_contract";
 
-    public function label(): string
-    {
-        return __($this->value);
-    }
-
     public static function casesToSelect(): array
     {
         $cases = collect(EmploymentForm::cases());
@@ -27,4 +22,9 @@ public static function casesToSelect(): array
             ],
         )->toArray();
     }
+
+    public function label(): string
+    {
+        return __($this->value);
+    }
 }
diff --git a/app/Enums/Month.php b/app/Enums/Month.php
index 8649a2ce..7c925e8c 100644
--- a/app/Enums/Month.php
+++ b/app/Enums/Month.php
@@ -23,6 +23,16 @@ enum Month: string
     case November = "november";
     case December = "december";
 
+    public static function current(): Month
+    {
+        return Month::from(Str::lower(Carbon::now()->englishMonth));
+    }
+
+    public static function fromNameOrCurrent(string $name): Month
+    {
+        return Month::tryFrom($name) ?? Month::current();
+    }
+
     public function toCarbonNumber(): int
     {
         return match ($this) {
@@ -40,14 +50,4 @@ public function toCarbonNumber(): int
             self::December => CarbonInterface::DECEMBER,
         };
     }
-
-    public static function current(): Month
-    {
-        return Month::from(Str::lower(Carbon::now()->englishMonth));
-    }
-
-    public static function fromNameOrCurrent(string $name): Month
-    {
-        return Month::tryFrom($name) ?? Month::current();
-    }
 }
diff --git a/app/Enums/Role.php b/app/Enums/Role.php
index 3709e78f..06730ed7 100644
--- a/app/Enums/Role.php
+++ b/app/Enums/Role.php
@@ -11,11 +11,6 @@ enum Role: string
     case TechnicalApprover = "technical_approver";
     case AdministrativeApprover = "administrative_approver";
 
-    public function label(): string
-    {
-        return __($this->value);
-    }
-
     public static function casesToSelect(): array
     {
         $cases = collect(Role::cases());
@@ -28,6 +23,11 @@ public static function casesToSelect(): array
         )->toArray();
     }
 
+    public function label(): string
+    {
+        return __($this->value);
+    }
+
     public function permissions(): array
     {
         return config("permission.permission_roles")[$this->value];
diff --git a/app/Enums/SettlementType.php b/app/Enums/SettlementType.php
index e84b871f..73389f2e 100644
--- a/app/Enums/SettlementType.php
+++ b/app/Enums/SettlementType.php
@@ -9,11 +9,6 @@ enum SettlementType: string
     case Hours = "hours";
     case Money = "money";
 
-    public function label(): string
-    {
-        return __($this->value);
-    }
-
     public static function casesToSelect(): array
     {
         return array_map(
@@ -24,4 +19,9 @@ public static function casesToSelect(): array
             SettlementType::cases(),
         );
     }
+
+    public function label(): string
+    {
+        return __($this->value);
+    }
 }
diff --git a/app/Enums/UserHistoryType.php b/app/Enums/UserHistoryType.php
index 6b4a2b9e..d4526a68 100644
--- a/app/Enums/UserHistoryType.php
+++ b/app/Enums/UserHistoryType.php
@@ -10,11 +10,6 @@ enum UserHistoryType: string
     case MedicalExam = "medical_exam";
     case OhsTraining = "ohs_training";
 
-    public function label(): string
-    {
-        return __($this->value);
-    }
-
     public static function casesToSelect(): array
     {
         $cases = collect(UserHistoryType::cases());
@@ -26,4 +21,9 @@ public static function casesToSelect(): array
             ],
         )->toArray();
     }
+
+    public function label(): string
+    {
+        return __($this->value);
+    }
 }
diff --git a/app/Enums/VacationType.php b/app/Enums/VacationType.php
index 44fefbeb..1cb4e6b1 100644
--- a/app/Enums/VacationType.php
+++ b/app/Enums/VacationType.php
@@ -21,11 +21,6 @@ enum VacationType: string
     case RemoteWork = "remote_work";
     case Delegation = "delegation";
 
-    public function label(): string
-    {
-        return __($this->value);
-    }
-
     public static function casesToSelect(): array
     {
         $cases = VacationType::all();
@@ -42,4 +37,9 @@ public static function all(): Collection
     {
         return new Collection(VacationType::cases());
     }
+
+    public function label(): string
+    {
+        return __($this->value);
+    }
 }
diff --git a/app/Http/Resources/DashboardVacationRequestResource.php b/app/Http/Resources/DashboardVacationRequestResource.php
index d4846a8e..d759a41f 100644
--- a/app/Http/Resources/DashboardVacationRequestResource.php
+++ b/app/Http/Resources/DashboardVacationRequestResource.php
@@ -10,7 +10,6 @@
 
 class DashboardVacationRequestResource extends JsonResource
 {
-    public static $wrap = null;
     protected VacationTypeConfigRetriever $configRetriever;
 
     public function __construct($resource)
@@ -20,6 +19,8 @@ public function __construct($resource)
         $this->configRetriever = app(VacationTypeConfigRetriever::class);
     }
 
+    public static $wrap = null;
+
     public function toArray($request): array
     {
         return [
diff --git a/app/Http/Resources/VacationRequestResource.php b/app/Http/Resources/VacationRequestResource.php
index d1698148..d24a965f 100644
--- a/app/Http/Resources/VacationRequestResource.php
+++ b/app/Http/Resources/VacationRequestResource.php
@@ -13,7 +13,6 @@
 
 class VacationRequestResource extends JsonResource
 {
-    public static $wrap = null;
     protected VacationTypeConfigRetriever $configRetriever;
 
     public function __construct($resource)
@@ -23,6 +22,8 @@ public function __construct($resource)
         $this->configRetriever = app(VacationTypeConfigRetriever::class);
     }
 
+    public static $wrap = null;
+
     public function toArray($request): array
     {
         $user = $request->user();
diff --git a/app/Models/EquipmentItem.php b/app/Models/EquipmentItem.php
index 10326d48..224fb6a8 100644
--- a/app/Models/EquipmentItem.php
+++ b/app/Models/EquipmentItem.php
@@ -30,6 +30,7 @@ class EquipmentItem extends Model
 
     protected $casts = [
         "assigned_at" => "date",
+        "is_mobile" => "boolean",
         "labels" => AsCollection::class,
     ];
     protected $fillable = [
diff --git a/codestyle.php b/codestyle.php
index 91a13c3a..e22e93d4 100644
--- a/codestyle.php
+++ b/codestyle.php
@@ -5,14 +5,12 @@
 use Blumilk\Codestyle\Config;
 use Blumilk\Codestyle\Configuration\Defaults\CommonRules;
 use Blumilk\Codestyle\Configuration\Defaults\LaravelPaths;
-use PhpCsFixer\Fixer\LanguageConstruct\ClassKeywordFixer;
 
 $paths = new LaravelPaths();
 $rules = new CommonRules();
 
 $config = new Config(
-    paths: $paths->add("codestyle.php", "bootstrap/providers.php"),
-    rules: $rules->filter(ClassKeywordFixer::class),
+    paths: $paths->add("codestyle.php"),
 );
 
 return $config->config();
diff --git a/composer.json b/composer.json
index fa096c3c..e84488d6 100644
--- a/composer.json
+++ b/composer.json
@@ -8,33 +8,34 @@
         "php": "^8.3",
         "ext-pdo": "*",
         "ext-redis": "*",
-        "azuyalabs/yasumi": "^2.7.0",
-        "barryvdh/laravel-dompdf": "^2.2.0",
-        "fakerphp/faker": "^1.23.1",
+        "azuyalabs/yasumi": "^2.7",
+        "barryvdh/laravel-dompdf": "^3.0",
+        "dompdf/dompdf": "^3.0",
+        "fakerphp/faker": "^1.23",
         "guzzlehttp/guzzle": "^7.9.2",
-        "inertiajs/inertia-laravel": "^1.3.0",
-        "laragear/cache-query": "^4.0.0",
-        "laravel/framework": "^11.25.0",
-        "laravel/sanctum": "^4.0.3",
-        "laravel/socialite": "^5.16.0",
+        "inertiajs/inertia-laravel": "^1.3",
+        "laragear/cache-query": "^4.0",
+        "laravel/framework": "^11.29",
+        "laravel/sanctum": "^4.0",
+        "laravel/socialite": "^5.16",
         "laravel/telescope": "^5.2.2",
-        "laravel/tinker": "^2.10.0",
-        "maatwebsite/excel": "^3.1.58",
-        "phpoffice/phpword": "^1.3.0",
-        "sentry/sentry-laravel": "^4.9.0",
-        "spatie/laravel-google-calendar": "^3.8.0",
-        "spatie/laravel-model-states": "^2.7.2",
-        "spatie/laravel-permission": "^6.9.0",
-        "spatie/laravel-slack-slash-command": "^1.12.0"
+        "laravel/tinker": "^2.10",
+        "maatwebsite/excel": "^3.1",
+        "phpoffice/phpword": "^1.3",
+        "sentry/sentry-laravel": "^4.9",
+        "spatie/laravel-google-calendar": "^3.8",
+        "spatie/laravel-model-states": "^2.7",
+        "spatie/laravel-permission": "^6.9",
+        "spatie/laravel-slack-slash-command": "^1.12"
     },
     "require-dev": {
-        "barryvdh/laravel-debugbar": "^3.14.2",
-        "blumilksoftware/codestyle": "^3.3.0",
-        "laravel/dusk": "^8.2.7",
-        "mockery/mockery": "^1.6.12",
-        "nunomaduro/collision": "^8.4.0",
-        "phpunit/phpunit": "^11.3.6",
-        "spatie/laravel-ignition": "^2.8.0"
+        "barryvdh/laravel-debugbar": "^3.14",
+        "blumilksoftware/codestyle": "^4.0",
+        "laravel/dusk": "^8.2",
+        "mockery/mockery": "^1.6",
+        "nunomaduro/collision": "^8.4",
+        "phpunit/phpunit": "^11.4",
+        "spatie/laravel-ignition": "^2.8"
     },
     "autoload": {
         "psr-4": {
diff --git a/composer.lock b/composer.lock
index fec70951..e261f9cc 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "060c72b2d85e09cdef7a076fef9aab7b",
+    "content-hash": "ddc53ce5f71d33f07e350f7419569eb7",
     "packages": [
         {
             "name": "azuyalabs/yasumi",
@@ -81,33 +81,33 @@
         },
         {
             "name": "barryvdh/laravel-dompdf",
-            "version": "v2.2.0",
+            "version": "v3.0.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/barryvdh/laravel-dompdf.git",
-                "reference": "c96f90c97666cebec154ca1ffb67afed372114d8"
+                "reference": "2d814cd25e299be022a4fa0fb4509d7ccd353d8a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/barryvdh/laravel-dompdf/zipball/c96f90c97666cebec154ca1ffb67afed372114d8",
-                "reference": "c96f90c97666cebec154ca1ffb67afed372114d8",
+                "url": "https://api.github.com/repos/barryvdh/laravel-dompdf/zipball/2d814cd25e299be022a4fa0fb4509d7ccd353d8a",
+                "reference": "2d814cd25e299be022a4fa0fb4509d7ccd353d8a",
                 "shasum": ""
             },
             "require": {
-                "dompdf/dompdf": "^2.0.7",
-                "illuminate/support": "^6|^7|^8|^9|^10|^11",
-                "php": "^7.2 || ^8.0"
+                "dompdf/dompdf": "^3.0",
+                "illuminate/support": "^9|^10|^11",
+                "php": "^8.1"
             },
             "require-dev": {
-                "larastan/larastan": "^1.0|^2.7.0",
-                "orchestra/testbench": "^4|^5|^6|^7|^8|^9",
-                "phpro/grumphp": "^1 || ^2.5",
+                "larastan/larastan": "^2.7.0",
+                "orchestra/testbench": "^7|^8|^9",
+                "phpro/grumphp": "^2.5",
                 "squizlabs/php_codesniffer": "^3.5"
             },
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "2.0-dev"
+                    "dev-master": "3.0-dev"
                 },
                 "laravel": {
                     "providers": [
@@ -142,7 +142,7 @@
             ],
             "support": {
                 "issues": "https://github.com/barryvdh/laravel-dompdf/issues",
-                "source": "https://github.com/barryvdh/laravel-dompdf/tree/v2.2.0"
+                "source": "https://github.com/barryvdh/laravel-dompdf/tree/v3.0.0"
             },
             "funding": [
                 {
@@ -154,7 +154,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-04-25T13:16:04+00:00"
+            "time": "2024-07-31T14:45:16+00:00"
         },
         {
             "name": "brick/math",
@@ -611,32 +611,34 @@
         },
         {
             "name": "dompdf/dompdf",
-            "version": "v2.0.8",
+            "version": "v3.0.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/dompdf/dompdf.git",
-                "reference": "c20247574601700e1f7c8dab39310fca1964dc52"
+                "reference": "fbc7c5ee5d94f7a910b78b43feb7931b7f971b59"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/dompdf/dompdf/zipball/c20247574601700e1f7c8dab39310fca1964dc52",
-                "reference": "c20247574601700e1f7c8dab39310fca1964dc52",
+                "url": "https://api.github.com/repos/dompdf/dompdf/zipball/fbc7c5ee5d94f7a910b78b43feb7931b7f971b59",
+                "reference": "fbc7c5ee5d94f7a910b78b43feb7931b7f971b59",
                 "shasum": ""
             },
             "require": {
+                "dompdf/php-font-lib": "^1.0.0",
+                "dompdf/php-svg-lib": "^1.0.0",
                 "ext-dom": "*",
                 "ext-mbstring": "*",
                 "masterminds/html5": "^2.0",
-                "phenx/php-font-lib": ">=0.5.4 <1.0.0",
-                "phenx/php-svg-lib": ">=0.5.2 <1.0.0",
                 "php": "^7.1 || ^8.0"
             },
             "require-dev": {
+                "ext-gd": "*",
                 "ext-json": "*",
                 "ext-zip": "*",
                 "mockery/mockery": "^1.3",
-                "phpunit/phpunit": "^7.5 || ^8 || ^9",
-                "squizlabs/php_codesniffer": "^3.5"
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10",
+                "squizlabs/php_codesniffer": "^3.5",
+                "symfony/process": "^4.4 || ^5.4 || ^6.2 || ^7.0"
             },
             "suggest": {
                 "ext-gd": "Needed to process images",
@@ -667,22 +669,113 @@
             "homepage": "https://github.com/dompdf/dompdf",
             "support": {
                 "issues": "https://github.com/dompdf/dompdf/issues",
-                "source": "https://github.com/dompdf/dompdf/tree/v2.0.8"
+                "source": "https://github.com/dompdf/dompdf/tree/v3.0.0"
+            },
+            "time": "2024-04-29T14:01:28+00:00"
+        },
+        {
+            "name": "dompdf/php-font-lib",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-font-lib.git",
+                "reference": "991d6a954f6bbd7e41022198f00586b230731441"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-font-lib/zipball/991d6a954f6bbd7e41022198f00586b230731441",
+                "reference": "991d6a954f6bbd7e41022198f00586b230731441",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "symfony/phpunit-bridge": "^3 || ^4 || ^5 || ^6"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "FontLib\\": "src/FontLib"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The FontLib Community",
+                    "homepage": "https://github.com/dompdf/php-font-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse, export and make subsets of different types of font files.",
+            "homepage": "https://github.com/dompdf/php-font-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-font-lib/issues",
+                "source": "https://github.com/dompdf/php-font-lib/tree/1.0.0"
+            },
+            "time": "2024-04-29T13:40:38+00:00"
+        },
+        {
+            "name": "dompdf/php-svg-lib",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-svg-lib.git",
+                "reference": "eb045e518185298eb6ff8d80d0d0c6b17aecd9af"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-svg-lib/zipball/eb045e518185298eb6ff8d80d0d0c6b17aecd9af",
+                "reference": "eb045e518185298eb6ff8d80d0d0c6b17aecd9af",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0",
+                "sabberworm/php-css-parser": "^8.4"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8.5 || ^9.5"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Svg\\": "src/Svg"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-3.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The SvgLib Community",
+                    "homepage": "https://github.com/dompdf/php-svg-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse and export to PDF SVG files.",
+            "homepage": "https://github.com/dompdf/php-svg-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-svg-lib/issues",
+                "source": "https://github.com/dompdf/php-svg-lib/tree/1.0.0"
             },
-            "time": "2024-04-29T13:06:17+00:00"
+            "time": "2024-04-29T13:26:35+00:00"
         },
         {
             "name": "dragonmantank/cron-expression",
-            "version": "v3.3.3",
+            "version": "v3.4.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/dragonmantank/cron-expression.git",
-                "reference": "adfb1f505deb6384dc8b39804c5065dd3c8c8c0a"
+                "reference": "8c784d071debd117328803d86b2097615b457500"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/dragonmantank/cron-expression/zipball/adfb1f505deb6384dc8b39804c5065dd3c8c8c0a",
-                "reference": "adfb1f505deb6384dc8b39804c5065dd3c8c8c0a",
+                "url": "https://api.github.com/repos/dragonmantank/cron-expression/zipball/8c784d071debd117328803d86b2097615b457500",
+                "reference": "8c784d071debd117328803d86b2097615b457500",
                 "shasum": ""
             },
             "require": {
@@ -695,10 +788,14 @@
             "require-dev": {
                 "phpstan/extension-installer": "^1.0",
                 "phpstan/phpstan": "^1.0",
-                "phpstan/phpstan-webmozart-assert": "^1.0",
                 "phpunit/phpunit": "^7.0|^8.0|^9.0"
             },
             "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.x-dev"
+                }
+            },
             "autoload": {
                 "psr-4": {
                     "Cron\\": "src/Cron/"
@@ -722,7 +819,7 @@
             ],
             "support": {
                 "issues": "https://github.com/dragonmantank/cron-expression/issues",
-                "source": "https://github.com/dragonmantank/cron-expression/tree/v3.3.3"
+                "source": "https://github.com/dragonmantank/cron-expression/tree/v3.4.0"
             },
             "funding": [
                 {
@@ -730,7 +827,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2023-08-10T19:36:49+00:00"
+            "time": "2024-10-09T13:47:03+00:00"
         },
         {
             "name": "egulias/email-validator",
@@ -1112,16 +1209,16 @@
         },
         {
             "name": "google/apiclient",
-            "version": "v2.17.0",
+            "version": "v2.18.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/googleapis/google-api-php-client.git",
-                "reference": "b1f63d72c44307ec8ef7bf18f1012de35d8944ed"
+                "reference": "846f149c9f879449145326dad99ef00bf1d879f3"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/googleapis/google-api-php-client/zipball/b1f63d72c44307ec8ef7bf18f1012de35d8944ed",
-                "reference": "b1f63d72c44307ec8ef7bf18f1012de35d8944ed",
+                "url": "https://api.github.com/repos/googleapis/google-api-php-client/zipball/846f149c9f879449145326dad99ef00bf1d879f3",
+                "reference": "846f149c9f879449145326dad99ef00bf1d879f3",
                 "shasum": ""
             },
             "require": {
@@ -1175,22 +1272,22 @@
             ],
             "support": {
                 "issues": "https://github.com/googleapis/google-api-php-client/issues",
-                "source": "https://github.com/googleapis/google-api-php-client/tree/v2.17.0"
+                "source": "https://github.com/googleapis/google-api-php-client/tree/v2.18.0"
             },
-            "time": "2024-07-10T14:57:54+00:00"
+            "time": "2024-10-16T21:58:58+00:00"
         },
         {
             "name": "google/apiclient-services",
-            "version": "v0.366.0",
+            "version": "v0.378.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/googleapis/google-api-php-client-services.git",
-                "reference": "edc08087aa3ca63d3b74f24d59f1d2caab39b5d9"
+                "reference": "2290dcd117b77aaa0ff6a13a19334322beb76a64"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/googleapis/google-api-php-client-services/zipball/edc08087aa3ca63d3b74f24d59f1d2caab39b5d9",
-                "reference": "edc08087aa3ca63d3b74f24d59f1d2caab39b5d9",
+                "url": "https://api.github.com/repos/googleapis/google-api-php-client-services/zipball/2290dcd117b77aaa0ff6a13a19334322beb76a64",
+                "reference": "2290dcd117b77aaa0ff6a13a19334322beb76a64",
                 "shasum": ""
             },
             "require": {
@@ -1219,22 +1316,22 @@
             ],
             "support": {
                 "issues": "https://github.com/googleapis/google-api-php-client-services/issues",
-                "source": "https://github.com/googleapis/google-api-php-client-services/tree/v0.366.0"
+                "source": "https://github.com/googleapis/google-api-php-client-services/tree/v0.378.0"
             },
-            "time": "2024-07-11T01:08:44+00:00"
+            "time": "2024-10-21T01:08:24+00:00"
         },
         {
             "name": "google/auth",
-            "version": "v1.41.0",
+            "version": "v1.42.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/googleapis/google-auth-library-php.git",
-                "reference": "1043ea18fe7f5dfbf5b208ce3ee6d6b6ab8cb038"
+                "reference": "0c25599a91530b5847f129b271c536f75a7563f5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/googleapis/google-auth-library-php/zipball/1043ea18fe7f5dfbf5b208ce3ee6d6b6ab8cb038",
-                "reference": "1043ea18fe7f5dfbf5b208ce3ee6d6b6ab8cb038",
+                "url": "https://api.github.com/repos/googleapis/google-auth-library-php/zipball/0c25599a91530b5847f129b271c536f75a7563f5",
+                "reference": "0c25599a91530b5847f129b271c536f75a7563f5",
                 "shasum": ""
             },
             "require": {
@@ -1279,9 +1376,9 @@
             "support": {
                 "docs": "https://googleapis.github.io/google-auth-library-php/main/",
                 "issues": "https://github.com/googleapis/google-auth-library-php/issues",
-                "source": "https://github.com/googleapis/google-auth-library-php/tree/v1.41.0"
+                "source": "https://github.com/googleapis/google-auth-library-php/tree/v1.42.0"
             },
-            "time": "2024-07-10T15:21:07+00:00"
+            "time": "2024-08-26T18:33:48+00:00"
         },
         {
             "name": "graham-campbell/result-type",
@@ -1473,16 +1570,16 @@
         },
         {
             "name": "guzzlehttp/promises",
-            "version": "2.0.3",
+            "version": "2.0.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/guzzle/promises.git",
-                "reference": "6ea8dd08867a2a42619d65c3deb2c0fcbf81c8f8"
+                "reference": "f9c436286ab2892c7db7be8c8da4ef61ccf7b455"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/guzzle/promises/zipball/6ea8dd08867a2a42619d65c3deb2c0fcbf81c8f8",
-                "reference": "6ea8dd08867a2a42619d65c3deb2c0fcbf81c8f8",
+                "url": "https://api.github.com/repos/guzzle/promises/zipball/f9c436286ab2892c7db7be8c8da4ef61ccf7b455",
+                "reference": "f9c436286ab2892c7db7be8c8da4ef61ccf7b455",
                 "shasum": ""
             },
             "require": {
@@ -1536,7 +1633,7 @@
             ],
             "support": {
                 "issues": "https://github.com/guzzle/promises/issues",
-                "source": "https://github.com/guzzle/promises/tree/2.0.3"
+                "source": "https://github.com/guzzle/promises/tree/2.0.4"
             },
             "funding": [
                 {
@@ -1552,7 +1649,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-07-18T10:29:17+00:00"
+            "time": "2024-10-17T10:06:22+00:00"
         },
         {
             "name": "guzzlehttp/psr7",
@@ -1960,16 +2057,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v11.25.0",
+            "version": "v11.29.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "b487a9089c0b1c71ac63bb6bc44fb4b00dc6da2e"
+                "reference": "425054512c362835ba9c0307561973c8eeac7385"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/b487a9089c0b1c71ac63bb6bc44fb4b00dc6da2e",
-                "reference": "b487a9089c0b1c71ac63bb6bc44fb4b00dc6da2e",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/425054512c362835ba9c0307561973c8eeac7385",
+                "reference": "425054512c362835ba9c0307561973c8eeac7385",
                 "shasum": ""
             },
             "require": {
@@ -1988,7 +2085,7 @@
                 "fruitcake/php-cors": "^1.3",
                 "guzzlehttp/guzzle": "^7.8",
                 "guzzlehttp/uri-template": "^1.0",
-                "laravel/prompts": "^0.1.18|^0.2.0",
+                "laravel/prompts": "^0.1.18|^0.2.0|^0.3.0",
                 "laravel/serializable-closure": "^1.3",
                 "league/commonmark": "^2.2.1",
                 "league/flysystem": "^3.8.0",
@@ -2165,25 +2262,25 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2024-09-26T11:21:58+00:00"
+            "time": "2024-10-22T14:13:31+00:00"
         },
         {
             "name": "laravel/prompts",
-            "version": "v0.2.1",
+            "version": "v0.3.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/prompts.git",
-                "reference": "a132ccf64d46da183b7cf3729df260e836cc7e15"
+                "reference": "0f3848a445562dac376b27968f753c65e7e1036e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/prompts/zipball/a132ccf64d46da183b7cf3729df260e836cc7e15",
-                "reference": "a132ccf64d46da183b7cf3729df260e836cc7e15",
+                "url": "https://api.github.com/repos/laravel/prompts/zipball/0f3848a445562dac376b27968f753c65e7e1036e",
+                "reference": "0f3848a445562dac376b27968f753c65e7e1036e",
                 "shasum": ""
             },
             "require": {
+                "composer-runtime-api": "^2.2",
                 "ext-mbstring": "*",
-                "illuminate/collections": "^10.0|^11.0",
                 "php": "^8.1",
                 "symfony/console": "^6.2|^7.0"
             },
@@ -2192,6 +2289,7 @@
                 "laravel/framework": ">=10.17.0 <10.25.0"
             },
             "require-dev": {
+                "illuminate/collections": "^10.0|^11.0",
                 "mockery/mockery": "^1.5",
                 "pestphp/pest": "^2.3",
                 "phpstan/phpstan": "^1.11",
@@ -2203,7 +2301,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "0.2.x-dev"
+                    "dev-main": "0.3.x-dev"
                 }
             },
             "autoload": {
@@ -2221,9 +2319,9 @@
             "description": "Add beautiful and user-friendly forms to your command-line applications.",
             "support": {
                 "issues": "https://github.com/laravel/prompts/issues",
-                "source": "https://github.com/laravel/prompts/tree/v0.2.1"
+                "source": "https://github.com/laravel/prompts/tree/v0.3.1"
             },
-            "time": "2024-09-19T10:28:37+00:00"
+            "time": "2024-10-09T19:42:26+00:00"
         },
         {
             "name": "laravel/sanctum",
@@ -2424,16 +2522,16 @@
         },
         {
             "name": "laravel/telescope",
-            "version": "v5.2.2",
+            "version": "v5.2.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/telescope.git",
-                "reference": "daaf95dee9fab2dd80f59b5f6611c6c0eff44878"
+                "reference": "a7e9e1332361a31de6eb94cf1d356500c3a89301"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/telescope/zipball/daaf95dee9fab2dd80f59b5f6611c6c0eff44878",
-                "reference": "daaf95dee9fab2dd80f59b5f6611c6c0eff44878",
+                "url": "https://api.github.com/repos/laravel/telescope/zipball/a7e9e1332361a31de6eb94cf1d356500c3a89301",
+                "reference": "a7e9e1332361a31de6eb94cf1d356500c3a89301",
                 "shasum": ""
             },
             "require": {
@@ -2487,9 +2585,9 @@
             ],
             "support": {
                 "issues": "https://github.com/laravel/telescope/issues",
-                "source": "https://github.com/laravel/telescope/tree/v5.2.2"
+                "source": "https://github.com/laravel/telescope/tree/v5.2.3"
             },
-            "time": "2024-08-26T12:40:52+00:00"
+            "time": "2024-10-13T15:11:07+00:00"
         },
         {
             "name": "laravel/tinker",
@@ -2747,16 +2845,16 @@
         },
         {
             "name": "league/flysystem",
-            "version": "3.29.0",
+            "version": "3.29.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/thephpleague/flysystem.git",
-                "reference": "0adc0d9a51852e170e0028a60bd271726626d3f0"
+                "reference": "edc1bb7c86fab0776c3287dbd19b5fa278347319"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/0adc0d9a51852e170e0028a60bd271726626d3f0",
-                "reference": "0adc0d9a51852e170e0028a60bd271726626d3f0",
+                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/edc1bb7c86fab0776c3287dbd19b5fa278347319",
+                "reference": "edc1bb7c86fab0776c3287dbd19b5fa278347319",
                 "shasum": ""
             },
             "require": {
@@ -2824,9 +2922,9 @@
             ],
             "support": {
                 "issues": "https://github.com/thephpleague/flysystem/issues",
-                "source": "https://github.com/thephpleague/flysystem/tree/3.29.0"
+                "source": "https://github.com/thephpleague/flysystem/tree/3.29.1"
             },
-            "time": "2024-09-29T11:59:11+00:00"
+            "time": "2024-10-08T08:58:34+00:00"
         },
         {
             "name": "league/flysystem-local",
@@ -3092,16 +3190,16 @@
         },
         {
             "name": "maennchen/zipstream-php",
-            "version": "3.1.0",
+            "version": "3.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/maennchen/ZipStream-PHP.git",
-                "reference": "b8174494eda667f7d13876b4a7bfef0f62a7c0d1"
+                "reference": "6187e9cc4493da94b9b63eb2315821552015fca9"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/maennchen/ZipStream-PHP/zipball/b8174494eda667f7d13876b4a7bfef0f62a7c0d1",
-                "reference": "b8174494eda667f7d13876b4a7bfef0f62a7c0d1",
+                "url": "https://api.github.com/repos/maennchen/ZipStream-PHP/zipball/6187e9cc4493da94b9b63eb2315821552015fca9",
+                "reference": "6187e9cc4493da94b9b63eb2315821552015fca9",
                 "shasum": ""
             },
             "require": {
@@ -3157,19 +3255,15 @@
             ],
             "support": {
                 "issues": "https://github.com/maennchen/ZipStream-PHP/issues",
-                "source": "https://github.com/maennchen/ZipStream-PHP/tree/3.1.0"
+                "source": "https://github.com/maennchen/ZipStream-PHP/tree/3.1.1"
             },
             "funding": [
                 {
                     "url": "https://github.com/maennchen",
                     "type": "github"
-                },
-                {
-                    "url": "https://opencollective.com/zipstream",
-                    "type": "open_collective"
                 }
             ],
-            "time": "2023-06-21T14:59:35+00:00"
+            "time": "2024-10-10T12:33:01+00:00"
         },
         {
             "name": "markbaker/complex",
@@ -3554,24 +3648,24 @@
         },
         {
             "name": "nette/schema",
-            "version": "v1.3.0",
+            "version": "v1.3.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nette/schema.git",
-                "reference": "a6d3a6d1f545f01ef38e60f375d1cf1f4de98188"
+                "reference": "da801d52f0354f70a638673c4a0f04e16529431d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nette/schema/zipball/a6d3a6d1f545f01ef38e60f375d1cf1f4de98188",
-                "reference": "a6d3a6d1f545f01ef38e60f375d1cf1f4de98188",
+                "url": "https://api.github.com/repos/nette/schema/zipball/da801d52f0354f70a638673c4a0f04e16529431d",
+                "reference": "da801d52f0354f70a638673c4a0f04e16529431d",
                 "shasum": ""
             },
             "require": {
                 "nette/utils": "^4.0",
-                "php": "8.1 - 8.3"
+                "php": "8.1 - 8.4"
             },
             "require-dev": {
-                "nette/tester": "^2.4",
+                "nette/tester": "^2.5.2",
                 "phpstan/phpstan-nette": "^1.0",
                 "tracy/tracy": "^2.8"
             },
@@ -3610,9 +3704,9 @@
             ],
             "support": {
                 "issues": "https://github.com/nette/schema/issues",
-                "source": "https://github.com/nette/schema/tree/v1.3.0"
+                "source": "https://github.com/nette/schema/tree/v1.3.2"
             },
-            "time": "2023-12-11T11:54:22+00:00"
+            "time": "2024-10-06T23:10:23+00:00"
         },
         {
             "name": "nette/utils",
@@ -3702,16 +3796,16 @@
         },
         {
             "name": "nikic/php-parser",
-            "version": "v5.3.0",
+            "version": "v5.3.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nikic/PHP-Parser.git",
-                "reference": "3abf7425cd284141dc5d8d14a9ee444de3345d1a"
+                "reference": "8eea230464783aa9671db8eea6f8c6ac5285794b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/3abf7425cd284141dc5d8d14a9ee444de3345d1a",
-                "reference": "3abf7425cd284141dc5d8d14a9ee444de3345d1a",
+                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/8eea230464783aa9671db8eea6f8c6ac5285794b",
+                "reference": "8eea230464783aa9671db8eea6f8c6ac5285794b",
                 "shasum": ""
             },
             "require": {
@@ -3754,38 +3848,37 @@
             ],
             "support": {
                 "issues": "https://github.com/nikic/PHP-Parser/issues",
-                "source": "https://github.com/nikic/PHP-Parser/tree/v5.3.0"
+                "source": "https://github.com/nikic/PHP-Parser/tree/v5.3.1"
             },
-            "time": "2024-09-29T13:56:26+00:00"
+            "time": "2024-10-08T18:51:32+00:00"
         },
         {
             "name": "nunomaduro/termwind",
-            "version": "v2.1.0",
+            "version": "v2.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/termwind.git",
-                "reference": "e5f21eade88689536c0cdad4c3cd75f3ed26e01a"
+                "reference": "42c84e4e8090766bbd6445d06cd6e57650626ea3"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/e5f21eade88689536c0cdad4c3cd75f3ed26e01a",
-                "reference": "e5f21eade88689536c0cdad4c3cd75f3ed26e01a",
+                "url": "https://api.github.com/repos/nunomaduro/termwind/zipball/42c84e4e8090766bbd6445d06cd6e57650626ea3",
+                "reference": "42c84e4e8090766bbd6445d06cd6e57650626ea3",
                 "shasum": ""
             },
             "require": {
                 "ext-mbstring": "*",
                 "php": "^8.2",
-                "symfony/console": "^7.0.4"
+                "symfony/console": "^7.1.5"
             },
             "require-dev": {
-                "ergebnis/phpstan-rules": "^2.2.0",
-                "illuminate/console": "^11.1.1",
-                "laravel/pint": "^1.15.0",
-                "mockery/mockery": "^1.6.11",
-                "pestphp/pest": "^2.34.6",
-                "phpstan/phpstan": "^1.10.66",
-                "phpstan/phpstan-strict-rules": "^1.5.2",
-                "symfony/var-dumper": "^7.0.4",
+                "illuminate/console": "^11.28.0",
+                "laravel/pint": "^1.18.1",
+                "mockery/mockery": "^1.6.12",
+                "pestphp/pest": "^2.36.0",
+                "phpstan/phpstan": "^1.12.6",
+                "phpstan/phpstan-strict-rules": "^1.6.1",
+                "symfony/var-dumper": "^7.1.5",
                 "thecodingmachine/phpstan-strict-rules": "^1.0.0"
             },
             "type": "library",
@@ -3828,7 +3921,7 @@
             ],
             "support": {
                 "issues": "https://github.com/nunomaduro/termwind/issues",
-                "source": "https://github.com/nunomaduro/termwind/tree/v2.1.0"
+                "source": "https://github.com/nunomaduro/termwind/tree/v2.2.0"
             },
             "funding": [
                 {
@@ -3844,7 +3937,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-09-05T15:25:50+00:00"
+            "time": "2024-10-15T16:15:16+00:00"
         },
         {
             "name": "nyholm/psr7",
@@ -4041,96 +4134,6 @@
             },
             "time": "2020-10-15T08:29:30+00:00"
         },
-        {
-            "name": "phenx/php-font-lib",
-            "version": "0.5.6",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/dompdf/php-font-lib.git",
-                "reference": "a1681e9793040740a405ac5b189275059e2a9863"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/dompdf/php-font-lib/zipball/a1681e9793040740a405ac5b189275059e2a9863",
-                "reference": "a1681e9793040740a405ac5b189275059e2a9863",
-                "shasum": ""
-            },
-            "require": {
-                "ext-mbstring": "*"
-            },
-            "require-dev": {
-                "symfony/phpunit-bridge": "^3 || ^4 || ^5 || ^6"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "FontLib\\": "src/FontLib"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "LGPL-2.1-or-later"
-            ],
-            "authors": [
-                {
-                    "name": "Fabien Ménager",
-                    "email": "fabien.menager@gmail.com"
-                }
-            ],
-            "description": "A library to read, parse, export and make subsets of different types of font files.",
-            "homepage": "https://github.com/PhenX/php-font-lib",
-            "support": {
-                "issues": "https://github.com/dompdf/php-font-lib/issues",
-                "source": "https://github.com/dompdf/php-font-lib/tree/0.5.6"
-            },
-            "time": "2024-01-29T14:45:26+00:00"
-        },
-        {
-            "name": "phenx/php-svg-lib",
-            "version": "0.5.4",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/dompdf/php-svg-lib.git",
-                "reference": "46b25da81613a9cf43c83b2a8c2c1bdab27df691"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/dompdf/php-svg-lib/zipball/46b25da81613a9cf43c83b2a8c2c1bdab27df691",
-                "reference": "46b25da81613a9cf43c83b2a8c2c1bdab27df691",
-                "shasum": ""
-            },
-            "require": {
-                "ext-mbstring": "*",
-                "php": "^7.1 || ^8.0",
-                "sabberworm/php-css-parser": "^8.4"
-            },
-            "require-dev": {
-                "phpunit/phpunit": "^7.5 || ^8.5 || ^9.5"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "Svg\\": "src/Svg"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "LGPL-3.0-or-later"
-            ],
-            "authors": [
-                {
-                    "name": "Fabien Ménager",
-                    "email": "fabien.menager@gmail.com"
-                }
-            ],
-            "description": "A library to read, parse and export to PDF SVG files.",
-            "homepage": "https://github.com/PhenX/php-svg-lib",
-            "support": {
-                "issues": "https://github.com/dompdf/php-svg-lib/issues",
-                "source": "https://github.com/dompdf/php-svg-lib/tree/0.5.4"
-            },
-            "time": "2024-04-08T12:52:34+00:00"
-        },
         {
             "name": "phpoffice/math",
             "version": "0.2.0",
@@ -8595,16 +8598,16 @@
     "packages-dev": [
         {
             "name": "barryvdh/laravel-debugbar",
-            "version": "v3.14.2",
+            "version": "v3.14.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/barryvdh/laravel-debugbar.git",
-                "reference": "850be4e3c05add22d70a3a3fb564925fd7605973"
+                "reference": "14e4517bd49130d6119228107eb21ae47ae120ab"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/barryvdh/laravel-debugbar/zipball/850be4e3c05add22d70a3a3fb564925fd7605973",
-                "reference": "850be4e3c05add22d70a3a3fb564925fd7605973",
+                "url": "https://api.github.com/repos/barryvdh/laravel-debugbar/zipball/14e4517bd49130d6119228107eb21ae47ae120ab",
+                "reference": "14e4517bd49130d6119228107eb21ae47ae120ab",
                 "shasum": ""
             },
             "require": {
@@ -8663,7 +8666,7 @@
             ],
             "support": {
                 "issues": "https://github.com/barryvdh/laravel-debugbar/issues",
-                "source": "https://github.com/barryvdh/laravel-debugbar/tree/v3.14.2"
+                "source": "https://github.com/barryvdh/laravel-debugbar/tree/v3.14.6"
             },
             "funding": [
                 {
@@ -8675,26 +8678,26 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-09-24T17:03:19+00:00"
+            "time": "2024-10-18T13:15:12+00:00"
         },
         {
             "name": "blumilksoftware/codestyle",
-            "version": "v3.3",
+            "version": "v4.0.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/blumilksoftware/codestyle.git",
-                "reference": "aecc480cd600c91da459999685e54ba0f9821507"
+                "reference": "7aecbafb443abdb2f9e0acc1e851236a4c7d00b1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/blumilksoftware/codestyle/zipball/aecc480cd600c91da459999685e54ba0f9821507",
-                "reference": "aecc480cd600c91da459999685e54ba0f9821507",
+                "url": "https://api.github.com/repos/blumilksoftware/codestyle/zipball/7aecbafb443abdb2f9e0acc1e851236a4c7d00b1",
+                "reference": "7aecbafb443abdb2f9e0acc1e851236a4c7d00b1",
                 "shasum": ""
             },
             "require": {
                 "friendsofphp/php-cs-fixer": "^3.59",
                 "kubawerlos/php-cs-fixer-custom-fixers": "^3.21",
-                "php": "^8.1"
+                "php": "^8.2"
             },
             "require-dev": {
                 "jetbrains/phpstorm-attributes": "^1.1",
@@ -8723,9 +8726,9 @@
             "description": "Blumilk codestyle configurator",
             "support": {
                 "issues": "https://github.com/blumilksoftware/codestyle/issues",
-                "source": "https://github.com/blumilksoftware/codestyle/tree/v3.3"
+                "source": "https://github.com/blumilksoftware/codestyle/tree/v4.0.0"
             },
-            "time": "2024-08-02T05:18:46+00:00"
+            "time": "2024-10-08T07:54:50+00:00"
         },
         {
             "name": "clue/ndjson-react",
@@ -9046,26 +9049,26 @@
         },
         {
             "name": "filp/whoops",
-            "version": "2.15.4",
+            "version": "2.16.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filp/whoops.git",
-                "reference": "a139776fa3f5985a50b509f2a02ff0f709d2a546"
+                "reference": "befcdc0e5dce67252aa6322d82424be928214fa2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filp/whoops/zipball/a139776fa3f5985a50b509f2a02ff0f709d2a546",
-                "reference": "a139776fa3f5985a50b509f2a02ff0f709d2a546",
+                "url": "https://api.github.com/repos/filp/whoops/zipball/befcdc0e5dce67252aa6322d82424be928214fa2",
+                "reference": "befcdc0e5dce67252aa6322d82424be928214fa2",
                 "shasum": ""
             },
             "require": {
-                "php": "^5.5.9 || ^7.0 || ^8.0",
+                "php": "^7.1 || ^8.0",
                 "psr/log": "^1.0.1 || ^2.0 || ^3.0"
             },
             "require-dev": {
-                "mockery/mockery": "^0.9 || ^1.0",
-                "phpunit/phpunit": "^4.8.36 || ^5.7.27 || ^6.5.14 || ^7.5.20 || ^8.5.8 || ^9.3.3",
-                "symfony/var-dumper": "^2.6 || ^3.0 || ^4.0 || ^5.0"
+                "mockery/mockery": "^1.0",
+                "phpunit/phpunit": "^7.5.20 || ^8.5.8 || ^9.3.3",
+                "symfony/var-dumper": "^4.0 || ^5.0"
             },
             "suggest": {
                 "symfony/var-dumper": "Pretty print complex values better with var-dumper available",
@@ -9105,7 +9108,7 @@
             ],
             "support": {
                 "issues": "https://github.com/filp/whoops/issues",
-                "source": "https://github.com/filp/whoops/tree/2.15.4"
+                "source": "https://github.com/filp/whoops/tree/2.16.0"
             },
             "funding": [
                 {
@@ -9113,7 +9116,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2023-11-03T12:00:00+00:00"
+            "time": "2024-09-25T12:00:00+00:00"
         },
         {
             "name": "friendsofphp/php-cs-fixer",
@@ -9317,16 +9320,16 @@
         },
         {
             "name": "laravel/dusk",
-            "version": "v8.2.7",
+            "version": "v8.2.10",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/dusk.git",
-                "reference": "a830a06481689b103f671e4cdc4e786fe4e589c6"
+                "reference": "fde2ae6c1b32d2f8dbdcff300bbd6e2ccffb1bb4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/dusk/zipball/a830a06481689b103f671e4cdc4e786fe4e589c6",
-                "reference": "a830a06481689b103f671e4cdc4e786fe4e589c6",
+                "url": "https://api.github.com/repos/laravel/dusk/zipball/fde2ae6c1b32d2f8dbdcff300bbd6e2ccffb1bb4",
+                "reference": "fde2ae6c1b32d2f8dbdcff300bbd6e2ccffb1bb4",
                 "shasum": ""
             },
             "require": {
@@ -9383,9 +9386,9 @@
             ],
             "support": {
                 "issues": "https://github.com/laravel/dusk/issues",
-                "source": "https://github.com/laravel/dusk/tree/v8.2.7"
+                "source": "https://github.com/laravel/dusk/tree/v8.2.10"
             },
-            "time": "2024-09-27T14:58:19+00:00"
+            "time": "2024-10-22T13:58:17+00:00"
         },
         {
             "name": "maximebf/debugbar",
@@ -9600,23 +9603,23 @@
         },
         {
             "name": "nunomaduro/collision",
-            "version": "v8.4.0",
+            "version": "v8.5.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/collision.git",
-                "reference": "e7d1aa8ed753f63fa816932bbc89678238843b4a"
+                "reference": "f5c101b929c958e849a633283adff296ed5f38f5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/e7d1aa8ed753f63fa816932bbc89678238843b4a",
-                "reference": "e7d1aa8ed753f63fa816932bbc89678238843b4a",
+                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/f5c101b929c958e849a633283adff296ed5f38f5",
+                "reference": "f5c101b929c958e849a633283adff296ed5f38f5",
                 "shasum": ""
             },
             "require": {
-                "filp/whoops": "^2.15.4",
-                "nunomaduro/termwind": "^2.0.1",
+                "filp/whoops": "^2.16.0",
+                "nunomaduro/termwind": "^2.1.0",
                 "php": "^8.2.0",
-                "symfony/console": "^7.1.3"
+                "symfony/console": "^7.1.5"
             },
             "conflict": {
                 "laravel/framework": "<11.0.0 || >=12.0.0",
@@ -9624,14 +9627,14 @@
             },
             "require-dev": {
                 "larastan/larastan": "^2.9.8",
-                "laravel/framework": "^11.19.0",
-                "laravel/pint": "^1.17.1",
-                "laravel/sail": "^1.31.0",
-                "laravel/sanctum": "^4.0.2",
-                "laravel/tinker": "^2.9.0",
-                "orchestra/testbench-core": "^9.2.3",
-                "pestphp/pest": "^2.35.0 || ^3.0.0",
-                "sebastian/environment": "^6.1.0 || ^7.0.0"
+                "laravel/framework": "^11.28.0",
+                "laravel/pint": "^1.18.1",
+                "laravel/sail": "^1.36.0",
+                "laravel/sanctum": "^4.0.3",
+                "laravel/tinker": "^2.10.0",
+                "orchestra/testbench-core": "^9.5.3",
+                "pestphp/pest": "^2.36.0 || ^3.4.0",
+                "sebastian/environment": "^6.1.0 || ^7.2.0"
             },
             "type": "library",
             "extra": {
@@ -9693,7 +9696,7 @@
                     "type": "patreon"
                 }
             ],
-            "time": "2024-08-03T15:32:23+00:00"
+            "time": "2024-10-15T16:06:32+00:00"
         },
         {
             "name": "phar-io/manifest",
@@ -9881,35 +9884,35 @@
         },
         {
             "name": "phpunit/php-code-coverage",
-            "version": "11.0.6",
+            "version": "11.0.7",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/php-code-coverage.git",
-                "reference": "ebdffc9e09585dafa71b9bffcdb0a229d4704c45"
+                "reference": "f7f08030e8811582cc459871d28d6f5a1a4d35ca"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/ebdffc9e09585dafa71b9bffcdb0a229d4704c45",
-                "reference": "ebdffc9e09585dafa71b9bffcdb0a229d4704c45",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/f7f08030e8811582cc459871d28d6f5a1a4d35ca",
+                "reference": "f7f08030e8811582cc459871d28d6f5a1a4d35ca",
                 "shasum": ""
             },
             "require": {
                 "ext-dom": "*",
                 "ext-libxml": "*",
                 "ext-xmlwriter": "*",
-                "nikic/php-parser": "^5.1.0",
+                "nikic/php-parser": "^5.3.1",
                 "php": ">=8.2",
-                "phpunit/php-file-iterator": "^5.0.1",
+                "phpunit/php-file-iterator": "^5.1.0",
                 "phpunit/php-text-template": "^4.0.1",
                 "sebastian/code-unit-reverse-lookup": "^4.0.1",
                 "sebastian/complexity": "^4.0.1",
                 "sebastian/environment": "^7.2.0",
                 "sebastian/lines-of-code": "^3.0.1",
-                "sebastian/version": "^5.0.1",
+                "sebastian/version": "^5.0.2",
                 "theseer/tokenizer": "^1.2.3"
             },
             "require-dev": {
-                "phpunit/phpunit": "^11.0"
+                "phpunit/phpunit": "^11.4.1"
             },
             "suggest": {
                 "ext-pcov": "PHP extension that provides line coverage",
@@ -9947,7 +9950,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues",
                 "security": "https://github.com/sebastianbergmann/php-code-coverage/security/policy",
-                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/11.0.6"
+                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/11.0.7"
             },
             "funding": [
                 {
@@ -9955,7 +9958,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-08-22T04:37:56+00:00"
+            "time": "2024-10-09T06:21:38+00:00"
         },
         {
             "name": "phpunit/php-file-iterator",
@@ -10204,16 +10207,16 @@
         },
         {
             "name": "phpunit/phpunit",
-            "version": "11.3.6",
+            "version": "11.4.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/phpunit.git",
-                "reference": "d62c45a19c665bb872c2a47023a0baf41a98bb2b"
+                "reference": "1863643c3f04ad03dcb9c6996c294784cdda4805"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/d62c45a19c665bb872c2a47023a0baf41a98bb2b",
-                "reference": "d62c45a19c665bb872c2a47023a0baf41a98bb2b",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/1863643c3f04ad03dcb9c6996c294784cdda4805",
+                "reference": "1863643c3f04ad03dcb9c6996c294784cdda4805",
                 "shasum": ""
             },
             "require": {
@@ -10227,21 +10230,21 @@
                 "phar-io/manifest": "^2.0.4",
                 "phar-io/version": "^3.2.1",
                 "php": ">=8.2",
-                "phpunit/php-code-coverage": "^11.0.6",
+                "phpunit/php-code-coverage": "^11.0.7",
                 "phpunit/php-file-iterator": "^5.1.0",
                 "phpunit/php-invoker": "^5.0.1",
                 "phpunit/php-text-template": "^4.0.1",
                 "phpunit/php-timer": "^7.0.1",
                 "sebastian/cli-parser": "^3.0.2",
                 "sebastian/code-unit": "^3.0.1",
-                "sebastian/comparator": "^6.1.0",
+                "sebastian/comparator": "^6.1.1",
                 "sebastian/diff": "^6.0.2",
                 "sebastian/environment": "^7.2.0",
                 "sebastian/exporter": "^6.1.3",
                 "sebastian/global-state": "^7.0.2",
                 "sebastian/object-enumerator": "^6.0.1",
                 "sebastian/type": "^5.1.0",
-                "sebastian/version": "^5.0.1"
+                "sebastian/version": "^5.0.2"
             },
             "suggest": {
                 "ext-soap": "To be able to generate mocks based on WSDL files"
@@ -10252,7 +10255,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "11.3-dev"
+                    "dev-main": "11.4-dev"
                 }
             },
             "autoload": {
@@ -10284,7 +10287,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/phpunit/issues",
                 "security": "https://github.com/sebastianbergmann/phpunit/security/policy",
-                "source": "https://github.com/sebastianbergmann/phpunit/tree/11.3.6"
+                "source": "https://github.com/sebastianbergmann/phpunit/tree/11.4.2"
             },
             "funding": [
                 {
@@ -10300,7 +10303,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-09-19T10:54:28+00:00"
+            "time": "2024-10-19T13:05:19+00:00"
         },
         {
             "name": "react/cache",
@@ -11004,16 +11007,16 @@
         },
         {
             "name": "sebastian/comparator",
-            "version": "6.1.0",
+            "version": "6.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/comparator.git",
-                "reference": "fa37b9e2ca618cb051d71b60120952ee8ca8b03d"
+                "reference": "5ef523a49ae7a302b87b2102b72b1eda8918d686"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/fa37b9e2ca618cb051d71b60120952ee8ca8b03d",
-                "reference": "fa37b9e2ca618cb051d71b60120952ee8ca8b03d",
+                "url": "https://api.github.com/repos/sebastianbergmann/comparator/zipball/5ef523a49ae7a302b87b2102b72b1eda8918d686",
+                "reference": "5ef523a49ae7a302b87b2102b72b1eda8918d686",
                 "shasum": ""
             },
             "require": {
@@ -11069,7 +11072,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/comparator/issues",
                 "security": "https://github.com/sebastianbergmann/comparator/security/policy",
-                "source": "https://github.com/sebastianbergmann/comparator/tree/6.1.0"
+                "source": "https://github.com/sebastianbergmann/comparator/tree/6.1.1"
             },
             "funding": [
                 {
@@ -11077,7 +11080,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-09-11T15:42:56+00:00"
+            "time": "2024-10-18T15:00:48+00:00"
         },
         {
             "name": "sebastian/complexity",
@@ -11703,16 +11706,16 @@
         },
         {
             "name": "sebastian/version",
-            "version": "5.0.1",
+            "version": "5.0.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/version.git",
-                "reference": "45c9debb7d039ce9b97de2f749c2cf5832a06ac4"
+                "reference": "c687e3387b99f5b03b6caa64c74b63e2936ff874"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/version/zipball/45c9debb7d039ce9b97de2f749c2cf5832a06ac4",
-                "reference": "45c9debb7d039ce9b97de2f749c2cf5832a06ac4",
+                "url": "https://api.github.com/repos/sebastianbergmann/version/zipball/c687e3387b99f5b03b6caa64c74b63e2936ff874",
+                "reference": "c687e3387b99f5b03b6caa64c74b63e2936ff874",
                 "shasum": ""
             },
             "require": {
@@ -11745,7 +11748,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/version/issues",
                 "security": "https://github.com/sebastianbergmann/version/security/policy",
-                "source": "https://github.com/sebastianbergmann/version/tree/5.0.1"
+                "source": "https://github.com/sebastianbergmann/version/tree/5.0.2"
             },
             "funding": [
                 {
@@ -11753,7 +11756,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-07-03T05:13:08+00:00"
+            "time": "2024-10-09T05:16:32+00:00"
         },
         {
             "name": "spatie/backtrace",
@@ -11894,16 +11897,16 @@
         },
         {
             "name": "spatie/flare-client-php",
-            "version": "1.7.0",
+            "version": "1.8.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/flare-client-php.git",
-                "reference": "097040ff51e660e0f6fc863684ac4b02c93fa234"
+                "reference": "180f8ca4c0d0d6fc51477bd8c53ce37ab5a96122"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/flare-client-php/zipball/097040ff51e660e0f6fc863684ac4b02c93fa234",
-                "reference": "097040ff51e660e0f6fc863684ac4b02c93fa234",
+                "url": "https://api.github.com/repos/spatie/flare-client-php/zipball/180f8ca4c0d0d6fc51477bd8c53ce37ab5a96122",
+                "reference": "180f8ca4c0d0d6fc51477bd8c53ce37ab5a96122",
                 "shasum": ""
             },
             "require": {
@@ -11921,7 +11924,7 @@
                 "phpstan/extension-installer": "^1.1",
                 "phpstan/phpstan-deprecation-rules": "^1.0",
                 "phpstan/phpstan-phpunit": "^1.0",
-                "spatie/phpunit-snapshot-assertions": "^4.0|^5.0"
+                "spatie/pest-plugin-snapshots": "^1.0|^2.0"
             },
             "type": "library",
             "extra": {
@@ -11951,7 +11954,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/flare-client-php/issues",
-                "source": "https://github.com/spatie/flare-client-php/tree/1.7.0"
+                "source": "https://github.com/spatie/flare-client-php/tree/1.8.0"
             },
             "funding": [
                 {
@@ -11959,7 +11962,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-06-12T14:39:14+00:00"
+            "time": "2024-08-01T08:27:26+00:00"
         },
         {
             "name": "spatie/ignition",
@@ -12137,16 +12140,16 @@
         },
         {
             "name": "symfony/filesystem",
-            "version": "v7.1.2",
+            "version": "v7.1.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/filesystem.git",
-                "reference": "92a91985250c251de9b947a14bb2c9390b1a562c"
+                "reference": "61fe0566189bf32e8cfee78335d8776f64a66f5a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/filesystem/zipball/92a91985250c251de9b947a14bb2c9390b1a562c",
-                "reference": "92a91985250c251de9b947a14bb2c9390b1a562c",
+                "url": "https://api.github.com/repos/symfony/filesystem/zipball/61fe0566189bf32e8cfee78335d8776f64a66f5a",
+                "reference": "61fe0566189bf32e8cfee78335d8776f64a66f5a",
                 "shasum": ""
             },
             "require": {
@@ -12183,7 +12186,7 @@
             "description": "Provides basic utilities for the filesystem",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/filesystem/tree/v7.1.2"
+                "source": "https://github.com/symfony/filesystem/tree/v7.1.5"
             },
             "funding": [
                 {
@@ -12199,7 +12202,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-06-28T10:03:55+00:00"
+            "time": "2024-09-17T09:16:35+00:00"
         },
         {
             "name": "symfony/polyfill-php81",
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..181fefce
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,10 @@
+import blumilkDefault from '@blumilksoftware/eslint-config'
+
+export default [
+  ...blumilkDefault,
+  {
+    rules: {
+      'vue/require-default-prop': 0,
+    },
+  },
+]
diff --git a/package-lock.json b/package-lock.json
index 9d552085..6e76fe69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,43 +1,43 @@
 {
-    "name": "application",
+    "name": "Toby",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "dependencies": {
+                "@blumilksoftware/eslint-config": "^3.0.0",
                 "@headlessui/vue": "^1.7.23",
                 "@heroicons/vue": "^2.1.5",
-                "@inertiajs/inertia": "^0.11.1",
-                "@inertiajs/inertia-vue3": "^0.6.0",
-                "@inertiajs/progress": "^0.2.7",
+                "@inertiajs/vue3": "^1.2.0",
                 "@tailwindcss/forms": "^0.5.9",
                 "@tailwindcss/line-clamp": "^0.4.4",
                 "@tailwindcss/typography": "^0.5.15",
-                "@vitejs/plugin-vue": "^4.6.2",
-                "@vue/compiler-sfc": "^3.5.10",
+                "@vitejs/plugin-vue": "^5.1.4",
+                "@vue/compiler-sfc": "^3.5.12",
+                "@vueuse/core": "^11.1.0",
                 "autoprefixer": "^10.4.20",
                 "axios": "^1.7.7",
                 "echarts": "^5.5.1",
+                "eslint": "^9.13.0",
                 "flatpickr": "^4.6.13",
-                "floating-vue": "^2.0.0",
-                "laravel-vite-plugin": "^0.8.1",
+                "floating-vue": "^5.2.2",
+                "laravel-vite-plugin": "^1.0.5",
                 "lodash": "^4.17.21",
                 "luxon": "^3.5.0",
                 "postcss": "^8.4.47",
-                "tailwindcss": "^3.4.13",
-                "vite": "^4.5.5",
-                "vue": "^3.5.10",
-                "vue-echarts": "^6.7.3",
+                "tailwindcss": "^3.4.14",
+                "vite": "^5.4.10",
+                "vue": "^3.5.12",
+                "vue-echarts": "^7.0.3",
                 "vue-flatpickr-component": "^11.0.5",
                 "vue-loader": "^17.4.2",
-                "vue-material-design-icons": "^5.3.0",
+                "vue-material-design-icons": "^5.3.1",
                 "vue-toastification": "^2.0.0-rc.5",
                 "vue3-popper": "^1.5.0",
                 "vuedraggable": "^4.1.0"
             },
             "devDependencies": {
-                "eslint": "^8.57.1",
-                "eslint-plugin-vue": "^9.28.0"
+                "eslint-plugin-vue": "^9.29.1"
             }
         },
         "node_modules/@alloc/quick-lru": {
@@ -99,10 +99,63 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@blumilksoftware/eslint-config": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@blumilksoftware/eslint-config/-/eslint-config-3.0.0.tgz",
+            "integrity": "sha512-o0WsrFFoykAmpd0EyGyD5lkIKmVqzek5Pr545uskriOMn6MsfJaSiz3JWXab9lZnErbURhfBtHVHM8Iv4tK8mg==",
+            "license": "MIT",
+            "dependencies": {
+                "@stylistic/eslint-plugin-ts": "^2.8.0",
+                "@typescript-eslint/eslint-plugin": "^8.5.0",
+                "@typescript-eslint/parser": "^8.5.0",
+                "chalk": "^5.3.0",
+                "eslint-plugin-n": "^17.10.2",
+                "eslint-plugin-promise": "^7.1.0",
+                "eslint-plugin-tailwindcss": "^3.13",
+                "eslint-plugin-vue": "^9.28.0",
+                "ora": "^8.1.0",
+                "vue-eslint-parser": "^9.4.3"
+            },
+            "engines": {
+                "node": ">=20.0.0"
+            },
+            "peerDependencies": {
+                "eslint": ">= 9",
+                "typescript": "^5.6"
+            }
+        },
+        "node_modules/@blumilksoftware/eslint-config/node_modules/chalk": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+            "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+            "license": "MIT",
+            "engines": {
+                "node": "^12.17.0 || ^14.13 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+            "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-            "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+            "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
             "cpu": [
                 "arm"
             ],
@@ -116,9 +169,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-            "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+            "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
             "cpu": [
                 "arm64"
             ],
@@ -132,9 +185,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-            "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+            "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
             "cpu": [
                 "x64"
             ],
@@ -148,9 +201,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-            "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+            "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
             "cpu": [
                 "arm64"
             ],
@@ -164,9 +217,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-            "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+            "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
             "cpu": [
                 "x64"
             ],
@@ -180,9 +233,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-            "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+            "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
             "cpu": [
                 "arm64"
             ],
@@ -196,9 +249,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-            "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+            "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
             "cpu": [
                 "x64"
             ],
@@ -212,9 +265,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-            "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+            "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
             "cpu": [
                 "arm"
             ],
@@ -228,9 +281,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-            "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+            "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
             "cpu": [
                 "arm64"
             ],
@@ -244,9 +297,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-            "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+            "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
             "cpu": [
                 "ia32"
             ],
@@ -260,9 +313,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-            "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+            "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
             "cpu": [
                 "loong64"
             ],
@@ -276,9 +329,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-            "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+            "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
             "cpu": [
                 "mips64el"
             ],
@@ -292,9 +345,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-            "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+            "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
             "cpu": [
                 "ppc64"
             ],
@@ -308,9 +361,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-            "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+            "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
             "cpu": [
                 "riscv64"
             ],
@@ -324,9 +377,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-            "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+            "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
             "cpu": [
                 "s390x"
             ],
@@ -340,9 +393,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-            "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+            "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
             "cpu": [
                 "x64"
             ],
@@ -356,9 +409,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-            "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+            "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
             "cpu": [
                 "x64"
             ],
@@ -372,9 +425,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-            "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+            "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
             "cpu": [
                 "x64"
             ],
@@ -388,9 +441,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-            "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+            "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
             "cpu": [
                 "x64"
             ],
@@ -404,9 +457,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-            "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+            "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
             "cpu": [
                 "arm64"
             ],
@@ -420,9 +473,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-            "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+            "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
             "cpu": [
                 "ia32"
             ],
@@ -436,9 +489,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-            "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+            "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
             "cpu": [
                 "x64"
             ],
@@ -455,7 +508,6 @@
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
             "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "eslint-visitor-keys": "^3.3.0"
@@ -471,23 +523,44 @@
             "version": "4.11.0",
             "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
             "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
             }
         },
+        "node_modules/@eslint/config-array": {
+            "version": "0.18.0",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
+            "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@eslint/object-schema": "^2.1.4",
+                "debug": "^4.3.1",
+                "minimatch": "^3.1.2"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            }
+        },
+        "node_modules/@eslint/core": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
+            "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            }
+        },
         "node_modules/@eslint/eslintrc": {
-            "version": "2.1.4",
-            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-            "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-            "dev": true,
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
+            "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
             "license": "MIT",
             "dependencies": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
-                "espree": "^9.6.0",
-                "globals": "^13.19.0",
+                "espree": "^10.0.1",
+                "globals": "^14.0.0",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.2.1",
                 "js-yaml": "^4.1.0",
@@ -495,29 +568,90 @@
                 "strip-json-comments": "^3.1.1"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/eslint-visitor-keys": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
+            "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/@eslint/eslintrc/node_modules/espree": {
+            "version": "10.2.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
+            "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "acorn": "^8.12.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^4.1.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/globals": {
+            "version": "14.0.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+            "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@eslint/js": {
-            "version": "8.57.1",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-            "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
-            "dev": true,
+            "version": "9.13.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz",
+            "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==",
             "license": "MIT",
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            }
+        },
+        "node_modules/@eslint/object-schema": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
+            "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            }
+        },
+        "node_modules/@eslint/plugin-kit": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.1.tgz",
+            "integrity": "sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "levn": "^0.4.1"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
         "node_modules/@floating-ui/core": {
-            "version": "1.6.4",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
-            "integrity": "sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==",
+            "version": "1.6.8",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+            "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
             "license": "MIT",
             "dependencies": {
-                "@floating-ui/utils": "^0.2.4"
+                "@floating-ui/utils": "^0.2.8"
             }
         },
         "node_modules/@floating-ui/dom": {
@@ -530,9 +664,9 @@
             }
         },
         "node_modules/@floating-ui/utils": {
-            "version": "0.2.4",
-            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
-            "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==",
+            "version": "0.2.8",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+            "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
             "license": "MIT"
         },
         "node_modules/@headlessui/vue": {
@@ -559,27 +693,32 @@
                 "vue": ">= 3"
             }
         },
-        "node_modules/@humanwhocodes/config-array": {
-            "version": "0.13.0",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-            "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-            "deprecated": "Use @eslint/config-array instead",
-            "dev": true,
+        "node_modules/@humanfs/core": {
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
+            "integrity": "sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18.18.0"
+            }
+        },
+        "node_modules/@humanfs/node": {
+            "version": "0.16.5",
+            "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.5.tgz",
+            "integrity": "sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==",
             "license": "Apache-2.0",
             "dependencies": {
-                "@humanwhocodes/object-schema": "^2.0.3",
-                "debug": "^4.3.1",
-                "minimatch": "^3.0.5"
+                "@humanfs/core": "^0.19.0",
+                "@humanwhocodes/retry": "^0.3.0"
             },
             "engines": {
-                "node": ">=10.10.0"
+                "node": ">=18.18.0"
             }
         },
         "node_modules/@humanwhocodes/module-importer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
             "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-            "dev": true,
             "license": "Apache-2.0",
             "engines": {
                 "node": ">=12.22"
@@ -589,60 +728,45 @@
                 "url": "https://github.com/sponsors/nzakas"
             }
         },
-        "node_modules/@humanwhocodes/object-schema": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-            "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-            "deprecated": "Use @eslint/object-schema instead",
-            "dev": true,
-            "license": "BSD-3-Clause"
+        "node_modules/@humanwhocodes/retry": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+            "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=18.18"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
         },
-        "node_modules/@inertiajs/inertia": {
-            "version": "0.11.1",
-            "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.1.tgz",
-            "integrity": "sha512-btmV53c54oW4Z9XF0YyTdIUnM7ue0ONy3/KJOz6J1C5CYIwimiKfDMpz8ZbGJuxS+SPdOlNsqj2ZhlHslpJRZg==",
+        "node_modules/@inertiajs/core": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.2.0.tgz",
+            "integrity": "sha512-6U0gqCPbGGGMcLoDm+ckKipc5gptZMmfVFfPGdO7vlO7yipWf1RD+TKkcZGJklFvfgFMKwK2VPw8GAv1OctuQA==",
             "license": "MIT",
             "dependencies": {
-                "axios": "^0.21.1",
+                "axios": "^1.6.0",
                 "deepmerge": "^4.0.0",
+                "nprogress": "^0.2.0",
                 "qs": "^6.9.0"
             }
         },
-        "node_modules/@inertiajs/inertia-vue3": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/@inertiajs/inertia-vue3/-/inertia-vue3-0.6.0.tgz",
-            "integrity": "sha512-qhPBtd/G0VS7vVVbYw1rrqKB6JqRusxqt+5ec2GLmK6t7fTlBBnZ3KsakmGZLSM1m1OGkNcfn4ifmCk3zfA8RQ==",
+        "node_modules/@inertiajs/vue3": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-1.2.0.tgz",
+            "integrity": "sha512-Y6AsvwIK/E1pQKAMp8B7i99CbNApcTYb7j8R+TXM/AFQG6yBlQ1Qb9oFMItb6VimXSnDyfO4+FWe/JPLk9OIVA==",
             "license": "MIT",
             "dependencies": {
+                "@inertiajs/core": "1.2.0",
                 "lodash.clonedeep": "^4.5.0",
                 "lodash.isequal": "^4.5.0"
             },
             "peerDependencies": {
-                "@inertiajs/inertia": "^0.11.0",
                 "vue": "^3.0.0"
             }
         },
-        "node_modules/@inertiajs/inertia/node_modules/axios": {
-            "version": "0.21.4",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-            "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-            "license": "MIT",
-            "dependencies": {
-                "follow-redirects": "^1.14.0"
-            }
-        },
-        "node_modules/@inertiajs/progress": {
-            "version": "0.2.7",
-            "resolved": "https://registry.npmjs.org/@inertiajs/progress/-/progress-0.2.7.tgz",
-            "integrity": "sha512-zxadfLlBPIUvTE9g5k71V/Ayzo8P9kEp4hV4UKywCC2kURufxV7bycbZqU1GeMCFGDT+VRrjXNl676Pwwa1HoQ==",
-            "license": "MIT",
-            "dependencies": {
-                "nprogress": "^0.2.0"
-            },
-            "peerDependencies": {
-                "@inertiajs/inertia": "^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0"
-            }
-        },
         "node_modules/@isaacs/cliui": {
             "version": "8.0.2",
             "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -801,6 +925,260 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@rollup/rollup-android-arm-eabi": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
+            "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-android-arm64": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
+            "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-arm64": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
+            "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-x64": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
+            "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
+            "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
+            "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-gnu": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
+            "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-musl": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
+            "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
+            "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
+            "cpu": [
+                "ppc64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
+            "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-s390x-gnu": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
+            "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
+            "cpu": [
+                "s390x"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-gnu": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
+            "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-musl": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
+            "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-arm64-msvc": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
+            "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-ia32-msvc": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
+            "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-x64-msvc": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
+            "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@stylistic/eslint-plugin-ts": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-ts/-/eslint-plugin-ts-2.9.0.tgz",
+            "integrity": "sha512-CxB73paAKlmaIDtOfKoIHlhNJVlyRMVobuBqdOc4wbVSqfhbgpCWuJYpBkV3ydGDKRfVWNJ9yg5b99lzZtrjhg==",
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/utils": "^8.8.0",
+                "eslint-visitor-keys": "^4.1.0",
+                "espree": "^10.2.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "peerDependencies": {
+                "eslint": ">=8.40.0"
+            }
+        },
+        "node_modules/@stylistic/eslint-plugin-ts/node_modules/eslint-visitor-keys": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
+            "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@stylistic/eslint-plugin-ts/node_modules/espree": {
+            "version": "10.2.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
+            "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "acorn": "^8.12.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^4.1.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.9",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz",
@@ -847,122 +1225,302 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
-        "node_modules/@tanstack/vue-virtual": {
-            "version": "3.8.3",
-            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.3.tgz",
-            "integrity": "sha512-xrFLkOiqLoGwohgr1+Q880hkNdQWqwi19EXzx38iAjVEm1Db3KIAV0aVP57/dnNXU3NO1Vx8wnIHII5J4n1LyA==",
+        "node_modules/@tanstack/vue-virtual": {
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.3.tgz",
+            "integrity": "sha512-xrFLkOiqLoGwohgr1+Q880hkNdQWqwi19EXzx38iAjVEm1Db3KIAV0aVP57/dnNXU3NO1Vx8wnIHII5J4n1LyA==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/virtual-core": "3.8.3"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "vue": "^2.7.0 || ^3.0.0"
+            }
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+            "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/node": {
+            "version": "20.14.11",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz",
+            "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "undici-types": "~5.26.4"
+            }
+        },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
+        "node_modules/@typescript-eslint/eslint-plugin": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz",
+            "integrity": "sha512-KhGn2LjW1PJT2A/GfDpiyOfS4a8xHQv2myUagTM5+zsormOmBlYsnQ6pobJ8XxJmh6hnHwa2Mbe3fPrDJoDhbA==",
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/regexpp": "^4.10.0",
+                "@typescript-eslint/scope-manager": "8.11.0",
+                "@typescript-eslint/type-utils": "8.11.0",
+                "@typescript-eslint/utils": "8.11.0",
+                "@typescript-eslint/visitor-keys": "8.11.0",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.3.1",
+                "natural-compare": "^1.4.0",
+                "ts-api-utils": "^1.3.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+                "eslint": "^8.57.0 || ^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/parser": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.11.0.tgz",
+            "integrity": "sha512-lmt73NeHdy1Q/2ul295Qy3uninSqi6wQI18XwSpm8w0ZbQXUpjCAWP1Vlv/obudoBiIjJVjlztjQ+d/Md98Yxg==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "8.11.0",
+                "@typescript-eslint/types": "8.11.0",
+                "@typescript-eslint/typescript-estree": "8.11.0",
+                "@typescript-eslint/visitor-keys": "8.11.0",
+                "debug": "^4.3.4"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/scope-manager": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
+            "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "8.11.0",
+                "@typescript-eslint/visitor-keys": "8.11.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/type-utils": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.11.0.tgz",
+            "integrity": "sha512-ItiMfJS6pQU0NIKAaybBKkuVzo6IdnAhPFZA/2Mba/uBjuPQPet/8+zh5GtLHwmuFRShZx+8lhIs7/QeDHflOg==",
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/typescript-estree": "8.11.0",
+                "@typescript-eslint/utils": "8.11.0",
+                "debug": "^4.3.4",
+                "ts-api-utils": "^1.3.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/types": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
+            "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
+            "license": "MIT",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
+            "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "@typescript-eslint/types": "8.11.0",
+                "@typescript-eslint/visitor-keys": "8.11.0",
+                "debug": "^4.3.4",
+                "fast-glob": "^3.3.2",
+                "is-glob": "^4.0.3",
+                "minimatch": "^9.0.4",
+                "semver": "^7.6.0",
+                "ts-api-utils": "^1.3.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+            "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/@typescript-eslint/utils": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.11.0.tgz",
+            "integrity": "sha512-CYiX6WZcbXNJV7UNB4PLDIBtSdRmRI/nb0FMyqHPTQD1rMjA0foPLaPUV39C/MxkTd/QKSeX+Gb34PPsDVC35g==",
             "license": "MIT",
             "dependencies": {
-                "@tanstack/virtual-core": "3.8.3"
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "@typescript-eslint/scope-manager": "8.11.0",
+                "@typescript-eslint/types": "8.11.0",
+                "@typescript-eslint/typescript-estree": "8.11.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/tannerlinsley"
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "vue": "^2.7.0 || ^3.0.0"
-            }
-        },
-        "node_modules/@types/eslint": {
-            "version": "8.56.10",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-            "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-            "license": "MIT",
-            "peer": true,
-            "dependencies": {
-                "@types/estree": "*",
-                "@types/json-schema": "*"
-            }
-        },
-        "node_modules/@types/eslint-scope": {
-            "version": "3.7.7",
-            "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-            "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-            "license": "MIT",
-            "peer": true,
-            "dependencies": {
-                "@types/eslint": "*",
-                "@types/estree": "*"
+                "eslint": "^8.57.0 || ^9.0.0"
             }
         },
-        "node_modules/@types/estree": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-            "license": "MIT",
-            "peer": true
-        },
-        "node_modules/@types/json-schema": {
-            "version": "7.0.15",
-            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-            "license": "MIT",
-            "peer": true
-        },
-        "node_modules/@types/node": {
-            "version": "20.14.11",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz",
-            "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==",
+        "node_modules/@typescript-eslint/visitor-keys": {
+            "version": "8.11.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
+            "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
-                "undici-types": "~5.26.4"
+                "@typescript-eslint/types": "8.11.0",
+                "eslint-visitor-keys": "^3.4.3"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
             }
         },
-        "node_modules/@ungap/structured-clone": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-            "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/@vitejs/plugin-vue": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
-            "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==",
+            "version": "5.1.4",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
+            "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
             "license": "MIT",
             "engines": {
-                "node": "^14.18.0 || >=16.0.0"
+                "node": "^18.0.0 || >=20.0.0"
             },
             "peerDependencies": {
-                "vite": "^4.0.0 || ^5.0.0",
+                "vite": "^5.0.0",
                 "vue": "^3.2.25"
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.10.tgz",
-            "integrity": "sha512-iXWlk+Cg/ag7gLvY0SfVucU8Kh2CjysYZjhhP70w9qI4MvSox4frrP+vDGvtQuzIcgD8+sxM6lZvCtdxGunTAA==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+            "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.25.3",
-                "@vue/shared": "3.5.10",
+                "@vue/shared": "3.5.12",
                 "entities": "^4.5.0",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.2.0"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.10.tgz",
-            "integrity": "sha512-DyxHC6qPcktwYGKOIy3XqnHRrrXyWR2u91AjP+nLkADko380srsC2DC3s7Y1Rk6YfOlxOlvEQKa9XXmLI+W4ZA==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+            "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-core": "3.5.10",
-                "@vue/shared": "3.5.10"
+                "@vue/compiler-core": "3.5.12",
+                "@vue/shared": "3.5.12"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.10.tgz",
-            "integrity": "sha512-to8E1BgpakV7224ZCm8gz1ZRSyjNCAWEplwFMWKlzCdP9DkMKhRRwt0WkCjY7jkzi/Vz3xgbpeig5Pnbly4Tow==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
+            "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.25.3",
-                "@vue/compiler-core": "3.5.10",
-                "@vue/compiler-dom": "3.5.10",
-                "@vue/compiler-ssr": "3.5.10",
-                "@vue/shared": "3.5.10",
+                "@vue/compiler-core": "3.5.12",
+                "@vue/compiler-dom": "3.5.12",
+                "@vue/compiler-ssr": "3.5.12",
+                "@vue/shared": "3.5.12",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.11",
                 "postcss": "^8.4.47",
@@ -970,65 +1528,148 @@
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.10.tgz",
-            "integrity": "sha512-hxP4Y3KImqdtyUKXDRSxKSRkSm1H9fCvhojEYrnaoWhE4w/y8vwWhnosJoPPe2AXm5sU7CSbYYAgkt2ZPhDz+A==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+            "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.10",
-                "@vue/shared": "3.5.10"
+                "@vue/compiler-dom": "3.5.12",
+                "@vue/shared": "3.5.12"
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.10.tgz",
-            "integrity": "sha512-kW08v06F6xPSHhid9DJ9YjOGmwNDOsJJQk0ax21wKaUYzzuJGEuoKNU2Ujux8FLMrP7CFJJKsHhXN9l2WOVi2g==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
+            "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/shared": "3.5.10"
+                "@vue/shared": "3.5.12"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.10.tgz",
-            "integrity": "sha512-9Q86I5Qq3swSkFfzrZ+iqEy7Vla325M7S7xc1NwKnRm/qoi1Dauz0rT6mTMmscqx4qz0EDJ1wjB+A36k7rl8mA==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
+            "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.10",
-                "@vue/shared": "3.5.10"
+                "@vue/reactivity": "3.5.12",
+                "@vue/shared": "3.5.12"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.10.tgz",
-            "integrity": "sha512-t3x7ht5qF8ZRi1H4fZqFzyY2j+GTMTDxRheT+i8M9Ph0oepUxoadmbwlFwMoW7RYCpNQLpP2Yx3feKs+fyBdpA==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
+            "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.10",
-                "@vue/runtime-core": "3.5.10",
-                "@vue/shared": "3.5.10",
+                "@vue/reactivity": "3.5.12",
+                "@vue/runtime-core": "3.5.12",
+                "@vue/shared": "3.5.12",
                 "csstype": "^3.1.3"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.10.tgz",
-            "integrity": "sha512-IVE97tt2kGKwHNq9yVO0xdh1IvYfZCShvDSy46JIh5OQxP1/EXSpoDqetVmyIzL7CYOWnnmMkVqd7YK2QSWkdw==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
+            "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-ssr": "3.5.10",
-                "@vue/shared": "3.5.10"
+                "@vue/compiler-ssr": "3.5.12",
+                "@vue/shared": "3.5.12"
             },
             "peerDependencies": {
-                "vue": "3.5.10"
+                "vue": "3.5.12"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.10.tgz",
-            "integrity": "sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+            "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
             "license": "MIT"
         },
+        "node_modules/@vueuse/core": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+            "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "11.1.0",
+                "@vueuse/shared": "11.1.0",
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+            "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+            "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+            "dependencies": {
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.12.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -1230,7 +1871,6 @@
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
             "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-            "dev": true,
             "license": "MIT",
             "peerDependencies": {
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -1315,7 +1955,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true,
             "license": "Python-2.0"
         },
         "node_modules/asynckit": {
@@ -1394,14 +2033,12 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
             "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
@@ -1482,7 +2119,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6"
@@ -1579,6 +2215,33 @@
                 "node": ">=6.0"
             }
         },
+        "node_modules/cli-cursor": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+            "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+            "license": "MIT",
+            "dependencies": {
+                "restore-cursor": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/cli-spinners": {
+            "version": "2.9.2",
+            "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+            "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1622,7 +2285,6 @@
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/cross-spawn": {
@@ -1667,7 +2329,6 @@
             "version": "4.3.5",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
             "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "2.1.2"
@@ -1685,7 +2346,6 @@
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/deepmerge": {
@@ -1735,19 +2395,6 @@
             "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
             "license": "MIT"
         },
-        "node_modules/doctrine": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-            "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-            "dev": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "esutils": "^2.0.2"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1777,11 +2424,10 @@
             "license": "MIT"
         },
         "node_modules/enhanced-resolve": {
-            "version": "5.17.0",
-            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
-            "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
+            "version": "5.17.1",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+            "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "graceful-fs": "^4.2.4",
                 "tapable": "^2.2.0"
@@ -1831,9 +2477,9 @@
             "peer": true
         },
         "node_modules/esbuild": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-            "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+            "version": "0.21.5",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+            "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
             "hasInstallScript": true,
             "license": "MIT",
             "bin": {
@@ -1843,28 +2489,29 @@
                 "node": ">=12"
             },
             "optionalDependencies": {
-                "@esbuild/android-arm": "0.18.20",
-                "@esbuild/android-arm64": "0.18.20",
-                "@esbuild/android-x64": "0.18.20",
-                "@esbuild/darwin-arm64": "0.18.20",
-                "@esbuild/darwin-x64": "0.18.20",
-                "@esbuild/freebsd-arm64": "0.18.20",
-                "@esbuild/freebsd-x64": "0.18.20",
-                "@esbuild/linux-arm": "0.18.20",
-                "@esbuild/linux-arm64": "0.18.20",
-                "@esbuild/linux-ia32": "0.18.20",
-                "@esbuild/linux-loong64": "0.18.20",
-                "@esbuild/linux-mips64el": "0.18.20",
-                "@esbuild/linux-ppc64": "0.18.20",
-                "@esbuild/linux-riscv64": "0.18.20",
-                "@esbuild/linux-s390x": "0.18.20",
-                "@esbuild/linux-x64": "0.18.20",
-                "@esbuild/netbsd-x64": "0.18.20",
-                "@esbuild/openbsd-x64": "0.18.20",
-                "@esbuild/sunos-x64": "0.18.20",
-                "@esbuild/win32-arm64": "0.18.20",
-                "@esbuild/win32-ia32": "0.18.20",
-                "@esbuild/win32-x64": "0.18.20"
+                "@esbuild/aix-ppc64": "0.21.5",
+                "@esbuild/android-arm": "0.21.5",
+                "@esbuild/android-arm64": "0.21.5",
+                "@esbuild/android-x64": "0.21.5",
+                "@esbuild/darwin-arm64": "0.21.5",
+                "@esbuild/darwin-x64": "0.21.5",
+                "@esbuild/freebsd-arm64": "0.21.5",
+                "@esbuild/freebsd-x64": "0.21.5",
+                "@esbuild/linux-arm": "0.21.5",
+                "@esbuild/linux-arm64": "0.21.5",
+                "@esbuild/linux-ia32": "0.21.5",
+                "@esbuild/linux-loong64": "0.21.5",
+                "@esbuild/linux-mips64el": "0.21.5",
+                "@esbuild/linux-ppc64": "0.21.5",
+                "@esbuild/linux-riscv64": "0.21.5",
+                "@esbuild/linux-s390x": "0.21.5",
+                "@esbuild/linux-x64": "0.21.5",
+                "@esbuild/netbsd-x64": "0.21.5",
+                "@esbuild/openbsd-x64": "0.21.5",
+                "@esbuild/sunos-x64": "0.21.5",
+                "@esbuild/win32-arm64": "0.21.5",
+                "@esbuild/win32-ia32": "0.21.5",
+                "@esbuild/win32-x64": "0.21.5"
             }
         },
         "node_modules/escalade": {
@@ -1880,7 +2527,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
@@ -1890,66 +2536,197 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.57.1",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-            "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-            "dev": true,
+            "version": "9.13.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz",
+            "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==",
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
-                "@eslint-community/regexpp": "^4.6.1",
-                "@eslint/eslintrc": "^2.1.4",
-                "@eslint/js": "8.57.1",
-                "@humanwhocodes/config-array": "^0.13.0",
+                "@eslint-community/regexpp": "^4.11.0",
+                "@eslint/config-array": "^0.18.0",
+                "@eslint/core": "^0.7.0",
+                "@eslint/eslintrc": "^3.1.0",
+                "@eslint/js": "9.13.0",
+                "@eslint/plugin-kit": "^0.2.0",
+                "@humanfs/node": "^0.16.5",
                 "@humanwhocodes/module-importer": "^1.0.1",
-                "@nodelib/fs.walk": "^1.2.8",
-                "@ungap/structured-clone": "^1.2.0",
+                "@humanwhocodes/retry": "^0.3.1",
+                "@types/estree": "^1.0.6",
+                "@types/json-schema": "^7.0.15",
                 "ajv": "^6.12.4",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
                 "debug": "^4.3.2",
-                "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^7.2.2",
-                "eslint-visitor-keys": "^3.4.3",
-                "espree": "^9.6.1",
-                "esquery": "^1.4.2",
+                "eslint-scope": "^8.1.0",
+                "eslint-visitor-keys": "^4.1.0",
+                "espree": "^10.2.0",
+                "esquery": "^1.5.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
-                "file-entry-cache": "^6.0.1",
+                "file-entry-cache": "^8.0.0",
                 "find-up": "^5.0.0",
                 "glob-parent": "^6.0.2",
-                "globals": "^13.19.0",
-                "graphemer": "^1.4.0",
                 "ignore": "^5.2.0",
                 "imurmurhash": "^0.1.4",
                 "is-glob": "^4.0.0",
-                "is-path-inside": "^3.0.3",
-                "js-yaml": "^4.1.0",
                 "json-stable-stringify-without-jsonify": "^1.0.1",
-                "levn": "^0.4.1",
                 "lodash.merge": "^4.6.2",
                 "minimatch": "^3.1.2",
                 "natural-compare": "^1.4.0",
                 "optionator": "^0.9.3",
-                "strip-ansi": "^6.0.1",
                 "text-table": "^0.2.0"
             },
             "bin": {
                 "eslint": "bin/eslint.js"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://eslint.org/donate"
+            },
+            "peerDependencies": {
+                "jiti": "*"
+            },
+            "peerDependenciesMeta": {
+                "jiti": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-compat-utils": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+            "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+            "license": "MIT",
+            "dependencies": {
+                "semver": "^7.5.4"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "eslint": ">=6.0.0"
+            }
+        },
+        "node_modules/eslint-plugin-es-x": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.8.0.tgz",
+            "integrity": "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==",
+            "funding": [
+                "https://github.com/sponsors/ota-meshi",
+                "https://opencollective.com/eslint"
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.1.2",
+                "@eslint-community/regexpp": "^4.11.0",
+                "eslint-compat-utils": "^0.5.1"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "eslint": ">=8"
+            }
+        },
+        "node_modules/eslint-plugin-n": {
+            "version": "17.11.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-17.11.1.tgz",
+            "integrity": "sha512-93IUD82N6tIEgjztVI/l3ElHtC2wTa9boJHrD8iN+NyDxjxz/daZUZKfkedjBZNdg6EqDk4irybUsiPwDqXAEA==",
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "enhanced-resolve": "^5.17.0",
+                "eslint-plugin-es-x": "^7.5.0",
+                "get-tsconfig": "^4.7.0",
+                "globals": "^15.8.0",
+                "ignore": "^5.2.4",
+                "minimatch": "^9.0.5",
+                "semver": "^7.5.3"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            },
+            "peerDependencies": {
+                "eslint": ">=8.23.0"
+            }
+        },
+        "node_modules/eslint-plugin-n/node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/eslint-plugin-n/node_modules/globals": {
+            "version": "15.11.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
+            "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint-plugin-n/node_modules/minimatch": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+            "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/eslint-plugin-promise": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-7.1.0.tgz",
+            "integrity": "sha512-8trNmPxdAy3W620WKDpaS65NlM5yAumod6XeC4LOb+jxlkG4IVcp68c6dXY2ev+uT4U1PtG57YDV6EGAXN0GbQ==",
+            "license": "ISC",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
+            }
+        },
+        "node_modules/eslint-plugin-tailwindcss": {
+            "version": "3.17.5",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz",
+            "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==",
+            "license": "MIT",
+            "dependencies": {
+                "fast-glob": "^3.2.5",
+                "postcss": "^8.4.4"
+            },
+            "engines": {
+                "node": ">=18.12.0"
+            },
+            "peerDependencies": {
+                "tailwindcss": "^3.4.0"
             }
         },
         "node_modules/eslint-plugin-vue": {
-            "version": "9.28.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.28.0.tgz",
-            "integrity": "sha512-ShrihdjIhOTxs+MfWun6oJWuk+g/LAhN+CiuOl/jjkG3l0F2AuK5NMTaWqyvBgkFtpYmyks6P4603mLmhNJW8g==",
-            "dev": true,
+            "version": "9.29.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.29.1.tgz",
+            "integrity": "sha512-MH/MbVae4HV/tM8gKAVWMPJbYgW04CK7SuzYRrlNERpxbO0P3+Zdsa2oAcFBW6xNu7W6lIkGOsFAMCRTYmrlWQ==",
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
@@ -1972,7 +2749,6 @@
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -1986,27 +2762,70 @@
             "version": "7.2.2",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
             "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-            "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint/node_modules/eslint-scope": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.1.0.tgz",
+            "integrity": "sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint/node_modules/eslint-visitor-keys": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
+            "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/eslint-visitor-keys": {
-            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-            "dev": true,
-            "license": "Apache-2.0",
+        "node_modules/eslint/node_modules/espree": {
+            "version": "10.2.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
+            "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "acorn": "^8.12.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^4.1.0"
+            },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
@@ -2016,7 +2835,6 @@
             "version": "9.6.1",
             "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
             "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-            "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
                 "acorn": "^8.9.0",
@@ -2034,7 +2852,6 @@
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
             "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-            "dev": true,
             "license": "BSD-3-Clause",
             "dependencies": {
                 "estraverse": "^5.1.0"
@@ -2074,7 +2891,6 @@
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
             "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-            "dev": true,
             "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.10.0"
@@ -2134,7 +2950,6 @@
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/fastq": {
@@ -2147,16 +2962,15 @@
             }
         },
         "node_modules/file-entry-cache": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-            "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
-            "dev": true,
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+            "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
             "license": "MIT",
             "dependencies": {
-                "flat-cache": "^3.0.4"
+                "flat-cache": "^4.0.0"
             },
             "engines": {
-                "node": "^10.12.0 || >=12.0.0"
+                "node": ">=16.0.0"
             }
         },
         "node_modules/fill-range": {
@@ -2175,7 +2989,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
             "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "locate-path": "^6.0.0",
@@ -2189,18 +3002,16 @@
             }
         },
         "node_modules/flat-cache": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-            "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
-            "dev": true,
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+            "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
             "license": "MIT",
             "dependencies": {
                 "flatted": "^3.2.9",
-                "keyv": "^4.5.3",
-                "rimraf": "^3.0.2"
+                "keyv": "^4.5.4"
             },
             "engines": {
-                "node": "^10.12.0 || >=12.0.0"
+                "node": ">=16"
             }
         },
         "node_modules/flatpickr": {
@@ -2213,13 +3024,12 @@
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
             "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/floating-vue": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0.tgz",
-            "integrity": "sha512-YSffLYOjoaaPPBZc7VQR2qMCQ7xeXuh7i8a2u8WOdSmkjTtKtZpj2aaJnLtZRHmehrMHyCgtSxLu8jFNNX2sVw==",
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-5.2.2.tgz",
+            "integrity": "sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "~1.1.1",
@@ -2298,13 +3108,6 @@
                 "url": "https://github.com/sponsors/rawify"
             }
         },
-        "node_modules/fs.realpath": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/fsevents": {
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2328,6 +3131,18 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/get-east-asian-width": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
+            "integrity": "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/get-intrinsic": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -2347,26 +3162,16 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/glob": {
-            "version": "7.2.3",
-            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-            "deprecated": "Glob versions prior to v9 are no longer supported",
-            "dev": true,
-            "license": "ISC",
+        "node_modules/get-tsconfig": {
+            "version": "4.8.1",
+            "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
+            "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
+            "license": "MIT",
             "dependencies": {
-                "fs.realpath": "^1.0.0",
-                "inflight": "^1.0.4",
-                "inherits": "2",
-                "minimatch": "^3.1.1",
-                "once": "^1.3.0",
-                "path-is-absolute": "^1.0.0"
-            },
-            "engines": {
-                "node": "*"
+                "resolve-pkg-maps": "^1.0.0"
             },
             "funding": {
-                "url": "https://github.com/sponsors/isaacs"
+                "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
             }
         },
         "node_modules/glob-parent": {
@@ -2391,7 +3196,6 @@
             "version": "13.24.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
             "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "type-fest": "^0.20.2"
@@ -2425,7 +3229,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
             "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/has-flag": {
@@ -2492,10 +3295,9 @@
             }
         },
         "node_modules/ignore": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-            "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
-            "dev": true,
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
             "license": "MIT",
             "engines": {
                 "node": ">= 4"
@@ -2505,7 +3307,6 @@
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
             "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "parent-module": "^1.0.0",
@@ -2522,31 +3323,11 @@
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
             "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.8.19"
             }
         },
-        "node_modules/inflight": {
-            "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-            "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-            "dev": true,
-            "license": "ISC",
-            "dependencies": {
-                "once": "^1.3.0",
-                "wrappy": "1"
-            }
-        },
-        "node_modules/inherits": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/is-binary-path": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2604,6 +3385,18 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/is-interactive": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+            "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/is-number": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -2613,14 +3406,16 @@
                 "node": ">=0.12.0"
             }
         },
-        "node_modules/is-path-inside": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-            "dev": true,
+        "node_modules/is-unicode-supported": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
+            "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
             "license": "MIT",
             "engines": {
-                "node": ">=8"
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/isexe": {
@@ -2688,7 +3483,6 @@
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
             "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "argparse": "^2.0.1"
@@ -2701,7 +3495,6 @@
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
             "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/json-parse-even-better-errors": {
@@ -2721,40 +3514,40 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
         },
         "node_modules/laravel-vite-plugin": {
-            "version": "0.8.1",
-            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.8.1.tgz",
-            "integrity": "sha512-fxzUDjOA37kOsYq8dP+3oPIlw8/kJVXwu0hOXLun82R1LpV02shGeWGYKx2lbpKffL5I0sfPPjfqbYxuqBluAA==",
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-1.0.5.tgz",
+            "integrity": "sha512-Zv+to82YLBknDCZ6g3iwOv9wZ7f6EWStb9pjSm7MGe9Mfoy5ynT2ssZbGsMr1udU6rDg9HOoYEVGw5Qf+p9zbw==",
             "license": "MIT",
             "dependencies": {
                 "picocolors": "^1.0.0",
-                "vite-plugin-full-reload": "^1.0.5"
+                "vite-plugin-full-reload": "^1.1.0"
+            },
+            "bin": {
+                "clean-orphaned-assets": "bin/clean.js"
             },
             "engines": {
-                "node": ">=14"
+                "node": "^18.0.0 || >=20.0.0"
             },
             "peerDependencies": {
-                "vite": "^3.0.0 || ^4.0.0"
+                "vite": "^5.0.0"
             }
         },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
             "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "prelude-ls": "^1.2.1",
@@ -2793,7 +3586,6 @@
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
             "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "p-locate": "^5.0.0"
@@ -2841,6 +3633,46 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
             "license": "MIT"
         },
+        "node_modules/log-symbols": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-6.0.0.tgz",
+            "integrity": "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==",
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "^5.3.0",
+                "is-unicode-supported": "^1.3.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/log-symbols/node_modules/chalk": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+            "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+            "license": "MIT",
+            "engines": {
+                "node": "^12.17.0 || ^14.13 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/log-symbols/node_modules/is-unicode-supported": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+            "integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/lru-cache": {
             "version": "10.4.3",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -2882,9 +3714,9 @@
             }
         },
         "node_modules/micromatch": {
-            "version": "4.0.7",
-            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-            "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
             "license": "MIT",
             "dependencies": {
                 "braces": "^3.0.3",
@@ -2915,6 +3747,18 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mimic-function": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+            "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/mini-svg-data-uri": {
             "version": "1.4.4",
             "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -2928,7 +3772,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
@@ -2950,7 +3793,6 @@
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
             "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/mz": {
@@ -2986,7 +3828,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
             "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/neo-async": {
@@ -3030,7 +3871,6 @@
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
             "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-            "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
                 "boolbase": "^1.0.0"
@@ -3069,21 +3909,25 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/once": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-            "dev": true,
-            "license": "ISC",
+        "node_modules/onetime": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+            "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+            "license": "MIT",
             "dependencies": {
-                "wrappy": "1"
+                "mimic-function": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/optionator": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
             "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "deep-is": "^0.1.3",
@@ -3097,11 +3941,95 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/ora": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/ora/-/ora-8.1.0.tgz",
+            "integrity": "sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ==",
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "^5.3.0",
+                "cli-cursor": "^5.0.0",
+                "cli-spinners": "^2.9.2",
+                "is-interactive": "^2.0.0",
+                "is-unicode-supported": "^2.0.0",
+                "log-symbols": "^6.0.0",
+                "stdin-discarder": "^0.2.2",
+                "string-width": "^7.2.0",
+                "strip-ansi": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/ora/node_modules/ansi-regex": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+            "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
+        "node_modules/ora/node_modules/chalk": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+            "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+            "license": "MIT",
+            "engines": {
+                "node": "^12.17.0 || ^14.13 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/ora/node_modules/emoji-regex": {
+            "version": "10.4.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+            "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+            "license": "MIT"
+        },
+        "node_modules/ora/node_modules/string-width": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+            "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^10.3.0",
+                "get-east-asian-width": "^1.0.0",
+                "strip-ansi": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/ora/node_modules/strip-ansi": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+            "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
         "node_modules/p-limit": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
             "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "yocto-queue": "^0.1.0"
@@ -3117,7 +4045,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
             "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "p-limit": "^3.0.2"
@@ -3139,7 +4066,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "callsites": "^3.0.0"
@@ -3152,22 +4078,11 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
         },
-        "node_modules/path-is-absolute": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/path-key": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -3401,7 +4316,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
             "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.8.0"
@@ -3423,9 +4337,9 @@
             }
         },
         "node_modules/qs": {
-            "version": "6.12.3",
-            "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz",
-            "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==",
+            "version": "6.13.0",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+            "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "side-channel": "^1.0.6"
@@ -3488,12 +4402,6 @@
                 "node": ">=8.10.0"
             }
         },
-        "node_modules/resize-detector": {
-            "version": "0.3.0",
-            "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
-            "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==",
-            "license": "MIT"
-        },
         "node_modules/resolve": {
             "version": "1.22.8",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3515,12 +4423,36 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=4"
             }
         },
+        "node_modules/resolve-pkg-maps": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+            "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+            }
+        },
+        "node_modules/restore-cursor": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+            "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+            "license": "MIT",
+            "dependencies": {
+                "onetime": "^7.0.0",
+                "signal-exit": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/reusify": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -3531,35 +4463,38 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/rimraf": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-            "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-            "deprecated": "Rimraf versions prior to v4 are no longer supported",
-            "dev": true,
-            "license": "ISC",
+        "node_modules/rollup": {
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
+            "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
+            "license": "MIT",
             "dependencies": {
-                "glob": "^7.1.3"
-            },
-            "bin": {
-                "rimraf": "bin.js"
+                "@types/estree": "1.0.6"
             },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
-        "node_modules/rollup": {
-            "version": "3.29.5",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
-            "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
             "bin": {
                 "rollup": "dist/bin/rollup"
             },
             "engines": {
-                "node": ">=14.18.0",
+                "node": ">=18.0.0",
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
+                "@rollup/rollup-android-arm-eabi": "4.24.0",
+                "@rollup/rollup-android-arm64": "4.24.0",
+                "@rollup/rollup-darwin-arm64": "4.24.0",
+                "@rollup/rollup-darwin-x64": "4.24.0",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.24.0",
+                "@rollup/rollup-linux-arm-musleabihf": "4.24.0",
+                "@rollup/rollup-linux-arm64-gnu": "4.24.0",
+                "@rollup/rollup-linux-arm64-musl": "4.24.0",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0",
+                "@rollup/rollup-linux-riscv64-gnu": "4.24.0",
+                "@rollup/rollup-linux-s390x-gnu": "4.24.0",
+                "@rollup/rollup-linux-x64-gnu": "4.24.0",
+                "@rollup/rollup-linux-x64-musl": "4.24.0",
+                "@rollup/rollup-win32-arm64-msvc": "4.24.0",
+                "@rollup/rollup-win32-ia32-msvc": "4.24.0",
+                "@rollup/rollup-win32-x64-msvc": "4.24.0",
                 "fsevents": "~2.3.2"
             }
         },
@@ -3630,7 +4565,6 @@
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
             "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-            "dev": true,
             "license": "ISC",
             "bin": {
                 "semver": "bin/semver.js"
@@ -3753,6 +4687,18 @@
                 "source-map": "^0.6.0"
             }
         },
+        "node_modules/stdin-discarder": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.2.2.tgz",
+            "integrity": "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/string-width": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -3847,7 +4793,6 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -3947,9 +4892,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.4.13",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
-            "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+            "version": "3.4.14",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
+            "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
             "license": "MIT",
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
@@ -4001,7 +4946,6 @@
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
             "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=6"
             }
@@ -4071,7 +5015,6 @@
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/thenify": {
@@ -4116,6 +5059,18 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/ts-api-utils": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+            "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=16"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.2.0"
+            }
+        },
         "node_modules/ts-interface-checker": {
             "version": "0.1.13",
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -4132,7 +5087,6 @@
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
             "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "prelude-ls": "^1.2.1"
@@ -4145,7 +5099,6 @@
             "version": "0.20.2",
             "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
             "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-            "dev": true,
             "license": "(MIT OR CC0-1.0)",
             "engines": {
                 "node": ">=10"
@@ -4154,6 +5107,20 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/typescript": {
+            "version": "5.6.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+            "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+            "license": "Apache-2.0",
+            "peer": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
         "node_modules/undici-types": {
             "version": "5.26.5",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -4207,32 +5174,33 @@
             "license": "MIT"
         },
         "node_modules/vite": {
-            "version": "4.5.5",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",
-            "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
+            "version": "5.4.10",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
+            "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
             "license": "MIT",
             "dependencies": {
-                "esbuild": "^0.18.10",
-                "postcss": "^8.4.27",
-                "rollup": "^3.27.1"
+                "esbuild": "^0.21.3",
+                "postcss": "^8.4.43",
+                "rollup": "^4.20.0"
             },
             "bin": {
                 "vite": "bin/vite.js"
             },
             "engines": {
-                "node": "^14.18.0 || >=16.0.0"
+                "node": "^18.0.0 || >=20.0.0"
             },
             "funding": {
                 "url": "https://github.com/vitejs/vite?sponsor=1"
             },
             "optionalDependencies": {
-                "fsevents": "~2.3.2"
+                "fsevents": "~2.3.3"
             },
             "peerDependencies": {
-                "@types/node": ">= 14",
+                "@types/node": "^18.0.0 || >=20.0.0",
                 "less": "*",
                 "lightningcss": "^1.21.0",
                 "sass": "*",
+                "sass-embedded": "*",
                 "stylus": "*",
                 "sugarss": "*",
                 "terser": "^5.4.0"
@@ -4250,6 +5218,9 @@
                 "sass": {
                     "optional": true
                 },
+                "sass-embedded": {
+                    "optional": true
+                },
                 "stylus": {
                     "optional": true
                 },
@@ -4272,16 +5243,16 @@
             }
         },
         "node_modules/vue": {
-            "version": "3.5.10",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.10.tgz",
-            "integrity": "sha512-Vy2kmJwHPlouC/tSnIgXVg03SG+9wSqT1xu1Vehc+ChsXsRd7jLkKgMltVEFOzUdBr3uFwBCG+41LJtfAcBRng==",
+            "version": "3.5.12",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
+            "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.10",
-                "@vue/compiler-sfc": "3.5.10",
-                "@vue/runtime-dom": "3.5.10",
-                "@vue/server-renderer": "3.5.10",
-                "@vue/shared": "3.5.10"
+                "@vue/compiler-dom": "3.5.12",
+                "@vue/compiler-sfc": "3.5.12",
+                "@vue/runtime-dom": "3.5.12",
+                "@vue/server-renderer": "3.5.12",
+                "@vue/shared": "3.5.12"
             },
             "peerDependencies": {
                 "typescript": "*"
@@ -4292,32 +5263,7 @@
                 }
             }
         },
-        "node_modules/vue-echarts": {
-            "version": "6.7.3",
-            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.7.3.tgz",
-            "integrity": "sha512-vXLKpALFjbPphW9IfQPOVfb1KjGZ/f8qa/FZHi9lZIWzAnQC1DgnmEK3pJgEkyo6EP7UnX6Bv/V3Ke7p+qCNXA==",
-            "hasInstallScript": true,
-            "license": "MIT",
-            "dependencies": {
-                "resize-detector": "^0.3.0",
-                "vue-demi": "^0.13.11"
-            },
-            "peerDependencies": {
-                "@vue/composition-api": "^1.0.5",
-                "@vue/runtime-core": "^3.0.0",
-                "echarts": "^5.4.1",
-                "vue": "^2.6.12 || ^3.1.1"
-            },
-            "peerDependenciesMeta": {
-                "@vue/composition-api": {
-                    "optional": true
-                },
-                "@vue/runtime-core": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/vue-echarts/node_modules/vue-demi": {
+        "node_modules/vue-demi": {
             "version": "0.13.11",
             "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
             "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
@@ -4343,11 +5289,29 @@
                 }
             }
         },
+        "node_modules/vue-echarts": {
+            "version": "7.0.3",
+            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-7.0.3.tgz",
+            "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+            "license": "MIT",
+            "dependencies": {
+                "vue-demi": "^0.13.11"
+            },
+            "peerDependencies": {
+                "@vue/runtime-core": "^3.0.0",
+                "echarts": "^5.5.1",
+                "vue": "^2.7.0 || ^3.1.1"
+            },
+            "peerDependenciesMeta": {
+                "@vue/runtime-core": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vue-eslint-parser": {
             "version": "9.4.3",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
             "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "debug": "^4.3.4",
@@ -4406,9 +5370,9 @@
             }
         },
         "node_modules/vue-material-design-icons": {
-            "version": "5.3.0",
-            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.3.0.tgz",
-            "integrity": "sha512-wnbRh+48RwX/Gt+iqwCSdWpm0hPBwwv9F7MSouUzZ2PsphYVMJB9KkG9iGs+tgBiT57ZiurFEK07Y/rFKx+Ekg==",
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.3.1.tgz",
+            "integrity": "sha512-6UNEyhlTzlCeT8ZeX5WbpUGFTTPSbOoTQeoASTv7X4Ylh0pe8vltj+36VMK56KM0gG8EQVoMK/Qw/6evalg8lA==",
             "license": "MIT"
         },
         "node_modules/vue-resize": {
@@ -4471,13 +5435,12 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.93.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
-            "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
+            "version": "5.95.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+            "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
             "license": "MIT",
             "peer": true,
             "dependencies": {
-                "@types/eslint-scope": "^3.7.3",
                 "@types/estree": "^1.0.5",
                 "@webassemblyjs/ast": "^1.12.1",
                 "@webassemblyjs/wasm-edit": "^1.12.1",
@@ -4486,7 +5449,7 @@
                 "acorn-import-attributes": "^1.9.5",
                 "browserslist": "^4.21.10",
                 "chrome-trace-event": "^1.0.2",
-                "enhanced-resolve": "^5.17.0",
+                "enhanced-resolve": "^5.17.1",
                 "es-module-lexer": "^1.2.1",
                 "eslint-scope": "5.1.1",
                 "events": "^3.2.0",
@@ -4571,7 +5534,6 @@
             "version": "1.2.5",
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
             "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -4671,18 +5633,10 @@
                 "url": "https://github.com/chalk/strip-ansi?sponsor=1"
             }
         },
-        "node_modules/wrappy": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/xml-name-validator": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
             "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-            "dev": true,
             "license": "Apache-2.0",
             "engines": {
                 "node": ">=12"
@@ -4704,7 +5658,6 @@
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
diff --git a/package.json b/package.json
index 204a2c17..044277e0 100644
--- a/package.json
+++ b/package.json
@@ -1,44 +1,45 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "lint": "./node_modules/.bin/eslint resources/js --ext .js,.vue",
-        "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
+        "lint": "eslint .",
+        "lintf": "eslint . --fix"
     },
     "dependencies": {
+        "@blumilksoftware/eslint-config": "^3.0.0",
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.1.5",
-        "@inertiajs/inertia": "^0.11.1",
-        "@inertiajs/inertia-vue3": "^0.6.0",
-        "@inertiajs/progress": "^0.2.7",
+        "@inertiajs/vue3": "^1.2.0",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@tailwindcss/typography": "^0.5.15",
-        "@vitejs/plugin-vue": "^4.6.2",
-        "@vue/compiler-sfc": "^3.5.10",
+        "@vitejs/plugin-vue": "^5.1.4",
+        "@vue/compiler-sfc": "^3.5.12",
+        "@vueuse/core": "^11.1.0",
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.7",
         "echarts": "^5.5.1",
+        "eslint": "^9.13.0",
         "flatpickr": "^4.6.13",
-        "floating-vue": "^2.0.0",
-        "laravel-vite-plugin": "^0.8.1",
+        "floating-vue": "^5.2.2",
+        "laravel-vite-plugin": "^1.0.5",
         "lodash": "^4.17.21",
         "luxon": "^3.5.0",
         "postcss": "^8.4.47",
-        "tailwindcss": "^3.4.13",
-        "vite": "^4.5.5",
-        "vue": "^3.5.10",
-        "vue-echarts": "^6.7.3",
+        "tailwindcss": "^3.4.14",
+        "vite": "^5.4.10",
+        "vue": "^3.5.12",
+        "vue-echarts": "^7.0.3",
         "vue-flatpickr-component": "^11.0.5",
         "vue-loader": "^17.4.2",
-        "vue-material-design-icons": "^5.3.0",
+        "vue-material-design-icons": "^5.3.1",
         "vue-toastification": "^2.0.0-rc.5",
         "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "eslint": "^8.57.1",
-        "eslint-plugin-vue": "^9.28.0"
+        "eslint-plugin-vue": "^9.29.1"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..2e7af2b7 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/resources/js/Composables/useGlobalProps.js b/resources/js/Composables/useGlobalProps.js
new file mode 100644
index 00000000..5882708b
--- /dev/null
+++ b/resources/js/Composables/useGlobalProps.js
@@ -0,0 +1,16 @@
+import { computed } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+
+export function useGlobalProps() {
+  const page = usePage()
+
+  return {
+    auth: computed(() => page.props.auth),
+    flash: computed(() => page.props.flash),
+    errors: computed(() => page.props.errors),
+    deployInformation: computed(() => page.props.deployInformation),
+    vacationRequestsCount: computed(() => page.props.vacationRequestsCount),
+    overtimeRequestsCount: computed(() => page.props.overtimeRequestsCount),
+    lastUpdate: computed(() => page.props.lastUpdate),
+  }
+}
diff --git a/resources/js/Pages/AnnualSummary.vue b/resources/js/Pages/AnnualSummary.vue
index c45c5430..d885495e 100644
--- a/resources/js/Pages/AnnualSummary.vue
+++ b/resources/js/Pages/AnnualSummary.vue
@@ -3,7 +3,8 @@ import CalendarComponent from '@/Shared/CalendarComponent.vue'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
 import { ref, watch } from 'vue'
 import { DateTime } from 'luxon'
-import { Inertia } from '@inertiajs/inertia'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
+import { router } from '@inertiajs/vue3'
 
 const props = defineProps({
   year: Number,
@@ -19,37 +20,39 @@ watch(selectedYear, (value, oldValue) => {
   if (value === oldValue)
     return
 
-  Inertia.visit('/vacation/annual-summary', {
+  router.visit('/vacation/annual-summary', {
     data: { year: value },
   })
 })
 </script>
 
 <template>
-  <InertiaHead title="Podsumowanie roczne" />
-  <div class="bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Podsumowanie roczne
-        <YearPicker
-          v-model="selectedYear"
-          :from="currentDate.year - 20"
-          :to="currentDate.year + 1"
-          class="inline-block ml-2"
+  <AppLayout>
+    <template #title>Podsumowanie roczne</template>
+    <div class="bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Podsumowanie roczne
+          <YearPicker
+            v-model="selectedYear"
+            :from="currentDate.year - 20"
+            :to="currentDate.year + 1"
+            class="inline-block ml-2"
+          />
+        </h2>
+      </div>
+      <div
+        class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4"
+      >
+        <CalendarComponent
+          :year="year"
+          :start-month="1"
+          :end-month="12"
+          :vacations="vacations"
+          :pending-vacations="pendingVacations"
+          :holidays="holidays"
         />
-      </h2>
+      </div>
     </div>
-    <div
-      class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4"
-    >
-      <CalendarComponent
-        :year="year"
-        :start-month="1"
-        :end-month="12"
-        :vacations="vacations"
-        :pending-vacations="pendingVacations"
-        :holidays="holidays"
-      />
-    </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/AssignedBenefits/AssignedBenefits.vue b/resources/js/Pages/AssignedBenefits/AssignedBenefits.vue
index 48b857ea..4899dc37 100644
--- a/resources/js/Pages/AssignedBenefits/AssignedBenefits.vue
+++ b/resources/js/Pages/AssignedBenefits/AssignedBenefits.vue
@@ -2,10 +2,12 @@
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import TextArea from '@/Shared/Forms/TextArea.vue'
 import { ref, watch } from 'vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import { debounce } from 'lodash'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
 import { DateTime } from 'luxon'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   current: String,
@@ -13,9 +15,10 @@ const props = defineProps({
   benefits: Object,
   benefitsReports: Object,
   assignedBenefits: Object,
-  auth: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const currentDate = DateTime.now()
 
 const creatingBenefitsReport = ref(false)
@@ -97,262 +100,264 @@ function isBenefitHasCompanion(benefitId) {
 </script>
 
 <template>
-  <InertiaHead title="Aktualne benefity" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Aktualne benefity
-        </h2>
-      </div>
-      <div v-if="auth.can.manageBenefits && benefits.data.length > 0">
-        <button
-          :class="[form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-          :disabled="form.isDirty"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          type="button"
-          @click="startCreatingBenefitsReport"
-        >
-          Utwórz raport
-        </button>
+  <AppLayout>
+    <template #title>Aktualne benefity</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Aktualne benefity
+          </h2>
+        </div>
+        <div v-if="auth.can.manageBenefits && benefits.data.length > 0">
+          <button
+            :class="[form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.isDirty"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            type="button"
+            @click="startCreatingBenefitsReport"
+          >
+            Utwórz raport
+          </button>
+        </div>
       </div>
-    </div>
-    <form @submit.prevent="submitAssignedBenefits">
-      <div class="overflow-x-auto">
-        <table class="w-full text-sm text-center border border-gray-300 divide-y divide-x divide-gray-300">
-          <thead class="divide-y divide-gray-300">
-            <tr class="divide-x divide-gray-300">
-              <th
-                class="py-2 w-64 text-lg font-semibold text-gray-800 sticky left-0 bg-white outline outline-1 outline-offset-0 outline-gray-300"
-                rowspan="2"
-              >
-                <div class="flex justify-center items-center capitalize">
-                  {{ currentDate.toLocaleString({ month: 'long', year: 'numeric' }) }}
-                </div>
-              </th>
-              <th
-                v-for="benefit in benefits.data"
-                :key="benefit.id"
-                :colspan="[!benefit.companion ? 2 : 0]"
-                class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
-                style="min-width: 150px"
-              >
-                <div>
-                  {{ benefit.name }}
-                </div>
-              </th>
-              <th
-                class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
-                rowspan="2"
-              >
-                Wykorzystane dofinansowanie
-              </th>
-              <th
-                class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
-                rowspan="2"
-                style="min-width: 150px;"
-              >
-                Notatki
-              </th>
-            </tr>
-            <tr class="divide-x divide-gray-300">
-              <template
-                v-for="benefit in benefits.data"
-                :key="benefit.id"
-              >
+      <form @submit.prevent="submitAssignedBenefits">
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm text-center border border-gray-300 divide-y divide-x divide-gray-300">
+            <thead class="divide-y divide-gray-300">
+              <tr class="divide-x divide-gray-300">
                 <th
-                  v-if="!benefit.companion"
-                  class="text-sm p-1 font-normal bg-blumilk-50 text-blumilk-800 border border-gray-300"
-                  style="min-width: 90px;"
+                  class="py-2 w-64 text-lg font-semibold text-gray-800 sticky left-0 bg-white outline outline-1 outline-offset-0 outline-gray-300"
+                  rowspan="2"
                 >
-                  Pracodawca
+                  <div class="flex justify-center items-center capitalize">
+                    {{ currentDate.toLocaleString({ month: 'long', year: 'numeric' }) }}
+                  </div>
                 </th>
                 <th
-                  class="text-sm p-1 font-normal bg-green-50 text-green-800 border border-gray-300"
-                  style="min-width:90px;"
+                  v-for="benefit in benefits.data"
+                  :key="benefit.id"
+                  :colspan="[!benefit.companion ? 2 : 0]"
+                  class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
+                  style="min-width: 150px"
                 >
-                  Pracownik
+                  <div>
+                    {{ benefit.name }}
+                  </div>
                 </th>
-              </template>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-300">
-            <tr
-              v-for="(item, index) in form.items"
-              :key="item.user.id"
-              :class="[item.user.isActive ? '' : 'bg-gray-100', 'group hover:bg-blumilk-25 divide-x divide-gray-300']"
-            >
-              <th :class="[item.user.isActive ? 'bg-white' : 'bg-gray-100', 'group p-2 sticky left-0 outline outline-1 outline-offset-0 outline-gray-300 hover:bg-blumilk-25 group-hover:bg-blumilk-25']">
-                <div class="flex justify-start items-center">
-                  <UserProfileLink
-                    :user="item.user"
-                    class="flex justify-start items-center"
+                <th
+                  class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
+                  rowspan="2"
+                >
+                  Wykorzystane dofinansowanie
+                </th>
+                <th
+                  class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
+                  rowspan="2"
+                  style="min-width: 150px;"
+                >
+                  Notatki
+                </th>
+              </tr>
+              <tr class="divide-x divide-gray-300">
+                <template
+                  v-for="benefit in benefits.data"
+                  :key="benefit.id"
+                >
+                  <th
+                    v-if="!benefit.companion"
+                    class="text-sm p-1 font-normal bg-blumilk-50 text-blumilk-800 border border-gray-300"
+                    style="min-width: 90px;"
                   >
-                    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
-                      <img :src="item.user.avatar">
-                    </span>
-                    <div class="ml-3">
-                      <div class="text-sm font-medium text-gray-900 truncate">
-                        {{ item.user.name }}
-                      </div>
-                    </div>
-                  </UserProfileLink>
-                </div>
-              </th>
-              <template
-                v-for="(benefit) in item.benefits"
-                :key="benefit.id"
+                    Pracodawca
+                  </th>
+                  <th
+                    class="text-sm p-1 font-normal bg-green-50 text-green-800 border border-gray-300"
+                    style="min-width:90px;"
+                  >
+                    Pracownik
+                  </th>
+                </template>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-300">
+              <tr
+                v-for="(item, index) in form.items"
+                :key="item.user.id"
+                :class="[item.user.isActive ? '' : 'bg-gray-100', 'group hover:bg-blumilk-25 divide-x divide-gray-300']"
               >
-                <td
-                  v-if="!isBenefitHasCompanion(benefit.id)"
-                  style="height: 40px"
+                <th :class="[item.user.isActive ? 'bg-white' : 'bg-gray-100', 'group p-2 sticky left-0 outline outline-1 outline-offset-0 outline-gray-300 hover:bg-blumilk-25 group-hover:bg-blumilk-25']">
+                  <div class="flex justify-start items-center">
+                    <UserProfileLink
+                      :user="item.user"
+                      class="flex justify-start items-center"
+                    >
+                      <span class="inline-flex justify-center items-center size-8 rounded-full">
+                        <img :src="item.user.avatar">
+                      </span>
+                      <div class="ml-3">
+                        <div class="text-sm font-medium text-gray-900 truncate">
+                          {{ item.user.name }}
+                        </div>
+                      </div>
+                    </UserProfileLink>
+                  </div>
+                </th>
+                <template
+                  v-for="(benefit) in item.benefits"
+                  :key="benefit.id"
                 >
-                  <input
-                    v-model.number="benefit.employer"
-                    :name="`${benefit.id}-employer-${index}`"
-                    min="0"
-                    step="0.01"
-                    :class="[item.user.isActive ? '' : 'bg-gray-100', 'w-full h-full sm:text-sm appearance-none border-none text-right p-0 px-3 m-0 ring-inset hover:bg-blumilk-25 group-hover:bg-blumilk-25  focus:bg-blumilk-25 focus:ring-2 focus:ring-blumilk-300']"
-                    title="Wprowadź kwotę."
-                    type="number"
+                  <td
+                    v-if="!isBenefitHasCompanion(benefit.id)"
+                    style="height: 40px"
                   >
+                    <input
+                      v-model.number="benefit.employer"
+                      :name="`${benefit.id}-employer-${index}`"
+                      min="0"
+                      step="0.01"
+                      :class="[item.user.isActive ? '' : 'bg-gray-100', 'size-full sm:text-sm appearance-none border-none text-right p-0 px-3 m-0 ring-inset hover:bg-blumilk-25 group-hover:bg-blumilk-25 focus:bg-blumilk-25  focus:ring-2 focus:ring-blumilk-300']"
+                      title="Wprowadź kwotę."
+                      type="number"
+                    >
+                  </td>
+                  <td style="height: 40px">
+                    <input
+                      v-model.number="benefit.employee"
+                      :name="`${benefit.id}-employee-${index}`"
+                      type="number"
+                      step="0.01"
+                      :class="[item.user.isActive ? '' : 'bg-gray-100', 'size-full sm:text-sm appearance-none border-none text-right p-0 px-3 m-0 ring-inset hover:bg-blumilk-25 group-hover:bg-blumilk-25 focus:bg-blumilk-25  focus:ring-2 focus:ring-blumilk-300']"
+                      title="Wprowadź kwotę."
+                      min="0"
+                    >
+                  </td>
+                </template>
+                <td>
+                  <div class="w-full sm:text-sm focus:ring-white m-0 text-right p-3">
+                    {{ calculateSumOfBenefits(item.benefits) }}
+                  </div>
                 </td>
-                <td style="height: 40px">
-                  <input
-                    v-model.number="benefit.employee"
-                    :name="`${benefit.id}-employee-${index}`"
-                    type="number"
-                    step="0.01"
-                    :class="[item.user.isActive ? '' : 'bg-gray-100', 'w-full h-full sm:text-sm appearance-none border-none text-right p-0 px-3 m-0 ring-inset hover:bg-blumilk-25 group-hover:bg-blumilk-25  focus:bg-blumilk-25 focus:ring-2 focus:ring-blumilk-300']"
-                    title="Wprowadź kwotę."
-                    min="0"
-                  >
+                <td
+                  class="px-0.5 ring-inset hover:bg-blumilk-25 focus-within:bg-blumilk-25 ring-blumilk-300 focus-within:ring-2"
+                >
+                  <TextArea
+                    v-model="item.comment"
+                    :resize="true"
+                    :class="[item.user.isActive ? '' : 'bg-gray-100', 'size-full sm:text-sm border-none appearance-none mt-1 focus:ring-0 focus:bg-blumilk-25 group-hover:bg-blumilk-25 resize-y']"
+                    style="min-height: 40px"
+                  />
                 </td>
-              </template>
-              <td>
-                <div class="w-full sm:text-sm focus:ring-white m-0 text-right p-3">
-                  {{ calculateSumOfBenefits(item.benefits) }}
-                </div>
-              </td>
-              <td
-                class="px-0.5 ring-inset hover:bg-blumilk-25 focus-within:bg-blumilk-25 ring-blumilk-300 focus-within:ring-2"
-              >
-                <TextArea
-                  v-model="item.comment"
-                  :resize="true"
-                  :class="[item.user.isActive ? '' : 'bg-gray-100', 'w-full sm:text-sm border-none appearance-none mt-1 focus:ring-0 focus:bg-blumilk-25 group-hover:bg-blumilk-25 resize-y h-full']"
-                  style="min-height: 40px"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="flex justify-end py-3 px-4 sm:px-6">
-        <button
-          :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-          :disabled="form.processing || !form.isDirty"
-          class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          type="submit"
-        >
-          Zapisz
-        </button>
-      </div>
-    </form>
-  </div>
-  <TransitionRoot
-    :show="creatingBenefitsReport"
-    as="template"
-  >
-    <Dialog
-      is="div"
-      class="overflow-y-auto fixed inset-0 z-10"
-      @close="creatingBenefitsReport = false"
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="flex justify-end py-3 px-4 sm:px-6">
+          <button
+            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            type="submit"
+          >
+            Zapisz
+          </button>
+        </div>
+      </form>
+    </div>
+    <TransitionRoot
+      :show="creatingBenefitsReport"
+      as="template"
     >
-      <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </TransitionChild>
+      <Dialog
+        is="div"
+        class="overflow-y-auto fixed inset-0 z-10"
+        @close="creatingBenefitsReport = false"
+      >
+        <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+          </TransitionChild>
 
-        <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <form
-            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
-            @submit.prevent="submitCreateBenefitsReport"
+          <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div>
+            <form
+              class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
+              @submit.prevent="submitCreateBenefitsReport"
+            >
               <div>
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
-                >
-                  Utwórz raport
-                </DialogTitle>
-                <div class="mt-5">
-                  <label
-                    class="block text-sm font-medium text-gray-700 sm:mt-px"
-                    for="name"
+                <div>
+                  <DialogTitle
+                    as="h3"
+                    class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
                   >
-                    Nazwa
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      id="name"
-                      v-model="formBenefitsReport.name"
-                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': formBenefitsReport.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !formBenefitsReport.errors.name }"
-                      class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                      type="text"
-                    >
-                    <p
-                      v-if="formBenefitsReport.errors.name"
-                      class="mt-2 text-sm text-red-600"
+                    Utwórz raport
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <label
+                      class="block text-sm font-medium text-gray-700 sm:mt-px"
+                      for="name"
                     >
-                      {{ formBenefitsReport.errors.name }}
-                    </p>
+                      Nazwa
+                    </label>
+                    <div class="mt-2">
+                      <input
+                        id="name"
+                        v-model="formBenefitsReport.name"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': formBenefitsReport.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !formBenefitsReport.errors.name }"
+                        class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                        type="text"
+                      >
+                      <p
+                        v-if="formBenefitsReport.errors.name"
+                        class="mt-2 text-sm text-red-600"
+                      >
+                        {{ formBenefitsReport.errors.name }}
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="mt-5 sm:mt-6">
-              <div class="flex justify-end space-x-3">
-                <button
-                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                  type="button"
-                  @click="creatingBenefitsReport = false"
-                >
-                  Anuluj
-                </button>
-                <button
-                  :class="[formBenefitsReport.processing ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                  :disabled="formBenefitsReport.processing"
-                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
-                  type="submit"
-                >
-                  Utwórz
-                </button>
+              <div class="mt-5 sm:mt-6">
+                <div class="flex justify-end space-x-3">
+                  <button
+                    class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                    type="button"
+                    @click="creatingBenefitsReport = false"
+                  >
+                    Anuluj
+                  </button>
+                  <button
+                    :class="[formBenefitsReport.processing ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                    :disabled="formBenefitsReport.processing"
+                    class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                    type="submit"
+                  >
+                    Utwórz
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
+            </form>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </AppLayout>
 </template>
 
 <style>
diff --git a/resources/js/Pages/Benefits/Benefits.vue b/resources/js/Pages/Benefits/Benefits.vue
index a4e874d9..eaf7e04e 100644
--- a/resources/js/Pages/Benefits/Benefits.vue
+++ b/resources/js/Pages/Benefits/Benefits.vue
@@ -3,14 +3,18 @@ import { EllipsisVerticalIcon, TrashIcon } from '@heroicons/vue/24/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref } from 'vue'
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
   benefits: Object,
-  auth: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const creating = ref(false)
 
 const form = useForm({
@@ -28,241 +32,243 @@ function submitCreateBenefit() {
 </script>
 
 <template>
-  <InertiaHead title="Benefity" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Benefity
-        </h2>
-      </div>
-      <div v-if="auth.can.manageBenefits">
-        <button
-          type="button"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          @click="creating = true"
-        >
-          Dodaj benefit
-        </button>
+  <AppLayout>
+    <template #title>Benefity</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Benefity
+          </h2>
+        </div>
+        <div v-if="auth.can.manageBenefits">
+          <button
+            type="button"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            @click="creating = true"
+          >
+            Dodaj benefit
+          </button>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Benefit
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Przeznaczenie
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="benefit in benefits.data"
-              :key="benefit.id"
-              class="hover:bg-blumilk-25"
-            >
-              <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
-                {{ benefit.name }}
-              </td>
-              <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
-                <span
-                  :class="[benefit.companion ? 'bg-green-100 text-green-800':'bg-amber-100 text-amber-800']"
-                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold text-left text-gray-500 uppercase whitespace-nowrap"
                 >
-                  {{ benefit.companion ? "Dla osoby towarzyszącej" : "Dla pracownika" }}
-                </span>
-              </td>
-              <td class="px-4 py-2 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  v-if="auth.can.manageBenefits"
-                  as="div"
-                  class="inline-block relative text-left"
+                  Benefit
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  Przeznaczenie
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="benefit in benefits.data"
+                :key="benefit.id"
+                class="hover:bg-blumilk-25"
+              >
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
+                  {{ benefit.name }}
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
+                  <span
+                    :class="[benefit.companion ? 'bg-green-100 text-green-800':'bg-amber-100 text-amber-800']"
+                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
-
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
+                    {{ benefit.companion ? "Dla osoby towarzyszącej" : "Dla pracownika" }}
+                  </span>
+                </td>
+                <td class="px-4 py-2 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    v-if="auth.can.manageBenefits"
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
+
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div class="py-1">
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            as="button"
-                            method="delete"
-                            preserve-scroll
-                            :href="`/benefits/${benefit.id}`"
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!benefits.data.length">
-              <td
-                colspan="100%"
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-              >
-                <EmptyState>
-                  <template #title>
-                    Brak benefitów
-                  </template>
-                  <template #text>
-                    Brak wpisów dotyczących benefitów
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                            <InertiaLink
+                              as="button"
+                              method="delete"
+                              preserve-scroll
+                              :href="`/benefits/${benefit.id}`"
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!benefits.data.length">
+                <td
+                  colspan="100%"
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Brak benefitów
+                    </template>
+                    <template #text>
+                      Brak wpisów dotyczących benefitów
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
-  <TransitionRoot
-    as="template"
-    :show="creating"
-  >
-    <Dialog
-      is="div"
-      class="overflow-y-auto fixed inset-0 z-10"
-      @close="creating = false"
+    <TransitionRoot
+      as="template"
+      :show="creating"
     >
-      <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </TransitionChild>
+      <Dialog
+        is="div"
+        class="overflow-y-auto fixed inset-0 z-10"
+        @close="creating = false"
+      >
+        <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+          </TransitionChild>
 
-        <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <form
-            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
-            @submit.prevent="submitCreateBenefit"
+          <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div>
+            <form
+              class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
+              @submit.prevent="submitCreateBenefit"
+            >
               <div>
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
-                >
-                  Dodaj benefit
-                </DialogTitle>
-                <div class="mt-5">
-                  <label
-                    for="name"
-                    class="block text-sm font-medium text-gray-700 sm:mt-px"
+                <div>
+                  <DialogTitle
+                    as="h3"
+                    class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
                   >
-                    Nazwa
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      id="name"
-                      v-model="form.name"
-                      type="text"
-                      class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                    Dodaj benefit
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <label
+                      for="name"
+                      class="block text-sm font-medium text-gray-700 sm:mt-px"
                     >
+                      Nazwa
+                    </label>
+                    <div class="mt-2">
+                      <input
+                        id="name"
+                        v-model="form.name"
+                        type="text"
+                        class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                      >
+                      <p
+                        v-if="form.errors.name"
+                        class="mt-2 text-sm text-red-600"
+                      >
+                        {{ form.errors.name }}
+                      </p>
+                    </div>
+                    <div class="flex items-center my-7 space-x-2">
+                      <input
+                        id="companion"
+                        v-model="form.companion"
+                        type="checkbox"
+                        class="rounded size-4 border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.companion, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.companion }"
+                      >
+                      <label
+                        for="companion"
+                        class="block text-sm font-medium text-gray-700"
+                      >
+                        Dla osoby towarzyszącej
+                      </label>
+                    </div>
                     <p
-                      v-if="form.errors.name"
+                      v-if="form.errors.companion"
                       class="mt-2 text-sm text-red-600"
                     >
-                      {{ form.errors.name }}
+                      {{ form.errors.companion }}
                     </p>
                   </div>
-                  <div class="flex items-center my-7 space-x-2">
-                    <input
-                      id="companion"
-                      v-model="form.companion"
-                      type="checkbox"
-                      class="rounded h-4 w-4 border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
-                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.companion, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.companion }"
-                    >
-                    <label
-                      for="companion"
-                      class="block text-sm font-medium text-gray-700"
-                    >
-                      Dla osoby towarzyszącej
-                    </label>
-                  </div>
-                  <p
-                    v-if="form.errors.companion"
-                    class="mt-2 text-sm text-red-600"
-                  >
-                    {{ form.errors.companion }}
-                  </p>
                 </div>
               </div>
-            </div>
-            <div class="mt-5 sm:mt-6">
-              <div class="flex justify-end space-x-3">
-                <button
-                  type="button"
-                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                  @click="creating = false"
-                >
-                  Anuluj
-                </button>
-                <button
-                  type="submit"
-                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
-                  :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                  :disabled="form.processing || !form.isDirty"
-                >
-                  Dodaj
-                </button>
+              <div class="mt-5 sm:mt-6">
+                <div class="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                    @click="creating = false"
+                  >
+                    Anuluj
+                  </button>
+                  <button
+                    type="submit"
+                    class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                    :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                    :disabled="form.processing || !form.isDirty"
+                  >
+                    Dodaj
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
+            </form>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/BenefitsReport/Index.vue b/resources/js/Pages/BenefitsReport/Index.vue
index a19bba0b..1716b3ae 100644
--- a/resources/js/Pages/BenefitsReport/Index.vue
+++ b/resources/js/Pages/BenefitsReport/Index.vue
@@ -5,8 +5,10 @@ import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { reactive, watch } from 'vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   benefitsReports: Object,
@@ -19,7 +21,7 @@ const form = reactive({
 
 watch(form, debounce(() => {
 
-  Inertia.get('/benefits-reports', {
+  router.get('/benefits-reports', {
     search: form.search,
   }, {
     preserveState: true,
@@ -30,125 +32,127 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Raporty benefitowe" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Raporty benefitowe
-      </h2>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="flex-1 grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
-        <div class="relative">
-          <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-            <MagnifyingGlassIcon class="w-5 h-5 text-gray-400" />
+  <AppLayout>
+    <template #title>Raporty benefitowe</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Raporty benefitowe
+        </h2>
+      </div>
+      <div class="border-t border-gray-200">
+        <div class="flex-1 grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <MagnifyingGlassIcon class="size-5 text-gray-400" />
+            </div>
+            <input
+              v-model.trim="form.search"
+              type="search"
+              class="block py-2 pr-3 pl-10 w-full max-w-lg placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
+              placeholder="Szukaj"
+            >
           </div>
-          <input
-            v-model.trim="form.search"
-            type="search"
-            class="block py-2 pr-3 pl-10 w-full max-w-lg placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
-            placeholder="Szukaj"
-          >
         </div>
       </div>
-    </div>
-    <div class="overflow-auto xl:overflow-visible">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Data utworzenia
-            </th>
-            <th scope="col" />
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-100">
-          <tr
-            v-for="benefitsReport in benefitsReports.data"
-            :key="benefitsReport.id"
-          >
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/benefits-reports/${benefitsReport.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                {{ benefitsReport.name }}
-              </InertiaLink>
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ benefitsReport.createdAt }}
-            </td>
-            <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-              <Menu
-                as="div"
-                class="inline-block relative text-left"
+                Numer
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                <MenuButton
-                  class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                Data utworzenia
+              </th>
+              <th scope="col" />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <tr
+              v-for="benefitsReport in benefitsReports.data"
+              :key="benefitsReport.id"
+            >
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/benefits-reports/${benefitsReport.id}`"
+                  class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
                 >
-                  <EllipsisVerticalIcon class="w-5 h-5" />
-                </MenuButton>
-
-                <transition
-                  enter-active-class="transition ease-out duration-100"
-                  enter-from-class="transform opacity-0 scale-95"
-                  enter-to-class="transform opacity-100 scale-100"
-                  leave-active-class="transition ease-in duration-75"
-                  leave-from-class="transform opacity-100 scale-100"
-                  leave-to-class="transform opacity-0 scale-95"
+                  {{ benefitsReport.name }}
+                </InertiaLink>
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ benefitsReport.createdAt }}
+              </td>
+              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                <Menu
+                  as="div"
+                  class="inline-block relative text-left"
                 >
-                  <MenuItems
-                    class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                  <MenuButton
+                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  >
+                    <EllipsisVerticalIcon class="size-5" />
+                  </MenuButton>
+
+                  <transition
+                    enter-active-class="transition ease-out duration-100"
+                    enter-from-class="transform opacity-0 scale-95"
+                    enter-to-class="transform opacity-100 scale-100"
+                    leave-active-class="transition ease-in duration-75"
+                    leave-from-class="transform opacity-100 scale-100"
+                    leave-to-class="transform opacity-0 scale-95"
                   >
-                    <div class="py-1">
-                      <MenuItem
-                        v-slot="{ active }"
-                        class="flex"
-                      >
-                        <InertiaLink
-                          as="button"
-                          method="delete"
-                          preserve-scroll
-                          :href="`/benefits-reports/${benefitsReport.id}`"
-                          :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                    <MenuItems
+                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                    >
+                      <div class="py-1">
+                        <MenuItem
+                          v-slot="{ active }"
+                          class="flex"
                         >
-                          <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                          Usuń
-                        </InertiaLink>
-                      </MenuItem>
-                    </div>
-                  </MenuItems>
-                </transition>
-              </Menu>
-            </td>
-          </tr>
-          <tr v-if="! benefitsReports.data.length">
-            <td
-              colspan="100%"
-              class="py-4 text-xl leading-5 text-center text-gray-700"
-            >
-              <EmptyState>
-                <template #title>
-                  Brak raportów
-                </template>
-                <template #text>
-                  Nie znaleziono raportów o takiej nazwie
-                </template>
-              </EmptyState>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                          <InertiaLink
+                            as="button"
+                            method="delete"
+                            preserve-scroll
+                            :href="`/benefits-reports/${benefitsReport.id}`"
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                          >
+                            <TrashIcon class="mr-2 size-5 text-red-500" />
+                            Usuń
+                          </InertiaLink>
+                        </MenuItem>
+                      </div>
+                    </MenuItems>
+                  </transition>
+                </Menu>
+              </td>
+            </tr>
+            <tr v-if="! benefitsReports.data.length">
+              <td
+                colspan="100%"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+              >
+                <EmptyState>
+                  <template #title>
+                    Brak raportów
+                  </template>
+                  <template #text>
+                    Nie znaleziono raportów o takiej nazwie
+                  </template>
+                </EmptyState>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Pagination :pagination="benefitsReports.meta" />
     </div>
-    <Pagination :pagination="benefitsReports.meta" />
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/BenefitsReport/Show.vue b/resources/js/Pages/BenefitsReport/Show.vue
index cf893b90..3e9093fb 100644
--- a/resources/js/Pages/BenefitsReport/Show.vue
+++ b/resources/js/Pages/BenefitsReport/Show.vue
@@ -1,12 +1,15 @@
 <script setup>
 import { computed, ref } from 'vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   benefitsReport: Object,
-  auth: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const benefitsReportData = props.benefitsReport.data.map((item) => {
   const user = props.benefitsReport.users.find((user) => item.user === user.id)
 
@@ -45,157 +48,159 @@ function generateUrl() {
 </script>
 
 <template>
-  <InertiaHead :title="`Raport benefitowy - ${benefitsReport.name}`" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Benefity - {{ benefitsReport.name }}
-        </h2>
-      </div>
-      <div v-if="auth.can.manageBenefits">
-        <a
-          v-if="selectedUsers.length !== 0"
-          :href="`/benefits-reports/${props.benefitsReport.id}/download?${generateUrl()}`"
-        >
+  <AppLayout>
+    <template #title>`Raport benefitowy - ${benefitsReport.name}`</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Benefity - {{ benefitsReport.name }}
+          </h2>
+        </div>
+        <div v-if="auth.can.manageBenefits">
+          <a
+            v-if="selectedUsers.length !== 0"
+            :href="`/benefits-reports/${props.benefitsReport.id}/download?${generateUrl()}`"
+          >
+            <button
+              :class="[selectedUsers.length === 0 ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Pobierz raport
+            </button>
+          </a>
           <button
+            v-else
             :class="[selectedUsers.length === 0 ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="selectedUsers.length === 0"
             class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
           >
             Pobierz raport
           </button>
-        </a>
-        <button
-          v-else
-          :class="[selectedUsers.length === 0 ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-          :disabled="selectedUsers.length === 0"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-        >
-          Pobierz raport
-        </button>
+        </div>
       </div>
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300 divide-y divide-x divide-gray-300">
-        <thead class="divide-y divide-gray-300">
-          <tr class="divide-x divide-gray-300">
-            <th
-              class="relative w-16 px-8 space-x-4 sticky left-0 bg-white outline outline-1 outline-offset-0 outline-gray-300"
-              rowspan="2"
-              scope="col"
-            >
-              <input
-                :checked="indeterminate || selectedUsers.length === benefitsReportData.length && benefitsReportData.length > 0"
-                :disabled="benefitsReportData.length === 0"
-                :indeterminate="indeterminate"
-                class="absolute left-6 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
-                type="checkbox"
-                @change="selectedUsers = $event.target.checked ? benefitsReportData.map((item) => ( item.user.id )) : []"
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm text-center border border-gray-300 divide-y divide-x divide-gray-300">
+          <thead class="divide-y divide-gray-300">
+            <tr class="divide-x divide-gray-300">
+              <th
+                class="w-16 px-8 space-x-4 sticky left-0 bg-white outline outline-1 outline-offset-0 outline-gray-300"
+                rowspan="2"
+                scope="col"
               >
-              <div class="flex justify-start items-center pl-4">
-                {{ benefitsReport.name }}
-              </div>
-            </th>
-            <th
-              v-for="benefit in benefitsReport.benefits"
-              :key="benefit.id"
-              :colspan="[!benefit.companion ? 2 : 0]"
-              class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
-              style="min-width: 150px"
-            >
-              <div>
-                {{ benefit.name }}
-              </div>
-            </th>
-            <th
-              class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
-              rowspan="2"
-            >
-              Wykorzystane dofinansowanie
-            </th>
-          </tr>
-          <tr class="divide-x divide-gray-300">
-            <template
-              v-for="benefit in benefitsReport.benefits"
-              :key="benefit.id"
-            >
+                <input
+                  :checked="indeterminate || selectedUsers.length === benefitsReportData.length && benefitsReportData.length > 0"
+                  :disabled="benefitsReportData.length === 0"
+                  :indeterminate="indeterminate"
+                  class="absolute left-6 top-1/2 -mt-2 size-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+                  type="checkbox"
+                  @change="selectedUsers = $event.target.checked ? benefitsReportData.map((item) => ( item.user.id )) : []"
+                >
+                <div class="flex justify-start items-center pl-4">
+                  {{ benefitsReport.name }}
+                </div>
+              </th>
               <th
-                v-if="!benefit.companion"
-                class="text-sm p-1 font-normal text-gray-900 bg-blumilk-50 text-blumilk-800 border border-gray-300"
-                style="min-width: 90px;"
+                v-for="benefit in benefitsReport.benefits"
+                :key="benefit.id"
+                :colspan="[!benefit.companion ? 2 : 0]"
+                class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
+                style="min-width: 150px"
               >
-                Pracodawca
+                <div>
+                  {{ benefit.name }}
+                </div>
               </th>
               <th
-                class="text-sm p-1 font-normal text-gray-900 bg-green-50 text-green-800 border border-gray-300"
-                style="min-width: 90px;"
+                class="p-2 text-base font-semibold text-gray-900 even:bg-gray-100"
+                rowspan="2"
               >
-                Pracownik
+                Wykorzystane dofinansowanie
               </th>
-            </template>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-300">
-          <tr
-            v-for="item in benefitsReportData"
-            :key="item.user.id"
-            :class="[ selectedUsers.find((selectedUser) => selectedUser === item.user.id) && 'bg-blumilk-25', [!item.user.isActive ? 'bg-gray-100' : 'bg-white']]"
-            class="group hover:bg-blumilk-25 group-hover:bg-blumilk-25 divide-x divide-gray-300"
-          >
-            <td
-              :class="[ selectedUsers.find((selectedUser) => selectedUser === item.user.id) && 'bg-blumilk-25', [!item.user.isActive ? 'bg-gray-100' : 'bg-white']]"
-              class="relative w-12 px-6 sm:w-16 sm:px-8 space-x-4 sticky left-0 outline outline-1 outline-offset-0 outline-gray-300 group hover:bg-blumilk-25 group-hover:bg-blumilk-25"
-            >
-              <div>
-                <div
-                  v-if="selectedUsers.find((selectedUser) => selectedUser === item.user.id)"
-                  class="absolute inset-y-0 left-0 w-0.5 bg-blumilk-600"
-                />
-                <input
-                  v-model="selectedUsers"
-                  :value="item.user.id"
-                  class="absolute left-6 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
-                  type="checkbox"
+            </tr>
+            <tr class="divide-x divide-gray-300">
+              <template
+                v-for="benefit in benefitsReport.benefits"
+                :key="benefit.id"
+              >
+                <th
+                  v-if="!benefit.companion"
+                  class="text-sm p-1 font-normal bg-blumilk-50 text-blumilk-800 border border-gray-300"
+                  style="min-width: 90px;"
                 >
-              </div>
-              <div class="flex justify-start items-center pl-4">
-                <UserProfileLink
-                  :user="item.user"
-                  class="flex justify-start items-center"
+                  Pracodawca
+                </th>
+                <th
+                  class="text-sm p-1 font-normal bg-green-50 text-green-800 border border-gray-300"
+                  style="min-width: 90px;"
                 >
-                  <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
-                    <img :src="item.user.avatar">
-                  </span>
-                  <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900 truncate">
-                      {{ item.user.name }}
-                    </div>
-                  </div>
-                </UserProfileLink>
-              </div>
-            </td>
-            <template
-              v-for="(benefit) in item.benefits"
-              :key="benefit.id"
+                  Pracownik
+                </th>
+              </template>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-300">
+            <tr
+              v-for="item in benefitsReportData"
+              :key="item.user.id"
+              :class="[ selectedUsers.find((selectedUser) => selectedUser === item.user.id) && 'bg-blumilk-25', [!item.user.isActive ? 'bg-gray-100' : 'bg-white']]"
+              class="group hover:bg-blumilk-25 group-hover:bg-blumilk-25 divide-x divide-gray-300"
             >
               <td
-                v-if="!isBenefitHasCompanion(benefit.id)"
-                class="text-right px-3"
+                :class="[ selectedUsers.find((selectedUser) => selectedUser === item.user.id) && 'bg-blumilk-25', [!item.user.isActive ? 'bg-gray-100' : 'bg-white']]"
+                class="w-12 px-6 sm:w-16 sm:px-8 space-x-4 sticky left-0 outline outline-1 outline-offset-0 outline-gray-300 group hover:bg-blumilk-25 group-hover:bg-blumilk-25"
               >
-                <span v-if="benefit.employer">{{ new Intl.NumberFormat('pl-PL').format(benefit.employer / 100) }}</span>
+                <div>
+                  <div
+                    v-if="selectedUsers.find((selectedUser) => selectedUser === item.user.id)"
+                    class="absolute inset-y-0 left-0 w-0.5 bg-blumilk-600"
+                  />
+                  <input
+                    v-model="selectedUsers"
+                    :value="item.user.id"
+                    class="absolute left-6 top-1/2 -mt-2 size-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+                    type="checkbox"
+                  >
+                </div>
+                <div class="flex justify-start items-center pl-4">
+                  <UserProfileLink
+                    :user="item.user"
+                    class="flex justify-start items-center"
+                  >
+                    <span class="inline-flex justify-center items-center size-8 rounded-full">
+                      <img :src="item.user.avatar">
+                    </span>
+                    <div class="ml-3">
+                      <div class="text-sm font-medium text-gray-900 truncate">
+                        {{ item.user.name }}
+                      </div>
+                    </div>
+                  </UserProfileLink>
+                </div>
               </td>
-              <td class="text-right px-3">
-                <span v-if="benefit.employee">{{ new Intl.NumberFormat('pl-PL').format(benefit.employee / 100) }}</span>
+              <template
+                v-for="(benefit) in item.benefits"
+                :key="benefit.id"
+              >
+                <td
+                  v-if="!isBenefitHasCompanion(benefit.id)"
+                  class="text-right px-3"
+                >
+                  <span v-if="benefit.employer">{{ new Intl.NumberFormat('pl-PL').format(benefit.employer / 100) }}</span>
+                </td>
+                <td class="text-right px-3">
+                  <span v-if="benefit.employee">{{ new Intl.NumberFormat('pl-PL').format(benefit.employee / 100) }}</span>
+                </td>
+              </template>
+              <td>
+                <div class="w-full sm:text-sm focus:ring-white m-0 text-right p-3">
+                  {{ calculateSumOfBenefits(item.benefits) }}
+                </div>
               </td>
-            </template>
-            <td>
-              <div class="w-full sm:text-sm focus:ring-white m-0 text-right p-3">
-                {{ calculateSumOfBenefits(item.benefits) }}
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index c3e916ee..09f833ea 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -1,25 +1,25 @@
 <script setup>
-import {
-  ArrowUturnLeftIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from '@heroicons/vue/24/solid'
+import { ArrowUturnLeftIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { ref, watch } from 'vue'
 import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon.vue'
 import CalendarDay from '@/Shared/CalendarDay.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
-import { Inertia } from '@inertiajs/inertia'
 import { DateTime } from 'luxon'
 import MonthPicker from '@/Shared/Forms/MonthPicker.vue'
+import { router } from '@inertiajs/vue3'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   users: Object,
-  auth: Object,
   calendar: Object,
   workingHours: Number,
   selectedDate: String,
 })
 
+const { auth } = useGlobalProps()
+
 let activeElement = ref(undefined)
 
 const currentDate = DateTime.now()
@@ -31,7 +31,7 @@ watch(selectedMonth, (value, oldValue) => {
     return
   }
 
-  Inertia.visit(`/calendar/${value.toFormat('LL-yyyy')}`)
+  router.visit(`/calendar/${value.toFormat('LL-yyyy')}`)
 })
 
 function previousMonth() {
@@ -60,166 +60,168 @@ function unsetActiveDay() {
 }
 
 function linkParameters(user, day) {
-  return props.auth.can.createRequestsOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
+  return auth.value.can.createRequestsOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
 }
 
 function linkVacationRequest(user) {
-  return props.auth.user.id === user.id || props.auth.can.manageRequestsAsTechnicalApprover || props.auth.can.manageRequestsAsAdministrativeApprover
+  return auth.value.user.id === user.id || auth.value.can.manageRequestsAsTechnicalApprover || auth.value.can.manageRequestsAsAdministrativeApprover
 }
 </script>
 
 <template>
-  <InertiaHead title="Kalendarz" />
-  <div class="bg-white shadow-md">
-    <div class="flex-row sm:flex justify-between items-center p-4 sm:px-6">
-      <div class="flex-row sm:flex items-center">
-        <h2 class="text-lg font-medium leading-6 sm:text-center mb-2 sm:mb-0 text-gray-900">
-          Kalendarz
-        </h2>
-        <div class="flex items-center sm:ml-3 md:items-stretch">
-          <button
-            type="button"
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
-            @click="previousMonth()"
-          >
-            <ChevronLeftIcon class="w-5 h-5" />
-          </button>
-          <MonthPicker
-            :model-value="selectedMonth.toFormat('LL-yyyy')"
-            class="block w-40 shadow-sm disabled:bg-gray-100 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
-            @update:model-value="selectedMonth = DateTime.fromFormat($event, 'LL/yyyy')"
-          />
-          <button
-            type="button"
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
-            @click="nextMonth()"
-          >
-            <ChevronRightIcon class="w-5 h-5" />
-          </button>
-          <button
-            v-if="selectedMonth.toFormat('LL-yyyy') !== currentDate.toFormat('LL-yyyy')"
-            type="button"
-            class="flex focus:relative justify-center items-center p-2 bg-white md:px-2 md:hover:bg-gray-50 ml-1"
-            @click="currentMonth()"
-          >
-            <ArrowUturnLeftIcon class="w-5 h-5 text-blumilk-600 hover:text-blumilk-500" />
-            <span class="ml-1.5 text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
-              Dzisiaj
-            </span>
-          </button>
+  <AppLayout>
+    <template #title>Kalendarz</template>
+    <div class="bg-white shadow-md">
+      <div class="flex-row sm:flex justify-between items-center p-4 sm:px-6">
+        <div class="flex-row sm:flex items-center">
+          <h2 class="text-lg font-medium leading-6 sm:text-center mb-2 sm:mb-0 text-gray-900">
+            Kalendarz
+          </h2>
+          <div class="flex items-center sm:ml-3 md:items-stretch">
+            <button
+              type="button"
+              class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
+              @click="previousMonth()"
+            >
+              <ChevronLeftIcon class="size-5" />
+            </button>
+            <MonthPicker
+              :model-value="selectedMonth.toFormat('LL-yyyy')"
+              class="block w-40 shadow-sm disabled:bg-gray-100 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+              @update:model-value="selectedMonth = DateTime.fromFormat($event, 'LL/yyyy')"
+            />
+            <button
+              type="button"
+              class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
+              @click="nextMonth()"
+            >
+              <ChevronRightIcon class="size-5" />
+            </button>
+            <button
+              v-if="selectedMonth.toFormat('LL-yyyy') !== currentDate.toFormat('LL-yyyy')"
+              type="button"
+              class="flex focus:relative justify-center items-center p-2 bg-white md:px-2 md:hover:bg-gray-50 ml-1"
+              @click="currentMonth()"
+            >
+              <ArrowUturnLeftIcon class="size-5 text-blumilk-600 hover:text-blumilk-500" />
+              <span class="ml-1.5 text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
+                Dzisiaj
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-      <div class="flex-row">
-        <div
-          class="flex items-center justify-end gap-3 mt-3 sm:mt-0"
-        >
-          <a
-            v-if="auth.can.manageRequestsAsAdministrativeApprover"
-            :href="`/vacation/timesheet/${selectedMonth.toFormat('LL-yyyy')}`"
-            class="block py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+        <div class="flex-row">
+          <div
+            class="flex items-center justify-end gap-3 mt-3 sm:mt-0"
           >
-            Pobierz plik Excel
-          </a>
-          <a
-            v-if="auth.can.manageOvertimeAsAdministrativeApprover"
-            :href="`/overtime/timesheet/${selectedMonth.toFormat('LL-yyyy')}`"
-            class="block py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            <a
+              v-if="auth.can.manageRequestsAsAdministrativeApprover"
+              :href="`/vacation/timesheet/${selectedMonth.toFormat('LL-yyyy')}`"
+              class="block py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Pobierz plik Excel
+            </a>
+            <a
+              v-if="auth.can.manageOvertimeAsAdministrativeApprover"
+              :href="`/overtime/timesheet/${selectedMonth.toFormat('LL-yyyy')}`"
+              class="block py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Pobierz nadgodziny
+            </a>
+          </div>
+          <div
+            v-if="workingHours !== null"
+            class="flex items-center justify-start sm:justify-end mt-3 sm:mt-1"
           >
-            Pobierz nadgodziny
-          </a>
-        </div>
-        <div
-          v-if="workingHours !== null"
-          class="flex items-center justify-start sm:justify-end mt-3 sm:mt-1"
-        >
-          <p>
-            Liczba przepracowanych godzin: <span class="font-bold">{{ workingHours }}</span>
-          </p>
+            <p>
+              Liczba przepracowanych godzin: <span class="font-bold">{{ workingHours }}</span>
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300">
-        <thead>
-          <tr>
-            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
-              <div class="flex justify-center items-center capitalize">
-                {{ selectedMonth.toLocaleString({ month: 'long', year: 'numeric' }) }}
-              </div>
-            </th>
-            <th
-              v-for="day in calendar"
-              :key="day.dayOfMonth"
-              :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
-              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
-              style="min-width: 46px;"
-            >
-              <div>
-                {{ day.dayOfMonth }}
-                <p class="mt-1 text-sm font-normal capitalize">
-                  {{ day.dayOfWeek }}
-                </p>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="user in users.data"
-            :key="user.id"
-            :class="[user.isActive ? '' : 'bg-gray-100']"
-          >
-            <th class="p-2 border border-gray-300">
-              <UserProfileLink
-                :user="user"
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm text-center border border-gray-300">
+          <thead>
+            <tr>
+              <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
+                <div class="flex justify-center items-center capitalize">
+                  {{ selectedMonth.toLocaleString({ month: 'long', year: 'numeric' }) }}
+                </div>
+              </th>
+              <th
+                v-for="day in calendar"
+                :key="day.dayOfMonth"
+                :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
+                class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
+                style="min-width: 46px;"
               >
-                <div class="flex justify-start items-center">
-                  <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
-                    <img :src="user.avatar">
-                  </span>
-                  <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900 truncate">
-                      {{ user.name }}
-                    </div>
-                  </div>
+                <div>
+                  {{ day.dayOfMonth }}
+                  <p class="mt-1 text-sm font-normal capitalize">
+                    {{ day.dayOfWeek }}
+                  </p>
                 </div>
-              </UserProfileLink>
-            </th>
-            <td
-              v-for="day in calendar"
-              :key="day.dayOfMonth"
-              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
-              class="border border-gray-300"
-              @mouseleave="unsetActiveDay"
-              @mouseover="setActiveDay(user.id + '+' + day.date)"
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="user in users.data"
+              :key="user.id"
+              :class="[user.isActive ? '' : 'bg-gray-100']"
             >
-              <div
-                v-if="user.id in day.vacations"
-                class="flex justify-center items-center"
-              >
-                <CalendarDay
-                  :see-vacation-details="linkVacationRequest(user)"
-                  :vacation="day.vacations[user.id]"
-                />
-              </div>
-              <template
-                v-else-if="isActiveDay(user.id + '+' + day.date) && !day.isWeekend && !day.isHoliday && (auth.user.id === user.id || auth.can.createRequestsOnBehalfOfEmployee)"
-              >
-                <InertiaLink
-                  :data="linkParameters(user, day)"
-                  href="/vacation/requests/create"
+              <th class="p-2 border border-gray-300">
+                <UserProfileLink
+                  :user="user"
                 >
-                  <div class="flex justify-center items-center">
-                    <VacationTypeCalendarIcon
-                      type="create"
-                    />
+                  <div class="flex justify-start items-center">
+                    <span class="inline-flex justify-center items-center size-8 rounded-full">
+                      <img :src="user.avatar">
+                    </span>
+                    <div class="ml-3">
+                      <div class="text-sm font-medium text-gray-900 truncate">
+                        {{ user.name }}
+                      </div>
+                    </div>
                   </div>
-                </InertiaLink>
-              </template>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                </UserProfileLink>
+              </th>
+              <td
+                v-for="day in calendar"
+                :key="day.dayOfMonth"
+                :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
+                class="border border-gray-300"
+                @mouseleave="unsetActiveDay"
+                @mouseover="setActiveDay(user.id + '+' + day.date)"
+              >
+                <div
+                  v-if="user.id in day.vacations"
+                  class="flex justify-center items-center"
+                >
+                  <CalendarDay
+                    :see-vacation-details="linkVacationRequest(user)"
+                    :vacation="day.vacations[user.id]"
+                  />
+                </div>
+                <template
+                  v-else-if="isActiveDay(user.id + '+' + day.date) && !day.isWeekend && !day.isHoliday && (auth.user.id === user.id || auth.can.createRequestsOnBehalfOfEmployee)"
+                >
+                  <InertiaLink
+                    :data="linkParameters(user, day)"
+                    href="/vacation/requests/create"
+                  >
+                    <div class="flex justify-center items-center">
+                      <VacationTypeCalendarIcon
+                        type="create"
+                      />
+                    </div>
+                  </InertiaLink>
+                </template>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 912e8a7e..1b9c075c 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -9,9 +9,10 @@ import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests.vue'
 import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests.vue'
 import VacationCalendar from '@/Shared/Widgets/VacationCalendar.vue'
 import BenefitList from '@/Shared/Widgets/BenefitList.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
-  auth: Object,
   current: Object,
   upcoming: Object,
   vacationRequests: Object,
@@ -19,48 +20,52 @@ defineProps({
   calendar: Object,
   benefits: Object,
 })
+
+const { auth } = useGlobalProps()
 </script>
 
 <template>
-  <InertiaHead title="Strona główna" />
-  <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
-    <div class="grid grid-cols-1 gap-4 xl:col-span-2">
-      <Welcome :user="auth.user" />
-      <VacationStats :stats="stats" />
-      <VacationCalendar
-        :approved-vacations="calendar.approvedVacations"
-        :holidays="calendar.holidays"
-        :pending-vacations="calendar.pendingVacations"
-      />
-      <PendingVacationRequests
-        v-if="auth.can.listAllRequests"
-        :requests="vacationRequests.data"
-      />
-      <UserVacationRequests
-        v-else
-        :label="'Moje wnioski'"
-        :requests="vacationRequests.data"
-      />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
-      <AbsenceList
-        :absences="current.absences.data"
-        :upcoming-absences="upcoming.absences.data"
-      />
-      <RemoteWorkList
-        :remote-days="current.remoteDays.data"
-        :upcoming-remote-days="upcoming.remoteDays.data"
-      />
-      <BirthdaysList
-        :birthdays="upcoming.birthdays.data"
-      />
-      <UpcomingHolidays
-        :holidays="upcoming.holidays.data"
-      />
-      <BenefitList
-        :benefits="benefits.data"
-        :label="'Moje benefity'"
-      />
+  <AppLayout>
+    <template #title>Strona główna</template>
+    <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
+      <div class="grid grid-cols-1 gap-4 xl:col-span-2">
+        <Welcome :user="auth.user" />
+        <VacationStats :stats="stats" />
+        <VacationCalendar
+          :approved-vacations="calendar.approvedVacations"
+          :holidays="calendar.holidays"
+          :pending-vacations="calendar.pendingVacations"
+        />
+        <PendingVacationRequests
+          v-if="auth.can.listAllRequests"
+          :requests="vacationRequests.data"
+        />
+        <UserVacationRequests
+          v-else
+          :label="'Moje wnioski'"
+          :requests="vacationRequests.data"
+        />
+      </div>
+      <div class="grid grid-cols-1 gap-4">
+        <AbsenceList
+          :absences="current.absences.data"
+          :upcoming-absences="upcoming.absences.data"
+        />
+        <RemoteWorkList
+          :remote-days="current.remoteDays.data"
+          :upcoming-remote-days="upcoming.remoteDays.data"
+        />
+        <BirthdaysList
+          :birthdays="upcoming.birthdays.data"
+        />
+        <UpcomingHolidays
+          :holidays="upcoming.holidays.data"
+        />
+        <BenefitList
+          :benefits="benefits.data"
+          :label="'Moje benefity'"
+        />
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/EmployeesMilestones.vue b/resources/js/Pages/EmployeesMilestones.vue
index 30acc836..4a665232 100644
--- a/resources/js/Pages/EmployeesMilestones.vue
+++ b/resources/js/Pages/EmployeesMilestones.vue
@@ -3,10 +3,11 @@ import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { CakeIcon, CalendarDaysIcon, CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const sortOptions = [
   {
@@ -42,7 +43,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/employees-milestones', {
+  router.get('/employees-milestones', {
     search: form.search,
     sort: form.sort?.value ?? undefined,
   }, {
@@ -54,186 +55,188 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Jubileusze" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Jubileusze
-        </h2>
+  <AppLayout>
+    <template #title>Jubileusze</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Jubileusze
+          </h2>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="flex-1 grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
-        <div class="relative">
-          <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-            <MagnifyingGlassIcon class="w-5 h-5 text-gray-400" />
+      <div class="border-t border-gray-200">
+        <div class="flex-1 grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <MagnifyingGlassIcon class="size-5 text-gray-400" />
+            </div>
+            <input
+              v-model.trim="form.search"
+              class="block py-2 pr-3 pl-10 w-full max-w-lg placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
+              placeholder="Szukaj"
+              type="search"
+            >
           </div>
-          <input
-            v-model.trim="form.search"
-            class="block py-2 pr-3 pl-10 w-full max-w-lg placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
-            placeholder="Szukaj"
-            type="search"
+          <Listbox
+            v-model="form.sort"
+            as="div"
           >
-        </div>
-        <Listbox
-          v-model="form.sort"
-          as="div"
-        >
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span class="flex items-center">
-                {{ form.sort.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.sort.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="option in sortOptions"
-                  :key="option.value"
-                  v-slot="{ active, selected }"
-                  :value="option"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="option in sortOptions"
+                    :key="option.value"
+                    v-slot="{ active, selected }"
+                    :value="option"
+                    as="template"
                   >
-                    {{ option.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-      </div>
-      <div class="overflow-auto xl:overflow-visible relative">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                <span>
-                  Imię i nazwisko
-                </span>
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Następne urodziny
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Data zatrudnienia
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="user in users.data"
-              :key="user.id"
-              :class="[user.user.isActive ? '' : 'bg-gray-100']"
-            >
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <UserProfileLink
-                  :user="user.user"
+                      {{ option.name }}
+
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
+        <div class="overflow-auto xl:overflow-visible relative">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  <span>
+                    Imię i nazwisko
+                  </span>
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Następne urodziny
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
                 >
-                  <div class="flex">
-                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                      <img
-                        :src="user.user.avatar"
-                        class="w-10 h-10 rounded-full"
+                  Data zatrudnienia
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="user in users.data"
+                :key="user.id"
+                :class="[user.user.isActive ? '' : 'bg-gray-100']"
+              >
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <UserProfileLink
+                    :user="user.user"
+                  >
+                    <div class="flex">
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
+                        <img
+                          :src="user.user.avatar"
+                          class="size-10 rounded-full"
+                        >
+                      </span>
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900 break-all">
+                          {{ user.user.name }}
+                        </p>
+                        <p class="text-sm text-gray-500 break-all">
+                          {{ user.user.email }}
+                        </p>
+                      </div>
+                    </div>
+                  </UserProfileLink>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div class="flex flex-col gap-1">
+                    <div>
+                      {{ user.birthdayDisplayDate }}
+                    </div>
+                    <div class="flex items-center gap-1 font-medium">
+                      {{ user.birthdayRelativeDate }}
+                      <span
+                        v-if="user.isBirthdayToday"
+                        v-tooltip.right="'urodziny'"
+                        class="inline-block"
                       >
-                    </span>
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ user.user.name }}
-                      </p>
-                      <p class="text-sm text-gray-500 break-all">
-                        {{ user.user.email }}
-                      </p>
+                        <CakeIcon class="size-5 text-violet-400" />
+                      </span>
                     </div>
                   </div>
-                </UserProfileLink>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div class="flex flex-col gap-1">
-                  <div>
-                    {{ user.birthdayDisplayDate }}
-                  </div>
-                  <div class="flex items-center gap-1 font-medium">
-                    {{ user.birthdayRelativeDate }}
-                    <span
-                      v-if="user.isBirthdayToday"
-                      v-tooltip.right="'urodziny'"
-                      class="inline-block"
-                    >
-                      <CakeIcon class="w-5 h-5 text-violet-400" />
-                    </span>
-                  </div>
-                </div>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div class="flex flex-col gap-1">
-                  <div>
-                    {{ user.employmentDate }}
-                  </div>
-                  <div class="flex items-center gap-1 font-medium">
-                    <div>{{ user.seniorityDisplayDate ? user.seniorityDisplayDate : '-' }}</div>
-                    <span
-                      v-if="user.isWorkAnniversaryToday"
-                      v-tooltip.right="'okrągła rocznica pracy'"
-                      class="inline-block"
-                    >
-                      <CalendarDaysIcon class="w-5 h-5 text-pink-400" />
-                    </span>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div class="flex flex-col gap-1">
+                    <div>
+                      {{ user.employmentDate }}
+                    </div>
+                    <div class="flex items-center gap-1 font-medium">
+                      <div>{{ user.seniorityDisplayDate ? user.seniorityDisplayDate : '-' }}</div>
+                      <span
+                        v-if="user.isWorkAnniversaryToday"
+                        v-tooltip.right="'okrągła rocznica pracy'"
+                        class="inline-block"
+                      >
+                        <CalendarDaysIcon class="size-5 text-pink-400" />
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              v-if="! users.data.length"
-            >
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
+                </td>
+              </tr>
+              <tr
+                v-if="! users.data.length"
               >
-                <EmptyState>
-                  <template #title>
-                    Nie znaleziono użytkownika
-                  </template>
-                  <template #text>
-                    Spróbuj sformułować zapytanie inaczej
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Nie znaleziono użytkownika
+                    </template>
+                    <template #text>
+                      Spróbuj sformułować zapytanie inaczej
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Equipment/Create.vue b/resources/js/Pages/Equipment/Create.vue
index 6c7d4b9f..2965d628 100644
--- a/resources/js/Pages/Equipment/Create.vue
+++ b/resources/js/Pages/Equipment/Create.vue
@@ -1,9 +1,11 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
 import MultipleCombobox from '@/Shared/Forms/MultipleCombobox.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   users: Object,
@@ -30,240 +32,242 @@ function createEquipmentItem() {
 </script>
 
 <template>
-  <InertiaHead title="Dodawanie sprzętu" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Dodaj sprzęt
-      </h2>
-    </div>
-    <form
-      class="px-6 border-t border-gray-200"
-      @submit.prevent="createEquipmentItem"
-    >
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="idNumber"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          ID
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="idNumber"
-            v-model="form.idNumber"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.idNumber, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.idNumber }"
-          >
-          <p
-            v-if="form.errors.idNumber"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.idNumber }}
-          </p>
-        </div>
+  <AppLayout>
+    <template #title>Dodawanie sprzętu</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Dodaj sprzęt
+        </h2>
       </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="name"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Nazwa
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="name"
-            v-model="form.name"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+      <form
+        class="px-6 border-t border-gray-200"
+        @submit.prevent="createEquipmentItem"
+      >
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="idNumber"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-          <p
-            v-if="form.errors.name"
-            class="mt-2 text-sm text-red-600"
+            ID
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="idNumber"
+              v-model="form.idNumber"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.idNumber, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.idNumber }"
+            >
+            <p
+              v-if="form.errors.idNumber"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.idNumber }}
+            </p>
+          </div>
+        </div>
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="name"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.name }}
-          </p>
+            Nazwa
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="name"
+              v-model="form.name"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+            >
+            <p
+              v-if="form.errors.name"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.name }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <label
-          for="isMobile"
-          class="block text-sm font-medium text-gray-700"
+        <div
+          class="items-center py-4 sm:grid sm:grid-cols-3"
         >
-          Mobilny
-        </label>
-        <div class="mt-2 sm:col-span-2 sm:mt-0">
-          <Switch
-            id="isMobile"
-            v-model="form.isMobile"
-            :class="[form.isMobile ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+          <label
+            for="isMobile"
+            class="block text-sm font-medium text-gray-700"
           >
-            <span
-              :class="[form.isMobile ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-            />
-          </Switch>
+            Mobilny
+          </label>
+          <div class="mt-2 sm:col-span-2 sm:mt-0">
+            <Switch
+              id="isMobile"
+              v-model="form.isMobile"
+              :class="[form.isMobile ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+            >
+              <span
+                :class="[form.isMobile ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+              />
+            </Switch>
+          </div>
         </div>
-      </div>
-      <Listbox
-        v-model="form.assignee"
-        as="div"
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Przydzielona osoba
-        </ListboxLabel>
-        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.assignee, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignee }"
-          >
-            <span
-              v-if="form.assignee"
-              class="flex items-center"
+        <Listbox
+          v-model="form.assignee"
+          as="div"
+          class="items-center py-4 sm:grid sm:grid-cols-3"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Przydzielona osoba
+          </ListboxLabel>
+          <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.assignee, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignee }"
             >
-              <img
-                :src="form.assignee.avatar"
-                class="shrink-0 w-6 h-6 rounded-full"
+              <span
+                v-if="form.assignee"
+                class="flex items-center"
               >
-              <span class="block ml-3 truncate">{{ form.assignee.name }}</span>
-            </span>
-            <span 
-              v-else
-              class="block truncate"
-            >
-              Wybierz osobę
-            </span>
-            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-              <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-            </span>
-          </ListboxButton>
+                <img
+                  :src="form.assignee.avatar"
+                  class="shrink-0 size-6 rounded-full"
+                >
+                <span class="block ml-3 truncate">{{ form.assignee.name }}</span>
+              </span>
+              <span
+                v-else
+                class="block truncate"
+              >
+                Wybierz osobę
+              </span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <ChevronUpDownIcon class="size-5 text-gray-400" />
+              </span>
+            </ListboxButton>
 
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
             >
-              <ListboxOption
-                v-for="user in props.users.data"
-                :key="user.id"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="user"
+              <ListboxOptions
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
               >
-                <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                  <div class="flex items-center">
-                    <img
-                      :src="user.avatar"
-                      alt=""
-                      class="shrink-0 w-6 h-6 rounded-full"
+                <ListboxOption
+                  v-for="user in props.users.data"
+                  :key="user.id"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="user"
+                >
+                  <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                    <div class="flex items-center">
+                      <img
+                        :src="user.avatar"
+                        alt=""
+                        class="shrink-0 size-6 rounded-full"
+                      >
+                      <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                        {{ user.name }}
+                      </span>
+                    </div>
+
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
-                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
-                      {{ user.name }}
+                      <CheckIcon class="size-5" />
                     </span>
-                  </div>
-
-                  <span
-                    v-if="selected"
-                    :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                  >
-                    <CheckIcon class="w-5 h-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-              <ListboxOption
-                as="template"
-                :value="null"
-              >
-                <li class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 ">
-                  <span class="font-normal ml-9 block truncate">
-                    Brak
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.assignee"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.assignee }}
-          </p>
-        </div>
-      </Listbox>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="date_from"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Data przydzielenia
-          <span class="text-xs text-gray-500">
-            (opcjonalna)
-          </span>
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <FlatPickr
-            id="date_from"
-            v-model="form.assignedAt"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.assignedAt, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignedAt }"
-          />
-          <p
-            v-if="form.errors.assignedAt"
-            class="mt-2 text-sm text-red-600"
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  as="template"
+                  :value="null"
+                >
+                  <li class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 ">
+                    <span class="font-normal ml-9 block truncate">
+                      Brak
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.assignee"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.assignee }}
+            </p>
+          </div>
+        </Listbox>
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="date_from"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.assignedAt }}
-          </p>
+            Data przydzielenia
+            <span class="text-xs text-gray-500">
+              (opcjonalna)
+            </span>
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <FlatPickr
+              id="date_from"
+              v-model="form.assignedAt"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.assignedAt, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignedAt }"
+            />
+            <p
+              v-if="form.errors.assignedAt"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.assignedAt }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="date_from"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Etykiety
-          <span class="text-xs text-gray-500">
-            (opcjonalne)
-          </span>
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0 w-full max-w-lg">
-          <MultipleCombobox
-            v-model="form.labels"
-            :show-chips="true"
-            :items="labels"
-          />
-          <p
-            v-if="form.errors.labels"
-            class="mt-2 text-sm text-red-600"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="date_from"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.labels }}
-          </p>
+            Etykiety
+            <span class="text-xs text-gray-500">
+              (opcjonalne)
+            </span>
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0 w-full max-w-lg">
+            <MultipleCombobox
+              v-model="form.labels"
+              :show-chips="true"
+              :items="labels"
+            />
+            <p
+              v-if="form.errors.labels"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.labels }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/equipment-items"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Dodaj
-          </button>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/equipment-items"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Dodaj
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Equipment/Edit.vue b/resources/js/Pages/Equipment/Edit.vue
index dfcfd5d6..8f79c5a9 100644
--- a/resources/js/Pages/Equipment/Edit.vue
+++ b/resources/js/Pages/Equipment/Edit.vue
@@ -1,9 +1,11 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
 import MultipleCombobox from '@/Shared/Forms/MultipleCombobox.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   equipmentItem: Object,
@@ -31,240 +33,242 @@ function editEquipmentItem() {
 </script>
 
 <template>
-  <InertiaHead title="Edytowanie sprzętu" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Edytuj sprzęt
-      </h2>
-    </div>
-    <form
-      class="px-6 border-t border-gray-200"
-      @submit.prevent="editEquipmentItem"
-    >
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="idNumber"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          ID
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="idNumber"
-            v-model="form.idNumber"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.idNumber, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.idNumber }"
-          >
-          <p
-            v-if="form.errors.idNumber"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.idNumber }}
-          </p>
-        </div>
+  <AppLayout>
+    <template #title>Edytowanie sprzętu</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Edytuj sprzęt
+        </h2>
       </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="name"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Nazwa
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="name"
-            v-model="form.name"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+      <form
+        class="px-6 border-t border-gray-200"
+        @submit.prevent="editEquipmentItem"
+      >
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="idNumber"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-          <p
-            v-if="form.errors.name"
-            class="mt-2 text-sm text-red-600"
+            ID
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="idNumber"
+              v-model="form.idNumber"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.idNumber, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.idNumber }"
+            >
+            <p
+              v-if="form.errors.idNumber"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.idNumber }}
+            </p>
+          </div>
+        </div>
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="name"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.name }}
-          </p>
+            Nazwa
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="name"
+              v-model="form.name"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+            >
+            <p
+              v-if="form.errors.name"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.name }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <label
-          for="isMobile"
-          class="block text-sm font-medium text-gray-700"
+        <div
+          class="items-center py-4 sm:grid sm:grid-cols-3"
         >
-          Mobilny
-        </label>
-        <div class="mt-2 sm:col-span-2 sm:mt-0">
-          <Switch
-            id="isMobile"
-            v-model="form.isMobile"
-            :class="[form.isMobile ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+          <label
+            for="isMobile"
+            class="block text-sm font-medium text-gray-700"
           >
-            <span
-              :class="[form.isMobile ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-            />
-          </Switch>
+            Mobilny
+          </label>
+          <div class="mt-2 sm:col-span-2 sm:mt-0">
+            <Switch
+              id="isMobile"
+              v-model="form.isMobile"
+              :class="[form.isMobile ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+            >
+              <span
+                :class="[form.isMobile ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+              />
+            </Switch>
+          </div>
         </div>
-      </div>
-      <Listbox
-        v-model="form.assignee"
-        as="div"
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Przydzielona osoba
-        </ListboxLabel>
-        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.assignee, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignee }"
-          >
-            <span
-              v-if="form.assignee"
-              class="flex items-center"
+        <Listbox
+          v-model="form.assignee"
+          as="div"
+          class="items-center py-4 sm:grid sm:grid-cols-3"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Przydzielona osoba
+          </ListboxLabel>
+          <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.assignee, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignee }"
             >
-              <img
-                :src="form.assignee.avatar"
-                class="shrink-0 w-6 h-6 rounded-full"
+              <span
+                v-if="form.assignee"
+                class="flex items-center"
               >
-              <span class="block ml-3 truncate">{{ form.assignee.name }}</span>
-            </span>
-            <span 
-              v-else
-              class="block truncate"
-            >
-              Wybierz osobę
-            </span>
-            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-              <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-            </span>
-          </ListboxButton>
+                <img
+                  :src="form.assignee.avatar"
+                  class="shrink-0 size-6 rounded-full"
+                >
+                <span class="block ml-3 truncate">{{ form.assignee.name }}</span>
+              </span>
+              <span
+                v-else
+                class="block truncate"
+              >
+                Wybierz osobę
+              </span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <ChevronUpDownIcon class="size-5 text-gray-400" />
+              </span>
+            </ListboxButton>
 
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
             >
-              <ListboxOption
-                v-for="user in users.data"
-                :key="user.id"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="user"
+              <ListboxOptions
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
               >
-                <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                  <div class="flex items-center">
-                    <img
-                      :src="user.avatar"
-                      alt=""
-                      class="shrink-0 w-6 h-6 rounded-full"
+                <ListboxOption
+                  v-for="user in users.data"
+                  :key="user.id"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="user"
+                >
+                  <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                    <div class="flex items-center">
+                      <img
+                        :src="user.avatar"
+                        alt=""
+                        class="shrink-0 size-6 rounded-full"
+                      >
+                      <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                        {{ user.name }}
+                      </span>
+                    </div>
+
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
-                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
-                      {{ user.name }}
+                      <CheckIcon class="size-5" />
                     </span>
-                  </div>
-
-                  <span
-                    v-if="selected"
-                    :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                  >
-                    <CheckIcon class="w-5 h-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-              <ListboxOption
-                as="template"
-                :value="null"
-              >
-                <li class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 ">
-                  <span class="font-normal ml-9 block truncate">
-                    Brak
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.assignee"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.assignee }}
-          </p>
-        </div>
-      </Listbox>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="date_from"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Data przydzielenia
-          <span class="text-xs text-gray-500">
-            (opcjonalna)
-          </span>
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <FlatPickr
-            id="date_from"
-            v-model="form.assignedAt"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.assignedAt, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignedAt }"
-          />
-          <p
-            v-if="form.errors.assignedAt"
-            class="mt-2 text-sm text-red-600"
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  as="template"
+                  :value="null"
+                >
+                  <li class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 ">
+                    <span class="font-normal ml-9 block truncate">
+                      Brak
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.assignee"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.assignee }}
+            </p>
+          </div>
+        </Listbox>
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="date_from"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.assignedAt }}
-          </p>
+            Data przydzielenia
+            <span class="text-xs text-gray-500">
+              (opcjonalna)
+            </span>
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <FlatPickr
+              id="date_from"
+              v-model="form.assignedAt"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.assignedAt, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.assignedAt }"
+            />
+            <p
+              v-if="form.errors.assignedAt"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.assignedAt }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="date_from"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Etykiety
-          <span class="text-xs text-gray-500">
-            (opcjonalne)
-          </span>
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0 w-full max-w-lg">
-          <MultipleCombobox
-            v-model="form.labels"
-            :show-chips="true"
-            :items="labels"
-          />
-          <p
-            v-if="form.errors.labels"
-            class="mt-2 text-sm text-red-600"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="date_from"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.labels }}
-          </p>
+            Etykiety
+            <span class="text-xs text-gray-500">
+              (opcjonalne)
+            </span>
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0 w-full max-w-lg">
+            <MultipleCombobox
+              v-model="form.labels"
+              :show-chips="true"
+              :items="labels"
+            />
+            <p
+              v-if="form.errors.labels"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.labels }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/equipment-items"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Edytuj
-          </button>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/equipment-items"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Edytuj
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Equipment/Index.vue b/resources/js/Pages/Equipment/Index.vue
index da0dec27..e5b103c7 100644
--- a/resources/js/Pages/Equipment/Index.vue
+++ b/resources/js/Pages/Equipment/Index.vue
@@ -14,7 +14,7 @@ import Pagination from '@/Shared/Pagination.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import { computed, reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import MultipleCombobox from '@/Shared/Forms/MultipleCombobox.vue'
 import {
   CheckIcon,
@@ -26,9 +26,10 @@ import {
   XMarkIcon,
 } from '@heroicons/vue/24/solid'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
-  auth: Object,
   equipmentItems: Object,
   labels: Array,
   filters: Object,
@@ -44,7 +45,7 @@ const form = reactive({
 const selectedAssignee = computed(() => props.users.data.find(user => user.id === parseInt(form.assignee)) ?? null)
 
 watch(form, debounce(() => {
-  Inertia.get('/equipment-items', {
+  router.get('/equipment-items', {
     search: form.search,
     labels: form.labels,
     assignee: form.assignee,
@@ -56,363 +57,365 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Sprzęt" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Sprzęt
-        </h2>
-      </div>
-      <div>
-        <a
-          class="inline-flex mr-2 items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="equipment-items/download"
-        >
-          Pobierz plik Excel
-        </a>
-        <InertiaLink
-          class="inline-flex mr-2 items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="equipment-labels"
-        >
-          Zarządzaj etykietami
-        </InertiaLink>
-        <InertiaLink
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="equipment-items/create"
-        >
-          Dodaj sprzęt
-        </InertiaLink>
-      </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="items-end grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
-        <div class="relative">
-          <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-            <MagnifyingGlassIcon class="w-5 h-5 text-gray-400" />
-          </div>
-          <input
-            v-model.trim="form.search"
-            class="inline-block align-baseline py-2 pr-3 pl-10 w-full placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
-            placeholder="Szukaj"
-            type="search"
+  <AppLayout>
+    <template #title>Sprzęt</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Sprzęt
+          </h2>
+        </div>
+        <div>
+          <a
+            class="inline-flex mr-2 items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="equipment-items/download"
+          >
+            Pobierz plik Excel
+          </a>
+          <InertiaLink
+            class="inline-flex mr-2 items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="equipment-labels"
           >
+            Zarządzaj etykietami
+          </InertiaLink>
+          <InertiaLink
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="equipment-items/create"
+          >
+            Dodaj sprzęt
+          </InertiaLink>
         </div>
-        <MultipleCombobox
-          v-model="form.labels"
-          :items="labels"
-          placeholder="Etykiety"
-        />
-        <Listbox
-          v-model="form.assignee"
-          as="div"
-        >
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full  h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm placeholder:text-gray-500 focus:text-gray-800 focus:placeholder:text-gray-400 "
+      </div>
+      <div class="border-t border-gray-200">
+        <div class="items-end grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <MagnifyingGlassIcon class="size-5 text-gray-400" />
+            </div>
+            <input
+              v-model.trim="form.search"
+              class="inline-block align-baseline py-2 pr-3 pl-10 w-full placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
+              placeholder="Szukaj"
+              type="search"
             >
-              <span
-                v-if="form.assignee === null"
-                class="text-gray-500"
-              >
-                Przydzielona osoba
-              </span>
-              <span
-                v-else-if="form.assignee === 'unassigned'"
-              >
-                Nieprzydzielone
-              </span>
-              <span
-                v-else
-                class="flex items-center"
+          </div>
+          <MultipleCombobox
+            v-model="form.labels"
+            :items="labels"
+            placeholder="Etykiety"
+          />
+          <Listbox
+            v-model="form.assignee"
+            as="div"
+          >
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full  h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm placeholder:text-gray-500 focus:text-gray-800 focus:placeholder:text-gray-400 "
               >
-                <img
-                  :src="selectedAssignee.avatar"
-                  class="shrink-0 w-6 h-6 rounded-full"
+                <span
+                  v-if="form.assignee === null"
+                  class="text-gray-500"
                 >
-                <span class="block ml-3 truncate">{{ selectedAssignee.name }}</span>
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
-
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
-              >
-                <ListboxOption
-                  v-slot="{ active }"
-                  :value="null"
-                  as="template"
+                  Przydzielona osoba
+                </span>
+                <span
+                  v-else-if="form.assignee === 'unassigned'"
+                >
+                  Nieprzydzielone
+                </span>
+                <span
+                  v-else
+                  class="flex items-center"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                  <img
+                    :src="selectedAssignee.avatar"
+                    class="shrink-0 size-6 rounded-full"
                   >
-                    <div class="flex items-center">
-                      Wszystkie
-                    </div>
+                  <span class="block ml-3 truncate">{{ selectedAssignee.name }}</span>
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-                    <span
-                      v-if="form.assignee === null"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                    >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-                <ListboxOption
-                  v-slot="{ active }"
-                  :value="'unassigned'"
-                  as="template"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-slot="{ active }"
+                    :value="null"
+                    as="template"
                   >
-                    <div class="flex items-center">
-                      Nieprzydzielone
-                    </div>
-
-                    <span
-                      v-if="form.assignee === 'unassigned'"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-                <ListboxOption
-                  v-for="user in users.data"
-                  :key="user.id"
-                  v-slot="{ active }"
-                  :value="user.id"
-                  as="template"
-                >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
+                      <div class="flex items-center">
+                        Wszystkie
+                      </div>
+
+                      <span
+                        v-if="form.assignee === null"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                  <ListboxOption
+                    v-slot="{ active }"
+                    :value="'unassigned'"
+                    as="template"
                   >
-                    <div class="flex items-center">
-                      <img
-                        :src="user.avatar"
-                        class="shrink-0 w-6 h-6 rounded-full"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                    >
+                      <div class="flex items-center">
+                        Nieprzydzielone
+                      </div>
+
+                      <span
+                        v-if="form.assignee === 'unassigned'"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                       >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                  <ListboxOption
+                    v-for="user in users.data"
+                    :key="user.id"
+                    v-slot="{ active }"
+                    :value="user.id"
+                    as="template"
+                  >
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
+                    >
+                      <div class="flex items-center">
+                        <img
+                          :src="user.avatar"
+                          class="shrink-0 size-6 rounded-full"
+                        >
+                        <span
+                          :class="[form.assignee?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        >
+                          {{ user.name }}
+                        </span>
+                      </div>
                       <span
-                        :class="[form.assignee?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        v-if="form.assignee?.id === user.id"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                       >
-                        {{ user.name }}
+                        <CheckIcon class="size-5" />
                       </span>
-                    </div>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  ID
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Nazwa
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Etykiety
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Czy mobilny?
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Przydzielony dla
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Od kiedy
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="item in equipmentItems.data"
+                :key="item.id"
+                class="hover:bg-blumilk-25"
+                :class="[item.assignee ? item.assignee.isActive ? '' : 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
+              >
+                <td class="p-4 text-sm text-gray-500 font-semibold whitespace-nowrap">
+                  {{ item.idNumber }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ item.name }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 max-w-sm whitespace-nowrap overflow-hidden truncate">
+                  <template v-if="item.labels && item.labels.length !== 0">
                     <span
-                      v-if="form.assignee?.id === user.id"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      v-for="(label, index) in item.labels"
+                      :key="index"
+                      class="inline-flex items-center py-1.5 px-3 mr-1 my-1 rounded-lg text-sm font-medium bg-blumilk-500 text-white"
                     >
-                      <CheckIcon class="w-5 h-5" />
+                      {{ label }}
                     </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-      </div>
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                ID
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Nazwa
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Etykiety
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Czy mobilny?
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Przydzielony dla
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Od kiedy
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="item in equipmentItems.data"
-              :key="item.id"
-              class="hover:bg-blumilk-25"
-              :class="[item.assignee ? item.assignee.isActive ? '' : 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
-            >
-              <td class="p-4 text-sm text-gray-500 font-semibold whitespace-nowrap">
-                {{ item.idNumber }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ item.name }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 max-w-sm whitespace-nowrap overflow-hidden truncate">
-                <template v-if="item.labels && item.labels.length !== 0">
-                  <span
-                    v-for="(label, index) in item.labels"
-                    :key="index"
-                    class="inline-flex items-center py-1.5 px-3 mr-1 my-1 rounded-lg text-sm font-medium bg-blumilk-500 text-white"
+                  </template>
+                  <span v-else>-</span>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div v-if="item.isMobile">
+                    <CheckIcon class="size-6 text-green-500" />
+                  </div>
+                  <div v-else>
+                    <XMarkIcon class="size-6 text-red-500" />
+                  </div>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div
+                    v-if="item.assignee"
+                    class="flex"
                   >
-                    {{ label }}
-                  </span>
-                </template>
-                <span v-else>-</span>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div v-if="item.isMobile">
-                  <CheckIcon class="w-6 h-6 text-green-500" />
-                </div>
-                <div v-else>
-                  <XMarkIcon class="w-6 h-6 text-red-500" />
-                </div>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div
-                  v-if="item.assignee"
-                  class="flex"
-                >
-                  <UserProfileLink
-                    :user="item.assignee"
+                    <UserProfileLink
+                      :user="item.assignee"
+                      class="flex"
+                    >
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
+                        <img
+                          :src="item.assignee.avatar"
+                          class="size-10 rounded-full"
+                        >
+                      </span>
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900 break-all">
+                          {{ item.assignee.name }}
+                        </p>
+                        <p class="text-sm text-gray-500 break-all">
+                          {{ item.assignee.email }}
+                        </p>
+                      </div>
+                    </UserProfileLink>
+                  </div>
+                  <div
+                    v-else
                     class="flex"
                   >
-                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                      <img
-                        :src="item.assignee.avatar"
-                        class="w-10 h-10 rounded-full"
-                      >
-                    </span>
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ item.assignee.name }}
-                      </p>
-                      <p class="text-sm text-gray-500 break-all">
-                        {{ item.assignee.email }}
-                      </p>
-                    </div>
-                  </UserProfileLink>
-                </div>
-                <div
-                  v-else
-                  class="flex"
-                >
-                  <span class="">-</span>
-                </div>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ item.displayAssignedAt || '-' }}
-              </td>
-              <td
-                class="p-4 text-sm text-right text-gray-500 whitespace-nowrap"
-              >
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
+                    <span class="">-</span>
+                  </div>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ item.displayAssignedAt || '-' }}
+                </td>
+                <td
+                  class="p-4 text-sm text-right text-gray-500 whitespace-nowrap"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
 
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
-                  >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div class="py-1">
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
-                            :href="`/equipment-items/${item.id}/edit`"
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" />
-                            Edytuj
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/equipment-items/${item.id}`"
-                            as="button"
-                            method="delete"
-                            preserve-scroll
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                              :href="`/equipment-items/${item.id}/edit`"
+                            >
+                              <PencilIcon class="mr-2 size-5 text-blue-500" />
+                              Edytuj
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!equipmentItems.data.length">
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
-              >
-                <EmptyState class="text-gray-700">
-                  <template #head>
-                    <ComputerDesktopIcon class="mx-auto w-12 h-12" />
-                  </template>
-                  <template #title>
-                    Brak wpisów
-                  </template>
-                  <template #text>
-                    Nie dodano ani jednego wpisu
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/equipment-items/${item.id}`"
+                              as="button"
+                              method="delete"
+                              preserve-scroll
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!equipmentItems.data.length">
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  <EmptyState class="text-gray-700">
+                    <template #head>
+                      <ComputerDesktopIcon class="mx-auto size-12" />
+                    </template>
+                    <template #title>
+                      Brak wpisów
+                    </template>
+                    <template #text>
+                      Nie dodano ani jednego wpisu
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <Pagination :pagination="equipmentItems.meta" />
       </div>
-      <Pagination :pagination="equipmentItems.meta" />
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Equipment/IndexForEmployee.vue b/resources/js/Pages/Equipment/IndexForEmployee.vue
index bc581194..89199c92 100644
--- a/resources/js/Pages/Equipment/IndexForEmployee.vue
+++ b/resources/js/Pages/Equipment/IndexForEmployee.vue
@@ -4,7 +4,7 @@ import Pagination from '@/Shared/Pagination.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import MultipleCombobox from '@/Shared/Forms/MultipleCombobox.vue'
 import {
   CheckIcon,
@@ -13,7 +13,6 @@ import {
 } from '@heroicons/vue/24/solid'
 
 const props = defineProps({
-  auth: Object,
   equipmentItems: Object,
   labels: Array,
   filters: Object,
@@ -25,7 +24,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/equipment-items', {
+  router.get('/equipment-items', {
     search: form.search,
     labels: form.labels,
   }, {
@@ -36,128 +35,130 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Sprzęt" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Sprzęt
-        </h2>
-      </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="items-end grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
-        <div class="relative">
-          <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-            <MagnifyingGlassIcon class="w-5 h-5 text-gray-400" />
-          </div>
-          <input
-            v-model.trim="form.search"
-            type="search"
-            class="inline-block align-baseline py-2 pr-3 pl-10 w-full placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
-            placeholder="Szukaj"
-          >
+  <AppLayout>
+    <template #title>Sprzęt</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Sprzęt
+          </h2>
         </div>
-        <MultipleCombobox
-          v-model="form.labels"
-          placeholder="Etykiety"
-          :items="labels"
-        />
       </div>
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                ID
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Nazwa
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Etykiety
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Czy mobilny?
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Od kiedy
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="item in equipmentItems.data"
-              :key="item.id"
-              :class="[item.assignee ? item.assignee.isActive ? '' : 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
+      <div class="border-t border-gray-200">
+        <div class="items-end grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <MagnifyingGlassIcon class="size-5 text-gray-400" />
+            </div>
+            <input
+              v-model.trim="form.search"
+              type="search"
+              class="inline-block align-baseline py-2 pr-3 pl-10 w-full placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
+              placeholder="Szukaj"
             >
-              <td class="p-4 text-sm text-gray-500 font-semibold whitespace-nowrap">
-                {{ item.idNumber }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ item.name }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 max-w-sm whitespace-nowrap overflow-hidden truncate">
-                <template v-if="item.labels && item.labels.length !== 0">
-                  <span
-                    v-for="(label, index) in item.labels"
-                    :key="index"
-                    class="inline-flex items-center py-1.5 px-3 mr-1 my-1 rounded-lg text-sm font-medium bg-blumilk-500 text-white"
-                  >
-                    {{ label }}
-                  </span>
-                </template>
-                <span v-else>-</span>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div v-if="item.isMobile">
-                  <CheckIcon class="w-6 h-6 text-green-500" />
-                </div>
-                <div v-else>
-                  <XMarkIcon class="w-6 h-6 text-red-500" />
-                </div>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ item.displayAssignedAt || '-' }}
-              </td>
-            </tr>
-            <tr v-if="!equipmentItems.data.length">
-              <td
-                colspan="100%"
-                class="py-4 text-xl leading-5 text-center text-gray-700"
+          </div>
+          <MultipleCombobox
+            v-model="form.labels"
+            placeholder="Etykiety"
+            :items="labels"
+          />
+        </div>
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                >
+                  ID
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                >
+                  Nazwa
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                >
+                  Etykiety
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                >
+                  Czy mobilny?
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                >
+                  Od kiedy
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="item in equipmentItems.data"
+                :key="item.id"
+                :class="[item.assignee ? item.assignee.isActive ? '' : 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
               >
-                <EmptyState class="text-gray-700">
-                  <template #head>
-                    <ComputerDesktopIcon class="mx-auto w-12 h-12" />
+                <td class="p-4 text-sm text-gray-500 font-semibold whitespace-nowrap">
+                  {{ item.idNumber }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ item.name }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 max-w-sm whitespace-nowrap overflow-hidden truncate">
+                  <template v-if="item.labels && item.labels.length !== 0">
+                    <span
+                      v-for="(label, index) in item.labels"
+                      :key="index"
+                      class="inline-flex items-center py-1.5 px-3 mr-1 my-1 rounded-lg text-sm font-medium bg-blumilk-500 text-white"
+                    >
+                      {{ label }}
+                    </span>
                   </template>
-                  <template #title>
-                    Brak wpisów
-                  </template>
-                  <template #text>
-                    Nie dodano ani jednego wpisu
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  <span v-else>-</span>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div v-if="item.isMobile">
+                    <CheckIcon class="size-6 text-green-500" />
+                  </div>
+                  <div v-else>
+                    <XMarkIcon class="size-6 text-red-500" />
+                  </div>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ item.displayAssignedAt || '-' }}
+                </td>
+              </tr>
+              <tr v-if="!equipmentItems.data.length">
+                <td
+                  colspan="100%"
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                >
+                  <EmptyState class="text-gray-700">
+                    <template #head>
+                      <ComputerDesktopIcon class="mx-auto size-12" />
+                    </template>
+                    <template #title>
+                      Brak wpisów
+                    </template>
+                    <template #text>
+                      Nie dodano ani jednego wpisu
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <Pagination :pagination="equipmentItems.meta" />
       </div>
-      <Pagination :pagination="equipmentItems.meta" />
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/EquipmentLabels.vue b/resources/js/Pages/EquipmentLabels.vue
index 07d5f0fe..d940baa1 100644
--- a/resources/js/Pages/EquipmentLabels.vue
+++ b/resources/js/Pages/EquipmentLabels.vue
@@ -3,8 +3,10 @@ import { EllipsisVerticalIcon, TrashIcon } from '@heroicons/vue/24/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref } from 'vue'
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
   labels: Object,
@@ -27,205 +29,207 @@ function submitCreateLabel() {
 </script>
 
 <template>
-  <InertiaHead title="Etykiety" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Etykiety sprzętu
-        </h2>
-      </div>
-      <div>
-        <button
-          type="button"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          @click="creating = true"
-        >
-          Dodaj etykietę
-        </button>
+  <AppLayout>
+    <template #title>Etykiety</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Etykiety sprzętu
+          </h2>
+        </div>
+        <div>
+          <button
+            type="button"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            @click="creating = true"
+          >
+            Dodaj etykietę
+          </button>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Etykieta
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="label in labels.data"
-              :key="label.id"
-              class="hover:bg-blumilk-25"
-            >
-              <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
-                {{ label.name }}
-              </td>
-              <td class="px-4 py-2 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  Etykieta
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="label in labels.data"
+                :key="label.id"
+                class="hover:bg-blumilk-25"
+              >
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
+                  {{ label.name }}
+                </td>
+                <td class="px-4 py-2 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
 
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
-                  >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div class="py-1">
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            as="button"
-                            method="delete"
-                            preserve-scroll
-                            :href="`/equipment-labels/${label.id}`"
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!labels.data.length">
-              <td
-                colspan="100%"
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-              >
-                <EmptyState>
-                  <template #title>
-                    Brak etykiet
-                  </template>
-                  <template #text>
-                    Brak wpisów dotyczących etykiet sprzętu.
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                            <InertiaLink
+                              as="button"
+                              method="delete"
+                              preserve-scroll
+                              :href="`/equipment-labels/${label.id}`"
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!labels.data.length">
+                <td
+                  colspan="100%"
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Brak etykiet
+                    </template>
+                    <template #text>
+                      Brak wpisów dotyczących etykiet sprzętu.
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
-  <TransitionRoot
-    as="template"
-    :show="creating"
-  >
-    <Dialog
-      is="div"
-      class="overflow-y-auto fixed inset-0 z-10"
-      @close="creating = false"
+    <TransitionRoot
+      as="template"
+      :show="creating"
     >
-      <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </TransitionChild>
+      <Dialog
+        is="div"
+        class="overflow-y-auto fixed inset-0 z-10"
+        @close="creating = false"
+      >
+        <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+          </TransitionChild>
 
-        <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <form
-            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
-            @submit.prevent="submitCreateLabel"
+          <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div>
+            <form
+              class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
+              @submit.prevent="submitCreateLabel"
+            >
               <div>
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
-                >
-                  Dodaj etykietę
-                </DialogTitle>
-                <div class="mt-5">
-                  <label
-                    for="name"
-                    class="block text-sm font-medium text-gray-700 sm:mt-px"
+                <div>
+                  <DialogTitle
+                    as="h3"
+                    class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
                   >
-                    Nazwa
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      id="name"
-                      v-model="form.name"
-                      type="text"
-                      class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                    Dodaj etykietę
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <label
+                      for="name"
+                      class="block text-sm font-medium text-gray-700 sm:mt-px"
                     >
-                    <p
-                      v-if="form.errors.name"
-                      class="mt-2 text-sm text-red-600"
-                    >
-                      {{ form.errors.name }}
-                    </p>
+                      Nazwa
+                    </label>
+                    <div class="mt-2">
+                      <input
+                        id="name"
+                        v-model="form.name"
+                        type="text"
+                        class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                      >
+                      <p
+                        v-if="form.errors.name"
+                        class="mt-2 text-sm text-red-600"
+                      >
+                        {{ form.errors.name }}
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="mt-5 sm:mt-6">
-              <div class="flex justify-end space-x-3">
-                <button
-                  type="button"
-                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                  @click="creating = false"
-                >
-                  Anuluj
-                </button>
-                <button
-                  type="submit"
-                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
-                  :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                  :disabled="form.processing || !form.isDirty"
-                >
-                  Dodaj
-                </button>
+              <div class="mt-5 sm:mt-6">
+                <div class="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                    @click="creating = false"
+                  >
+                    Anuluj
+                  </button>
+                  <button
+                    type="submit"
+                    class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                    :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                    :disabled="form.processing || !form.isDirty"
+                  >
+                    Dodaj
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
+            </form>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Error.vue b/resources/js/Pages/Error.vue
index 9a6ab2da..52c39a35 100644
--- a/resources/js/Pages/Error.vue
+++ b/resources/js/Pages/Error.vue
@@ -1,84 +1,83 @@
-<script>
+<script setup>
+import { computed } from 'vue'
 import GuestLayout from '@/Shared/Layout/GuestLayout.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
 
-export default {
-  name: 'ErrorPage',
-  layout: GuestLayout,
-  props: {
-    status: Number,
-  },
-  computed: {
-    error() {
-      return {
-        401: {
-          code: '401',
-          title: 'Nieuprawniony dostęp',
-          message: 'Aby mieć dostęp do tej strony, musisz się zalogować.',
-        },
-        403: {
-          code: '403',
-          title: 'Zabroniony',
-          message: 'Dostęp do żądanej strony jest zabroniony.',
-        },
-        404: {
-          code: '404',
-          title: 'Nie znaleziono strony',
-          message: 'Przykro nam, ale strona, której szukasz, nie istnieje.',
-        },
-        419: {
-          code: '419',
-          title: 'Strona wygasła',
-          message: 'Ta strona wygasła. Zaloguj się ponownie.',
-        },
-        429: {
-          code: '429',
-          title: 'Przekroczono limit zapytań',
-          message: 'Wysłano ostatnio zbyt wiele zapytań. Poczekaj i spróbuj ponownie później.',
-        },
-        500: {
-          code: '500',
-          title: 'Błąd serwera',
-          message: 'Wystąpił wewnętrzny błąd serwera.',
-        },
-        503: {
-          code: '503',
-          title: 'Serwis niedostępny',
-          message: 'Serwer jest tymczasowo niedostępny. Spróbuj ponownie później.',
-        },
-      }[this.status]
-    },
+defineProps({
+  status: Number,
+
+})
 
+const errors = {
+  401: {
+    code: '401',
+    title: 'Nieuprawniony dostęp',
+    message: 'Aby mieć dostęp do tej strony, musisz się zalogować.',
+  },
+  403: {
+    code: '403',
+    title: 'Zabroniony',
+    message: 'Dostęp do żądanej strony jest zabroniony.',
+  },
+  404: {
+    code: '404',
+    title: 'Nie znaleziono strony',
+    message: 'Przykro nam, ale strona, której szukasz, nie istnieje.',
+  },
+  419: {
+    code: '419',
+    title: 'Strona wygasła',
+    message: 'Ta strona wygasła. Zaloguj się ponownie.',
+  },
+  429: {
+    code: '429',
+    title: 'Przekroczono limit zapytań',
+    message: 'Wysłano ostatnio zbyt wiele zapytań. Poczekaj i spróbuj ponownie później.',
+  },
+  500: {
+    code: '500',
+    title: 'Błąd serwera',
+    message: 'Wystąpił wewnętrzny błąd serwera.',
+  },
+  503: {
+    code: '503',
+    title: 'Serwis niedostępny',
+    message: 'Serwer jest tymczasowo niedostępny. Spróbuj ponownie później.',
   },
 }
+
+const error = computed(() => errors[this.status])
 </script>
 
 <template>
-  <InertiaHead :title="error.title" />
-  <div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
-    <div class="mx-auto max-w-max">
-      <main class="sm:flex">
-        <p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
-          {{ error.code }}
-        </p>
-        <div class="sm:ml-6">
-          <div class="sm:pl-6 sm:border-l sm:border-gray-200">
-            <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
-              {{ error.title }}
-            </h1>
-            <p class="mt-1 text-base text-gray-500">
-              {{ error.message }}
-            </p>
-          </div>
-          <div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
-            <InertiaLink
-              href="/"
-              class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            >
-              Wróć do strony głównej
-            </InertiaLink>
+  <GuestLayout>
+    <template #title>{{ error.title }}</template>
+    <div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
+      <div class="mx-auto max-w-max">
+        <main class="sm:flex">
+          <p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
+            {{ error.code }}
+          </p>
+          <div class="sm:ml-6">
+            <div class="sm:pl-6 sm:border-l sm:border-gray-200">
+              <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
+                {{ error.title }}
+              </h1>
+              <p class="mt-1 text-base text-gray-500">
+                {{ error.message }}
+              </p>
+            </div>
+            <div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
+              <InertiaLink
+                href="/"
+                class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              >
+                Wróć do strony głównej
+              </InertiaLink>
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </div>
     </div>
-  </div>
+  </GuestLayout>
 </template>
diff --git a/resources/js/Pages/Holidays/Create.vue b/resources/js/Pages/Holidays/Create.vue
index a5f043fa..fff3f2a2 100644
--- a/resources/js/Pages/Holidays/Create.vue
+++ b/resources/js/Pages/Holidays/Create.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const form = useForm({
   name: null,
@@ -13,80 +15,82 @@ function createHoliday() {
 </script>
 
 <template>
-  <InertiaHead title="Dodaj dzień wolny" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Dodaj dzień wolny
-      </h2>
-    </div>
-    <form
-      class="px-6 border-t border-gray-200"
-      @submit.prevent="createHoliday"
-    >
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="name"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Nazwa
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="name"
-            v-model="form.name"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
-          >
-          <p
-            v-if="form.errors.name"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.name }}
-          </p>
-        </div>
+  <AppLayout>
+    <template #title>Dodaj dzień wolny</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Dodaj dzień wolny
+        </h2>
       </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="date"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Data
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <FlatPickr
-            id="date"
-            v-model="form.date"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
-          />
-          <p
-            v-if="form.errors.date"
-            class="mt-2 text-sm text-red-600"
+      <form
+        class="px-6 border-t border-gray-200"
+        @submit.prevent="createHoliday"
+      >
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="name"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.date }}
-          </p>
+            Nazwa
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="name"
+              v-model="form.name"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+            >
+            <p
+              v-if="form.errors.name"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.name }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/holidays"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="date"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Dodaj
-          </button>
+            Data
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <FlatPickr
+              id="date"
+              v-model="form.date"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
+            />
+            <p
+              v-if="form.errors.date"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.date }}
+            </p>
+          </div>
         </div>
-      </div>
-    </form>
-  </div>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/holidays"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Dodaj
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Holidays/Edit.vue b/resources/js/Pages/Holidays/Edit.vue
index 368ef13e..382f7085 100644
--- a/resources/js/Pages/Holidays/Edit.vue
+++ b/resources/js/Pages/Holidays/Edit.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   holiday: Object,
@@ -17,80 +19,82 @@ function editHoliday() {
 </script>
 
 <template>
-  <InertiaHead title="Edytuj dzień wolny" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Edytuj dzień wolny
-      </h2>
-    </div>
-    <form
-      class="px-6 border-t border-gray-200"
-      @submit.prevent="editHoliday"
-    >
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="name"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Nazwa
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="name"
-            v-model="form.name"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
-          >
-          <p
-            v-if="form.errors.name"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.name }}
-          </p>
-        </div>
+  <AppLayout>
+    <template #title>Edytuj dzień wolny</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Edytuj dzień wolny
+        </h2>
       </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="date"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Data
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <FlatPickr
-            id="date"
-            v-model="form.date"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
-          />
-          <p
-            v-if="form.errors.date"
-            class="mt-2 text-sm text-red-600"
+      <form
+        class="px-6 border-t border-gray-200"
+        @submit.prevent="editHoliday"
+      >
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="name"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.date }}
-          </p>
+            Nazwa
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="name"
+              v-model="form.name"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+            >
+            <p
+              v-if="form.errors.name"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.name }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/holidays"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="date"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Zapisz
-          </button>
+            Data
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <FlatPickr
+              id="date"
+              v-model="form.date"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
+            />
+            <p
+              v-if="form.errors.date"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.date }}
+            </p>
+          </div>
         </div>
-      </div>
-    </form>
-  </div>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/holidays"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Zapisz
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Holidays/Index.vue b/resources/js/Pages/Holidays/Index.vue
index 44c59845..01444617 100644
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/resources/js/Pages/Holidays/Index.vue
@@ -5,175 +5,180 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
 import { ref, watch } from 'vue'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { DateTime } from 'luxon'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   holidays: Object,
-  auth: Object,
   year: Number,
 })
 
 const selectedYear = ref(props.year)
 const currentDate = DateTime.now()
+const { auth } = useGlobalProps()
 
 watch(selectedYear, (value, oldValue) => {
   if (value === oldValue)
     return
 
-  Inertia.visit('/holidays', {
+  router.visit('/holidays', {
     data: { year: value },
   })
 })
 </script>
 
 <template>
-  <InertiaHead title="Dni wolne od pracy" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Dni wolne od pracy w roku
-          <YearPicker
-            v-model="selectedYear"
-            :from="currentDate.year + 1"
-            :to="currentDate.year - 20"
-            class="inline-block ml-2"
-          />
-        </h2>
+  <AppLayout>
+    <template #title>Dni wolne od pracy</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Dni wolne od pracy w roku
+            <YearPicker
+              v-model="selectedYear"
+              :from="currentDate.year + 1"
+              :to="currentDate.year - 20"
+              class="inline-block ml-2"
+            />
+          </h2>
+        </div>
+        <div v-if="auth.can.manageHolidays">
+          <InertiaLink
+            href="holidays/create"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+          >
+            Dodaj dzień
+          </InertiaLink>
+        </div>
       </div>
-      <div v-if="auth.can.manageHolidays">
-        <InertiaLink
-          href="holidays/create"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-        >
-          Dodaj dzień
-        </InertiaLink>
-      </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Nazwa
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Data
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Dzień tygodnia
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="holiday in holidays.data"
-              :key="holiday.id"
-              :class="[holiday.isPast ? 'bg-gray-100' : 'hover:bg-blumilk-25']"
-            >
-              <td class="p-4 text-sm font-semibold text-gray-700 capitalize whitespace-nowrap">
-                {{ holiday.name }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ holiday.displayDate }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap flex items-center gap-1">
-                {{ holiday.dayOfWeek }}
-                <span
-                  v-if="holiday.isSaturday"
-                  v-tooltip.right="'sobota do odebrania'"
-                  class="inline-block"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
-                  <FlagIcon class="w-5 h-5 text-red-500" />
-                </span>
-              </td>
-              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  v-if="auth.can.manageHolidays"
-                  as="div"
-                  class="inline-block relative text-left"
+                  Nazwa
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
-                  <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
-                    <EllipsisVerticalIcon
-                      class="w-5 h-5"
-                      aria-hidden="true"
-                    />
-                  </MenuButton>
-
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
+                  Data
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                >
+                  Dzień tygodnia
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="holiday in holidays.data"
+                :key="holiday.id"
+                :class="[holiday.isPast ? 'bg-gray-100' : 'hover:bg-blumilk-25']"
+              >
+                <td class="p-4 text-sm font-semibold text-gray-700 capitalize whitespace-nowrap">
+                  {{ holiday.name }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ holiday.displayDate }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap flex items-center gap-1">
+                  {{ holiday.dayOfWeek }}
+                  <span
+                    v-if="holiday.isSaturday"
+                    v-tooltip.right="'sobota do odebrania'"
+                    class="inline-block"
+                  >
+                    <FlagIcon class="size-5 text-red-500" />
+                  </span>
+                </td>
+                <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    v-if="auth.can.manageHolidays"
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
-                      <div class="py-1">
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :href="`/holidays/${holiday.id}/edit`"
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                    <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
+                      <EllipsisVerticalIcon
+                        class="size-5"
+                        aria-hidden="true"
+                      />
+                    </MenuButton>
+
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
+                    >
+                      <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right">
+                        <div class="py-1">
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            as="button"
-                            method="delete"
-                            :preserve-scroll="true"
-                            :href="`/holidays/${holiday.id}`"
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                            <InertiaLink
+                              :href="`/holidays/${holiday.id}/edit`"
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                            >
+                              <PencilIcon class="mr-2 size-5 text-blue-500" /> Edytuj
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!holidays.data.length">
-              <td
-                colspan="100%"
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-              >
-                <EmptyState>
-                  <template #title>
-                    Brak dni wolnych od pracy
-                  </template>
-                  <template #text>
-                    Brak wpisów dotyczących dni wolnych
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                            <InertiaLink
+                              as="button"
+                              method="delete"
+                              :preserve-scroll="true"
+                              :href="`/holidays/${holiday.id}`"
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" /> Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!holidays.data.length">
+                <td
+                  colspan="100%"
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Brak dni wolnych od pracy
+                    </template>
+                    <template #text>
+                      Brak wpisów dotyczących dni wolnych
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Keys.vue b/resources/js/Pages/Keys.vue
index 4a866b3b..ec6a87ae 100644
--- a/resources/js/Pages/Keys.vue
+++ b/resources/js/Pages/Keys.vue
@@ -19,16 +19,20 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { computed, ref } from 'vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   keys: Object,
   users: Object,
-  auth: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const keyToGive = ref(null)
 const giving = ref(false)
 
@@ -58,352 +62,354 @@ function submitGiveKey() {
 </script>
 
 <template>
-  <InertiaHead title="Klucze" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Klucze
-        </h2>
-      </div>
-      <div v-if="auth.can.manageKeys">
-        <InertiaLink
-          as="button"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="/keys"
-          method="post"
-        >
-          Dodaj klucz
-        </InertiaLink>
+  <AppLayout>
+    <template #title>Klucze</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Klucze
+          </h2>
+        </div>
+        <div v-if="auth.can.manageKeys">
+          <InertiaLink
+            as="button"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="/keys"
+            method="post"
+          >
+            Dodaj klucz
+          </InertiaLink>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Klucz
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Kto ma
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Od kiedy
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="key in keys.data"
-              :key="key.id"
-              class="hover:bg-blumilk-25"
-            >
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                Klucz nr {{ key.id }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div
-                  v-if="key.user"
-                  class="flex"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Klucz
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
                 >
-                  <UserProfileLink
-                    :user="key.user"
+                  Kto ma
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Od kiedy
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="key in keys.data"
+                :key="key.id"
+                class="hover:bg-blumilk-25"
+              >
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  Klucz nr {{ key.id }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div
+                    v-if="key.user"
                     class="flex"
                   >
-                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                      <img
-                        :src="key.user.avatar"
-                        class="w-10 h-10 rounded-full"
-                      >
-                    </span>
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ key.user.name }}
-                      </p>
-                      <p class="text-sm text-gray-500 break-all">
-                        {{ key.user.email }}
-                      </p>
+                    <UserProfileLink
+                      :user="key.user"
+                      class="flex"
+                    >
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
+                        <img
+                          :src="key.user.avatar"
+                          class="size-10 rounded-full"
+                        >
+                      </span>
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900 break-all">
+                          {{ key.user.name }}
+                        </p>
+                        <p class="text-sm text-gray-500 break-all">
+                          {{ key.user.email }}
+                        </p>
+                      </div>
+                    </UserProfileLink>
+                  </div>
+                  <div
+                    v-else
+                    class="flex"
+                  >
+                    <div class="text-sm font-medium text-gray-900 flex items-center break-all">
+                      <HomeIcon class="size-8 text-blumilk-600" />
+                      <span class="ml-3 ">W biurze</span>
                     </div>
-                  </UserProfileLink>
-                </div>
-                <div
-                  v-else
-                  class="flex"
-                >
-                  <div class="text-sm font-medium text-gray-900 flex items-center break-all">
-                    <HomeIcon class="h-8 w-8 text-blumilk-600" />
-                    <span class="ml-3 ">W biurze</span>
                   </div>
-                </div>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ key.updatedAt }}
-              </td>
-              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
-                >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ key.updatedAt }}
+                </td>
+                <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
 
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
-                  >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div class="py-1">
-                        <MenuItem
-                          v-if="key.can.take"
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/keys/${key.id}/take`"
-                            as="button"
-                            method="post"
-                            preserve-scroll
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem
+                            v-if="key.can.take"
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <DominoMaskIcon class="mr-2 w-5 h-5 text-purple-500" />
-                            Zabierz klucze
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-if="key.can.give"
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <button
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            @click="giveKey(key)"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/keys/${key.id}/take`"
+                              as="button"
+                              method="post"
+                              preserve-scroll
+                            >
+                              <DominoMaskIcon class="mr-2 size-5 text-purple-500" />
+                              Zabierz klucze
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-if="key.can.give"
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <HandshakeIcon class="mr-2 w-5 h-5 text-emerald-500" />
-                            Przekaż klucze
-                          </button>
-                        </MenuItem>
-                        <MenuItem
-                          v-if="key.can.give && key.user !== null"
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/keys/${key.id}/leave-in-the-office`"
-                            as="button"
-                            method="post"
-                            preserve-scroll
+                            <button
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              @click="giveKey(key)"
+                            >
+                              <HandshakeIcon class="mr-2 size-5 text-emerald-500" />
+                              Przekaż klucze
+                            </button>
+                          </MenuItem>
+                          <MenuItem
+                            v-if="key.can.give && key.user !== null"
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <HomeIcon class="mr-2 w-5 h-5 text-indigo-500" />
-                            Zostaw klucze w biurze
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-if="auth.can.manageKeys"
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/keys/${key.id}`"
-                            as="button"
-                            method="delete"
-                            preserve-scroll
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/keys/${key.id}/leave-in-the-office`"
+                              as="button"
+                              method="post"
+                              preserve-scroll
+                            >
+                              <HomeIcon class="mr-2 size-5 text-indigo-500" />
+                              Zostaw klucze w biurze
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-if="auth.can.manageKeys"
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!keys.data.length">
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
-              >
-                <EmptyState class="text-gray-700">
-                  <template #head>
-                    <KeyIcon class="mx-auto w-12 h-12" />
-                  </template>
-                  <template #title>
-                    Brak kluczy
-                  </template>
-                  <template #text>
-                    Nie dodano ani jednego klucza
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/keys/${key.id}`"
+                              as="button"
+                              method="delete"
+                              preserve-scroll
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!keys.data.length">
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  <EmptyState class="text-gray-700">
+                    <template #head>
+                      <KeyIcon class="mx-auto size-12" />
+                    </template>
+                    <template #title>
+                      Brak kluczy
+                    </template>
+                    <template #text>
+                      Nie dodano ani jednego klucza
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
-  <TransitionRoot
-    :show="giving"
-    as="template"
-  >
-    <Dialog
-      is="div"
-      class="overflow-y-auto fixed inset-0 z-10"
-      @close="giving = false"
+    <TransitionRoot
+      :show="giving"
+      as="template"
     >
-      <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </TransitionChild>
+      <Dialog
+        is="div"
+        class="overflow-y-auto fixed inset-0 z-10"
+        @close="giving = false"
+      >
+        <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+          </TransitionChild>
 
-        <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <form
-            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
-            @submit.prevent="submitGiveKey"
+          <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div>
+            <form
+              class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
+              @submit.prevent="submitGiveKey"
+            >
               <div>
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
-                >
-                  Przekaż klucz nr {{ keyToGive?.id }}
-                </DialogTitle>
-                <div class="mt-5">
-                  <Listbox
-                    v-model="form.user"
-                    as="div"
+                <div>
+                  <DialogTitle
+                    as="h3"
+                    class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
                   >
-                    <ListboxLabel class="block text-sm font-medium text-left text-gray-700">
-                      Użytkownik
-                    </ListboxLabel>
-                    <div class="relative mt-2">
-                      <ListboxButton
-                        :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
-                        class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                      >
-                        <span class="flex items-center">
-                          <img
-                            :src="form.user.avatar"
-                            class="shrink-0 w-6 h-6 rounded-full"
-                          >
-                          <span class="block ml-3 truncate">{{ form.user.name }}</span>
-                        </span>
-                        <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                          <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                        </span>
-                      </ListboxButton>
+                    Przekaż klucz nr {{ keyToGive?.id }}
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <Listbox
+                      v-model="form.user"
+                      as="div"
+                    >
+                      <ListboxLabel class="block text-sm font-medium text-left text-gray-700">
+                        Użytkownik
+                      </ListboxLabel>
+                      <div class="relative mt-2">
+                        <ListboxButton
+                          :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
+                          class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                        >
+                          <span class="flex items-center">
+                            <img
+                              :src="form.user.avatar"
+                              class="shrink-0 size-6 rounded-full"
+                            >
+                            <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                          </span>
+                          <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                            <ChevronUpDownIcon class="size-5 text-gray-400" />
+                          </span>
+                        </ListboxButton>
 
-                      <transition
-                        leave-active-class="transition ease-in duration-100"
-                        leave-from-class="opacity-100"
-                        leave-to-class="opacity-0"
-                      >
-                        <ListboxOptions
-                          class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                        <transition
+                          leave-active-class="transition ease-in duration-100"
+                          leave-from-class="opacity-100"
+                          leave-to-class="opacity-0"
                         >
-                          <ListboxOption
-                            v-for="user in filteredUsers"
-                            :key="user.id"
-                            v-slot="{ active, selected }"
-                            :value="user"
-                            as="template"
+                          <ListboxOptions
+                            class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                           >
-                            <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                              <div class="flex items-center">
-                                <img
-                                  :src="user.avatar"
-                                  alt=""
-                                  class="shrink-0 w-6 h-6 rounded-full"
+                            <ListboxOption
+                              v-for="user in filteredUsers"
+                              :key="user.id"
+                              v-slot="{ active, selected }"
+                              :value="user"
+                              as="template"
+                            >
+                              <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                                <div class="flex items-center">
+                                  <img
+                                    :src="user.avatar"
+                                    alt=""
+                                    class="shrink-0 size-6 rounded-full"
+                                  >
+                                  <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                                    {{ user.name }}
+                                  </span>
+                                </div>
+
+                                <span
+                                  v-if="selected"
+                                  :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                                 >
-                                <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
-                                  {{ user.name }}
+                                  <CheckIcon class="size-5" />
                                 </span>
-                              </div>
-
-                              <span
-                                v-if="selected"
-                                :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                              >
-                                <CheckIcon class="w-5 h-5" />
-                              </span>
-                            </li>
-                          </ListboxOption>
-                        </ListboxOptions>
-                      </transition>
-                      <p
-                        v-if="form.errors.type"
-                        class="mt-2 text-sm text-red-600"
-                      >
-                        {{ form.errors.type }}
-                      </p>
-                    </div>
-                  </Listbox>
+                              </li>
+                            </ListboxOption>
+                          </ListboxOptions>
+                        </transition>
+                        <p
+                          v-if="form.errors.type"
+                          class="mt-2 text-sm text-red-600"
+                        >
+                          {{ form.errors.type }}
+                        </p>
+                      </div>
+                    </Listbox>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="mt-5 sm:mt-6">
-              <div class="flex justify-end space-x-3">
-                <button
-                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                  type="button"
-                  @click="giving = false"
-                >
-                  Anuluj
-                </button>
-                <button
-                  :disabled="form.processing"
-                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
-                  type="submit"
-                >
-                  Przekaż
-                </button>
+              <div class="mt-5 sm:mt-6">
+                <div class="flex justify-end space-x-3">
+                  <button
+                    class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                    type="button"
+                    @click="giving = false"
+                  >
+                    Anuluj
+                  </button>
+                  <button
+                    :disabled="form.processing"
+                    class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                    type="submit"
+                  >
+                    Przekaż
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
+            </form>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/LocalLogin.vue b/resources/js/Pages/LocalLogin.vue
index 987faa95..7ffeece3 100644
--- a/resources/js/Pages/LocalLogin.vue
+++ b/resources/js/Pages/LocalLogin.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
+import GuestLayout from '@/Shared/Layout/GuestLayout.vue'
 
 const form = useForm({
   email: null,
@@ -11,89 +12,85 @@ function localLogin() {
 }
 </script>
 
-<script>
-import GuestLayout from '@/Shared/Layout/GuestLayout.vue'
-
-export default { name: 'LoginPage', layout: GuestLayout }
-</script>
-
 <template>
-  <InertiaHead title="Zaloguj się" />
-  <div
-    class="flex flex-col items-center py-8 px-4 space-y-8 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
-    dusk="login-link"
-  >
-    <img
-      class="mx-auto w-auto h-20"
-      src="/images/logo.svg"
+  <GuestLayout>
+    <template #title>Zaloguj się</template>
+    <div
+      class="flex flex-col items-center py-8 px-4 space-y-8 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
+      dusk="login-link"
     >
-    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-      <div class="p-4 sm:px-6">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Zaloguj się
-        </h2>
-      </div>
-      <form
-        class="px-6 border-t border-gray-200"
-        @submit.prevent="localLogin"
+      <img
+        class="mx-auto w-auto h-20"
+        src="/images/logo.svg"
       >
-        <div class="items-center py-4 sm:grid sm:grid-cols-3/">
-          <label
-            for="email"
-            class="block text-sm font-medium text-gray-700 sm:mt-px"
-          >
-            Adres e-mail
-          </label>
-          <div class="mt-2">
-            <input
-              id="email"
-              v-model="form.email"
-              type="email"
-              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm text-black"
-              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
-            >
-            <p
-              v-if="form.errors.email"
-              class="mt-2 text-sm text-red-600"
+      <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Zaloguj się
+          </h2>
+        </div>
+        <form
+          class="px-6 border-t border-gray-200"
+          @submit.prevent="localLogin"
+        >
+          <div class="items-center py-4 sm:grid sm:grid-cols-3/">
+            <label
+              for="email"
+              class="block text-sm font-medium text-gray-700 sm:mt-px"
             >
-              {{ form.errors.email }}
-            </p>
+              Adres e-mail
+            </label>
+            <div class="mt-2">
+              <input
+                id="email"
+                v-model="form.email"
+                type="email"
+                class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm text-black"
+                :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
+              >
+              <p
+                v-if="form.errors.email"
+                class="mt-2 text-sm text-red-600"
+              >
+                {{ form.errors.email }}
+              </p>
+            </div>
           </div>
-        </div>
-        <div class="items-center sm:grid sm:grid-cols-3/">
-          <label
-            for="email"
-            class="block text-sm font-medium text-gray-700 sm:mt-px"
-          >
-            Hasło
-          </label>
-          <div class="mt-2">
-            <input
-              id="password"
-              v-model="form.password"
-              type="password"
-              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm text-black"
-              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.password, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.password }"
+          <div class="items-center sm:grid sm:grid-cols-3/">
+            <label
+              for="email"
+              class="block text-sm font-medium text-gray-700 sm:mt-px"
             >
-            <p
-              v-if="form.errors.password"
-              class="mt-2 text-sm text-red-600"
+              Hasło
+            </label>
+            <div class="mt-2">
+              <input
+                id="password"
+                v-model="form.password"
+                type="password"
+                class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm text-black"
+                :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.password, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.password }"
+              >
+              <p
+                v-if="form.errors.password"
+                class="mt-2 text-sm text-red-600"
+              >
+                {{ form.errors.password }}
+              </p>
+            </div>
+          </div>
+          <div class="py-4 mt-2">
+            <button
+              type="submit"
+              class="w-full inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
             >
-              {{ form.errors.password }}
-            </p>
+              Zaloguj
+            </button>
           </div>
-        </div>
-        <div class="py-4 mt-2">
-          <button
-            type="submit"
-            class="w-full inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Zaloguj
-          </button>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
-  </div>
+  </GuestLayout>
 </template>
diff --git a/resources/js/Pages/Login.vue b/resources/js/Pages/Login.vue
index 3393b08a..6901ca0a 100644
--- a/resources/js/Pages/Login.vue
+++ b/resources/js/Pages/Login.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid'
 import { ref } from 'vue'
+import GuestLayout from '@/Shared/Layout/GuestLayout.vue'
 
 defineProps({
   errors: Object,
@@ -10,77 +11,73 @@ defineProps({
 const showError = ref(true)
 </script>
 
-<script>
-import GuestLayout from '@/Shared/Layout/GuestLayout.vue'
-
-export default { name: 'LoginPage', layout: GuestLayout }
-</script>
-
 <template>
-  <InertiaHead title="Zaloguj się" />
-  <transition
-    enter-active-class="transform ease-out duration-300 transition"
-    enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-    leave-active-class="transition ease-in duration-100"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-if="errors.oauth && showError"
-      class="overflow-hidden absolute inset-x-2 top-2 bg-red-500 rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto sm:mx-auto sm:w-full sm:max-w-md"
+  <GuestLayout>
+    <template #title>Zaloguj się</template>
+    <transition
+      enter-active-class="transform ease-out duration-300 transition"
+      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+      leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
     >
-      <div class="p-4">
-        <div class="flex items-center">
-          <div class="flex flex-1 justify-between w-0">
-            <ExclamationTriangleIcon class="mr-1 w-5 h-5 text-white" />
-            <p class="flex-1 w-0 text-sm font-medium text-white">
-              {{ errors.oauth }}
-            </p>
-          </div>
-          <div class="flex shrink-0 ml-4">
-            <button
-              class="inline-flex text-red-100 hover:text-red-400 bg-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
-              @click="showError = false"
-            >
-              <span class="sr-only">Close</span>
-              <XMarkIcon class="w-5 h-5" />
-            </button>
+      <div
+        v-if="errors.oauth && showError"
+        class="overflow-hidden absolute inset-x-2 top-2 bg-red-500 rounded-lg ring-1 ring-black/5 shadow-lg pointer-events-auto sm:mx-auto sm:w-full sm:max-w-md"
+      >
+        <div class="p-4">
+          <div class="flex items-center">
+            <div class="flex flex-1 justify-between w-0">
+              <ExclamationTriangleIcon class="mr-1 size-5 text-white" />
+              <p class="flex-1 w-0 text-sm font-medium text-white">
+                {{ errors.oauth }}
+              </p>
+            </div>
+            <div class="flex shrink-0 ml-4">
+              <button
+                class="inline-flex text-red-100 hover:text-red-400 bg-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
+                @click="showError = false"
+              >
+                <span class="sr-only">Close</span>
+                <XMarkIcon class="size-5" />
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </transition>
-  <div
-    class="flex flex-col items-center py-8 px-4 space-y-8 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
-    dusk="login-link"
-  >
-    <img
-      class="mx-auto w-auto h-50"
-      src="images/logo.svg"
-    >
-    <a
-      href="/login/google/start"
-      class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
+    </transition>
+    <div
+      class="flex flex-col items-center py-8 px-4 space-y-8 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
+      dusk="login-link"
     >
-      Zaloguj się za pomocą Google
-      <svg
-        class="ml-2 w-5 h-5"
-        fill="currentColor"
-        viewBox="0 0 24 24"
+      <img
+        class="mx-auto w-auto h-50"
+        src="images/logo.svg"
+      >
+      <a
+        href="/login/google/start"
+        class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
       >
-        <path
-          d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z"
+        Zaloguj się za pomocą Google
+        <svg
+          class="ml-2 size-5"
           fill="currentColor"
-        />
-      </svg>
-    </a>
-    <a
-      v-if="showLocalLoginButton"
-      href="/login/local"
-      class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
-    >
-      Zaloguj się za pomocą hasła
-    </a>
-  </div>
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </a>
+      <a
+        v-if="showLocalLoginButton"
+        href="/login/local"
+        class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
+      >
+        Zaloguj się za pomocą hasła
+      </a>
+    </div>
+  </GuestLayout>
 </template>
diff --git a/resources/js/Pages/MonthlyUsage.vue b/resources/js/Pages/MonthlyUsage.vue
index b4b68c12..c11cae8b 100644
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/resources/js/Pages/MonthlyUsage.vue
@@ -4,8 +4,9 @@ import VacationBar from '@/Shared/VacationBar.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
 import { ref, watch } from 'vue'
 import { DateTime } from 'luxon'
-import { Inertia } from '@inertiajs/inertia'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
+import { router } from '@inertiajs/vue3'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   year: Number,
@@ -27,106 +28,108 @@ watch(selectedYear, (value, oldValue) => {
   if (value === oldValue)
     return
 
-  Inertia.visit('/vacation/monthly-usage', {
+  router.visit('/vacation/monthly-usage', {
     data: { year: value },
   })
 })
 </script>
 
 <template>
-  <InertiaHead title="Wykorzystanie miesięczne urlopu" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div class="flex items-center">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Wykorzystanie miesięczne urlopu w roku
-          <YearPicker
-            v-model="selectedYear"
-            :from="currentDate.year + 1"
-            :to="currentDate.year - 20"
-            class="inline-block ml-2"
-          />
-        </h2>
+  <AppLayout>
+    <template #title>Wykorzystanie miesięczne urlopu</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div class="flex items-center">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Wykorzystanie miesięczne urlopu w roku
+            <YearPicker
+              v-model="selectedYear"
+              :from="currentDate.year + 1"
+              :to="currentDate.year - 20"
+              class="inline-block ml-2"
+            />
+          </h2>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
-                Pracownik
-              </th>
-              <th
-                v-for="month in months"
-                :key="month"
-                :class="{'bg-blumilk-50': isCurrentMonth(month)}"
-                class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase"
-                style="min-width: 46px;"
-              >
-                <span :class="{'text-blumilk-600': isCurrentMonth(month)}">
-                  {{ month.shortcut }}
-                </span>
-              </th>
-              <th class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase">
-                Wykorzystanie urlopu
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="item in monthlyUsage"
-              :key="item.user.id"
-              :class="[item.user.isActive ? '' : 'bg-gray-100', 'hover:bg-blumilk-25']"
-            >
-              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
-                <UserProfileLink
-                  :user="item.user"
+      <div class="border-t border-gray-200">
+        <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+                  Pracownik
+                </th>
+                <th
+                  v-for="month in months"
+                  :key="month"
+                  :class="{'bg-blumilk-50': isCurrentMonth(month)}"
+                  class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase"
+                  style="min-width: 46px;"
                 >
-                  <div class="flex justify-start items-center">
-                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                      <img
-                        :src="item.user.avatar"
-                        class="w-10 h-10 rounded-full"
-                      >
-                    </span>
-                    <div class="ml-3">
-                      <div
-                        class="text-sm font-medium text-gray-900 whitespace-nowrap"
-                      >
-                        {{ item.user.name }}
+                  <span :class="{'text-blumilk-600': isCurrentMonth(month)}">
+                    {{ month.shortcut }}
+                  </span>
+                </th>
+                <th class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase">
+                  Wykorzystanie urlopu
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="item in monthlyUsage"
+                :key="item.user.id"
+                :class="[item.user.isActive ? '' : 'bg-gray-100', 'hover:bg-blumilk-25']"
+              >
+                <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+                  <UserProfileLink
+                    :user="item.user"
+                  >
+                    <div class="flex justify-start items-center">
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
+                        <img
+                          :src="item.user.avatar"
+                          class="size-10 rounded-full"
+                        >
+                      </span>
+                      <div class="ml-3">
+                        <div
+                          class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                        >
+                          {{ item.user.name }}
+                        </div>
                       </div>
                     </div>
+                  </UserProfileLink>
+                </th>
+                <td
+                  v-for="month in months"
+                  :key="month.value"
+                  :class="{'bg-blumilk-25': isCurrentMonth(month)}"
+                  class="p-4 text-sm font-semibold text-center text-gray-500"
+                >
+                  {{ item.months[month.value] ?? '-' }}
+                </td>
+                <td class="p-4 text-sm font-semibold text-center text-gray-500">
+                  <div style="min-width: 300px;">
+                    <VacationBar
+                      :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }"
+                    />
                   </div>
-                </UserProfileLink>
-              </th>
-              <td
-                v-for="month in months"
-                :key="month.value"
-                :class="{'bg-blumilk-25': isCurrentMonth(month)}"
-                class="p-4 text-sm font-semibold text-center text-gray-500"
-              >
-                {{ item.months[month.value] ?? '-' }}
-              </td>
-              <td class="p-4 text-sm font-semibold text-center text-gray-500">
-                <div style="min-width: 300px;">
-                  <VacationBar
-                    :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }"
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr v-if="!monthlyUsage.length">
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
-              >
-                Brak danych
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+              </tr>
+              <tr v-if="!monthlyUsage.length">
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  Brak danych
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/OvertimeRequest/ApproversIndex.vue b/resources/js/Pages/OvertimeRequest/ApproversIndex.vue
index 2649152d..84516d2c 100644
--- a/resources/js/Pages/OvertimeRequest/ApproversIndex.vue
+++ b/resources/js/Pages/OvertimeRequest/ApproversIndex.vue
@@ -3,20 +3,24 @@ import { CheckIcon, ChevronRightIcon, ChevronUpDownIcon } from '@heroicons/vue/2
 import Status from '@/Shared/Status.vue'
 import { watch, reactive } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import Pagination from '@/Shared/Pagination.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import SettlementType from '@/Shared/SettlementType.vue'
 import { useMonthInfo } from '@/Composables/monthInfo.js'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
-  auth: Object,
   requests: Object,
   users: Object,
   filters: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const statuses = [
   {
     name: 'Wszystkie',
@@ -53,7 +57,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/overtime/requests', {
+  router.get('/overtime/requests', {
     user: form.user?.id,
     status: form.status.value,
     month: form.month.value,
@@ -65,344 +69,346 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Wnioski" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Lista wniosków
-        </h2>
-      </div>
-      <div
-        v-if="auth.can.manageRequestsAsAdministrativeApprover"
-        class="flex"
-      >
-        <a
-          :href="`/overtime/timesheet/${filters.month}`"
-          class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+  <AppLayout>
+    <template #title>Wnioski</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Lista wniosków
+          </h2>
+        </div>
+        <div
+          v-if="auth.can.manageRequestsAsAdministrativeApprover"
+          class="flex"
         >
-          Pobierz plik Excel
-        </a>
+          <a
+            :href="`/overtime/timesheet/${filters.month}`"
+            class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+          >
+            Pobierz plik Excel
+          </a>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-3 md:gap-4">
-        <Listbox
-          v-model="form.user"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Pracownik
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span v-if="form.user === null">
-                Wszyscy
-              </span>
-              <span
-                v-else
-                class="flex items-center"
+      <div class="border-t border-gray-200">
+        <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-3 md:gap-4">
+          <Listbox
+            v-model="form.user"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Pracownik
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
               >
-                <img
-                  :src="form.user.avatar"
-                  class="shrink-0 w-6 h-6 rounded-full"
+                <span v-if="form.user === null">
+                  Wszyscy
+                </span>
+                <span
+                  v-else
+                  class="flex items-center"
                 >
-                <span class="block ml-3 truncate">{{ form.user.name }}</span>
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                  <img
+                    :src="form.user.avatar"
+                    class="shrink-0 size-6 rounded-full"
+                  >
+                  <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-slot="{ active }"
-                  as="template"
-                  :value="null"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-slot="{ active }"
+                    as="template"
+                    :value="null"
                   >
-                    <div class="flex items-center">
-                      Wszyscy
-                    </div>
-
-                    <span
-                      v-if="form.user === null"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-                <ListboxOption
-                  v-for="user in users.data"
-                  :key="user.id"
-                  v-slot="{ active }"
-                  as="template"
-                  :value="user"
-                >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
-                  >
-                    <div class="flex items-center">
-                      <img
-                        :src="user.avatar"
-                        class="shrink-0 w-6 h-6 rounded-full"
-                      >
+                      <div class="flex items-center">
+                        Wszyscy
+                      </div>
+
                       <span
-                        :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        v-if="form.user === null"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                       >
-                        {{ user.name }}
+                        <CheckIcon class="size-5" />
                       </span>
-                    </div>
-                    <span
-                      v-if="form.user?.id === user.id"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    </li>
+                  </ListboxOption>
+                  <ListboxOption
+                    v-for="user in users.data"
+                    :key="user.id"
+                    v-slot="{ active }"
+                    as="template"
+                    :value="user"
+                  >
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <Listbox
-          v-model="form.status"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Status
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span class="flex items-center">
-                {{ form.status.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                      <div class="flex items-center">
+                        <img
+                          :src="user.avatar"
+                          class="shrink-0 size-6 rounded-full"
+                        >
+                        <span
+                          :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        >
+                          {{ user.name }}
+                        </span>
+                      </div>
+                      <span
+                        v-if="form.user?.id === user.id"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <Listbox
+            v-model="form.status"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Status
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.status.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="status in statuses"
-                  :key="status.value"
-                  v-slot="{ active, selected }"
-                  as="template"
-                  :value="status"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="status in statuses"
+                    :key="status.value"
+                    v-slot="{ active, selected }"
+                    as="template"
+                    :value="status"
                   >
-                    {{ status.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <Listbox
-          v-model="form.month"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Miesiąc
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span class="flex items-center">
-                {{ form.month.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                      {{ status.name }}
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <Listbox
+            v-model="form.month"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Miesiąc
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.month.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
+
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="month in months"
-                  :key="month"
-                  v-slot="{ active, selected }"
-                  as="template"
-                  :value="month"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="month in months"
+                    :key="month"
+                    v-slot="{ active, selected }"
+                    as="template"
+                    :value="month"
                   >
-                    {{ month.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
+                      {{ month.name }}
+
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
       </div>
-    </div>
-    <div class="overflow-auto xl:overflow-visible">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Pracownik
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Liczba godzin
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Sposób rozliczenia
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
-            </th>
-            <th scope="col" />
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-100">
-          <InertiaLink
-            v-for="request in requests.data"
-            :key="request.id"
-            as="tr"
-            :href="`/overtime/requests/${request.id}`"
-            class="relative hover:bg-blumilk-25 hover:cursor-pointer"
-          >
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/overtime/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                {{ request.name }}
-              </InertiaLink>
-            </td>
-            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
-              <div class="flex">
-                <div class="w-10 h-10 rounded-full">
-                  <img :src="request.user.avatar">
-                </div>
-                <div class="ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    {{ request.user.name }}
-                  </p>
-                  <p class="text-sm text-gray-500">
-                    {{ request.user.email }}
-                  </p>
-                </div>
-              </div>
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.from }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.to }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.hours }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <SettlementType :type="request.settlementType" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <Status :status="request.state" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/overtime/requests/${request.id}`"
-                class="flex justify-around focus:outline-blumilk-500"
+                Numer
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Pracownik
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Od
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Do
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
-              </InertiaLink>
-            </td>
-          </InertiaLink>
-          <tr v-if="! requests.data.length">
-            <td
-              colspan="100%"
-              class="py-4 text-xl leading-5 text-center text-gray-700"
+                Liczba godzin
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Sposób rozliczenia
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Status
+              </th>
+              <th scope="col" />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <InertiaLink
+              v-for="request in requests.data"
+              :key="request.id"
+              as="tr"
+              :href="`/overtime/requests/${request.id}`"
+              class="relative hover:bg-blumilk-25 hover:cursor-pointer"
             >
-              <EmptyState>
-                <template #title>
-                  Brak wniosków
-                </template>
-                <template #text>
-                  Spróbuj sformułować zapytanie inaczej
-                </template>
-              </EmptyState>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/overtime/requests/${request.id}`"
+                  class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+                >
+                  {{ request.name }}
+                </InertiaLink>
+              </td>
+              <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
+                <div class="flex">
+                  <div class="size-10 rounded-full">
+                    <img :src="request.user.avatar">
+                  </div>
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900">
+                      {{ request.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500">
+                      {{ request.user.email }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.from }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.to }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.hours }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <SettlementType :type="request.settlementType" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <Status :status="request.state" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/overtime/requests/${request.id}`"
+                  class="flex justify-around focus:outline-blumilk-500"
+                >
+                  <ChevronRightIcon class="block size-6 fill-blumilk-500" />
+                </InertiaLink>
+              </td>
+            </InertiaLink>
+            <tr v-if="! requests.data.length">
+              <td
+                colspan="100%"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+              >
+                <EmptyState>
+                  <template #title>
+                    Brak wniosków
+                  </template>
+                  <template #text>
+                    Spróbuj sformułować zapytanie inaczej
+                  </template>
+                </EmptyState>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
-    <Pagination :pagination="requests.meta" />
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/OvertimeRequest/Create.vue b/resources/js/Pages/OvertimeRequest/Create.vue
index 7ea0a285..22accb76 100644
--- a/resources/js/Pages/OvertimeRequest/Create.vue
+++ b/resources/js/Pages/OvertimeRequest/Create.vue
@@ -1,20 +1,24 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { CheckIcon, ChevronUpDownIcon, XCircleIcon } from '@heroicons/vue/24/solid'
 import { reactive, ref, watch } from 'vue'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import SettlementType from '@/Shared/SettlementType.vue'
 import axios from 'axios'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
-  auth: Object,
   overtimeFromDate: [String, null],
   settlementTypes: Array,
 })
 
+const { auth } = useGlobalProps()
+
 const form = useForm({
-  user: props.auth.user,
+  user: auth.value.user,
   from: props.overtimeFromDate,
   to: props.overtimeFromDate,
   settlementType: props.settlementTypes[0],
@@ -88,220 +92,222 @@ async function refreshEstimatedHours(from, to) {
 </script>
 
 <template>
-  <InertiaHead title="Dodaj nadgodziny" />
-  <div class="mx-auto w-full max-w-7xl">
-    <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
-      <div class="p-4 sm:px-6">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Dodaj wniosek
-        </h2>
-      </div>
-      <form
-        class="px-6 h-full border-t border-gray-200"
-        @submit.prevent="createForm"
-      >
-        <div class="flex flex-col justify-around h-full">
-          <div>
-            <div
-              v-if="form.errors.overtimeRequest"
-              class="p-4 mt-2 bg-red-50 rounded-md"
-            >
-              <div class="flex">
-                <div class="shrink-0">
-                  <XCircleIcon class="w-5 h-5 text-red-400" />
-                </div>
-                <div class="ml-3">
-                  <h3 class="text-sm font-medium text-red-800">
-                    Wniosek nie mógł zostać utworzony
-                  </h3>
-                  <div class="mt-2 text-sm text-red-700">
-                    <span>{{ form.errors.overtimeRequest }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="date_from"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
+  <AppLayout>
+    <template #title>Dodaj nadgodziny</template>
+    <div class="mx-auto w-full max-w-7xl">
+      <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Dodaj wniosek
+          </h2>
+        </div>
+        <form
+          class="px-6 h-full border-t border-gray-200"
+          @submit.prevent="createForm"
+        >
+          <div class="flex flex-col justify-around h-full">
+            <div>
+              <div
+                v-if="form.errors.overtimeRequest"
+                class="p-4 mt-2 bg-red-50 rounded-md"
               >
-                Osoba składająca wniosek
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <div class="flex justify-start items-center">
-                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                    <img
-                      class="w-10 h-10 rounded-full"
-                      :src="auth.user.avatar"
-                    >
-                  </span>
+                <div class="flex">
+                  <div class="shrink-0">
+                    <XCircleIcon class="size-5 text-red-400" />
+                  </div>
                   <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900">
-                      {{ auth.user.name }}
+                    <h3 class="text-sm font-medium text-red-800">
+                      Wniosek nie mógł zostać utworzony
+                    </h3>
+                    <div class="mt-2 text-sm text-red-700">
+                      <span>{{ form.errors.overtimeRequest }}</span>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="date_from"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data od
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_from"
-                  v-model="form.from"
-                  :config="fromInputConfig"
-                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
-                  @on-change="onFromChange"
-                />
-                <p
-                  v-if="form.errors.from"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="date_from"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors.from }}
-                </p>
+                  Osoba składająca wniosek
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex justify-start items-center">
+                    <span class="inline-flex justify-center items-center size-10 rounded-full">
+                      <img
+                        class="size-10 rounded-full"
+                        :src="auth.user.avatar"
+                      >
+                    </span>
+                    <div class="ml-3">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ auth.user.name }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="date_from"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data do
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_to"
-                  v-model="form.to"
-                  :config="toInputConfig"
-                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
-                  @on-change="onToChange"
-                />
-                <p
-                  v-if="form.errors.to"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="date_from"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors.to }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba godzin</span>
-              <div
-                class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
-              >
-                {{ estimatedHours }}
+                  Data od
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_from"
+                    v-model="form.from"
+                    :config="fromInputConfig"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
+                    @on-change="onFromChange"
+                  />
+                  <p
+                    v-if="form.errors.from"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.from }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <Listbox
-              v-model="form.settlementType"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Typ rozliczenia nadgodzin
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="date_from"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  <template v-if="form.settlementType">
-                    <span class="block truncate">
-                      <SettlementType :type="form.settlementType.value" />
-                    </span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    Ładowanie...
-                  </template>
-                </ListboxButton>
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
+                  Data do
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_to"
+                    v-model="form.to"
+                    :config="toInputConfig"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+                    @on-change="onToChange"
+                  />
+                  <p
+                    v-if="form.errors.to"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.to }}
+                  </p>
+                </div>
+              </div>
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba godzin</span>
+                <div
+                  class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
                 >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                  {{ estimatedHours }}
+                </div>
+              </div>
+              <Listbox
+                v-model="form.settlementType"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Typ rozliczenia nadgodzin
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
                   >
-                    <ListboxOption
-                      v-for="settlementType in settlementTypes"
-                      :key="settlementType.value"
-                      v-slot="{ active, selected }"
-                      as="template"
-                      :value="settlementType"
+                    <template v-if="form.settlementType">
+                      <span class="block truncate">
+                        <SettlementType :type="form.settlementType.value" />
+                      </span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      Ładowanie...
+                    </template>
+                  </ListboxButton>
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                  >
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          <SettlementType :type="settlementType.value" />
-                        </span>
+                      <ListboxOption
+                        v-for="settlementType in settlementTypes"
+                        :key="settlementType.value"
+                        v-slot="{ active, selected }"
+                        as="template"
+                        :value="settlementType"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                            <SettlementType :type="settlementType.value" />
+                          </span>
 
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.type"
-                  class="mt-2 text-sm text-red-600"
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.type"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.type }}
+                  </p>
+                </div>
+              </Listbox>
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="comment"
+                  class="block text-sm font-medium text-gray-700"
                 >
-                  {{ form.errors.type }}
-                </p>
-              </div>
-            </Listbox>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="comment"
-                class="block text-sm font-medium text-gray-700"
-              >
-                Komentarz
-                <span class="text-xs text-gray-500">
-                  (opcjonalny)
-                </span>
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <textarea
-                  id="comment"
-                  v-model="form.comment"
-                  rows="4"
-                  class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
-                />
+                  Komentarz
+                  <span class="text-xs text-gray-500">
+                    (opcjonalny)
+                  </span>
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <textarea
+                    id="comment"
+                    v-model="form.comment"
+                    rows="4"
+                    class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-          <div class="flex justify-end py-3">
-            <div class="space-x-3">
-              <InertiaLink
-                href="/overtime/requests"
-                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              >
-                Anuluj
-              </InertiaLink>
-              <button
-                type="submit"
-                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !isDirty"
-              >
-                Dodaj
-              </button>
+            <div class="flex justify-end py-3">
+              <div class="space-x-3">
+                <InertiaLink
+                  href="/overtime/requests"
+                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                >
+                  Anuluj
+                </InertiaLink>
+                <button
+                  type="submit"
+                  class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                  :disabled="form.processing || !isDirty"
+                >
+                  Dodaj
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/OvertimeRequest/Index.vue b/resources/js/Pages/OvertimeRequest/Index.vue
index 5fb108f1..1cebb958 100644
--- a/resources/js/Pages/OvertimeRequest/Index.vue
+++ b/resources/js/Pages/OvertimeRequest/Index.vue
@@ -5,11 +5,13 @@ import Pagination from '@/Shared/Pagination.vue'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import SettlementType from '@/Shared/SettlementType.vue'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
 import { DateTime } from 'luxon'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   requests: Object,
@@ -48,7 +50,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/overtime/requests/me', { status: form.status.value, year: form.year }, {
+  router.get('/overtime/requests/me', { status: form.status.value, year: form.year }, {
     preserveState: true,
     replace: false,
   })
@@ -57,202 +59,204 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Moje nadgodziny" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Moje nadgodziny w roku
-        <YearPicker
-          v-model="form.year"
-          :from="currentDate.year + 1"
-          :to="currentDate.year - 20"
-          class="inline-block ml-2"
-        />
-      </h2>
-      <div>
-        <InertiaLink
-          href="/overtime/requests/create"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-        >
-          Dodaj wniosek
-        </InertiaLink>
-      </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="hidden relative divide-x divide-gray-200 shadow md:flex">
-        <button
-          v-for="(status, index) in statuses"
-          :key="index"
-          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
-          @click="form.status = status"
-        >
-          <span>{{ status.name }}</span>
-          <span
-            v-if="stats[status.value]"
-            :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold 2xl:inline-block']"
-          >
-            {{ stats[status.value] }}
-          </span>
-          <span
-            :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
+  <AppLayout>
+    <template #title>Moje nadgodziny</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Moje nadgodziny w roku
+          <YearPicker
+            v-model="form.year"
+            :from="currentDate.year + 1"
+            :to="currentDate.year - 20"
+            class="inline-block ml-2"
           />
-        </button>
+        </h2>
+        <div>
+          <InertiaLink
+            href="/overtime/requests/create"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+          >
+            Dodaj wniosek
+          </InertiaLink>
+        </div>
       </div>
-      <div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
-        <Listbox
-          v-model="form.status"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Status
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+      <div class="border-t border-gray-200">
+        <div class="hidden relative divide-x divide-gray-200 shadow md:flex">
+          <button
+            v-for="(status, index) in statuses"
+            :key="index"
+            :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white p-4 text-sm font-medium text-center']"
+            @click="form.status = status"
+          >
+            <span>{{ status.name }}</span>
+            <span
+              v-if="stats[status.value]"
+              :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold 2xl:inline-block']"
             >
-              <span class="flex items-center">
-                {{ form.status.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+              {{ stats[status.value] }}
+            </span>
+            <span
+              :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
+            />
+          </button>
+        </div>
+        <div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
+          <Listbox
+            v-model="form.status"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Status
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.status.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="status in statuses"
-                  :key="status.value"
-                  v-slot="{ active, selected }"
-                  as="template"
-                  :value="status"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="status in statuses"
+                    :key="status.value"
+                    v-slot="{ active, selected }"
+                    as="template"
+                    :value="status"
                   >
-                    {{ status.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
+                      {{ status.name }}
+
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
       </div>
-    </div>
-    <div class="overflow-auto xl:overflow-visible">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Liczba godzin
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Sposób rozliczenia
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
-            </th>
-            <th scope="col" />
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-100">
-          <InertiaLink
-            v-for="request in requests.data"
-            :key="request.id"
-            :href="`/overtime/requests/${request.id}`"
-            as="tr"
-            class="relative hover:bg-blumilk-25"
-          >
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/overtime/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                {{ request.name }}
-              </InertiaLink>
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.from }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.to }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.hours }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <SettlementType :type="request.settlementType" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <Status :status="request.state" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/overtime/requests/${request.id}`"
-                class="flex justify-around focus:outline-blumilk-500"
+                Numer
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
-              </InertiaLink>
-            </td>
-          </InertiaLink>
-          <tr v-if="! requests.data.length">
-            <td
-              colspan="100%"
-              class="py-4 text-xl leading-5 text-center text-gray-700"
+                Od
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Do
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Liczba godzin
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Sposób rozliczenia
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Status
+              </th>
+              <th scope="col" />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <InertiaLink
+              v-for="request in requests.data"
+              :key="request.id"
+              :href="`/overtime/requests/${request.id}`"
+              as="tr"
+              class="relative hover:bg-blumilk-25"
             >
-              <EmptyState>
-                <template #title>
-                  Brak wniosków
-                </template>
-                <template #text>
-                  Nie znaleziono wniosków o danym statusie
-                </template>
-              </EmptyState>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/overtime/requests/${request.id}`"
+                  class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+                >
+                  {{ request.name }}
+                </InertiaLink>
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.from }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.to }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.hours }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <SettlementType :type="request.settlementType" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <Status :status="request.state" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/overtime/requests/${request.id}`"
+                  class="flex justify-around focus:outline-blumilk-500"
+                >
+                  <ChevronRightIcon class="block size-6 fill-blumilk-500" />
+                </InertiaLink>
+              </td>
+            </InertiaLink>
+            <tr v-if="! requests.data.length">
+              <td
+                colspan="100%"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+              >
+                <EmptyState>
+                  <template #title>
+                    Brak wniosków
+                  </template>
+                  <template #text>
+                    Nie znaleziono wniosków o danym statusie
+                  </template>
+                </EmptyState>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
-    <Pagination :pagination="requests.meta" />
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/OvertimeRequest/IndexForApprovers.vue b/resources/js/Pages/OvertimeRequest/IndexForApprovers.vue
index 25b095f2..81d2ab77 100644
--- a/resources/js/Pages/OvertimeRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/OvertimeRequest/IndexForApprovers.vue
@@ -3,21 +3,25 @@ import { CheckIcon, ChevronRightIcon, ChevronUpDownIcon } from '@heroicons/vue/2
 import Status from '@/Shared/Status.vue'
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import Pagination from '@/Shared/Pagination.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import SettlementType from '@/Shared/SettlementType.vue'
 import { DateTime } from 'luxon'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
-  auth: Object,
   requests: Object,
   users: Object,
   filters: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const currentDate = DateTime.now()
 
 const statuses = [
@@ -54,7 +58,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/overtime/requests', {
+  router.get('/overtime/requests', {
     user: form.user?.id,
     status: form.status.value,
     year: form.year,
@@ -66,296 +70,298 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Nadgodziny" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Lista wniosków
-      </h2>
-      <div v-if="props.auth.overtimeEnabled">
-        <InertiaLink
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="/overtime/requests/create"
-        >
-          Dodaj wniosek
-        </InertiaLink>
+  <AppLayout>
+    <template #title>Nadgodziny</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Lista wniosków
+        </h2>
+        <div v-if="auth.overtimeEnabled">
+          <InertiaLink
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="/overtime/requests/create"
+          >
+            Dodaj wniosek
+          </InertiaLink>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-3 md:gap-4">
-        <Listbox
-          v-model="form.user"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Pracownik
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span v-if="form.user === null">
-                Wszyscy
-              </span>
-              <span
-                v-else
-                class="flex items-center"
+      <div class="border-t border-gray-200">
+        <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-3 md:gap-4">
+          <Listbox
+            v-model="form.user"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Pracownik
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
               >
-                <img
-                  :src="form.user.avatar"
-                  class="shrink-0 w-6 h-6 rounded-full"
+                <span v-if="form.user === null">
+                  Wszyscy
+                </span>
+                <span
+                  v-else
+                  class="flex items-center"
                 >
-                <span class="block ml-3 truncate">{{ form.user.name }}</span>
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                  <img
+                    :src="form.user.avatar"
+                    class="shrink-0 size-6 rounded-full"
+                  >
+                  <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-slot="{ active }"
-                  :value="null"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-slot="{ active }"
+                    :value="null"
+                    as="template"
                   >
-                    <div class="flex items-center">
-                      Wszyscy
-                    </div>
-
-                    <span
-                      v-if="form.user === null"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-                <ListboxOption
-                  v-for="user in users.data"
-                  :key="user.id"
-                  v-slot="{ active }"
-                  :value="user"
-                  as="template"
-                >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
-                  >
-                    <div class="flex items-center">
-                      <img
-                        :src="user.avatar"
-                        class="shrink-0 w-6 h-6 rounded-full"
-                      >
+                      <div class="flex items-center">
+                        Wszyscy
+                      </div>
+
                       <span
-                        :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        v-if="form.user === null"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                       >
-                        {{ user.name }}
+                        <CheckIcon class="size-5" />
                       </span>
-                    </div>
-                    <span
-                      v-if="form.user?.id === user.id"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    </li>
+                  </ListboxOption>
+                  <ListboxOption
+                    v-for="user in users.data"
+                    :key="user.id"
+                    v-slot="{ active }"
+                    :value="user"
+                    as="template"
+                  >
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <Listbox
-          v-model="form.status"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Status
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span class="flex items-center">
-                {{ form.status.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                      <div class="flex items-center">
+                        <img
+                          :src="user.avatar"
+                          class="shrink-0 size-6 rounded-full"
+                        >
+                        <span
+                          :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        >
+                          {{ user.name }}
+                        </span>
+                      </div>
+                      <span
+                        v-if="form.user?.id === user.id"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <Listbox
+            v-model="form.status"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Status
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.status.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="status in statuses"
-                  :key="status.value"
-                  v-slot="{ active, selected }"
-                  :value="status"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="status in statuses"
+                    :key="status.value"
+                    v-slot="{ active, selected }"
+                    :value="status"
+                    as="template"
                   >
-                    {{ status.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <YearPicker
-          v-model="form.year"
-          nullable
-          label="Rok"
-          :from="currentDate.year + 1"
-          :to="currentDate.year - 20"
-          class="inline-block ml-2"
-        />
+                      {{ status.name }}
+
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <YearPicker
+            v-model="form.year"
+            nullable
+            label="Rok"
+            :from="currentDate.year + 1"
+            :to="currentDate.year - 20"
+            class="inline-block ml-2"
+          />
+        </div>
       </div>
-    </div>
-    <div class="overflow-auto xl:overflow-visible">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Numer
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Pracownik
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Od
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Do
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Liczba godzin
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Sposób rozliczenia
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Status
-            </th>
-            <th scope="col" />
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-100">
-          <InertiaLink
-            v-for="request in requests.data"
-            :key="request.id"
-            :href="`/overtime/requests/${request.id}`"
-            as="tr"
-            :class="[request.user.isActive ? '' : 'bg-gray-100', 'relative hover:bg-blumilk-25 hover:cursor-pointer']"
-          >
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/overtime/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
               >
-                {{ request.name }}
-              </InertiaLink>
-            </td>
-            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
-              <div class="flex">
-                <div class="w-10 h-10 rounded-full">
-                  <img :src="request.user.avatar">
-                </div>
-                <div class="ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    {{ request.user.name }}
-                  </p>
-                  <p class="text-sm text-gray-500">
-                    {{ request.user.email }}
-                  </p>
-                </div>
-              </div>
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.from }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.to }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.hours }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <SettlementType :type="request.settlementType" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <Status :status="request.state" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/overtime/requests/${request.id}`"
-                class="flex justify-around focus:outline-blumilk-500"
+                Numer
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
               >
-                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
-              </InertiaLink>
-            </td>
-          </InertiaLink>
-          <tr v-if="! requests.data.length">
-            <td
-              class="py-4 text-xl leading-5 text-center text-gray-700"
-              colspan="100%"
+                Pracownik
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Od
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Do
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Liczba godzin
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Sposób rozliczenia
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Status
+              </th>
+              <th scope="col" />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <InertiaLink
+              v-for="request in requests.data"
+              :key="request.id"
+              :href="`/overtime/requests/${request.id}`"
+              as="tr"
+              :class="[request.user.isActive ? '' : 'bg-gray-100', 'relative hover:bg-blumilk-25 hover:cursor-pointer']"
             >
-              <EmptyState>
-                <template #title>
-                  Brak wniosków
-                </template>
-                <template #text>
-                  Spróbuj sformułować zapytanie inaczej
-                </template>
-              </EmptyState>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/overtime/requests/${request.id}`"
+                  class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+                >
+                  {{ request.name }}
+                </InertiaLink>
+              </td>
+              <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
+                <div class="flex">
+                  <div class="size-10 rounded-full">
+                    <img :src="request.user.avatar">
+                  </div>
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900">
+                      {{ request.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500">
+                      {{ request.user.email }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.from }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.to }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.hours }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <SettlementType :type="request.settlementType" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <Status :status="request.state" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/overtime/requests/${request.id}`"
+                  class="flex justify-around focus:outline-blumilk-500"
+                >
+                  <ChevronRightIcon class="block size-6 fill-blumilk-500" />
+                </InertiaLink>
+              </td>
+            </InertiaLink>
+            <tr v-if="! requests.data.length">
+              <td
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+                colspan="100%"
+              >
+                <EmptyState>
+                  <template #title>
+                    Brak wniosków
+                  </template>
+                  <template #text>
+                    Spróbuj sformułować zapytanie inaczej
+                  </template>
+                </EmptyState>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
-    <Pagination :pagination="requests.meta" />
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/OvertimeRequest/Show.vue b/resources/js/Pages/OvertimeRequest/Show.vue
index 4acb86ea..3ffb7541 100644
--- a/resources/js/Pages/OvertimeRequest/Show.vue
+++ b/resources/js/Pages/OvertimeRequest/Show.vue
@@ -2,227 +2,231 @@
 import Activity from '@/Shared/Activity.vue'
 import Status from '@/Shared/Status.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
   request: Object,
   activities: Object,
   stats: Object,
-  auth: Object,
 })
+
 </script>
 
 <template>
-  <InertiaHead :title="`Nadgodziny ${request.name}`" />
-  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
-    <div class="space-y-6 xl:col-span-2 xl:col-start-1">
-      <div class="bg-white shadow-md">
-        <div class="py-5 px-4 sm:px-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Informacje na temat wniosku
-          </h3>
-        </div>
-        <div class="py-5 px-4 border-t border-gray-200 sm:p-0">
-          <dl class="sm:divide-y sm:divide-gray-200">
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Nr wniosku
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ request.name }}
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="flex items-center text-sm font-medium text-gray-500">
-                Pracownik
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <UserProfileLink
-                  :user="request.user"
-                  class="flex"
-                >
-                  <div class="flex">
-                    <img
-                      :src="request.user.avatar"
-                      class="w-10 h-10 rounded-full"
-                    >
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900">
-                        {{ request.user.name }}
-                      </p>
-                      <p class="text-sm text-gray-500">
-                        {{ request.user.email }}
-                      </p>
+  <AppLayout>
+    <template #title>`Nadgodziny ${request.name}`</template>
+    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
+      <div class="space-y-6 xl:col-span-2 xl:col-start-1">
+        <div class="bg-white shadow-md">
+          <div class="py-5 px-4 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Informacje na temat wniosku
+            </h3>
+          </div>
+          <div class="py-5 px-4 border-t border-gray-200 sm:p-0">
+            <dl class="sm:divide-y sm:divide-gray-200">
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Nr wniosku
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  {{ request.name }}
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="flex items-center text-sm font-medium text-gray-500">
+                  Pracownik
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <UserProfileLink
+                    :user="request.user"
+                    class="flex"
+                  >
+                    <div class="flex">
+                      <img
+                        :src="request.user.avatar"
+                        class="size-10 rounded-full"
+                      >
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900">
+                          {{ request.user.name }}
+                        </p>
+                        <p class="text-sm text-gray-500">
+                          {{ request.user.email }}
+                        </p>
+                      </div>
                     </div>
-                  </div>
-                </UserProfileLink>
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Obecny status
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <Status :status="request.state" />
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Data
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ request.from }} - {{ request.to }}
-                <span class="font-semibold">
-                  [Liczba godzin: {{ request.hours }}]
-                </span>
-              </dd>
+                  </UserProfileLink>
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Obecny status
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <Status :status="request.state" />
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Data
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  {{ request.from }} - {{ request.to }}
+                  <span class="font-semibold">
+                    [Liczba godzin: {{ request.hours }}]
+                  </span>
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Komentarz
+                </dt>
+                <dd
+                  v-if="request.comment != null"
+                  class="mt-1 text-sm text-gray-900 break-all sm:col-span-2 sm:mt-0"
+                >
+                  {{ request.comment }}
+                </dd>
+                <dd
+                  v-else
+                  class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
+                >
+                  -
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div
+          v-if="request.can.acceptAsTechnical"
+          class="bg-white shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Zaakceptuj wniosek jako osoba techniczna
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
+                musiała go zaakceptować.
+              </p>
             </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Komentarz
-              </dt>
-              <dd
-                v-if="request.comment != null"
-                class="mt-1 text-sm text-gray-900 break-all sm:col-span-2 sm:mt-0"
-              >
-                {{ request.comment }}
-              </dd>
-              <dd
-                v-else
-                class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/overtime/requests/${request.id}/accept-as-technical`"
+                as="button"
+                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                method="post"
+                preserve-scroll
               >
-                -
-              </dd>
+                Zaakceptuj wniosek
+              </InertiaLink>
             </div>
-          </dl>
-        </div>
-      </div>
-      <div
-        v-if="request.can.acceptAsTechnical"
-        class="bg-white shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Zaakceptuj wniosek jako osoba techniczna
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
-              musiała go zaakceptować.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/overtime/requests/${request.id}/accept-as-technical`"
-              as="button"
-              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              method="post"
-              preserve-scroll
-            >
-              Zaakceptuj wniosek
-            </InertiaLink>
           </div>
         </div>
-      </div>
-      <div
-        v-if="request.can.reject"
-        class="bg-white shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Odrzuć wniosek
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              Odrzuconego wniosku nie można przywracać - należy zrobić nowy.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/overtime/requests/${request.id}/reject`"
-              as="button"
-              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
-              method="post"
-              preserve-scroll
-            >
+        <div
+          v-if="request.can.reject"
+          class="bg-white shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Odrzuć wniosek
-            </InertiaLink>
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                Odrzuconego wniosku nie można przywracać - należy zrobić nowy.
+              </p>
+            </div>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/overtime/requests/${request.id}/reject`"
+                as="button"
+                class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
+                method="post"
+                preserve-scroll
+              >
+                Odrzuć wniosek
+              </InertiaLink>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        v-if="request.can.cancel"
-        class="bg-white border border-red-500 shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Anuluj wniosek
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              Anulowanego wniosku nie można przywrócić - należy utworzyć nowy.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/overtime/requests/${request.id}/cancel`"
-              as="button"
-              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
-              method="post"
-              preserve-scroll
-            >
+        <div
+          v-if="request.can.cancel"
+          class="bg-white border border-red-500 shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Anuluj wniosek
-            </InertiaLink>
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                Anulowanego wniosku nie można przywrócić - należy utworzyć nowy.
+              </p>
+            </div>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/overtime/requests/${request.id}/cancel`"
+                as="button"
+                class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
+                method="post"
+                preserve-scroll
+              >
+                Anuluj wniosek
+              </InertiaLink>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        v-if="request.can.settle"
-        class="bg-white border border-blue-500 shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Rozlicz nadgodziny
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              Rozliczenie nadgodzin spowoduje oznaczenie ich jako rozliczone.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/overtime/requests/${request.id}/settle`"
-              as="button"
-              class="inline-flex justify-center items-center py-2 px-4 font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm"
-              method="post"
-              preserve-scroll
-            >
+        <div
+          v-if="request.can.settle"
+          class="bg-white border border-blue-500 shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Rozlicz nadgodziny
-            </InertiaLink>
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                Rozliczenie nadgodzin spowoduje oznaczenie ich jako rozliczone.
+              </p>
+            </div>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/overtime/requests/${request.id}/settle`"
+                as="button"
+                class="inline-flex justify-center items-center py-2 px-4 font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm"
+                method="post"
+                preserve-scroll
+              >
+                Rozlicz nadgodziny
+              </InertiaLink>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="space-y-6 xl:col-span-1 xl:col-start-3">
-      <div class="bg-white shadow-md">
-        <div class="py-5 px-4 sm:px-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Historia wniosku
-          </h3>
-        </div>
-        <div class="p-4 border-t border-gray-200">
-          <ul>
-            <li
-              v-for="(activity, index) in activities.data"
-              :key="index"
-            >
-              <Activity
-                :activity="activity"
-                :last="index !== activities.data.length - 1"
-              />
-            </li>
-          </ul>
+      <div class="space-y-6 xl:col-span-1 xl:col-start-3">
+        <div class="bg-white shadow-md">
+          <div class="py-5 px-4 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Historia wniosku
+            </h3>
+          </div>
+          <div class="p-4 border-t border-gray-200">
+            <ul>
+              <li
+                v-for="(activity, index) in activities.data"
+                :key="index"
+              >
+                <Activity
+                  :activity="activity"
+                  :last="index !== activities.data.length - 1"
+                />
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Permissions/Edit.vue b/resources/js/Pages/Permissions/Edit.vue
index b9ed8bff..087a0e56 100644
--- a/resources/js/Pages/Permissions/Edit.vue
+++ b/resources/js/Pages/Permissions/Edit.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { Switch } from '@headlessui/vue'
 import { usePermissionInfo } from '@/Composables/permissionInfo.js'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   user: Object,
@@ -21,119 +23,121 @@ function editPermissions() {
 </script>
 
 <template>
-  <InertiaHead title="Edycja uprawnień" />
-  <div class="bg-white shadow-md">
-    <div class="py-6 px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Edytuj uprawnienia
-      </h2>
-    </div>
-    <div
-      class="bg-gray-50 w-full py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase"
-    >
-      Użytkownik
-    </div>
-    <div class="items-center py-4 px-4 flex">
-      <div class="flex">
-        <img
-          class="w-14 h-14 mt-1 rounded-full"
-          :src="user.avatar"
-        >
-        <div class="ml-3">
-          <p class="text-md font-medium text-gray-900">
-            {{ user.name }}
-          </p>
-          <p class="text-sm text-gray-500">
-            {{ user.role }}
-          </p>
-          <p class="text-sm text-gray-500">
-            {{ user.email }}
-          </p>
+  <AppLayout>
+    <template #title>Edycja uprawnień</template>
+    <div class="bg-white shadow-md">
+      <div class="p-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Edytuj uprawnienia
+        </h2>
+      </div>
+      <div
+        class="bg-gray-50 w-full py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase"
+      >
+        Użytkownik
+      </div>
+      <div class="items-center p-4 flex">
+        <div class="flex">
+          <img
+            class="size-14 mt-1 rounded-full"
+            :src="user.avatar"
+          >
+          <div class="ml-3">
+            <p class="text-md font-medium text-gray-900">
+              {{ user.name }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ user.role }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ user.email }}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bg-gray-50 w-full py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
-      Uprawnienia
-    </div>
-    <form
-      class="w-full py-2 px-4"
-      @submit.prevent="editPermissions"
-    >
-      <template
-        v-for="[section, sectionPermissions] in groupedPermissions"
-        :key="section"
+      <div class="bg-gray-50 w-full py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+        Uprawnienia
+      </div>
+      <form
+        class="w-full py-2 px-4"
+        @submit.prevent="editPermissions"
       >
-        <div
-          v-if="sectionPermissions.length > 0"
-          class="w-full mt-4 mb-4 border border-gray-200 items-start"
+        <template
+          v-for="[section, sectionPermissions] in groupedPermissions"
+          :key="section"
         >
           <div
-            class="group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500"
+            v-if="sectionPermissions.length > 0"
+            class="w-full my-4 border border-gray-200 items-start"
           >
-            <div class="break-all line-clamp-1 text-md">
-              {{ section }}
+            <div
+              class="group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500"
+            >
+              <div class="break-all line-clamp-1 text-md">
+                {{ section }}
+              </div>
             </div>
-          </div>
-          <div class="border-t border-gray-200">
-            <table class="min-w-full divide-y divide-gray-200 table-fixed">
-              <thead class="bg-gray-50">
-                <tr>
-                  <th
-                    scope="col"
-                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  >
-                    Uprawnienie
-                  </th>
-                  <th
-                    scope="col"
-                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  >
-                    Czy przyznano?
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="bg-white divide-y divide-gray-100">
-                <tr
-                  v-for="permission in sectionPermissions"
-                  :key="permission.value"
-                >
-                  <td class="p-4 text-sm text-gray-500 w-1/2">
-                    {{ permission.name }}
-                  </td>
-                  <td class="p-4 text-sm text-gray-500">
-                    <Switch
-                      v-model="form.permissions[permission.value]"
-                      :class="[form.permissions[permission.value] ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+            <div class="border-t border-gray-200">
+              <table class="min-w-full divide-y divide-gray-200 table-fixed">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    >
+                      Uprawnienie
+                    </th>
+                    <th
+                      scope="col"
+                      class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                     >
-                      <span
-                        :class="[form.permissions[permission.value] ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-                      />
-                    </Switch>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      Czy przyznano?
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-100">
+                  <tr
+                    v-for="permission in sectionPermissions"
+                    :key="permission.value"
+                  >
+                    <td class="p-4 text-sm text-gray-500 w-1/2">
+                      {{ permission.name }}
+                    </td>
+                    <td class="p-4 text-sm text-gray-500">
+                      <Switch
+                        v-model="form.permissions[permission.value]"
+                        :class="[form.permissions[permission.value] ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                      >
+                        <span
+                          :class="[form.permissions[permission.value] ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+                        />
+                      </Switch>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </template>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/users"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Zapisz
+            </button>
           </div>
         </div>
-      </template>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/users"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Zapisz
-          </button>
-        </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Resumes/Create.vue b/resources/js/Pages/Resumes/Create.vue
index e99ac1cc..e8a667de 100644
--- a/resources/js/Pages/Resumes/Create.vue
+++ b/resources/js/Pages/Resumes/Create.vue
@@ -2,13 +2,15 @@
 import { Listbox, ListboxOption, ListboxOptions, ListboxLabel, ListboxButton } from '@headlessui/vue'
 import { ChevronUpDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/solid'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import MonthPicker from '@/Shared/Forms/MonthPicker.vue'
 import DynamicSection from '@/Shared/Forms/DynamicSection.vue'
 import Combobox from '@/Shared/Forms/Combobox.vue'
 import MultipleCombobox from '@/Shared/Forms/MultipleCombobox.vue'
 import LevelPicker from '@/Shared/Forms/LevelPicker.vue'
 import useLevels from '@/Composables/useLevels.js'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   users: Object,
@@ -103,544 +105,546 @@ function submitResume() {
 </script>
 
 <template>
-  <InertiaHead title="Dodawanie CV" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Dodaj CV
-      </h2>
-    </div>
-    <form
-      class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200"
-      @submit.prevent="submitResume"
-    >
-      <div class="space-y-8 sm:space-y-5">
-        <div>
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Dane podstawowe
-          </h3>
-          <div class="grid grid-cols-2 gap-8 py-4">
-            <Listbox
-              v-model="form.user"
-              as="div"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Użytkownik
-              </ListboxLabel>
-              <div class="relative mt-2">
-                <ListboxButton
-                  class="relative py-2 pr-10 pl-3 w-full max-w-md h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-                >
-                  <span v-if="form.user === null">
-                    Nie istnieje w bazie
-                  </span>
-                  <span
-                    v-else
-                    class="flex items-center"
+  <AppLayout>
+    <template #title>Dodawanie CV</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Dodaj CV
+        </h2>
+      </div>
+      <form
+        class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200"
+        @submit.prevent="submitResume"
+      >
+        <div class="space-y-8 sm:space-y-5">
+          <div>
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Dane podstawowe
+            </h3>
+            <div class="grid grid-cols-2 gap-8 py-4">
+              <Listbox
+                v-model="form.user"
+                as="div"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Użytkownik
+                </ListboxLabel>
+                <div class="relative mt-2">
+                  <ListboxButton
+                    class="relative py-2 pr-10 pl-3 w-full max-w-md h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
                   >
-                    <img
-                      :src="form.user.avatar"
-                      class="shrink-0 w-6 h-6 rounded-full"
+                    <span v-if="form.user === null">
+                      Nie istnieje w bazie
+                    </span>
+                    <span
+                      v-else
+                      class="flex items-center"
                     >
-                    <span class="block ml-3 truncate">{{ form.user.name }}</span>
-                  </span>
-                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                    <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                  </span>
-                </ListboxButton>
+                      <img
+                        :src="form.user.avatar"
+                        class="shrink-0 size-6 rounded-full"
+                      >
+                      <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                    </span>
+                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                      <ChevronUpDownIcon class="size-5 text-gray-400" />
+                    </span>
+                  </ListboxButton>
 
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
                   >
-                    <ListboxOption
-                      v-slot="{ active }"
-                      as="template"
-                      :value="null"
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li
-                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      <ListboxOption
+                        v-slot="{ active }"
+                        as="template"
+                        :value="null"
                       >
-                        <div class="flex items-center">
-                          Nie istnieje w bazie
-                        </div>
-
-                        <span
-                          v-if="form.user === null"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        <li
+                          :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                         >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                    <ListboxOption
-                      v-for="user in users.data"
-                      :key="user.id"
-                      v-slot="{ active }"
-                      as="template"
-                      :value="user"
-                    >
-                      <li
-                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
-                      >
-                        <div class="flex items-center">
-                          <img
-                            :src="user.avatar"
-                            class="shrink-0 w-6 h-6 rounded-full"
-                          >
+                          <div class="flex items-center">
+                            Nie istnieje w bazie
+                          </div>
+
                           <span
-                            :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                            v-if="form.user === null"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                           >
-                            {{ user.name }}
+                            <CheckIcon class="size-5" />
                           </span>
-                        </div>
-                        <span
-                          v-if="form.user?.id === user.id"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        </li>
+                      </ListboxOption>
+                      <ListboxOption
+                        v-for="user in users.data"
+                        :key="user.id"
+                        v-slot="{ active }"
+                        as="template"
+                        :value="user"
+                      >
+                        <li
+                          :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                         >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-              </div>
-            </Listbox>
-            <div v-if="form.user === null">
-              <label
-                for="name"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Imię i nazwisko
-              </label>
-              <div class="mt-2">
-                <input
-                  id="name"
-                  v-model="form.name"
-                  type="text"
-                  class="block w-full max-w-md rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
-                >
-                <p
-                  v-if="form.errors.name"
-                  class="mt-2 text-sm text-red-600"
+                          <div class="flex items-center">
+                            <img
+                              :src="user.avatar"
+                              class="shrink-0 size-6 rounded-full"
+                            >
+                            <span
+                              :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                            >
+                              {{ user.name }}
+                            </span>
+                          </div>
+                          <span
+                            v-if="form.user?.id === user.id"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                </div>
+              </Listbox>
+              <div v-if="form.user === null">
+                <label
+                  for="name"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors.name }}
-                </p>
+                  Imię i nazwisko
+                </label>
+                <div class="mt-2">
+                  <input
+                    id="name"
+                    v-model="form.name"
+                    type="text"
+                    class="block w-full max-w-md rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                  >
+                  <p
+                    v-if="form.errors.name"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.name }}
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <DynamicSection
-          v-model="form.educations"
-          header="Edukacja"
-          add-label="Dodaj szkołę"
-          @add-item="addEducation"
-          @remove-item="(index) => form.educations.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('education', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
+          <DynamicSection
+            v-model="form.educations"
+            header="Edukacja"
+            add-label="Dodaj szkołę"
+            @add-item="addEducation"
+            @remove-item="(index) => form.educations.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('education', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              {{ element.school ? element.school : '(Nieokreślony)' }}
             </template>
-            {{ element.school ? element.school : '(Nieokreślony)' }}
-          </template>
-          <template #form="{ element, index }">
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Szkoła
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  v-model="element.school"
-                  type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.school`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.school`] }"
-                >
-                <p
-                  v-if="form.errors[`education.${index}.school`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.school`] }}
-                </p>
+            <template #form="{ element, index }">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Szkoła
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <input
+                    v-model="element.school"
+                    type="text"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.school`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.school`] }"
+                  >
+                  <p
+                    v-if="form.errors[`education.${index}.school`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.school`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Stopień
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  v-model="element.degree"
-                  type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.degree`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.degree`] }"
-                >
-                <p
-                  v-if="form.errors[`education.${index}.degree`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.degree`] }}
-                </p>
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Stopień
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <input
+                    v-model="element.degree"
+                    type="text"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.degree`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.degree`] }"
+                  >
+                  <p
+                    v-if="form.errors[`education.${index}.degree`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.degree`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Kierunek/Specjalizacja
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  v-model="element.fieldOfStudy"
-                  type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.fieldOfStudy`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.fieldOfStudy`] }"
-                >
-                <p
-                  v-if="form.errors[`education.${index}.fieldOfStudy`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.fieldOfStudy`] }}
-                </p>
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Kierunek/Specjalizacja
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <input
+                    v-model="element.fieldOfStudy"
+                    type="text"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.fieldOfStudy`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.fieldOfStudy`] }"
+                  >
+                  <p
+                    v-if="form.errors[`education.${index}.fieldOfStudy`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.fieldOfStudy`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Data rozpoczęcia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <MonthPicker
-                  v-model="element.startDate"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.startDate`] }"
-                />
-                <p
-                  v-if="form.errors[`education.${index}.startDate`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.startDate`] }}
-                </p>
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Data rozpoczęcia
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <MonthPicker
+                    v-model="element.startDate"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.startDate`] }"
+                  />
+                  <p
+                    v-if="form.errors[`education.${index}.startDate`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.startDate`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Data zakończenia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <div class="space-y-2">
-                  <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                    <input
-                      v-model="element.current"
-                      type="checkbox"
-                      class="focus:ring-blumilk-500 h-4 w-4 text-blumilk-600 border-gray-300 rounded mr-1"
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Data zakończenia
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <div class="space-y-2">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                      <input
+                        v-model="element.current"
+                        type="checkbox"
+                        class="focus:ring-blumilk-500 size-4 text-blumilk-600 border-gray-300 rounded mr-1"
+                      >
+                      W trakcie
+                    </label>
+                    <MonthPicker
+                      v-model="element.endDate"
+                      :disabled="element.current"
+                      class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
+                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.endDate`] }"
+                    />
+                  </div>
+                  <p
+                    v-if="form.errors[`education.${index}.endDate`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.endDate`] }}
+                  </p>
+                </div>
+              </div>
+            </template>
+          </DynamicSection>
+          <DynamicSection
+            v-model="form.languages"
+            header="Języki"
+            add-label="Dodaj język"
+            @add-item="addLanguage"
+            @remove-item="(index) => form.languages.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('languages', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              <template v-if="element.name">
+                {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+              </template>
+              <template v-else>
+                (Nieokreślony)
+              </template>
+            </template>
+            <template #form="{ element, index }">
+              <div class="gap-4 md:grid md:grid-cols-2 ">
+                <div class="py-4">
+                  <label
+                    :for="`language-${index}-level`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Język
+                  </label>
+                  <div class="mt-2">
+                    <Combobox
+                      :id="`language-${index}-level`"
+                      v-model="element.name"
+                      :items="languages"
+                    />
+                    <p
+                      v-if="form.errors[`languages.${index}.name`]"
+                      class="mt-2 text-sm text-red-600"
                     >
-                    W trakcie
+                      {{ form.errors[`languages.${index}.name`] }}
+                    </p>
+                  </div>
+                </div>
+                <div class="py-4">
+                  <label
+                    :for="`language-level-${index}`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
                   </label>
-                  <MonthPicker
-                    v-model="element.endDate"
-                    :disabled="element.current"
-                    class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
-                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.endDate`] }"
-                  />
+                  <div class="mt-2">
+                    <LevelPicker
+                      v-model.number="element.level"
+                      :levels="languageLevels"
+                    />
+                    <p
+                      v-if="form.errors[`languages.${index}.level`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`languages.${index}.level`] }}
+                    </p>
+                  </div>
                 </div>
-                <p
-                  v-if="form.errors[`education.${index}.endDate`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.endDate`] }}
-                </p>
               </div>
-            </div>
-          </template>
-        </DynamicSection>
-        <DynamicSection
-          v-model="form.languages"
-          header="Języki"
-          add-label="Dodaj język"
-          @add-item="addLanguage"
-          @remove-item="(index) => form.languages.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('languages', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
             </template>
-            <template v-if="element.name">
-              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+          </DynamicSection>
+          <DynamicSection
+            v-model="form.technologies"
+            header="Technologie"
+            add-label="Dodaj technologię"
+            @add-item="addTechnology"
+            @remove-item="(index) => form.technologies.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('technologies', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              <template v-if="element.name">
+                {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+              </template>
+              <template v-else>
+                (Nieokreślony)
+              </template>
+            </template>
+            <template #form="{ element, index }">
+              <div class="gap-4 md:grid md:grid-cols-2 ">
+                <div class="py-4">
+                  <label
+                    :for="`technology-${index}-level`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Technologia
+                  </label>
+                  <div class="mt-2">
+                    <Combobox
+                      :id="`technology-${index}-level`"
+                      v-model="element.name"
+                      :items="technologies"
+                    />
+                    <p
+                      v-if="form.errors[`technologies.${index}.name`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`technologies.${index}.name`] }}
+                    </p>
+                  </div>
+                </div>
+                <div class="py-4">
+                  <label
+                    :for="`technology-level-${index}`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
+                  </label>
+                  <div class="mt-2">
+                    <LevelPicker
+                      v-model.number="element.level"
+                      :levels="technologyLevels"
+                    />
+                    <p
+                      v-if="form.errors[`technologies.${index}.level`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`technologies.${index}.level`] }}
+                    </p>
+                  </div>
+                </div>
+              </div>
             </template>
-            <template v-else>
-              (Nieokreślony)
+          </DynamicSection>
+          <DynamicSection
+            v-model="form.projects"
+            header="Projekty"
+            add-label="Dodaj projekt"
+            @add-item="addProject"
+            @remove-item="(index) => form.projects.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('projects', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              {{ element.description ? element.description : '(Nieokreślony)' }}
             </template>
-          </template>
-          <template #form="{ element, index }">
-            <div class="gap-4 md:grid md:grid-cols-2 ">
-              <div class="py-4">
+            <template #form="{ element, index }">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`language-${index}-level`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-description-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Język
+                  Opis projektu
                 </label>
-                <div class="mt-2">
-                  <Combobox
-                    :id="`language-${index}-level`"
-                    v-model="element.name"
-                    :items="languages"
+                <div class="mt-1 sm:mt-0">
+                  <textarea
+                    :id="`project-description-${index}`"
+                    v-model="element.description"
+                    rows="5"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.description`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.description`] }"
                   />
                   <p
-                    v-if="form.errors[`languages.${index}.name`]"
+                    v-if="form.errors[`projects.${index}.description`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`languages.${index}.name`] }}
+                    {{ form.errors[`projects.${index}.description`] }}
                   </p>
                 </div>
               </div>
-              <div class="py-4">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`language-level-${index}`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-technologies-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
+                  Technologie
                 </label>
-                <div class="mt-2">
-                  <LevelPicker
-                    v-model.number="element.level"
-                    :levels="languageLevels"
+                <div class="mt-1 sm:mt-0">
+                  <MultipleCombobox
+                    :id="`project-technologies-${index}`"
+                    v-model="element.technologies"
+                    :show-chips="true"
+                    :items="technologies"
                   />
                   <p
-                    v-if="form.errors[`languages.${index}.level`]"
+                    v-if="form.errors[`projects.${index}.technologies`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`languages.${index}.level`] }}
+                    {{ form.errors[`projects.${index}.technologies`] }}
                   </p>
                 </div>
               </div>
-            </div>
-          </template>
-        </DynamicSection>
-        <DynamicSection
-          v-model="form.technologies"
-          header="Technologie"
-          add-label="Dodaj technologię"
-          @add-item="addTechnology"
-          @remove-item="(index) => form.technologies.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('technologies', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
-            </template>
-            <template v-if="element.name">
-              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
-            </template>
-            <template v-else>
-              (Nieokreślony)
-            </template>
-          </template>
-          <template #form="{ element, index }">
-            <div class="gap-4 md:grid md:grid-cols-2 ">
-              <div class="py-4">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`technology-${index}-level`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-startDate-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Technologia
+                  Data rozpoczęcia
                 </label>
-                <div class="mt-2">
-                  <Combobox
-                    :id="`technology-${index}-level`"
-                    v-model="element.name"
-                    :items="technologies"
+                <div class="mt-1 sm:mt-0">
+                  <MonthPicker
+                    :id="`project-startDate-${index}`"
+                    v-model="element.startDate"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.startDate`] }"
                   />
                   <p
-                    v-if="form.errors[`technologies.${index}.name`]"
+                    v-if="form.errors[`projects.${index}.startDate`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`technologies.${index}.name`] }}
+                    {{ form.errors[`projects.${index}.startDate`] }}
                   </p>
                 </div>
               </div>
-              <div class="py-4">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`technology-level-${index}`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-endDate-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
+                  Data zakończenia
                 </label>
-                <div class="mt-2">
-                  <LevelPicker
-                    v-model.number="element.level"
-                    :levels="technologyLevels"
-                  />
+                <div class="mt-1 sm:mt-0">
+                  <div class="space-y-2">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                      <input
+                        v-model="element.current"
+                        type="checkbox"
+                        class="focus:ring-blumilk-500 size-4 text-blumilk-600 border-gray-300 rounded mr-1"
+                      >
+                      W trakcie
+                    </label>
+                    <MonthPicker
+                      :id="`project-endDate-${index}`"
+                      v-model="element.endDate"
+                      :disabled="element.current"
+                      class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
+                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.endDate`] }"
+                    />
+                  </div>
                   <p
-                    v-if="form.errors[`technologies.${index}.level`]"
+                    v-if="form.errors[`projects.${index}.endDate`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`technologies.${index}.level`] }}
+                    {{ form.errors[`projects.${index}.endDate`] }}
                   </p>
                 </div>
               </div>
-            </div>
-          </template>
-        </DynamicSection>
-        <DynamicSection
-          v-model="form.projects"
-          header="Projekty"
-          add-label="Dodaj projekt"
-          @add-item="addProject"
-          @remove-item="(index) => form.projects.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('projects', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
-            </template>
-            {{ element.description ? element.description : '(Nieokreślony)' }}
-          </template>
-          <template #form="{ element, index }">
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-description-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Opis projektu
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <textarea
-                  :id="`project-description-${index}`"
-                  v-model="element.description"
-                  rows="5"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.description`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.description`] }"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.description`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.description`] }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-technologies-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Technologie
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <MultipleCombobox
-                  :id="`project-technologies-${index}`"
-                  v-model="element.technologies"
-                  :show-chips="true"
-                  :items="technologies"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.technologies`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.technologies`] }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-startDate-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data rozpoczęcia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <MonthPicker
-                  :id="`project-startDate-${index}`"
-                  v-model="element.startDate"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.startDate`] }"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.startDate`]"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label
+                  :for="`project-tasks-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors[`projects.${index}.startDate`] }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-endDate-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data zakończenia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <div class="space-y-2">
-                  <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                    <input
-                      v-model="element.current"
-                      type="checkbox"
-                      class="focus:ring-blumilk-500 h-4 w-4 text-blumilk-600 border-gray-300 rounded mr-1"
-                    >
-                    W trakcie
-                  </label>
-                  <MonthPicker
-                    :id="`project-endDate-${index}`"
-                    v-model="element.endDate"
-                    :disabled="element.current"
-                    class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
-                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.endDate`] }"
+                  Zadania
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <textarea
+                    :id="`project-tasks-${index}`"
+                    v-model="element.tasks"
+                    rows="5"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.tasks`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.tasks`] }"
                   />
+                  <p
+                    v-if="form.errors[`projects.${index}.tasks`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`projects.${index}.tasks`] }}
+                  </p>
                 </div>
-                <p
-                  v-if="form.errors[`projects.${index}.endDate`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.endDate`] }}
-                </p>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-tasks-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
+            </template>
+          </DynamicSection>
+          <div class="pt-5">
+            <div class="flex justify-end">
+              <InertiaLink
+                href="/resumes"
+                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
               >
-                Zadania
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <textarea
-                  :id="`project-tasks-${index}`"
-                  v-model="element.tasks"
-                  rows="5"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.tasks`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.tasks`] }"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.tasks`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.tasks`] }}
-                </p>
-              </div>
+                Anuluj
+              </InertiaLink>
+              <button
+                type="submit"
+                class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :disabled="form.processing || !form.isDirty"
+              >
+                Dodaj
+              </button>
             </div>
-          </template>
-        </DynamicSection>
-        <div class="pt-5">
-          <div class="flex justify-end">
-            <InertiaLink
-              href="/resumes"
-              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            >
-              Anuluj
-            </InertiaLink>
-            <button
-              type="submit"
-              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-              :disabled="form.processing || !form.isDirty"
-            >
-              Dodaj
-            </button>
           </div>
         </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Resumes/Edit.vue b/resources/js/Pages/Resumes/Edit.vue
index 44f7560b..a68f8dcf 100644
--- a/resources/js/Pages/Resumes/Edit.vue
+++ b/resources/js/Pages/Resumes/Edit.vue
@@ -2,13 +2,15 @@
 import { Listbox, ListboxOption, ListboxOptions, ListboxLabel, ListboxButton } from '@headlessui/vue'
 import { ChevronUpDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/solid'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import MonthPicker from '@/Shared/Forms/MonthPicker.vue'
 import DynamicSection from '@/Shared/Forms/DynamicSection.vue'
 import Combobox from '@/Shared/Forms/Combobox.vue'
 import MultipleCombobox from '@/Shared/Forms/MultipleCombobox.vue'
 import LevelPicker from '@/Shared/Forms/LevelPicker.vue'
 import useLevels from '@/Composables/useLevels.js'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   users: Object,
@@ -110,544 +112,546 @@ function submitResume() {
 </script>
 
 <template>
-  <InertiaHead title="Edycja CV" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Edytuj CV
-      </h2>
-    </div>
-    <form
-      class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200"
-      @submit.prevent="submitResume"
-    >
-      <div class="space-y-8 sm:space-y-5">
-        <div>
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Dane podstawowe
-          </h3>
-          <div class="grid grid-cols-2 gap-8 py-4">
-            <Listbox
-              v-model="form.user"
-              as="div"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Użytkownik
-              </ListboxLabel>
-              <div class="relative mt-2">
-                <ListboxButton
-                  class="relative py-2 pr-10 pl-3 w-full max-w-md h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-                >
-                  <span v-if="form.user === null">
-                    Nie istnieje w bazie
-                  </span>
-                  <span
-                    v-else
-                    class="flex items-center"
+  <AppLayout>
+    <template #title>Edycja CV</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Edytuj CV
+        </h2>
+      </div>
+      <form
+        class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200"
+        @submit.prevent="submitResume"
+      >
+        <div class="space-y-8 sm:space-y-5">
+          <div>
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Dane podstawowe
+            </h3>
+            <div class="grid grid-cols-2 gap-8 py-4">
+              <Listbox
+                v-model="form.user"
+                as="div"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Użytkownik
+                </ListboxLabel>
+                <div class="relative mt-2">
+                  <ListboxButton
+                    class="relative py-2 pr-10 pl-3 w-full max-w-md h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
                   >
-                    <img
-                      :src="form.user.avatar"
-                      class="shrink-0 w-6 h-6 rounded-full"
+                    <span v-if="form.user === null">
+                      Nie istnieje w bazie
+                    </span>
+                    <span
+                      v-else
+                      class="flex items-center"
                     >
-                    <span class="block ml-3 truncate">{{ form.user.name }}</span>
-                  </span>
-                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                    <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                  </span>
-                </ListboxButton>
+                      <img
+                        :src="form.user.avatar"
+                        class="shrink-0 size-6 rounded-full"
+                      >
+                      <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                    </span>
+                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                      <ChevronUpDownIcon class="size-5 text-gray-400" />
+                    </span>
+                  </ListboxButton>
 
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
                   >
-                    <ListboxOption
-                      v-slot="{ active }"
-                      as="template"
-                      :value="null"
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li
-                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      <ListboxOption
+                        v-slot="{ active }"
+                        as="template"
+                        :value="null"
                       >
-                        <div class="flex items-center">
-                          Nie istnieje w bazie
-                        </div>
-
-                        <span
-                          v-if="form.user === null"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        <li
+                          :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                         >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                    <ListboxOption
-                      v-for="user in users.data"
-                      :key="user.id"
-                      v-slot="{ active }"
-                      as="template"
-                      :value="user"
-                    >
-                      <li
-                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
-                      >
-                        <div class="flex items-center">
-                          <img
-                            :src="user.avatar"
-                            class="shrink-0 w-6 h-6 rounded-full"
-                          >
+                          <div class="flex items-center">
+                            Nie istnieje w bazie
+                          </div>
+
                           <span
-                            :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                            v-if="form.user === null"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                           >
-                            {{ user.name }}
+                            <CheckIcon class="size-5" />
                           </span>
-                        </div>
-                        <span
-                          v-if="form.user?.id === user.id"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        </li>
+                      </ListboxOption>
+                      <ListboxOption
+                        v-for="user in users.data"
+                        :key="user.id"
+                        v-slot="{ active }"
+                        as="template"
+                        :value="user"
+                      >
+                        <li
+                          :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                         >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-              </div>
-            </Listbox>
-            <div v-if="form.user === null">
-              <label
-                for="name"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Imię i nazwisko
-              </label>
-              <div class="mt-2">
-                <input
-                  id="name"
-                  v-model="form.name"
-                  type="text"
-                  class="block w-full max-w-md rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
-                >
-                <p
-                  v-if="form.errors.name"
-                  class="mt-2 text-sm text-red-600"
+                          <div class="flex items-center">
+                            <img
+                              :src="user.avatar"
+                              class="shrink-0 size-6 rounded-full"
+                            >
+                            <span
+                              :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                            >
+                              {{ user.name }}
+                            </span>
+                          </div>
+                          <span
+                            v-if="form.user?.id === user.id"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                </div>
+              </Listbox>
+              <div v-if="form.user === null">
+                <label
+                  for="name"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors.name }}
-                </p>
+                  Imię i nazwisko
+                </label>
+                <div class="mt-2">
+                  <input
+                    id="name"
+                    v-model="form.name"
+                    type="text"
+                    class="block w-full max-w-md rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                  >
+                  <p
+                    v-if="form.errors.name"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.name }}
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <DynamicSection
-          v-model="form.educations"
-          header="Edukacja"
-          add-label="Dodaj szkołę"
-          @add-item="addEducation"
-          @remove-item="(index) => form.educations.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('education', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
+          <DynamicSection
+            v-model="form.educations"
+            header="Edukacja"
+            add-label="Dodaj szkołę"
+            @add-item="addEducation"
+            @remove-item="(index) => form.educations.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('education', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              {{ element.school ? element.school : '(Nieokreślony)' }}
             </template>
-            {{ element.school ? element.school : '(Nieokreślony)' }}
-          </template>
-          <template #form="{ element, index }">
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Szkoła
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  v-model="element.school"
-                  type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.school`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.school`] }"
-                >
-                <p
-                  v-if="form.errors[`education.${index}.school`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.school`] }}
-                </p>
+            <template #form="{ element, index }">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Szkoła
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <input
+                    v-model="element.school"
+                    type="text"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.school`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.school`] }"
+                  >
+                  <p
+                    v-if="form.errors[`education.${index}.school`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.school`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Stopień
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  v-model="element.degree"
-                  type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.degree`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.degree`] }"
-                >
-                <p
-                  v-if="form.errors[`education.${index}.degree`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.degree`] }}
-                </p>
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Stopień
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <input
+                    v-model="element.degree"
+                    type="text"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.degree`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.degree`] }"
+                  >
+                  <p
+                    v-if="form.errors[`education.${index}.degree`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.degree`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Kierunek/Specjalizacja
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  v-model="element.fieldOfStudy"
-                  type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.fieldOfStudy`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.fieldOfStudy`] }"
-                >
-                <p
-                  v-if="form.errors[`education.${index}.fieldOfStudy`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.fieldOfStudy`] }}
-                </p>
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Kierunek/Specjalizacja
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <input
+                    v-model="element.fieldOfStudy"
+                    type="text"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.fieldOfStudy`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.fieldOfStudy`] }"
+                  >
+                  <p
+                    v-if="form.errors[`education.${index}.fieldOfStudy`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.fieldOfStudy`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Data rozpoczęcia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <MonthPicker
-                  v-model="element.startDate"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.startDate`] }"
-                />
-                <p
-                  v-if="form.errors[`education.${index}.startDate`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.startDate`] }}
-                </p>
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Data rozpoczęcia
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <MonthPicker
+                    v-model="element.startDate"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.startDate`] }"
+                  />
+                  <p
+                    v-if="form.errors[`education.${index}.startDate`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.startDate`] }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                Data zakończenia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <div class="space-y-2">
-                  <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                    <input
-                      v-model="element.current"
-                      type="checkbox"
-                      class="focus:ring-blumilk-500 h-4 w-4 text-blumilk-600 border-gray-300 rounded mr-1"
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                  Data zakończenia
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <div class="space-y-2">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                      <input
+                        v-model="element.current"
+                        type="checkbox"
+                        class="focus:ring-blumilk-500 size-4 text-blumilk-600 border-gray-300 rounded mr-1"
+                      >
+                      W trakcie
+                    </label>
+                    <MonthPicker
+                      v-model="element.endDate"
+                      :disabled="element.current"
+                      class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
+                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.endDate`] }"
+                    />
+                  </div>
+                  <p
+                    v-if="form.errors[`education.${index}.endDate`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`education.${index}.endDate`] }}
+                  </p>
+                </div>
+              </div>
+            </template>
+          </DynamicSection>
+          <DynamicSection
+            v-model="form.languages"
+            header="Języki"
+            add-label="Dodaj język"
+            @add-item="addLanguage"
+            @remove-item="(index) => form.languages.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('languages', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              <template v-if="element.name">
+                {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+              </template>
+              <template v-else>
+                (Nieokreślony)
+              </template>
+            </template>
+            <template #form="{ element, index }">
+              <div class="gap-4 md:grid md:grid-cols-2 ">
+                <div class="py-4">
+                  <label
+                    :for="`language-${index}-level`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Język
+                  </label>
+                  <div class="mt-2">
+                    <Combobox
+                      :id="`language-${index}-level`"
+                      v-model="element.name"
+                      :items="languages"
+                    />
+                    <p
+                      v-if="form.errors[`languages.${index}.name`]"
+                      class="mt-2 text-sm text-red-600"
                     >
-                    W trakcie
+                      {{ form.errors[`languages.${index}.name`] }}
+                    </p>
+                  </div>
+                </div>
+                <div class="py-4">
+                  <label
+                    :for="`language-level-${index}`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
                   </label>
-                  <MonthPicker
-                    v-model="element.endDate"
-                    :disabled="element.current"
-                    class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
-                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.endDate`] }"
-                  />
+                  <div class="mt-2">
+                    <LevelPicker
+                      v-model.number="element.level"
+                      :levels="languageLevels"
+                    />
+                    <p
+                      v-if="form.errors[`languages.${index}.level`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`languages.${index}.level`] }}
+                    </p>
+                  </div>
                 </div>
-                <p
-                  v-if="form.errors[`education.${index}.endDate`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`education.${index}.endDate`] }}
-                </p>
               </div>
-            </div>
-          </template>
-        </DynamicSection>
-        <DynamicSection
-          v-model="form.languages"
-          header="Języki"
-          add-label="Dodaj język"
-          @add-item="addLanguage"
-          @remove-item="(index) => form.languages.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('languages', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
             </template>
-            <template v-if="element.name">
-              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+          </DynamicSection>
+          <DynamicSection
+            v-model="form.technologies"
+            header="Technologie"
+            add-label="Dodaj technologię"
+            @add-item="addTechnology"
+            @remove-item="(index) => form.technologies.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('technologies', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              <template v-if="element.name">
+                {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+              </template>
+              <template v-else>
+                (Nieokreślony)
+              </template>
+            </template>
+            <template #form="{ element, index }">
+              <div class="gap-4 md:grid md:grid-cols-2 ">
+                <div class="py-4">
+                  <label
+                    :for="`technology-${index}-level`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Technologia
+                  </label>
+                  <div class="mt-2">
+                    <Combobox
+                      :id="`technology-${index}-level`"
+                      v-model="element.name"
+                      :items="technologies"
+                    />
+                    <p
+                      v-if="form.errors[`technologies.${index}.name`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`technologies.${index}.name`] }}
+                    </p>
+                  </div>
+                </div>
+                <div class="py-4">
+                  <label
+                    :for="`technology-level-${index}`"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
+                  </label>
+                  <div class="mt-2">
+                    <LevelPicker
+                      v-model.number="element.level"
+                      :levels="technologyLevels"
+                    />
+                    <p
+                      v-if="form.errors[`technologies.${index}.level`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`technologies.${index}.level`] }}
+                    </p>
+                  </div>
+                </div>
+              </div>
             </template>
-            <template v-else>
-              (Nieokreślony)
+          </DynamicSection>
+          <DynamicSection
+            v-model="form.projects"
+            header="Projekty"
+            add-label="Dodaj projekt"
+            @add-item="addProject"
+            @remove-item="(index) => form.projects.splice(index, 1)"
+          >
+            <template #itemHeader="{ element, index }">
+              <template v-if="hasAnyErrorInSection('projects', index)">
+                <ExclamationCircleIcon class="size-6 mr-2 text-red-600 inline-block" />
+              </template>
+              {{ element.description ? element.description : '(Nieokreślony)' }}
             </template>
-          </template>
-          <template #form="{ element, index }">
-            <div class="gap-4 md:grid md:grid-cols-2 ">
-              <div class="py-4">
+            <template #form="{ element, index }">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`language-${index}-level`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-description-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Język
+                  Opis projektu
                 </label>
-                <div class="mt-2">
-                  <Combobox
-                    :id="`language-${index}-level`"
-                    v-model="element.name"
-                    :items="languages"
+                <div class="mt-1 sm:mt-0">
+                  <textarea
+                    :id="`project-description-${index}`"
+                    v-model="element.description"
+                    rows="5"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.description`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.description`] }"
                   />
                   <p
-                    v-if="form.errors[`languages.${index}.name`]"
+                    v-if="form.errors[`projects.${index}.description`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`languages.${index}.name`] }}
+                    {{ form.errors[`projects.${index}.description`] }}
                   </p>
                 </div>
               </div>
-              <div class="py-4">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`language-level-${index}`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-technologies-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
+                  Technologie
                 </label>
-                <div class="mt-2">
-                  <LevelPicker
-                    v-model.number="element.level"
-                    :levels="languageLevels"
+                <div class="mt-1 sm:mt-0">
+                  <MultipleCombobox
+                    :id="`project-technologies-${index}`"
+                    v-model="element.technologies"
+                    :show-chips="true"
+                    :items="technologies"
                   />
                   <p
-                    v-if="form.errors[`languages.${index}.level`]"
+                    v-if="form.errors[`projects.${index}.technologies`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`languages.${index}.level`] }}
+                    {{ form.errors[`projects.${index}.technologies`] }}
                   </p>
                 </div>
               </div>
-            </div>
-          </template>
-        </DynamicSection>
-        <DynamicSection
-          v-model="form.technologies"
-          header="Technologie"
-          add-label="Dodaj technologię"
-          @add-item="addTechnology"
-          @remove-item="(index) => form.technologies.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('technologies', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
-            </template>
-            <template v-if="element.name">
-              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
-            </template>
-            <template v-else>
-              (Nieokreślony)
-            </template>
-          </template>
-          <template #form="{ element, index }">
-            <div class="gap-4 md:grid md:grid-cols-2 ">
-              <div class="py-4">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`technology-${index}-level`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-startDate-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Technologia
+                  Data rozpoczęcia
                 </label>
-                <div class="mt-2">
-                  <Combobox
-                    :id="`technology-${index}-level`"
-                    v-model="element.name"
-                    :items="technologies"
+                <div class="mt-1 sm:mt-0">
+                  <MonthPicker
+                    :id="`project-startDate-${index}`"
+                    v-model="element.startDate"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.startDate`] }"
                   />
                   <p
-                    v-if="form.errors[`technologies.${index}.name`]"
+                    v-if="form.errors[`projects.${index}.startDate`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`technologies.${index}.name`] }}
+                    {{ form.errors[`projects.${index}.startDate`] }}
                   </p>
                 </div>
               </div>
-              <div class="py-4">
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
                 <label
-                  :for="`technology-level-${index}`"
-                  class="block text-sm font-medium text-gray-700"
+                  :for="`project-endDate-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
+                  Data zakończenia
                 </label>
-                <div class="mt-2">
-                  <LevelPicker
-                    v-model.number="element.level"
-                    :levels="technologyLevels"
-                  />
+                <div class="mt-1 sm:mt-0">
+                  <div class="space-y-2">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+                      <input
+                        v-model="element.current"
+                        type="checkbox"
+                        class="focus:ring-blumilk-500 size-4 text-blumilk-600 border-gray-300 rounded mr-1"
+                      >
+                      W trakcie
+                    </label>
+                    <MonthPicker
+                      :id="`project-endDate-${index}`"
+                      v-model="element.endDate"
+                      :disabled="element.current"
+                      class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
+                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.endDate`] }"
+                    />
+                  </div>
                   <p
-                    v-if="form.errors[`technologies.${index}.level`]"
+                    v-if="form.errors[`projects.${index}.endDate`]"
                     class="mt-2 text-sm text-red-600"
                   >
-                    {{ form.errors[`technologies.${index}.level`] }}
+                    {{ form.errors[`projects.${index}.endDate`] }}
                   </p>
                 </div>
               </div>
-            </div>
-          </template>
-        </DynamicSection>
-        <DynamicSection
-          v-model="form.projects"
-          header="Projekty"
-          add-label="Dodaj projekt"
-          @add-item="addProject"
-          @remove-item="(index) => form.projects.splice(index, 1)"
-        >
-          <template #itemHeader="{ element, index }">
-            <template v-if="hasAnyErrorInSection('projects', index)">
-              <ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
-            </template>
-            {{ element.description ? element.description : '(Nieokreślony)' }}
-          </template>
-          <template #form="{ element, index }">
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-description-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Opis projektu
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <textarea
-                  :id="`project-description-${index}`"
-                  v-model="element.description"
-                  rows="5"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.description`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.description`] }"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.description`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.description`] }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-technologies-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Technologie
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <MultipleCombobox
-                  :id="`project-technologies-${index}`"
-                  v-model="element.technologies"
-                  :show-chips="true"
-                  :items="technologies"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.technologies`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.technologies`] }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-startDate-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data rozpoczęcia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <MonthPicker
-                  :id="`project-startDate-${index}`"
-                  v-model="element.startDate"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.startDate`] }"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.startDate`]"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-2">
+                <label
+                  :for="`project-tasks-${index}`"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors[`projects.${index}.startDate`] }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-endDate-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data zakończenia
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <div class="space-y-2">
-                  <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                    <input
-                      v-model="element.current"
-                      type="checkbox"
-                      class="focus:ring-blumilk-500 h-4 w-4 text-blumilk-600 border-gray-300 rounded mr-1"
-                    >
-                    W trakcie
-                  </label>
-                  <MonthPicker
-                    :id="`project-endDate-${index}`"
-                    v-model="element.endDate"
-                    :disabled="element.current"
-                    class="block w-full rounded-md shadow-sm sm:text-sm disabled:bg-gray-100"
-                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.endDate`] }"
+                  Zadania
+                </label>
+                <div class="mt-1 sm:mt-0">
+                  <textarea
+                    :id="`project-tasks-${index}`"
+                    v-model="element.tasks"
+                    rows="5"
+                    class="block w-full rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.tasks`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.tasks`] }"
                   />
+                  <p
+                    v-if="form.errors[`projects.${index}.tasks`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`projects.${index}.tasks`] }}
+                  </p>
                 </div>
-                <p
-                  v-if="form.errors[`projects.${index}.endDate`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.endDate`] }}
-                </p>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                :for="`project-tasks-${index}`"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
+            </template>
+          </DynamicSection>
+          <div class="pt-5">
+            <div class="flex justify-end">
+              <InertiaLink
+                href="/resumes"
+                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
               >
-                Zadania
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <textarea
-                  :id="`project-tasks-${index}`"
-                  v-model="element.tasks"
-                  rows="5"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.tasks`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.tasks`] }"
-                />
-                <p
-                  v-if="form.errors[`projects.${index}.tasks`]"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors[`projects.${index}.tasks`] }}
-                </p>
-              </div>
+                Anuluj
+              </InertiaLink>
+              <button
+                type="submit"
+                class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :disabled="form.processing || !form.isDirty"
+              >
+                Zapisz
+              </button>
             </div>
-          </template>
-        </DynamicSection>
-        <div class="pt-5">
-          <div class="flex justify-end">
-            <InertiaLink
-              href="/resumes"
-              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            >
-              Anuluj
-            </InertiaLink>
-            <button
-              type="submit"
-              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-              :disabled="form.processing || !form.isDirty"
-            >
-              Zapisz
-            </button>
           </div>
         </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Resumes/Index.vue b/resources/js/Pages/Resumes/Index.vue
index 7683d337..98cfeb6a 100644
--- a/resources/js/Pages/Resumes/Index.vue
+++ b/resources/js/Pages/Resumes/Index.vue
@@ -5,6 +5,8 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import Pagination from '@/Shared/Pagination.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
   resumes: Object,
@@ -12,208 +14,210 @@ defineProps({
 </script>
 
 <template>
-  <InertiaHead title="CV" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Lista CV
-      </h2>
-      <div>
-        <InertiaLink
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="resumes/create"
-        >
-          Dodaj CV
-        </InertiaLink>
+  <AppLayout>
+    <template #title>CV</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Lista CV
+        </h2>
+        <div>
+          <InertiaLink
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="resumes/create"
+          >
+            Dodaj CV
+          </InertiaLink>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Użytkownik
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Data utworzenia
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Data aktualizacji
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Szkoły
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Języki
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Technologie
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Projekty
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="resume in resumes.data"
-              :key="resume.id"
-              :class="[resume.user?.isActive ? '' : 'bg-gray-100', 'hover:bg-blumilk-25']"
-            >
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <div
-                  v-if="resume.user"
-                  class="flex"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
                 >
-                  <UserProfileLink
-                    :user="resume.user"
-                    class="flex"
-                  >
-                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                      <img
-                        :src="resume.user.avatar"
-                        class="w-10 h-10 rounded-full"
-                      >
-                    </span>
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ resume.user.name }}
-                      </p>
-                      <p class="text-sm text-gray-500 break-all">
-                        {{ resume.user.email }}
-                      </p>
-                    </div>
-                  </UserProfileLink>
-                </div>
-                <template v-else>
-                  <span class="text-sm font-medium text-gray-900 break-all">{{ resume.name }}</span>
-                </template>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.createdAt }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.updatedAt }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.educationCount }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.languageCount }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.technologyCount }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.projectCount }}
-              </td>
-              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
+                  Użytkownik
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
-                  >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
-
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
+                  Data utworzenia
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Data aktualizacji
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Szkoły
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Języki
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Technologie
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Projekty
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="resume in resumes.data"
+                :key="resume.id"
+                :class="[resume.user?.isActive ? '' : 'bg-gray-100', 'hover:bg-blumilk-25']"
+              >
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <div
+                    v-if="resume.user"
+                    class="flex"
                   >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <UserProfileLink
+                      :user="resume.user"
+                      class="flex"
                     >
-                      <div class="py-1">
-                        <MenuItem v-slot="{ active }">
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 flex text-sm']"
-                            :href="`/resumes/${resume.id}/edit`"
-                          >
-                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" />
-                            Edytuj
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem v-slot="{ active }">
-                          <a
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 flex text-sm']"
-                            :href="`/resumes/${resume.id}`"
-                          >
-                            <ArrowDownTrayIcon class="mr-2 w-5 h-5 text-blumilk-500" />
-                            Pobierz
-                          </a>
-                        </MenuItem>
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
+                        <img
+                          :src="resume.user.avatar"
+                          class="size-10 rounded-full"
                         >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/resumes/${resume.id}`"
-                            :preserve-scroll="true"
-                            as="button"
-                            method="delete"
-                          >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
+                      </span>
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900 break-all">
+                          {{ resume.user.name }}
+                        </p>
+                        <p class="text-sm text-gray-500 break-all">
+                          {{ resume.user.email }}
+                        </p>
                       </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!resumes.data.length">
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
-              >
-                <EmptyState>
-                  <template #title>
-                    Brak CV
+                    </UserProfileLink>
+                  </div>
+                  <template v-else>
+                    <span class="text-sm font-medium text-gray-900 break-all">{{ resume.name }}</span>
                   </template>
-                  <template #text>
-                    Brak wpisów dotyczących CV
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ resume.createdAt }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ resume.updatedAt }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ resume.educationCount }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ resume.languageCount }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ resume.technologyCount }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ resume.projectCount }}
+                </td>
+                <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
+                  >
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
+
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
+                    >
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem v-slot="{ active }">
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium px-4 py-2 flex text-sm']"
+                              :href="`/resumes/${resume.id}/edit`"
+                            >
+                              <PencilIcon class="mr-2 size-5 text-blue-500" />
+                              Edytuj
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem v-slot="{ active }">
+                            <a
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'w-full text-left font-medium px-4 py-2 flex text-sm']"
+                              :href="`/resumes/${resume.id}`"
+                            >
+                              <ArrowDownTrayIcon class="mr-2 size-5 text-blumilk-500" />
+                              Pobierz
+                            </a>
+                          </MenuItem>
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
+                          >
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/resumes/${resume.id}`"
+                              :preserve-scroll="true"
+                              as="button"
+                              method="delete"
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!resumes.data.length">
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Brak CV
+                    </template>
+                    <template #text>
+                      Brak wpisów dotyczących CV
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <Pagination :pagination="resumes.meta" />
       </div>
-      <Pagination :pagination="resumes.meta" />
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Technologies.vue b/resources/js/Pages/Technologies.vue
index 15fae360..c4c0c28f 100644
--- a/resources/js/Pages/Technologies.vue
+++ b/resources/js/Pages/Technologies.vue
@@ -3,8 +3,10 @@ import { EllipsisVerticalIcon, TrashIcon } from '@heroicons/vue/24/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref } from 'vue'
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
   technologies: Object,
@@ -27,205 +29,207 @@ function submitCreateTechnology() {
 </script>
 
 <template>
-  <InertiaHead title="Technologie" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Technologie
-        </h2>
-      </div>
-      <div>
-        <button
-          type="button"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          @click="creating = true"
-        >
-          Dodaj technologię
-        </button>
+  <AppLayout>
+    <template #title>Technologie</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Technologie
+          </h2>
+        </div>
+        <div>
+          <button
+            type="button"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            @click="creating = true"
+          >
+            Dodaj technologię
+          </button>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Technologia
-              </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="technology in technologies.data"
-              :key="technology.id"
-              class="hover:bg-blumilk-25"
-            >
-              <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
-                {{ technology.name }}
-              </td>
-              <td class="px-4 py-2 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto xl:overflow-visible">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  Technologia
+                </th>
+                <th
+                  scope="col"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="technology in technologies.data"
+                :key="technology.id"
+                class="hover:bg-blumilk-25"
+              >
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-nowrap">
+                  {{ technology.name }}
+                </td>
+                <td class="px-4 py-2 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
 
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
-                  >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div class="py-1">
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            as="button"
-                            method="delete"
-                            preserve-scroll
-                            :href="`/technologies/${technology.id}`"
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr v-if="!technologies.data.length">
-              <td
-                colspan="100%"
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-              >
-                <EmptyState>
-                  <template #title>
-                    Brak technologii
-                  </template>
-                  <template #text>
-                    Brak wpisów dotyczących technologii
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                            <InertiaLink
+                              as="button"
+                              method="delete"
+                              preserve-scroll
+                              :href="`/technologies/${technology.id}`"
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr v-if="!technologies.data.length">
+                <td
+                  colspan="100%"
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Brak technologii
+                    </template>
+                    <template #text>
+                      Brak wpisów dotyczących technologii
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
-  <TransitionRoot
-    as="template"
-    :show="creating"
-  >
-    <Dialog
-      is="div"
-      class="overflow-y-auto fixed inset-0 z-10"
-      @close="creating = false"
+    <TransitionRoot
+      as="template"
+      :show="creating"
     >
-      <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </TransitionChild>
+      <Dialog
+        is="div"
+        class="overflow-y-auto fixed inset-0 z-10"
+        @close="creating = false"
+      >
+        <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+          </TransitionChild>
 
-        <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <form
-            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
-            @submit.prevent="submitCreateTechnology"
+          <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div>
+            <form
+              class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
+              @submit.prevent="submitCreateTechnology"
+            >
               <div>
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
-                >
-                  Dodaj technologię
-                </DialogTitle>
-                <div class="mt-5">
-                  <label
-                    for="name"
-                    class="block text-sm font-medium text-gray-700 sm:mt-px"
+                <div>
+                  <DialogTitle
+                    as="h3"
+                    class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
                   >
-                    Nazwa
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      id="name"
-                      v-model="form.name"
-                      type="text"
-                      class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                    Dodaj technologię
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <label
+                      for="name"
+                      class="block text-sm font-medium text-gray-700 sm:mt-px"
                     >
-                    <p
-                      v-if="form.errors.name"
-                      class="mt-2 text-sm text-red-600"
-                    >
-                      {{ form.errors.name }}
-                    </p>
+                      Nazwa
+                    </label>
+                    <div class="mt-2">
+                      <input
+                        id="name"
+                        v-model="form.name"
+                        type="text"
+                        class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                      >
+                      <p
+                        v-if="form.errors.name"
+                        class="mt-2 text-sm text-red-600"
+                      >
+                        {{ form.errors.name }}
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="mt-5 sm:mt-6">
-              <div class="flex justify-end space-x-3">
-                <button
-                  type="button"
-                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                  @click="creating = false"
-                >
-                  Anuluj
-                </button>
-                <button
-                  type="submit"
-                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
-                  :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                  :disabled="form.processing || !form.isDirty"
-                >
-                  Dodaj
-                </button>
+              <div class="mt-5 sm:mt-6">
+                <div class="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                    @click="creating = false"
+                  >
+                    Anuluj
+                  </button>
+                  <button
+                    type="submit"
+                    class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                    :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                    :disabled="form.processing || !form.isDirty"
+                  >
+                    Dodaj
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
+            </form>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/UserHistory/Create.vue b/resources/js/Pages/UserHistory/Create.vue
index 4b44eb02..97a64b52 100644
--- a/resources/js/Pages/UserHistory/Create.vue
+++ b/resources/js/Pages/UserHistory/Create.vue
@@ -1,8 +1,10 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   employmentForms: Array,
@@ -34,266 +36,268 @@ function createForm() {
 </script>
 
 <template>
-  <InertiaHead title="Dodaj wpis" />
-  <div class="mx-auto w-full max-w-7xl">
-    <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
-      <div class="p-4 sm:px-6">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Dodaj wpis
-        </h2>
-      </div>
-      <form
-        class="px-6 h-full border-t border-gray-200"
-        @submit.prevent="createForm"
-      >
-        <div class="flex flex-col justify-around h-full">
-          <div>
-            <Listbox
-              v-model="form.type"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Typ wpisu
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                >
-                  <template v-if="form.type">
-                    <span class="block truncate">
-                      {{ form.type.label }}
-                    </span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span class="!text-gray-400">Wybierz opcję</span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                </ListboxButton>
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+  <AppLayout>
+    <template #title>Dodaj wpis</template>
+    <div class="mx-auto w-full max-w-7xl">
+      <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Dodaj wpis
+          </h2>
+        </div>
+        <form
+          class="px-6 h-full border-t border-gray-200"
+          @submit.prevent="createForm"
+        >
+          <div class="flex flex-col justify-around h-full">
+            <div>
+              <Listbox
+                v-model="form.type"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Typ wpisu
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                  >
+                    <template v-if="form.type">
+                      <span class="block truncate">
+                        {{ form.type.label }}
+                      </span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span class="!text-gray-400">Wybierz opcję</span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                  </ListboxButton>
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
                   >
-                    <ListboxOption
-                      v-for="type in types"
-                      :key="type.value"
-                      v-slot="{ active, selected }"
-                      :value="type"
-                      as="template"
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          {{ type.label }}
-                        </span>
+                      <ListboxOption
+                        v-for="type in types"
+                        :key="type.value"
+                        v-slot="{ active, selected }"
+                        :value="type"
+                        as="template"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                            {{ type.label }}
+                          </span>
 
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.type"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors.type }}
-                </p>
-              </div>
-            </Listbox>
-            <Listbox
-              v-if="form.type?.value === 'employment'"
-              v-model="form.employmentForm"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Forma zatrudnienia
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                >
-                  <template v-if="form.employmentForm">
-                    <span class="block truncate">
-                      {{ form.employmentForm.label }}
-                    </span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span class="!text-gray-400">Wybierz opcję</span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                </ListboxButton>
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.type"
+                    class="mt-2 text-sm text-red-600"
                   >
-                    <ListboxOption
-                      v-for="employmentForm in employmentForms"
-                      :key="employmentForm.value"
-                      v-slot="{ active, selected }"
-                      :value="employmentForm"
-                      as="template"
+                    {{ form.errors.type }}
+                  </p>
+                </div>
+              </Listbox>
+              <Listbox
+                v-if="form.type?.value === 'employment'"
+                v-model="form.employmentForm"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Forma zatrudnienia
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                  >
+                    <template v-if="form.employmentForm">
+                      <span class="block truncate">
+                        {{ form.employmentForm.label }}
+                      </span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span class="!text-gray-400">Wybierz opcję</span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                  </ListboxButton>
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                  >
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          {{ employmentForm.label }}
-                        </span>
+                      <ListboxOption
+                        v-for="employmentForm in employmentForms"
+                        :key="employmentForm.value"
+                        v-slot="{ active, selected }"
+                        :value="employmentForm"
+                        as="template"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                            {{ employmentForm.label }}
+                          </span>
 
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.employmentForm"
-                  class="mt-2 text-sm text-red-600"
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.employmentForm"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.employmentForm }}
+                  </p>
+                </div>
+              </Listbox>
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
+                  for="date_from"
                 >
-                  {{ form.errors.employmentForm }}
-                </p>
+                  Data od
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_from"
+                    v-model="form.from"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                  />
+                  <p
+                    v-if="form.errors.from"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.from }}
+                  </p>
+                </div>
               </div>
-            </Listbox>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-                for="date_from"
-              >
-                Data od
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_from"
-                  v-model="form.from"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
-                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                />
-                <p
-                  v-if="form.errors.from"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
+                  for="date_from"
                 >
-                  {{ form.errors.from }}
-                </p>
+                  Data do
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_to"
+                    v-model="form.to"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                  />
+                  <p
+                    v-if="form.errors.to"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.to }}
+                  </p>
+                </div>
               </div>
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-3">
               <label
+                for="comment"
                 class="block text-sm font-medium text-gray-700 sm:mt-px"
-                for="date_from"
               >
-                Data do
+                Komentarz
+                <span class="text-xs text-gray-500">
+                  (opcjonalny)
+                </span>
               </label>
               <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_to"
-                  v-model="form.to"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+                <input
+                  id="comment"
+                  v-model="form.comment"
+                  type="text"
                   class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                />
+                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.comment, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.comment }"
+                >
                 <p
-                  v-if="form.errors.to"
+                  v-if="form.errors.comment"
                   class="mt-2 text-sm text-red-600"
                 >
-                  {{ form.errors.to }}
+                  {{ form.errors.comment }}
                 </p>
               </div>
             </div>
-          </div>
-          <div class="items-center py-4 sm:grid sm:grid-cols-3">
-            <label
-              for="comment"
-              class="block text-sm font-medium text-gray-700 sm:mt-px"
-            >
-              Komentarz
-              <span class="text-xs text-gray-500">
-                (opcjonalny)
-              </span>
-            </label>
-            <div class="mt-1 sm:col-span-2 sm:mt-0">
-              <input
-                id="comment"
-                v-model="form.comment"
-                type="text"
-                class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.comment, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.comment }"
-              >
-              <p
-                v-if="form.errors.comment"
-                class="mt-2 text-sm text-red-600"
-              >
-                {{ form.errors.comment }}
-              </p>
-            </div>
-          </div>
-          <div
-            v-if="form.type?.value === 'employment'"
-            class="items-center py-4 sm:grid sm:grid-cols-3"
-          >
-            <label
-              for="flowSkipped"
-              class="block text-sm font-medium text-gray-700"
+            <div
+              v-if="form.type?.value === 'employment'"
+              class="items-center py-4 sm:grid sm:grid-cols-3"
             >
-              Zatrudniony w obecnej firmie
-            </label>
-            <div class="mt-2 sm:col-span-2 sm:mt-0">
-              <Switch
-                id="flowSkipped"
-                v-model="form.isEmployedAtCurrentCompany"
-                :class="[form.isEmployedAtCurrentCompany ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+              <label
+                for="flowSkipped"
+                class="block text-sm font-medium text-gray-700"
               >
-                <span
-                  :class="[form.isEmployedAtCurrentCompany ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-                />
-              </Switch>
+                Zatrudniony w obecnej firmie
+              </label>
+              <div class="mt-2 sm:col-span-2 sm:mt-0">
+                <Switch
+                  id="flowSkipped"
+                  v-model="form.isEmployedAtCurrentCompany"
+                  :class="[form.isEmployedAtCurrentCompany ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                >
+                  <span
+                    :class="[form.isEmployedAtCurrentCompany ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+                  />
+                </Switch>
+              </div>
             </div>
-          </div>
-          <div class="flex justify-end py-3">
-            <div class="space-x-3">
-              <InertiaLink
-                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :href="`/users/${props.userId}/history`"
-              >
-                Anuluj
-              </InertiaLink>
-              <button
-                :class="[form.processing ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing"
-                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                type="submit"
-              >
-                Dodaj
-              </button>
+            <div class="flex justify-end py-3">
+              <div class="space-x-3">
+                <InertiaLink
+                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  :href="`/users/${props.userId}/history`"
+                >
+                  Anuluj
+                </InertiaLink>
+                <button
+                  :class="[form.processing ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                  :disabled="form.processing"
+                  class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  type="submit"
+                >
+                  Dodaj
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/UserHistory/Edit.vue b/resources/js/Pages/UserHistory/Edit.vue
index 7cec0f57..9b1c0a1d 100644
--- a/resources/js/Pages/UserHistory/Edit.vue
+++ b/resources/js/Pages/UserHistory/Edit.vue
@@ -1,8 +1,10 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   employmentForms: Array,
@@ -33,266 +35,268 @@ function updateForm() {
 </script>
 
 <template>
-  <InertiaHead title="Edytuj wpis" />
-  <div class="mx-auto w-full max-w-7xl">
-    <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
-      <div class="p-4 sm:px-6">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Edytuj wpis
-        </h2>
-      </div>
-      <form
-        class="px-6 h-full border-t border-gray-200"
-        @submit.prevent="updateForm"
-      >
-        <div class="flex flex-col justify-around h-full">
-          <div>
-            <Listbox
-              v-model="form.type"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Typ wpisu
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                >
-                  <template v-if="form.type">
-                    <span class="block truncate">
-                      {{ form.type.label }}
-                    </span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span class="!text-gray-400">Wybierz opcję</span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                </ListboxButton>
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+  <AppLayout>
+    <template #title>Edytuj wpis</template>
+    <div class="mx-auto w-full max-w-7xl">
+      <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Edytuj wpis
+          </h2>
+        </div>
+        <form
+          class="px-6 h-full border-t border-gray-200"
+          @submit.prevent="updateForm"
+        >
+          <div class="flex flex-col justify-around h-full">
+            <div>
+              <Listbox
+                v-model="form.type"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Typ wpisu
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                  >
+                    <template v-if="form.type">
+                      <span class="block truncate">
+                        {{ form.type.label }}
+                      </span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span class="!text-gray-400">Wybierz opcję</span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                  </ListboxButton>
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
                   >
-                    <ListboxOption
-                      v-for="type in types"
-                      :key="type.value"
-                      v-slot="{ active, selected }"
-                      :value="type"
-                      as="template"
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          {{ type.label }}
-                        </span>
+                      <ListboxOption
+                        v-for="type in types"
+                        :key="type.value"
+                        v-slot="{ active, selected }"
+                        :value="type"
+                        as="template"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                            {{ type.label }}
+                          </span>
 
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.type"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors.type }}
-                </p>
-              </div>
-            </Listbox>
-            <Listbox
-              v-if="form.type?.value === 'employment'"
-              v-model="form.employmentForm"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Forma zatrudnienia
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                >
-                  <template v-if="form.employmentForm">
-                    <span class="block truncate">
-                      {{ form.employmentForm.label }}
-                    </span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span class="!text-gray-400">Wybierz opcję</span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                </ListboxButton>
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.type"
+                    class="mt-2 text-sm text-red-600"
                   >
-                    <ListboxOption
-                      v-for="employmentForm in employmentForms"
-                      :key="employmentForm.value"
-                      v-slot="{ active, selected }"
-                      :value="employmentForm"
-                      as="template"
+                    {{ form.errors.type }}
+                  </p>
+                </div>
+              </Listbox>
+              <Listbox
+                v-if="form.type?.value === 'employment'"
+                v-model="form.employmentForm"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Forma zatrudnienia
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                  >
+                    <template v-if="form.employmentForm">
+                      <span class="block truncate">
+                        {{ form.employmentForm.label }}
+                      </span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span class="!text-gray-400">Wybierz opcję</span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                  </ListboxButton>
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                  >
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          {{ employmentForm.label }}
-                        </span>
+                      <ListboxOption
+                        v-for="employmentForm in employmentForms"
+                        :key="employmentForm.value"
+                        v-slot="{ active, selected }"
+                        :value="employmentForm"
+                        as="template"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                            {{ employmentForm.label }}
+                          </span>
 
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.employmentForm"
-                  class="mt-2 text-sm text-red-600"
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.employmentForm"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.employmentForm }}
+                  </p>
+                </div>
+              </Listbox>
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
+                  for="date_from"
                 >
-                  {{ form.errors.employmentForm }}
-                </p>
+                  Data od
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_from"
+                    v-model="form.from"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                  />
+                  <p
+                    v-if="form.errors.from"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.from }}
+                  </p>
+                </div>
               </div>
-            </Listbox>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-                for="date_from"
-              >
-                Data od
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_from"
-                  v-model="form.from"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
-                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                />
-                <p
-                  v-if="form.errors.from"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
+                  for="date_from"
                 >
-                  {{ form.errors.from }}
-                </p>
+                  Data do
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_to"
+                    v-model="form.to"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                  />
+                  <p
+                    v-if="form.errors.to"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.to }}
+                  </p>
+                </div>
               </div>
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-3">
               <label
+                for="comment"
                 class="block text-sm font-medium text-gray-700 sm:mt-px"
-                for="date_from"
               >
-                Data do
+                Komentarz
+                <span class="text-xs text-gray-500">
+                  (opcjonalny)
+                </span>
               </label>
               <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_to"
-                  v-model="form.to"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+                <input
+                  id="comment"
+                  v-model="form.comment"
+                  type="text"
                   class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                />
+                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.comment, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.comment }"
+                >
                 <p
-                  v-if="form.errors.to"
+                  v-if="form.errors.comment"
                   class="mt-2 text-sm text-red-600"
                 >
-                  {{ form.errors.to }}
+                  {{ form.errors.comment }}
                 </p>
               </div>
             </div>
-          </div>
-          <div class="items-center py-4 sm:grid sm:grid-cols-3">
-            <label
-              for="comment"
-              class="block text-sm font-medium text-gray-700 sm:mt-px"
-            >
-              Komentarz
-              <span class="text-xs text-gray-500">
-                (opcjonalny)
-              </span>
-            </label>
-            <div class="mt-1 sm:col-span-2 sm:mt-0">
-              <input
-                id="comment"
-                v-model="form.comment"
-                type="text"
-                class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.comment, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.comment }"
-              >
-              <p
-                v-if="form.errors.comment"
-                class="mt-2 text-sm text-red-600"
-              >
-                {{ form.errors.comment }}
-              </p>
-            </div>
-          </div>
-          <div
-            v-if="form.type?.value === 'employment'"
-            class="items-center py-4 sm:grid sm:grid-cols-3"
-          >
-            <label
-              for="flowSkipped"
-              class="block text-sm font-medium text-gray-700"
+            <div
+              v-if="form.type?.value === 'employment'"
+              class="items-center py-4 sm:grid sm:grid-cols-3"
             >
-              Zatrudniony w obecnej firmie
-            </label>
-            <div class="mt-2 sm:col-span-2 sm:mt-0">
-              <Switch
-                id="flowSkipped"
-                v-model="form.isEmployedAtCurrentCompany"
-                :class="[form.isEmployedAtCurrentCompany ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+              <label
+                for="flowSkipped"
+                class="block text-sm font-medium text-gray-700"
               >
-                <span
-                  :class="[form.isEmployedAtCurrentCompany ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-                />
-              </Switch>
+                Zatrudniony w obecnej firmie
+              </label>
+              <div class="mt-2 sm:col-span-2 sm:mt-0">
+                <Switch
+                  id="flowSkipped"
+                  v-model="form.isEmployedAtCurrentCompany"
+                  :class="[form.isEmployedAtCurrentCompany ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                >
+                  <span
+                    :class="[form.isEmployedAtCurrentCompany ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+                  />
+                </Switch>
+              </div>
             </div>
-          </div>
-          <div class="flex justify-end py-3">
-            <div class="space-x-3">
-              <InertiaLink
-                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :href="`/users/${history.user_id}/history`"
-              >
-                Anuluj
-              </InertiaLink>
-              <button
-                :class="[form.processing ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing"
-                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                type="submit"
-              >
-                Zapisz
-              </button>
+            <div class="flex justify-end py-3">
+              <div class="space-x-3">
+                <InertiaLink
+                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  :href="`/users/${history.user_id}/history`"
+                >
+                  Anuluj
+                </InertiaLink>
+                <button
+                  :class="[form.processing ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                  :disabled="form.processing"
+                  class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  type="submit"
+                >
+                  Zapisz
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/UserHistory/Index.vue b/resources/js/Pages/UserHistory/Index.vue
index 531d206a..b54d2389 100644
--- a/resources/js/Pages/UserHistory/Index.vue
+++ b/resources/js/Pages/UserHistory/Index.vue
@@ -6,172 +6,174 @@ import {
 } from '@heroicons/vue/24/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
-  auth: Object,
   history: Object,
   userId: Number,
 })
 
-
 </script>
 
 <template>
-  <InertiaHead title="Szczegóły użytkownika" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Szczegóły
-        </h2>
-      </div>
-      <div>
-        <InertiaLink
-          :href="`/users/${userId}/history/create`"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-        >
-          Dodaj wpis
-        </InertiaLink>
+  <AppLayout>
+    <template #title>Szczegóły użytkownika</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Szczegóły
+          </h2>
+        </div>
+        <div>
+          <InertiaLink
+            :href="`/users/${userId}/history/create`"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+          >
+            Dodaj wpis
+          </InertiaLink>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="overflow-auto 2xl:overflow-visible relative">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Typ zdarzenia
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
-                scope="col"
-              >
-                Komentarz
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
-                scope="col"
-              >
-                Od
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
-                scope="col"
-              >
-                Do
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="item in history.data"
-              :key="item.id"
-              class="bg-blumilk-25"
-            >
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap flex items-center">
-                {{ item.typeLabel }}
-                <span
-                  v-if="item.type === 'employment'"
-                  class="flex items-center"
+      <div class="border-t border-gray-200">
+        <div class="overflow-auto 2xl:overflow-visible relative">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
                 >
-                  ({{ item.employmentFormLabel }})
-                  <img
-                    v-if="item.isEmployedAtCurrentCompany === true"
-                    class="h-4 text0red-500 ml-3"
-                    src="/images/logo.svg"
-                  >
-                </span>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ item.comment || '-' }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-normal">
-                {{ item.from }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ item.to || '-' }}
-              </td>
-              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
+                  Typ zdarzenia
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
+                  scope="col"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  Komentarz
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
+                  scope="col"
+                >
+                  Od
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
+                  scope="col"
+                >
+                  Do
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="item in history.data"
+                :key="item.id"
+                class="bg-blumilk-25"
+              >
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap flex items-center">
+                  {{ item.typeLabel }}
+                  <span
+                    v-if="item.type === 'employment'"
+                    class="flex items-center"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
-
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
+                    ({{ item.employmentFormLabel }})
+                    <img
+                      v-if="item.isEmployedAtCurrentCompany === true"
+                      class="h-4 text0red-500 ml-3"
+                      src="/images/logo.svg"
+                    >
+                  </span>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ item.comment || '-' }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-normal">
+                  {{ item.from }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ item.to || '-' }}
+                </td>
+                <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <MenuItems
-                      class="absolute right-0 z-10 my-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
+
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div class="py-1">
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
-                            :href="`/users/history/${item.id}`"
+                      <MenuItems
+                        class="absolute right-0 z-10 my-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
+                      >
+                        <div class="py-1">
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" />
-                            Edytuj
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
-                            :href="`/users/history/${item.id}`"
-                            :method="'delete'"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                              :href="`/users/history/${item.id}`"
+                            >
+                              <PencilIcon class="mr-2 size-5 text-blue-500" />
+                              Edytuj
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Usuń
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr
-              v-if="!history.data.length"
-            >
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                              :href="`/users/history/${item.id}`"
+                              :method="'delete'"
+                            >
+                              <TrashIcon class="mr-2 size-5 text-red-500" />
+                              Usuń
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr
+                v-if="!history.data.length"
               >
-                <EmptyState>
-                  <template #title>
-                    Brak wyników
-                  </template>
-                  <template #text>
-                    Dodaj pierwszy wpis
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Brak wyników
+                    </template>
+                    <template #text>
+                      Dodaj pierwszy wpis
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index f54cf19e..2c2bf2b1 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -1,8 +1,10 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   employmentForms: Object,
@@ -32,281 +34,283 @@ function createUser() {
 </script>
 
 <template>
-  <InertiaHead title="Dodawanie użytkownika" />
-  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Dodaj użytkownika
-      </h2>
-    </div>
-    <form
-      class="px-6 border-t border-gray-200"
-      @submit.prevent="createUser"
-    >
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="firstName"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Imię
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="firstName"
-            v-model="form.firstName"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
-          >
-          <p
-            v-if="form.errors.firstName"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.firstName }}
-          </p>
-        </div>
+  <AppLayout>
+    <template #title>Dodawanie użytkownika</template>
+    <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Dodaj użytkownika
+        </h2>
       </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="lastName"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Nazwisko
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="lastName"
-            v-model="form.lastName"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
-          >
-          <p
-            v-if="form.errors.lastName"
-            class="mt-2 text-sm text-red-600"
+      <form
+        class="px-6 border-t border-gray-200"
+        @submit.prevent="createUser"
+      >
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="firstName"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.lastName }}
-          </p>
+            Imię
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="firstName"
+              v-model="form.firstName"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
+            >
+            <p
+              v-if="form.errors.firstName"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.firstName }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="email"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Adres e-mail
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="email"
-            v-model="form.email"
-            type="email"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
-          >
-          <p
-            v-if="form.errors.email"
-            class="mt-2 text-sm text-red-600"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="lastName"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.email }}
-          </p>
+            Nazwisko
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="lastName"
+              v-model="form.lastName"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
+            >
+            <p
+              v-if="form.errors.lastName"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.lastName }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="position"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Stanowisko
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="position"
-            v-model="form.position"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
-          >
-          <p
-            v-if="form.errors.position"
-            class="mt-2 text-sm text-red-600"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="email"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.position }}
-          </p>
+            Adres e-mail
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="email"
+              v-model="form.email"
+              type="email"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
+            >
+            <p
+              v-if="form.errors.email"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.email }}
+            </p>
+          </div>
         </div>
-      </div>
-      <Listbox
-        v-model="form.role"
-        as="div"
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Rola
-        </ListboxLabel>
-        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
-          >
-            <span class="block truncate">{{ form.role.label }}</span>
-            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-              <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-            </span>
-          </ListboxButton>
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
-              <ListboxOption
-                v-for="role in roles"
-                :key="role.value"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="role"
-              >
-                <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                  <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                    {{ role.label }}
-                  </span>
-
-                  <span
-                    v-if="selected"
-                    :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                  >
-                    <CheckIcon class="w-5 h-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.role"
-            class="mt-2 text-sm text-red-600"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="position"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.role }}
-          </p>
+            Stanowisko
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="position"
+              v-model="form.position"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
+            >
+            <p
+              v-if="form.errors.position"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.position }}
+            </p>
+          </div>
         </div>
-      </Listbox>
-      <Listbox
-        v-model="form.employmentForm"
-        as="div"
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Forma zatrudnienia
-        </ListboxLabel>
-        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
-          >
-            <span class="block truncate">{{ form.employmentForm.label }}</span>
-            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-              <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-            </span>
-          </ListboxButton>
-
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
-              <ListboxOption
-                v-for="employmentForm in employmentForms"
-                :key="employmentForm.value"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="employmentForm"
-              >
-                <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                  <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                    {{ employmentForm.label }}
-                  </span>
+        <Listbox
+          v-model="form.role"
+          as="div"
+          class="items-center py-4 sm:grid sm:grid-cols-3"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Rola
+          </ListboxLabel>
+          <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
+            >
+              <span class="block truncate">{{ form.role.label }}</span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <ChevronUpDownIcon class="size-5 text-gray-400" />
+              </span>
+            </ListboxButton>
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm">
+                <ListboxOption
+                  v-for="role in roles"
+                  :key="role.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="role"
+                >
+                  <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                      {{ role.label }}
+                    </span>
 
-                  <span
-                    v-if="selected"
-                    :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                  >
-                    <CheckIcon class="w-5 h-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.employmentForm"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.employmentForm }}
-          </p>
-        </div>
-      </Listbox>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="slackId"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="size-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.role"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.role }}
+            </p>
+          </div>
+        </Listbox>
+        <Listbox
+          v-model="form.employmentForm"
+          as="div"
+          class="items-center py-4 sm:grid sm:grid-cols-3"
         >
-          Slack ID
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="position"
-            v-model="form.slackId"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.slackId, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.slackId }"
-          >
-          <p
-            v-if="form.errors.slackId"
-            class="mt-2 text-sm text-red-600"
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Forma zatrudnienia
+          </ListboxLabel>
+          <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
+            >
+              <span class="block truncate">{{ form.employmentForm.label }}</span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <ChevronUpDownIcon class="size-5 text-gray-400" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm">
+                <ListboxOption
+                  v-for="employmentForm in employmentForms"
+                  :key="employmentForm.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="employmentForm"
+                >
+                  <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                      {{ employmentForm.label }}
+                    </span>
+
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="size-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.employmentForm"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.employmentForm }}
+            </p>
+          </div>
+        </Listbox>
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="slackId"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.slackId }}
-          </p>
+            Slack ID
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="position"
+              v-model="form.slackId"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.slackId, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.slackId }"
+            >
+            <p
+              v-if="form.errors.slackId"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.slackId }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="birthday"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Data urodzenia
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <FlatPickr
-            id="birthday"
-            v-model="form.birthday"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.birthday, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.birthday }"
-          />
-          <p
-            v-if="form.errors.birthday"
-            class="mt-2 text-sm text-red-600"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="birthday"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.birthday }}
-          </p>
+            Data urodzenia
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <FlatPickr
+              id="birthday"
+              v-model="form.birthday"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.birthday, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.birthday }"
+            />
+            <p
+              v-if="form.errors.birthday"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.birthday }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/users"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Dodaj
-          </button>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/users"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Dodaj
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index b06778cf..03fa7768 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -1,8 +1,10 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   employmentForms: Object,
@@ -34,288 +36,290 @@ function editUser() {
 </script>
 
 <template>
-  <InertiaHead title="Edycja użytkownika" />
-  <div class="bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Edytuj użytkownika
-      </h2>
-    </div>
-    <form
-      class="px-6 border-t border-gray-200"
-      @submit.prevent="editUser"
-    >
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="firstName"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Imię
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="firstName"
-            v-model="form.firstName"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
-          >
-          <p
-            v-if="form.errors.firstName"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.firstName }}
-          </p>
-        </div>
+  <AppLayout>
+    <template #title>Edycja użytkownika</template>
+    <div class="bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Edytuj użytkownika
+        </h2>
       </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="lastName"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Nazwisko
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="lastName"
-            v-model="form.lastName"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
-          >
-          <p
-            v-if="form.errors.lastName"
-            class="mt-2 text-sm text-red-600"
+      <form
+        class="px-6 border-t border-gray-200"
+        @submit.prevent="editUser"
+      >
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="firstName"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.lastName }}
-          </p>
+            Imię
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="firstName"
+              v-model="form.firstName"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
+            >
+            <p
+              v-if="form.errors.firstName"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.firstName }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="email"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Adres e-mail
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="email"
-            v-model="form.email"
-            type="email"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="lastName"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-          <p
-            v-if="form.errors.email"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.email }}
-          </p>
+            Nazwisko
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="lastName"
+              v-model="form.lastName"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
+            >
+            <p
+              v-if="form.errors.lastName"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.lastName }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="position"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Stanowisko
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="position"
-            v-model="form.position"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="email"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-          <p
-            v-if="form.errors.position"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.position }}
-          </p>
+            Adres e-mail
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="email"
+              v-model="form.email"
+              type="email"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
+            >
+            <p
+              v-if="form.errors.email"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.email }}
+            </p>
+          </div>
         </div>
-      </div>
-      <Listbox
-        v-model="form.role"
-        as="div"
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Rola
-        </ListboxLabel>
-        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="position"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            <span class="block truncate">{{ form.role.label }}</span>
-            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-              <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-            </span>
-          </ListboxButton>
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+            Stanowisko
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="position"
+              v-model="form.position"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
+            >
+            <p
+              v-if="form.errors.position"
+              class="mt-2 text-sm text-red-600"
             >
-              <ListboxOption
-                v-for="role in roles"
-                :key="role.value"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="role"
+              {{ form.errors.position }}
+            </p>
+          </div>
+        </div>
+        <Listbox
+          v-model="form.role"
+          as="div"
+          class="items-center py-4 sm:grid sm:grid-cols-3"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Rola
+          </ListboxLabel>
+          <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
+            >
+              <span class="block truncate">{{ form.role.label }}</span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <ChevronUpDownIcon class="size-5 text-gray-400" />
+              </span>
+            </ListboxButton>
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
               >
-                <li
-                  :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                <ListboxOption
+                  v-for="role in roles"
+                  :key="role.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="role"
                 >
-                  <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                    {{ role.label }}
-                  </span>
-
-                  <span
-                    v-if="selected"
-                    :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                  <li
+                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                   >
-                    <CheckIcon class="w-5 h-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.role"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.role }}
-          </p>
-        </div>
-      </Listbox>
-      <Listbox
-        v-model="form.employmentForm"
-        as="div"
-        class="items-center py-4 sm:grid sm:grid-cols-3"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Forma zatrudnienia
-        </ListboxLabel>
-        <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-          <ListboxButton
-            class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
-          >
-            <span class="block truncate">{{ form.employmentForm.label }}</span>
-            <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-              <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-            </span>
-          </ListboxButton>
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                      {{ role.label }}
+                    </span>
+
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="size-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.role"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.role }}
+            </p>
+          </div>
+        </Listbox>
+        <Listbox
+          v-model="form.employmentForm"
+          as="div"
+          class="items-center py-4 sm:grid sm:grid-cols-3"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Forma zatrudnienia
+          </ListboxLabel>
+          <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
+            >
+              <span class="block truncate">{{ form.employmentForm.label }}</span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <ChevronUpDownIcon class="size-5 text-gray-400" />
+              </span>
+            </ListboxButton>
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
             >
-              <ListboxOption
-                v-for="employmentForm in employmentForms"
-                :key="employmentForm.value"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="employmentForm"
+              <ListboxOptions
+                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
               >
-                <li
-                  :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                <ListboxOption
+                  v-for="employmentForm in employmentForms"
+                  :key="employmentForm.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="employmentForm"
                 >
-                  <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                    {{ employmentForm.label }}
-                  </span>
-
-                  <span
-                    v-if="selected"
-                    :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                  <li
+                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                   >
-                    <CheckIcon class="w-5 h-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.employmentForm"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.employmentForm }}
-          </p>
-        </div>
-      </Listbox>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="birthday"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Data urodzenia
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <FlatPickr
-            id="birthday"
-            v-model="form.birthday"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.birthday, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.birthday }"
-          />
-          <p
-            v-if="form.errors.birthday"
-            class="mt-2 text-sm text-red-600"
+                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                      {{ employmentForm.label }}
+                    </span>
+
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="size-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.employmentForm"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.employmentForm }}
+            </p>
+          </div>
+        </Listbox>
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="birthday"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.birthday }}
-          </p>
+            Data urodzenia
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <FlatPickr
+              id="birthday"
+              v-model="form.birthday"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.birthday, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.birthday }"
+            />
+            <p
+              v-if="form.errors.birthday"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.birthday }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="items-center py-4 sm:grid sm:grid-cols-3">
-        <label
-          for="slackId"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Slack ID
-        </label>
-        <div class="mt-1 sm:col-span-2 sm:mt-0">
-          <input
-            id="slack_id"
-            v-model="form.slackId"
-            type="text"
-            class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.slackId, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.slackId }"
+        <div class="items-center py-4 sm:grid sm:grid-cols-3">
+          <label
+            for="slackId"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-          <p
-            v-if="form.errors.slackId"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.slackId }}
-          </p>
+            Slack ID
+          </label>
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <input
+              id="slack_id"
+              v-model="form.slackId"
+              type="text"
+              class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.slackId, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.slackId }"
+            >
+            <p
+              v-if="form.errors.slackId"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.slackId }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/users"
-            class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-          >
-            Zapisz
-          </button>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/users"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+            >
+              Zapisz
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-  </div>
+      </form>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index a10d2353..89b9a713 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, reactive, ref, watch } from 'vue'
-import { Inertia } from '@inertiajs/inertia'
+import { router, Head } from '@inertiajs/vue3'
 import { debounce } from 'lodash'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import {
@@ -28,13 +28,19 @@ import { useToast } from 'vue-toastification'
 import Pagination from '@/Shared/Pagination.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import { useClipboard } from '@vueuse/core'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
-  auth: Object,
   users: Object,
   filters: Object,
 })
 
+const { copy } = useClipboard()
+const { auth } = useGlobalProps()
+
 const statuses = [
   {
     name: 'Aktywni użytkownicy',
@@ -61,7 +67,7 @@ const indeterminate = computed(() => selectedUsers.value.length > 0 && selectedU
 
 function copyEmails() {
   const emails = selectedUsers.value.map((user) => `"${user.name}" <${user.email}>`).join(', ')
-  navigator.clipboard.writeText(emails)
+  copy(emails)
   selectedUsers.value = []
   toast.info('Skopiowano adresy e-mail do schowka.')
 }
@@ -73,7 +79,7 @@ function removeUser(user) {
 watch(form, debounce(() => {
   selectedUsers.value = []
 
-  Inertia.get('/users', {
+  router.get('/users', {
     search: form.search,
     status: form.status.value,
   }, {
@@ -84,335 +90,337 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Użytkownicy" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Użytkownicy
-        </h2>
-      </div>
-      <div>
-        <InertiaLink
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="users/create"
-        >
-          Dodaj użytkownika
-        </InertiaLink>
-      </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="flex-1 grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
-        <div class="relative">
-          <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-            <MagnifyingGlassIcon class="w-5 h-5 text-gray-400" />
-          </div>
-          <input
-            v-model.trim="form.search"
-            class="block py-2 pr-3 pl-10 w-full max-w-lg placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
-            placeholder="Szukaj"
-            type="search"
+  <AppLayout>
+    <template #title>Użytkownicy</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Użytkownicy
+          </h2>
+        </div>
+        <div>
+          <InertiaLink
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="users/create"
           >
+            Dodaj użytkownika
+          </InertiaLink>
         </div>
-        <Listbox
-          v-model="form.status"
-          as="div"
-        >
+      </div>
+      <div class="border-t border-gray-200">
+        <div class="flex-1 grid grid-cols-1 p-4 md:grid-cols-3 gap-4">
           <div class="relative">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+            <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+              <MagnifyingGlassIcon class="size-5 text-gray-400" />
+            </div>
+            <input
+              v-model.trim="form.search"
+              class="block py-2 pr-3 pl-10 w-full max-w-lg placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
+              placeholder="Szukaj"
+              type="search"
             >
-              <span class="block truncate">
-                {{ form.status.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+          </div>
+          <Listbox
+            v-model="form.status"
+            as="div"
+          >
+            <div class="relative">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="block truncate">
+                  {{ form.status.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="status in statuses"
-                  :key="status.value"
-                  v-slot="{ active, selected }"
-                  :value="status"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="status in statuses"
+                    :key="status.value"
+                    v-slot="{ active, selected }"
+                    :value="status"
+                    as="template"
                   >
-                    {{ status.name }}
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-      </div>
-      <div class="overflow-auto 2xl:overflow-visible relative">
-        <div
-          v-if="selectedUsers.length > 0"
-          class="flex absolute top-0 left-20 h-10 items-center bg-gray-50"
-        >
-          <button
-            class="items-center rounded border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30"
-            type="button"
-            @click="copyEmails()"
-          >
-            Skopiuj adresy e-mail
-          </button>
+                      {{ status.name }}
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
         </div>
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                class="relative w-16 px-8"
-                scope="col"
-              >
-                <input
-                  :checked="indeterminate || selectedUsers.length === users.data.length && users.data.length > 0"
-                  :disabled="users.data.length === 0"
-                  :indeterminate="indeterminate"
-                  class="absolute left-6 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
-                  type="checkbox"
-                  @change="selectedUsers = $event.target.checked ? users.data.map((user) => {
-                    return {
-                      email: user.email,
-                      name: user.name
-                    }
-                  }) : []"
-                >
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                <span v-if="selectedUsers.length === 0">
-                  Imię i nazwisko
-                </span>
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Ostatnia aktywność
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              >
-                Stanowisko
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
-                scope="col"
-              >
-                Następne badanie lekarskie
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
-                scope="col"
-              >
-                Następne szkolenie BHP
-              </th>
-              <th
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="user in users.data"
-              :key="user.id"
-              :class="[ selectedUsers.find((selectedUser) => selectedUser.email === user.email) && 'bg-blumilk-25', { 'bg-gray-100': user.deleted, 'hover:bg-blumilk-25': !user.deleted }]"
+        <div class="overflow-auto 2xl:overflow-visible relative">
+          <div
+            v-if="selectedUsers.length > 0"
+            class="flex absolute top-0 left-20 h-10 items-center bg-gray-50"
+          >
+            <button
+              class="items-center rounded border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30"
+              type="button"
+              @click="copyEmails()"
             >
-              <td class="relative w-12 px-6 sm:w-16 sm:px-8">
-                <div
-                  v-if="selectedUsers.find((selectedUser) => selectedUser.email === user.email)"
-                  class="absolute inset-y-0 left-0 w-0.5 bg-blumilk-600"
-                />
-                <input
-                  v-model="selectedUsers"
-                  :value="{email: user.email, name:user.name}"
-                  class="absolute left-6 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
-                  type="checkbox"
+              Skopiuj adresy e-mail
+            </button>
+          </div>
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="relative w-16 px-8"
+                  scope="col"
                 >
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                <UserProfileLink
-                  :user="user"
+                  <input
+                    :checked="indeterminate || selectedUsers.length === users.data.length && users.data.length > 0"
+                    :disabled="users.data.length === 0"
+                    :indeterminate="indeterminate"
+                    class="absolute left-6 top-1/2 -mt-2 size-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+                    type="checkbox"
+                    @change="selectedUsers = $event.target.checked ? users.data.map((user) => {
+                      return {
+                        email: user.email,
+                        name: user.name
+                      }
+                    }) : []"
+                  >
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
                 >
-                  <div class="flex">
-                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                      <img
-                        :src="user.avatar"
-                        class="w-10 h-10 rounded-full"
-                      >
-                    </span>
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ user.name }}
-                      </p>
-                      <p class="text-sm text-gray-500 break-all">
-                        {{ user.email }}
-                      </p>
-                    </div>
-                  </div>
-                </UserProfileLink>
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ user.lastActiveAt ? DateTime.fromSQL(user.lastActiveAt).toRelative() : '-' }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-normal">
-                {{ user.position }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ user.nextMedicalExamDate || '-' }}
-              </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ user.nextOhsTrainingDate || '-' }}
-              </td>
-              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-                <Menu
-                  as="div"
-                  class="inline-block relative text-left"
+                  <span v-if="selectedUsers.length === 0">
+                    Imię i nazwisko
+                  </span>
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Ostatnia aktywność
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                >
+                  Stanowisko
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
+                  scope="col"
                 >
-                  <MenuButton
-                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  Następne badanie lekarskie
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-normal"
+                  scope="col"
+                >
+                  Następne szkolenie BHP
+                </th>
+                <th
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="user in users.data"
+                :key="user.id"
+                :class="[ selectedUsers.find((selectedUser) => selectedUser.email === user.email) && 'bg-blumilk-25', { 'bg-gray-100': user.deleted, 'hover:bg-blumilk-25': !user.deleted }]"
+              >
+                <td class="relative w-12 px-6 sm:w-16 sm:px-8">
+                  <div
+                    v-if="selectedUsers.find((selectedUser) => selectedUser.email === user.email)"
+                    class="absolute inset-y-0 left-0 w-0.5 bg-blumilk-600"
+                  />
+                  <input
+                    v-model="selectedUsers"
+                    :value="{email: user.email, name:user.name}"
+                    class="absolute left-6 top-1/2 -mt-2 size-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+                    type="checkbox"
                   >
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                  </MenuButton>
-
-                  <transition
-                    enter-active-class="transition ease-out duration-100"
-                    enter-from-class="transform opacity-0 scale-95"
-                    enter-to-class="transform opacity-100 scale-100"
-                    leave-active-class="transition ease-in duration-75"
-                    leave-from-class="transform opacity-100 scale-100"
-                    leave-to-class="transform opacity-0 scale-95"
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  <UserProfileLink
+                    :user="user"
+                  >
+                    <div class="flex">
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
+                        <img
+                          :src="user.avatar"
+                          class="size-10 rounded-full"
+                        >
+                      </span>
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900 break-all">
+                          {{ user.name }}
+                        </p>
+                        <p class="text-sm text-gray-500 break-all">
+                          {{ user.email }}
+                        </p>
+                      </div>
+                    </div>
+                  </UserProfileLink>
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ user.lastActiveAt ? DateTime.fromSQL(user.lastActiveAt).toRelative() : '-' }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-normal">
+                  {{ user.position }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ user.nextMedicalExamDate || '-' }}
+                </td>
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                  {{ user.nextOhsTrainingDate || '-' }}
+                </td>
+                <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                  <Menu
+                    as="div"
+                    class="inline-block relative text-left"
                   >
-                    <MenuItems
-                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    <MenuButton
+                      class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    >
+                      <EllipsisVerticalIcon class="size-5" />
+                    </MenuButton>
+
+                    <transition
+                      enter-active-class="transition ease-out duration-100"
+                      enter-from-class="transform opacity-0 scale-95"
+                      enter-to-class="transform opacity-100 scale-100"
+                      leave-active-class="transition ease-in duration-75"
+                      leave-from-class="transform opacity-100 scale-100"
+                      leave-to-class="transform opacity-0 scale-95"
                     >
-                      <div
-                        v-if="!user.deleted"
-                        class="py-1"
+                      <MenuItems
+                        class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
                       >
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
+                        <div
+                          v-if="!user.deleted"
+                          class="py-1"
                         >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
-                            :href="`/users/${user.id}/edit`"
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" />
-                            Edytuj
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-if="auth.can.managePermissions"
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
-                            :href="`/users/${user.id}/permissions`"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                              :href="`/users/${user.id}/edit`"
+                            >
+                              <PencilIcon class="mr-2 size-5 text-blue-500" />
+                              Edytuj
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-if="auth.can.managePermissions"
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <LockClosedIcon class="mr-2 w-5 h-5 text-yellow-500" />
-                            Uprawnienia
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
-                            :href="`/users/${user.id}/history`"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                              :href="`/users/${user.id}/permissions`"
+                            >
+                              <LockClosedIcon class="mr-2 size-5 text-yellow-500" />
+                              Uprawnienia
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <InformationCircleIcon class="mr-2 w-5 h-5 text-violet-500" />
-                            Szczegóły
-                          </InertiaLink>
-                        </MenuItem>
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
-                        >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/users/${user.id}`"
-                            :preserve-scroll="true"
-                            as="button"
-                            method="delete"
-                            @click="form.status.value !== 'all' ? removeUser(user): null"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
+                              :href="`/users/${user.id}/history`"
+                            >
+                              <InformationCircleIcon class="mr-2 size-5 text-violet-500" />
+                              Szczegóły
+                            </InertiaLink>
+                          </MenuItem>
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <NoSymbolIcon class="mr-2 w-5 h-5 text-red-500" />
-                            Zablokuj
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                      <div
-                        v-else
-                        class="py-1"
-                      >
-                        <MenuItem
-                          v-slot="{ active }"
-                          class="flex"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/users/${user.id}`"
+                              :preserve-scroll="true"
+                              as="button"
+                              method="delete"
+                              @click="form.status.value !== 'all' ? removeUser(user): null"
+                            >
+                              <NoSymbolIcon class="mr-2 size-5 text-red-500" />
+                              Zablokuj
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                        <div
+                          v-else
+                          class="py-1"
                         >
-                          <InertiaLink
-                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-                            :href="`/users/${user.id}/restore`"
-                            :preserve-scroll="true"
-                            as="button"
-                            method="post"
-                            @click="form.status.value !== 'all' ? removeUser(user): null"
+                          <MenuItem
+                            v-slot="{ active }"
+                            class="flex"
                           >
-                            <ArrowPathIcon class="mr-2 w-5 h-5 text-green-500" />
-                            Przywróć
-                          </InertiaLink>
-                        </MenuItem>
-                      </div>
-                    </MenuItems>
-                  </transition>
-                </Menu>
-              </td>
-            </tr>
-            <tr
-              v-if="! users.data.length"
-            >
-              <td
-                class="py-4 text-xl leading-5 text-center text-gray-700"
-                colspan="100%"
+                            <InertiaLink
+                              :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                              :href="`/users/${user.id}/restore`"
+                              :preserve-scroll="true"
+                              as="button"
+                              method="post"
+                              @click="form.status.value !== 'all' ? removeUser(user): null"
+                            >
+                              <ArrowPathIcon class="mr-2 size-5 text-green-500" />
+                              Przywróć
+                            </InertiaLink>
+                          </MenuItem>
+                        </div>
+                      </MenuItems>
+                    </transition>
+                  </Menu>
+                </td>
+              </tr>
+              <tr
+                v-if="! users.data.length"
               >
-                <EmptyState>
-                  <template #title>
-                    Nie znaleziono użytkownika
-                  </template>
-                  <template #text>
-                    Spróbuj sformułować zapytanie inaczej
-                  </template>
-                </EmptyState>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="py-4 text-xl leading-5 text-center text-gray-700"
+                  colspan="100%"
+                >
+                  <EmptyState>
+                    <template #title>
+                      Nie znaleziono użytkownika
+                    </template>
+                    <template #text>
+                      Spróbuj sformułować zapytanie inaczej
+                    </template>
+                  </EmptyState>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <Pagination :pagination="users.meta" />
       </div>
-      <Pagination :pagination="users.meta" />
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/Users/Show.vue b/resources/js/Pages/Users/Show.vue
index d3fb8147..9d58b651 100644
--- a/resources/js/Pages/Users/Show.vue
+++ b/resources/js/Pages/Users/Show.vue
@@ -5,6 +5,8 @@ import BenefitList from '@/Shared/Widgets/BenefitList.vue'
 import { ComputerDesktopIcon } from '@heroicons/vue/24/outline'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import UserOvertimeRequests from '@/Shared/Widgets/UserOvertimeRequests.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 defineProps({
   user: Object,
@@ -23,134 +25,136 @@ defineProps({
 </script>
 
 <template>
-  <InertiaHead title="Profil użytkownika" />
-  <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
-    <div class="grid grid-cols-1 gap-4 xl:col-span-2">
-      <section>
-        <div class=" overflow-hidden bg-white shadow">
-          <div class="p-6 bg-white">
-            <div class="sm:flex sm:justify-between sm:items-center">
-              <div class="sm:flex sm:space-x-5 sm:items-center">
-                <div class="shrink-0">
-                  <img
-                    :src="user.avatar"
-                    class="mx-auto w-20 h-20 rounded-full"
-                  >
+  <AppLayout>
+    <template #title>Profil użytkownika</template>
+    <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
+      <div class="grid grid-cols-1 gap-4 xl:col-span-2">
+        <section>
+          <div class=" overflow-hidden bg-white shadow">
+            <div class="p-6 bg-white">
+              <div class="sm:flex sm:justify-between sm:items-center">
+                <div class="sm:flex sm:space-x-5 sm:items-center">
+                  <div class="shrink-0">
+                    <img
+                      :src="user.avatar"
+                      class="mx-auto size-20 rounded-full"
+                    >
+                  </div>
+                  <div class="mt-4 text-center sm:pt-1 sm:mt-0 sm:text-left">
+                    <p class="text-xl font-bold text-gray-900 sm:text-2xl">
+                      {{ user.name }}
+                    </p>
+                    <p class="text-sm font-medium text-gray-600">
+                      {{ user.role }}
+                    </p>
+                  </div>
                 </div>
-                <div class="mt-4 text-center sm:pt-1 sm:mt-0 sm:text-left">
-                  <p class="text-xl font-bold text-gray-900 sm:text-2xl">
-                    {{ user.name }}
+              </div>
+            </div>
+          </div>
+        </section>
+        <VacationStats :stats="stats" />
+        <UserVacationRequests
+          :label="'Wnioski'"
+          :profile-page="true"
+          :requests="vacationRequests.data"
+        />
+        <UserOvertimeRequests :requests="overtimeRequests.data" />
+      </div>
+      <div class="grid grid-cols-1 gap-4">
+        <section class="bg-white shadow-md">
+          <div class="w-100 p-4 sm:px-6 border-b border-gray-200 flex items-center">
+            <h2 class="text-lg font-medium leading-6 text-gray-900 w-full">
+              Informacje
+            </h2>
+          </div>
+          <div class="px-4 border-t border-gray-200 sm:px-6">
+            <ul class="divide-y divide-gray-200">
+              <li class="flex py-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Urodziny: <span
+                      v-if="upcomingBirthday"
+                      class="font-bold"
+                    >{{ upcomingBirthday.displayDate }} - {{ upcomingBirthday.relativeDate }}</span>
+                    <span v-else>-</span>
                   </p>
-                  <p class="text-sm font-medium text-gray-600">
-                    {{ user.role }}
+                </div>
+              </li>
+              <li class="flex py-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Staż pracy: <span class="font-bold">{{ seniority ?? "-" }}</span>
                   </p>
                 </div>
-              </div>
-            </div>
+              </li>
+            </ul>
           </div>
-        </div>
-      </section>
-      <VacationStats :stats="stats" />
-      <UserVacationRequests
-        :label="'Wnioski'"
-        :profile-page="true"
-        :requests="vacationRequests.data"
-      />
-      <UserOvertimeRequests :requests="overtimeRequests.data" />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
-      <section class="bg-white shadow-md">
-        <div class="w-100 p-4 sm:px-6 border-b border-gray-200 flex items-center">
-          <h2 class="text-lg font-medium leading-6 text-gray-900 w-full">
-            Informacje
-          </h2>
-        </div>
-        <div class="px-4 border-t border-gray-200 sm:px-6">
-          <ul class="divide-y divide-gray-200">
-            <li class="flex py-4">
-              <div>
-                <p class="text-sm text-gray-500">
-                  Urodziny: <span
-                    v-if="upcomingBirthday"
-                    class="font-bold"
-                  >{{ upcomingBirthday.displayDate }} - {{ upcomingBirthday.relativeDate }}</span>
-                  <span v-else>-</span>
-                </p>
-              </div>
-            </li>
-            <li class="flex py-4">
-              <div>
-                <p class="text-sm text-gray-500">
-                  Staż pracy: <span class="font-bold">{{ seniority ?? "-" }}</span>
-                </p>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </section>
-      <BenefitList
-        :benefits="benefits.data"
-        :label="'Benefity'"
-      />
-      <section class="bg-white shadow-md">
-        <div class="w-100 p-4 sm:px-6 border-b border-gray-200 flex items-center">
-          <h2 class="text-lg font-medium leading-6 text-gray-900 w-full">
-            Sprzęt
-          </h2>
-        </div>
-        <div class="px-4 border-t border-gray-200 sm:px-6">
-          <ul
-            v-if="equipmentItems.data.length"
-            class="divide-y divide-gray-200"
-          >
-            <li
-              v-for="item in equipmentItems.data"
-              :key="item.id"
-              class="flex py-4"
+        </section>
+        <BenefitList
+          :benefits="benefits.data"
+          :label="'Benefity'"
+        />
+        <section class="bg-white shadow-md">
+          <div class="w-100 p-4 sm:px-6 border-b border-gray-200 flex items-center">
+            <h2 class="text-lg font-medium leading-6 text-gray-900 w-full">
+              Sprzęt
+            </h2>
+          </div>
+          <div class="px-4 border-t border-gray-200 sm:px-6">
+            <ul
+              v-if="equipmentItems.data.length"
+              class="divide-y divide-gray-200"
             >
-              <div class="ml-3">
-                <p class="text-sm font-medium text-gray-900">
-                  {{ item.name }}
-                </p>
-                <p class="text-sm text-gray-500">
-                  {{ item.idNumber }}
-                </p>
-                <template v-if="item.labels && item.labels.length !== 0">
-                  <span
-                    v-for="(label, index) in item.labels"
-                    :key="index"
-                    class="inline-flex items-center py-1.5 px-3 mr-1 my-1 rounded-lg text-sm font-medium bg-blumilk-500 text-white"
-                  >
-                    {{ label }}
-                  </span>
-                </template>
-              </div>
-            </li>
-          </ul>
-          <EmptyState
-            v-else
-            :show-description="false"
-          >
-            <template #head>
-              <ComputerDesktopIcon class="h-12 w-12 mx-auto" />
-            </template>
-            <template #title>
-              Brak sprzętu
-            </template>
-          </EmptyState>
-          <div
-            v-if="equipmentItems.data.length"
-            class="mb-6"
-          >
-            <InertiaLink
-              :href="`/equipment-items?assignee=${user.id}`"
-              class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
+              <li
+                v-for="item in equipmentItems.data"
+                :key="item.id"
+                class="flex py-4"
+              >
+                <div class="ml-3">
+                  <p class="text-sm font-medium text-gray-900">
+                    {{ item.name }}
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    {{ item.idNumber }}
+                  </p>
+                  <template v-if="item.labels && item.labels.length !== 0">
+                    <span
+                      v-for="(label, index) in item.labels"
+                      :key="index"
+                      class="inline-flex items-center py-1.5 px-3 mr-1 my-1 rounded-lg text-sm font-medium bg-blumilk-500 text-white"
+                    >
+                      {{ label }}
+                    </span>
+                  </template>
+                </div>
+              </li>
+            </ul>
+            <EmptyState
+              v-else
+              :show-description="false"
             >
-              Zobacz wszystkie
-            </InertiaLink>
+              <template #head>
+                <ComputerDesktopIcon class="size-12 mx-auto" />
+              </template>
+              <template #title>
+                Brak sprzętu
+              </template>
+            </EmptyState>
+            <div
+              v-if="equipmentItems.data.length"
+              class="mb-6"
+            >
+              <InertiaLink
+                :href="`/equipment-items?assignee=${user.id}`"
+                class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
+              >
+                Zobacz wszystkie
+              </InertiaLink>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index 857a2d81..f211238b 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -1,14 +1,14 @@
 <script setup>
 import { Switch } from '@headlessui/vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm, router } from '@inertiajs/vue3'
 import { ref, watch } from 'vue'
 import VacationLimitPopup from '@/Shared/VacationLimitPopup.vue'
 import RemainingFromPreviousYearPopup from '@/Shared/RemainingFromPreviousYearPopup.vue'
 import TakeVacationDaysFromPreviousYearModal from '@/Shared/Modals/TakeVacationDaysFromPreviousYearModal.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
-import { Inertia } from '@inertiajs/inertia'
 import { DateTime } from 'luxon'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   limits: Object,
@@ -52,192 +52,194 @@ watch(selectedYear, (value, oldValue) => {
   if (value === oldValue)
     return
 
-  Inertia.visit('/vacation/limits', {
+  router.visit('/vacation/limits', {
     data: { year: value },
   })
 })
 </script>
 
 <template>
-  <InertiaHead title="Dostępne dni urlopu dla użytkowników" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Limit urlopu dla użytkowników w roku
-          <YearPicker
-            v-model="selectedYear"
-            :from="currentDate.year + 1"
-            :to="currentDate.year - 20"
-            class="inline-block ml-2"
-          />
-        </h2>
+  <AppLayout>
+    <template #title>Dostępne dni urlopu dla użytkowników</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Limit urlopu dla użytkowników w roku
+            <YearPicker
+              v-model="selectedYear"
+              :from="currentDate.year + 1"
+              :to="currentDate.year - 20"
+              class="inline-block ml-2"
+            />
+          </h2>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <form @submit.prevent="submitVacationDays">
-        <div class="overflow-auto xl:overflow-visible">
-          <table class="min-w-full border-b divide-y divide-gray-200">
-            <thead class="bg-gray-50">
-              <tr>
-                <th
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  scope="col"
-                >
-                  Imię i nazwisko
-                </th>
-                <th
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  scope="col"
-                >
-                  Forma zatrudnienia
-                </th>
-                <th
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  scope="col"
-                >
-                  Posiada limit?
-                </th>
-                <th
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  scope="col"
-                >
-                  Pozostałe dni z {{ year - 1 }}
-                </th>
-                <th
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  scope="col"
-                >
-                  Przysługujące dni w roku {{ year }}
-                </th>
-                <th
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-                  scope="col"
-                >
-                  Łączny limit na rok {{ year }}
-                </th>
-              </tr>
-            </thead>
-            <tbody class="bg-white divide-y divide-gray-100">
-              <tr
-                v-for="(item, index) in form.items"
-                :key="item.id"
-                :class="[item.user.deleted ? 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
-              >
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <UserProfileLink
-                    :user="item.user"
+      <div class="border-t border-gray-200">
+        <form @submit.prevent="submitVacationDays">
+          <div class="overflow-auto xl:overflow-visible">
+            <table class="min-w-full border-b divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    scope="col"
                   >
-                    <div class="flex">
-                      <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                        <img
-                          :src="item.user.avatar"
-                          class="w-10 h-10 rounded-full"
-                        >
-                      </span>
-                      <div class="ml-3">
-                        <p class="text-sm font-medium text-gray-900 break-all">
-                          {{ item.user.name }}
-                        </p>
-                        <p class="text-sm text-gray-500 break-all">
-                          {{ item.user.email }}
-                        </p>
-                      </div>
-                    </div>
-                  </UserProfileLink>
-                </td>
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  {{ item.user.employmentForm }}
-                </td>
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <Switch
-                    v-model="item.hasVacation"
-                    :class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                    Imię i nazwisko
+                  </th>
+                  <th
+                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    scope="col"
                   >
-                    <span
-                      :class="[item.hasVacation ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-                    />
-                  </Switch>
-                </td>
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <RemainingFromPreviousYearPopup
-                    :remaining="item.remainingLastYear"
-                    :to-next-year="item.fromPreviousYear"
-                    :year="year"
-                    class="w-full"
-                    @change-previous-year="limitToChange = item; takingDaysFromPreviousYear = true"
+                    Forma zatrudnienia
+                  </th>
+                  <th
+                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    scope="col"
                   >
-                    <div
-                      class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
-                    >
-                      {{ item.remainingLastYear + item.fromPreviousYear }}
-                    </div>
-                  </RemainingFromPreviousYearPopup>
-                </td>
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <div class="mt-1 sm:col-span-2 sm:mt-0">
-                    <input
-                      v-model="item.days"
-                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
-                      :disabled="!item.hasVacation"
-                      class="block w-full disabled:text-slate-500 disabled:bg-slate-50 rounded-md disabled:border-slate-200 shadow-sm disabled:shadow-none disabled:cursor-not-allowed sm:text-sm"
-                      min="0"
-                      type="number"
+                    Posiada limit?
+                  </th>
+                  <th
+                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    scope="col"
+                  >
+                    Pozostałe dni z {{ year - 1 }}
+                  </th>
+                  <th
+                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    scope="col"
+                  >
+                    Przysługujące dni w roku {{ year }}
+                  </th>
+                  <th
+                    class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                    scope="col"
+                  >
+                    Łączny limit na rok {{ year }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-100">
+                <tr
+                  v-for="(item, index) in form.items"
+                  :key="item.id"
+                  :class="[item.user.deleted ? 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
+                >
+                  <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                    <UserProfileLink
+                      :user="item.user"
                     >
-                    <p
-                      v-if="form.errors[`items.${index}.days`]"
-                      class="mt-2 text-sm text-red-600"
+                      <div class="flex">
+                        <span class="inline-flex justify-center items-center size-10 rounded-full">
+                          <img
+                            :src="item.user.avatar"
+                            class="size-10 rounded-full"
+                          >
+                        </span>
+                        <div class="ml-3">
+                          <p class="text-sm font-medium text-gray-900 break-all">
+                            {{ item.user.name }}
+                          </p>
+                          <p class="text-sm text-gray-500 break-all">
+                            {{ item.user.email }}
+                          </p>
+                        </div>
+                      </div>
+                    </UserProfileLink>
+                  </td>
+                  <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                    {{ item.user.employmentForm }}
+                  </td>
+                  <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                    <Switch
+                      v-model="item.hasVacation"
+                      :class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
                     >
-                      {{ form.errors[`items.${index}.days`] }}
-                    </p>
-                  </div>
-                </td>
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <VacationLimitPopup
-                    :days="item.days"
-                    :from-previous-year="item.fromPreviousYear"
-                    :limit="item.limit"
-                    :to-next-year="item.toNextYear"
-                    :year="year"
-                    class="w-full"
-                  >
-                    <div
-                      class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
+                      <span
+                        :class="[item.hasVacation ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+                      />
+                    </Switch>
+                  </td>
+                  <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                    <RemainingFromPreviousYearPopup
+                      :remaining="item.remainingLastYear"
+                      :to-next-year="item.fromPreviousYear"
+                      :year="year"
+                      class="w-full"
+                      @change-previous-year="limitToChange = item; takingDaysFromPreviousYear = true"
                     >
-                      {{ item.limit }}
+                      <div
+                        class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
+                      >
+                        {{ item.remainingLastYear + item.fromPreviousYear }}
+                      </div>
+                    </RemainingFromPreviousYearPopup>
+                  </td>
+                  <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                    <div class="mt-1 sm:col-span-2 sm:mt-0">
+                      <input
+                        v-model="item.days"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
+                        :disabled="!item.hasVacation"
+                        class="block w-full disabled:text-slate-500 disabled:bg-slate-50 rounded-md disabled:border-slate-200 shadow-sm disabled:shadow-none disabled:cursor-not-allowed sm:text-sm"
+                        min="0"
+                        type="number"
+                      >
+                      <p
+                        v-if="form.errors[`items.${index}.days`]"
+                        class="mt-2 text-sm text-red-600"
+                      >
+                        {{ form.errors[`items.${index}.days`] }}
+                      </p>
                     </div>
-                  </VacationLimitPopup>
-                </td>
-              </tr>
-              <tr v-if="!form.items.length">
-                <td
-                  class="py-4 text-xl leading-5 text-center text-gray-700"
-                  colspan="100%"
-                >
-                  Brak danych
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="flex justify-end py-3 px-4">
-          <button
-            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-            :disabled="form.processing || !form.isDirty"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-            type="submit"
-          >
-            Zapisz
-          </button>
-        </div>
-      </form>
+                  </td>
+                  <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                    <VacationLimitPopup
+                      :days="item.days"
+                      :from-previous-year="item.fromPreviousYear"
+                      :limit="item.limit"
+                      :to-next-year="item.toNextYear"
+                      :year="year"
+                      class="w-full"
+                    >
+                      <div
+                        class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
+                      >
+                        {{ item.limit }}
+                      </div>
+                    </VacationLimitPopup>
+                  </td>
+                </tr>
+                <tr v-if="!form.items.length">
+                  <td
+                    class="py-4 text-xl leading-5 text-center text-gray-700"
+                    colspan="100%"
+                  >
+                    Brak danych
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end py-3 px-4">
+            <button
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
+              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              type="submit"
+            >
+              Zapisz
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
-  </div>
-  <TakeVacationDaysFromPreviousYearModal
-    :limit="limitToChange"
-    :show="takingDaysFromPreviousYear"
-    :year="year"
-    @changed="takingDaysFromPreviousYear = false"
-    @close="takingDaysFromPreviousYear = false"
-  />
+    <TakeVacationDaysFromPreviousYearModal
+      :limit="limitToChange"
+      :show="takingDaysFromPreviousYear"
+      :year="year"
+      @changed="takingDaysFromPreviousYear = false"
+      @close="takingDaysFromPreviousYear = false"
+    />
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index 626e1873..11de2737 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
 import { CheckIcon, ChevronUpDownIcon, XCircleIcon } from '@heroicons/vue/24/solid'
@@ -8,19 +8,23 @@ import axios from 'axios'
 import VacationChart from '@/Shared/VacationChart.vue'
 import VacationType from '@/Shared/VacationType.vue'
 import { DateTime } from 'luxon'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
-  auth: Object,
   users: Object,
   holidays: Object,
   vacationUserId: [Number, null],
   vacationFromDate: [String, null],
 })
 
+const { auth } = useGlobalProps()
+
 const form = useForm({
-  user: props.auth.can.createRequestsOnBehalfOfEmployee
-    ? props.users.data.find(user => user.id === (checkUserId(props.vacationUserId) ?? props.auth.user.id)) ?? props.users.data[0]
-    : props.auth.user,
+  user: auth.value.can.createRequestsOnBehalfOfEmployee
+    ? props.users.data.find(user => user.id === (checkUserId(props.vacationUserId) ?? auth.value.user.id)) ?? props.users.data[0]
+    : auth.value.user,
   from: props.vacationFromDate,
   to: props.vacationFromDate,
   vacationType: null,
@@ -156,339 +160,341 @@ async function refreshAvailableTypes(user) {
 </script>
 
 <template>
-  <InertiaHead title="Dodaj wniosek" />
-  <div
-    :class="[stats.limit > 0 ? ' grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8' : 'mx-auto w-full max-w-7xl']"
-  >
-    <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
-      <div class="p-4 sm:px-6">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Dodaj wniosek
-        </h2>
-      </div>
-      <form
-        class="px-6 h-full border-t border-gray-200"
-        @submit.prevent="createForm"
-      >
-        <div class="flex flex-col justify-around h-full">
-          <div>
-            <div
-              v-if="form.errors.vacationRequest"
-              class="p-4 mt-2 bg-red-50 rounded-md"
-            >
-              <div class="flex">
-                <div class="shrink-0">
-                  <XCircleIcon class="w-5 h-5 text-red-400" />
-                </div>
-                <div class="ml-3">
-                  <h3 class="text-sm font-medium text-red-800">
-                    Wniosek nie mógł zostać utworzony
-                  </h3>
-                  <div class="mt-2 text-sm text-red-700">
-                    <span>{{ form.errors.vacationRequest }}</span>
+  <AppLayout>
+    <template #title>Dodaj wniosek</template>
+    <div
+      :class="[stats.limit > 0 ? ' grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8' : 'mx-auto w-full max-w-7xl']"
+    >
+      <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Dodaj wniosek
+          </h2>
+        </div>
+        <form
+          class="px-6 h-full border-t border-gray-200"
+          @submit.prevent="createForm"
+        >
+          <div class="flex flex-col justify-around h-full">
+            <div>
+              <div
+                v-if="form.errors.vacationRequest"
+                class="p-4 mt-2 bg-red-50 rounded-md"
+              >
+                <div class="flex">
+                  <div class="shrink-0">
+                    <XCircleIcon class="size-5 text-red-400" />
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-800">
+                      Wniosek nie mógł zostać utworzony
+                    </h3>
+                    <div class="mt-2 text-sm text-red-700">
+                      <span>{{ form.errors.vacationRequest }}</span>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <Listbox
-              v-if="auth.can.createRequestsOnBehalfOfEmployee"
-              v-model="form.user"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Osoba składająca wniosek
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
-                >
-                  <span class="flex items-center">
-                    <img
-                      :src="form.user.avatar"
-                      class="shrink-0 w-6 h-6 rounded-full"
-                    >
-                    <span class="block ml-3 truncate">{{ form.user.name }}</span>
-                  </span>
-                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                    <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                  </span>
-                </ListboxButton>
+              <Listbox
+                v-if="auth.can.createRequestsOnBehalfOfEmployee"
+                v-model="form.user"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Osoba składająca wniosek
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
+                  >
+                    <span class="flex items-center">
+                      <img
+                        :src="form.user.avatar"
+                        class="shrink-0 size-6 rounded-full"
+                      >
+                      <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                    </span>
+                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                      <ChevronUpDownIcon class="size-5 text-gray-400" />
+                    </span>
+                  </ListboxButton>
 
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
                   >
-                    <ListboxOption
-                      v-for="user in users.data"
-                      :key="user.id"
-                      v-slot="{ active, selected }"
-                      as="template"
-                      :value="user"
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <div class="flex items-center">
-                          <img
-                            :src="user.avatar"
-                            alt=""
-                            class="shrink-0 w-6 h-6 rounded-full"
+                      <ListboxOption
+                        v-for="user in users.data"
+                        :key="user.id"
+                        v-slot="{ active, selected }"
+                        as="template"
+                        :value="user"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <div class="flex items-center">
+                            <img
+                              :src="user.avatar"
+                              alt=""
+                              class="shrink-0 size-6 rounded-full"
+                            >
+                            <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                              {{ user.name }}
+                            </span>
+                          </div>
+
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                           >
-                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
-                            {{ user.name }}
+                            <CheckIcon class="size-5" />
                           </span>
-                        </div>
-
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.user"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors.user }}
-                </p>
-              </div>
-            </Listbox>
-            <div
-              v-else
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <label
-                for="date_from"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.user"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.user }}
+                  </p>
+                </div>
+              </Listbox>
+              <div
+                v-else
+                class="items-center py-4 sm:grid sm:grid-cols-3"
               >
-                Osoba składająca wniosek
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <div class="flex justify-start items-center">
-                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
-                    <img
-                      class="w-10 h-10 rounded-full"
-                      :src="auth.user.avatar"
-                    >
-                  </span>
-                  <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900">
-                      {{ auth.user.name }}
+                <label
+                  for="date_from"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
+                >
+                  Osoba składająca wniosek
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex justify-start items-center">
+                    <span class="inline-flex justify-center items-center size-10 rounded-full">
+                      <img
+                        class="size-10 rounded-full"
+                        :src="auth.user.avatar"
+                      >
+                    </span>
+                    <div class="ml-3">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ auth.user.name }}
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <Listbox
-              v-model="form.vacationType"
-              as="div"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Typ wniosku
-              </ListboxLabel>
-              <div class="relative mt-1 sm:col-span-2 sm:mt-0">
-                <ListboxButton
-                  class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-                >
-                  <template v-if="form.vacationType">
-                    <span class="block truncate">
-                      <VacationType :type="form.vacationType.value" />
-                    </span>
-                    <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                      <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-                    </span>
-                  </template>
-                  <template v-else>
-                    Ładowanie...
-                  </template>
-                </ListboxButton>
-                <transition
-                  leave-active-class="transition ease-in duration-100"
-                  leave-from-class="opacity-100"
-                  leave-to-class="opacity-0"
-                >
-                  <ListboxOptions
-                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <Listbox
+                v-model="form.vacationType"
+                as="div"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
+              >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                  Typ wniosku
+                </ListboxLabel>
+                <div class="relative mt-1 sm:col-span-2 sm:mt-0">
+                  <ListboxButton
+                    class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
                   >
-                    <ListboxOption
-                      v-for="vacationType in vacationTypes"
-                      :key="vacationType.value"
-                      v-slot="{ active, selected }"
-                      as="template"
-                      :value="vacationType"
+                    <template v-if="form.vacationType">
+                      <span class="block truncate">
+                        <VacationType :type="form.vacationType.value" />
+                      </span>
+                      <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                        <ChevronUpDownIcon class="size-5 text-gray-400" />
+                      </span>
+                    </template>
+                    <template v-else>
+                      Ładowanie...
+                    </template>
+                  </ListboxButton>
+                  <transition
+                    leave-active-class="transition ease-in duration-100"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                  >
+                    <ListboxOptions
+                      class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                     >
-                      <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                        <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          <VacationType :type="vacationType.value" />
-                        </span>
-
-                        <span
-                          v-if="selected"
-                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
-                        >
-                          <CheckIcon class="w-5 h-5" />
-                        </span>
-                      </li>
-                    </ListboxOption>
-                  </ListboxOptions>
-                </transition>
-                <p
-                  v-if="form.errors.type"
-                  class="mt-2 text-sm text-red-600"
+                      <ListboxOption
+                        v-for="vacationType in vacationTypes"
+                        :key="vacationType.value"
+                        v-slot="{ active, selected }"
+                        as="template"
+                        :value="vacationType"
+                      >
+                        <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                            <VacationType :type="vacationType.value" />
+                          </span>
+
+                          <span
+                            v-if="selected"
+                            :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                          >
+                            <CheckIcon class="size-5" />
+                          </span>
+                        </li>
+                      </ListboxOption>
+                    </ListboxOptions>
+                  </transition>
+                  <p
+                    v-if="form.errors.type"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.type }}
+                  </p>
+                </div>
+              </Listbox>
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="date_from"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors.type }}
-                </p>
+                  Data od
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_from"
+                    v-model="form.from"
+                    :config="fromInputConfig"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
+                    @on-change="onFromChange"
+                  />
+                  <p
+                    v-if="form.errors.from"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.from }}
+                  </p>
+                </div>
               </div>
-            </Listbox>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="date_from"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data od
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_from"
-                  v-model="form.from"
-                  :config="fromInputConfig"
-                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
-                  @on-change="onFromChange"
-                />
-                <p
-                  v-if="form.errors.from"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="date_from"
+                  class="block text-sm font-medium text-gray-700 sm:mt-px"
                 >
-                  {{ form.errors.from }}
-                </p>
+                  Data do
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <FlatPickr
+                    id="date_to"
+                    v-model="form.to"
+                    :config="toInputConfig"
+                    class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
+                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+                    @on-change="onToChange"
+                  />
+                  <p
+                    v-if="form.errors.to"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors.to }}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="date_from"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Data do
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <FlatPickr
-                  id="date_to"
-                  v-model="form.to"
-                  :config="toInputConfig"
-                  class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
-                  @on-change="onToChange"
-                />
-                <p
-                  v-if="form.errors.to"
-                  class="mt-2 text-sm text-red-600"
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni</span>
+                <div
+                  class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
                 >
-                  {{ form.errors.to }}
-                </p>
+                  {{ estimatedDays.length }}
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni</span>
-              <div
-                class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
-              >
-                {{ estimatedDays.length }}
+              <div class="items-center py-4 sm:grid sm:grid-cols-3">
+                <label
+                  for="comment"
+                  class="block text-sm font-medium text-gray-700"
+                >
+                  Komentarz
+                  <span class="text-xs text-gray-500">
+                    (opcjonalny)
+                  </span>
+                </label>
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <textarea
+                    id="comment"
+                    v-model="form.comment"
+                    rows="4"
+                    class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-3">
-              <label
-                for="comment"
-                class="block text-sm font-medium text-gray-700"
+              <div
+                v-if="auth.can.skipRequestFlow"
+                class="items-center py-4 sm:grid sm:grid-cols-3"
               >
-                Komentarz
-                <span class="text-xs text-gray-500">
-                  (opcjonalny)
-                </span>
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <textarea
-                  id="comment"
-                  v-model="form.comment"
-                  rows="4"
-                  class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
-                />
+                <label
+                  for="flowSkipped"
+                  class="block text-sm font-medium text-gray-700"
+                >
+                  Natychmiastowo zatwierdź wniosek
+                </label>
+                <div class="mt-2 sm:col-span-2 sm:mt-0">
+                  <Switch
+                    id="flowSkipped"
+                    v-model="form.flowSkipped"
+                    :class="[form.flowSkipped ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                  >
+                    <span
+                      :class="[form.flowSkipped ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200']"
+                    />
+                  </Switch>
+                </div>
               </div>
             </div>
-            <div
-              v-if="auth.can.skipRequestFlow"
-              class="items-center py-4 sm:grid sm:grid-cols-3"
-            >
-              <label
-                for="flowSkipped"
-                class="block text-sm font-medium text-gray-700"
-              >
-                Natychmiastowo zatwierdź wniosek
-              </label>
-              <div class="mt-2 sm:col-span-2 sm:mt-0">
-                <Switch
-                  id="flowSkipped"
-                  v-model="form.flowSkipped"
-                  :class="[form.flowSkipped ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+            <div class="flex justify-end py-3">
+              <div class="space-x-3">
+                <InertiaLink
+                  href="/vacation/requests"
+                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
                 >
-                  <span
-                    :class="[form.flowSkipped ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-                  />
-                </Switch>
+                  Anuluj
+                </InertiaLink>
+                <button
+                  type="submit"
+                  class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                  :disabled="form.processing || !isDirty"
+                >
+                  Dodaj
+                </button>
               </div>
             </div>
           </div>
-          <div class="flex justify-end py-3">
-            <div class="space-x-3">
-              <InertiaLink
-                href="/vacation/requests"
-                class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              >
-                Anuluj
-              </InertiaLink>
-              <button
-                type="submit"
-                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !isDirty"
-              >
-                Dodaj
-              </button>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div
-      v-if="stats.limit > 0 "
-      class="h-full bg-white shadow-md"
-    >
-      <div class="p-4 sm:px-6">
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          <span v-if="auth.user.id !== form.user.id">
-            Dane urlopowe dla: {{ form.user.name }}
-          </span>
-          <span v-else>
-            Moje dane o urlopie
-          </span>
-          <span>
-            w roku {{ year }}
-          </span>
-        </h2>
+        </form>
       </div>
-      <div class="px-6 pt-8 border-t border-gray-200">
-        <VacationChart :stats="stats" />
+      <div
+        v-if="stats.limit > 0 "
+        class="h-full bg-white shadow-md"
+      >
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            <span v-if="auth.user.id !== form.user.id">
+              Dane urlopowe dla: {{ form.user.name }}
+            </span>
+            <span v-else>
+              Moje dane o urlopie
+            </span>
+            <span>
+              w roku {{ year }}
+            </span>
+          </h2>
+        </div>
+        <div class="px-6 pt-8 border-t border-gray-200">
+          <VacationChart :stats="stats" />
+        </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index f22ed7ff..06643ec2 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -6,10 +6,12 @@ import Pagination from '@/Shared/Pagination.vue'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { DateTime } from 'luxon'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   requests: Object,
@@ -45,7 +47,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/vacation/requests/me', { status: form.status.value, year: form.year, withoutRemote: form.withoutRemote }, {
+  router.get('/vacation/requests/me', { status: form.status.value, year: form.year, withoutRemote: form.withoutRemote }, {
     preserveState: true,
     replace: false,
   })
@@ -54,214 +56,216 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Moje wnioski" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Moje wnioski w roku
-        <YearPicker
-          v-model="form.year"
-          :from="currentDate.year + 1"
-          :to="currentDate.year - 20"
-          class="inline-block ml-2"
-        />
-      </h2>
-      <div>
-        <InertiaLink
-          href="/vacation/requests/create"
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-        >
-          Dodaj wniosek
-        </InertiaLink>
-      </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="hidden relative divide-x divide-gray-200 shadow md:flex">
-        <button
-          v-for="(status, index) in statuses"
-          :key="index"
-          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
-          @click="form.status = status"
-        >
-          <span>{{ status.name }}</span>
-          <span
-            v-if="stats[status.value]"
-            :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold 2xl:inline-block']"
-          >
-            {{ stats[status.value] }}
-          </span>
-          <span
-            :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
+  <AppLayout>
+    <template #title>Moje wnioski</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Moje wnioski w roku
+          <YearPicker
+            v-model="form.year"
+            :from="currentDate.year + 1"
+            :to="currentDate.year - 20"
+            class="inline-block ml-2"
           />
-        </button>
+        </h2>
+        <div>
+          <InertiaLink
+            href="/vacation/requests/create"
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+          >
+            Dodaj wniosek
+          </InertiaLink>
+        </div>
       </div>
-      <div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
-        <Listbox
-          v-model="form.status"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Status
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+      <div class="border-t border-gray-200">
+        <div class="hidden relative divide-x divide-gray-200 shadow md:flex">
+          <button
+            v-for="(status, index) in statuses"
+            :key="index"
+            :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white p-4 text-sm font-medium text-center']"
+            @click="form.status = status"
+          >
+            <span>{{ status.name }}</span>
+            <span
+              v-if="stats[status.value]"
+              :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold 2xl:inline-block']"
             >
-              <span class="flex items-center">
-                {{ form.status.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+              {{ stats[status.value] }}
+            </span>
+            <span
+              :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
+            />
+          </button>
+        </div>
+        <div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
+          <Listbox
+            v-model="form.status"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Status
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.status.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="status in statuses"
-                  :key="status.value"
-                  v-slot="{ active, selected }"
-                  as="template"
-                  :value="status"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="status in statuses"
+                    :key="status.value"
+                    v-slot="{ active, selected }"
+                    as="template"
+                    :value="status"
                   >
-                    {{ status.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-      </div>
-    </div>
-    <div class="relative flex items-start p-4 sm:px-6">
-      <div class="flex h-5 items-center">
-        <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-          <input
-            v-model="form.withoutRemote"
-            type="checkbox"
-            class="focus:ring-blumilk-500 h-4 w-4 text-blumilk-600 border-gray-300 rounded mr-1"
-          >
-          Ukryj wnioski o pracę zdalną
-        </label>
+                      {{ status.name }}
+
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
       </div>
-    </div>
-    <div class="overflow-auto xl:overflow-visible">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+      <div class="relative flex items-start p-4 sm:px-6">
+        <div class="flex h-5 items-center">
+          <label class="block text-sm font-medium text-gray-700 sm:mt-px">
+            <input
+              v-model="form.withoutRemote"
+              type="checkbox"
+              class="focus:ring-blumilk-500 size-4 text-blumilk-600 border-gray-300 rounded mr-1"
             >
-              Rodzaj wniosku
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Dni urlopu
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
-            </th>
-            <th scope="col" />
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-100">
-          <InertiaLink
-            v-for="request in requests.data"
-            :key="request.id"
-            :href="`/vacation/requests/${request.id}`"
-            as="tr"
-            class="relative hover:bg-blumilk-25"
-          >
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/vacation/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+            Ukryj wnioski o pracę zdalną
+          </label>
+        </div>
+      </div>
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                {{ request.name }}
-              </InertiaLink>
-            </td>
-            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
-              <VacationType :type="request.type" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.from }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.to }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.days.length }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <Status :status="request.state" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/vacation/requests/${request.id}`"
-                class="flex justify-around focus:outline-blumilk-500"
+                Numer
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
-              </InertiaLink>
-            </td>
-          </InertiaLink>
-          <tr v-if="! requests.data.length">
-            <td
-              colspan="100%"
-              class="py-4 text-xl leading-5 text-center text-gray-700"
+                Rodzaj wniosku
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Od
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Do
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Dni urlopu
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Status
+              </th>
+              <th scope="col" />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <InertiaLink
+              v-for="request in requests.data"
+              :key="request.id"
+              :href="`/vacation/requests/${request.id}`"
+              as="tr"
+              class="relative hover:bg-blumilk-25"
             >
-              <EmptyState>
-                <template #title>
-                  Brak wniosków
-                </template>
-                <template #text>
-                  Nie znaleziono wniosków o danym statusie
-                </template>
-              </EmptyState>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/vacation/requests/${request.id}`"
+                  class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+                >
+                  {{ request.name }}
+                </InertiaLink>
+              </td>
+              <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
+                <VacationType :type="request.type" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.from }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.to }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.days.length }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <Status :status="request.state" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/vacation/requests/${request.id}`"
+                  class="flex justify-around focus:outline-blumilk-500"
+                >
+                  <ChevronRightIcon class="block size-6 fill-blumilk-500" />
+                </InertiaLink>
+              </td>
+            </InertiaLink>
+            <tr v-if="! requests.data.length">
+              <td
+                colspan="100%"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+              >
+                <EmptyState>
+                  <template #title>
+                    Brak wniosków
+                  </template>
+                  <template #text>
+                    Nie znaleziono wniosków o danym statusie
+                  </template>
+                </EmptyState>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
-    <Pagination :pagination="requests.meta" />
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 52e2b634..43db9949 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -4,12 +4,14 @@ import Status from '@/Shared/Status.vue'
 import VacationType from '@/Shared/VacationType.vue'
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
-import { Inertia } from '@inertiajs/inertia'
+import { router } from '@inertiajs/vue3'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import Pagination from '@/Shared/Pagination.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { DateTime } from 'luxon'
 import YearPicker from '@/Shared/Forms/YearPicker.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   requests: Object,
@@ -51,7 +53,7 @@ const form = reactive({
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/vacation/requests', {
+  router.get('/vacation/requests', {
     user: form.user?.id,
     status: form.status.value,
     type: form.type?.value,
@@ -64,374 +66,376 @@ watch(form, debounce(() => {
 </script>
 
 <template>
-  <InertiaHead title="Wnioski" />
-  <div class="bg-white shadow-md">
-    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
-        <h2 class="text-lg font-medium leading-6 text-gray-900">
-          Lista wniosków
-        </h2>
-      </div>
-      <div>
-        <InertiaLink
-          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-          href="/vacation/requests/create"
-        >
-          Dodaj wniosek
-        </InertiaLink>
+  <AppLayout>
+    <template #title>Wnioski</template>
+    <div class="bg-white shadow-md">
+      <div class="flex justify-between items-center p-4 sm:px-6">
+        <div>
+          <h2 class="text-lg font-medium leading-6 text-gray-900">
+            Lista wniosków
+          </h2>
+        </div>
+        <div>
+          <InertiaLink
+            class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            href="/vacation/requests/create"
+          >
+            Dodaj wniosek
+          </InertiaLink>
+        </div>
       </div>
-    </div>
-    <div class="border-t border-gray-200">
-      <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-4 md:gap-4">
-        <Listbox
-          v-model="form.user"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Pracownik
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span v-if="form.user === null">
-                Wszyscy
-              </span>
-              <span
-                v-else
-                class="flex items-center"
+      <div class="border-t border-gray-200">
+        <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-4 md:gap-4">
+          <Listbox
+            v-model="form.user"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Pracownik
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
               >
-                <img
-                  :src="form.user.avatar"
-                  class="shrink-0 w-6 h-6 rounded-full"
+                <span v-if="form.user === null">
+                  Wszyscy
+                </span>
+                <span
+                  v-else
+                  class="flex items-center"
                 >
-                <span class="block ml-3 truncate">{{ form.user.name }}</span>
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                  <img
+                    :src="form.user.avatar"
+                    class="shrink-0 size-6 rounded-full"
+                  >
+                  <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-slot="{ active }"
-                  :value="null"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-slot="{ active }"
+                    :value="null"
+                    as="template"
                   >
-                    <div class="flex items-center">
-                      Wszyscy
-                    </div>
-
-                    <span
-                      v-if="form.user === null"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-                <ListboxOption
-                  v-for="user in users.data"
-                  :key="user.id"
-                  v-slot="{ active }"
-                  :value="user"
-                  as="template"
-                >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
-                  >
-                    <div class="flex items-center">
-                      <img
-                        :src="user.avatar"
-                        class="shrink-0 w-6 h-6 rounded-full"
-                      >
+                      <div class="flex items-center">
+                        Wszyscy
+                      </div>
+
                       <span
-                        :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        v-if="form.user === null"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                       >
-                        {{ user.name }}
+                        <CheckIcon class="size-5" />
                       </span>
-                    </div>
-                    <span
-                      v-if="form.user?.id === user.id"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    </li>
+                  </ListboxOption>
+                  <ListboxOption
+                    v-for="user in users.data"
+                    :key="user.id"
+                    v-slot="{ active }"
+                    :value="user"
+                    as="template"
+                  >
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <Listbox
-          v-model="form.status"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Status
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <span class="flex items-center">
-                {{ form.status.name }}
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                      <div class="flex items-center">
+                        <img
+                          :src="user.avatar"
+                          class="shrink-0 size-6 rounded-full"
+                        >
+                        <span
+                          :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                        >
+                          {{ user.name }}
+                        </span>
+                      </div>
+                      <span
+                        v-if="form.user?.id === user.id"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <Listbox
+            v-model="form.status"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Status
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+              >
+                <span class="flex items-center">
+                  {{ form.status.name }}
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-for="status in statuses"
-                  :key="status.value"
-                  v-slot="{ active, selected }"
-                  :value="status"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-for="status in statuses"
+                    :key="status.value"
+                    v-slot="{ active, selected }"
+                    :value="status"
+                    as="template"
                   >
-                    {{ status.name }}
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <Listbox
-          v-model="form.type"
-          as="div"
-        >
-          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Rodzaj wniosku
-          </ListboxLabel>
-          <div class="relative mt-1 sm:mt-0">
-            <ListboxButton
-              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
-            >
-              <VacationType
-                v-if="form.type"
-                :type="form.type.value"
-              />
+                      {{ status.name }}
 
-              <span
-                v-else
-                class="flex items-center"
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <Listbox
+            v-model="form.type"
+            as="div"
+          >
+            <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+              Rodzaj wniosku
+            </ListboxLabel>
+            <div class="relative mt-1 sm:mt-0">
+              <ListboxButton
+                class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
               >
-                Wszystkie
-              </span>
-              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-                <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
-              </span>
-            </ListboxButton>
+                <VacationType
+                  v-if="form.type"
+                  :type="form.type.value"
+                />
 
-            <transition
-              leave-active-class="transition ease-in duration-100"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-            >
-              <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                <span
+                  v-else
+                  class="flex items-center"
+                >
+                  Wszystkie
+                </span>
+                <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                  <ChevronUpDownIcon class="size-5 text-gray-400" />
+                </span>
+              </ListboxButton>
+
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
               >
-                <ListboxOption
-                  v-slot="{ active, selected }"
-                  :value="null"
-                  as="template"
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
                 >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  <ListboxOption
+                    v-slot="{ active, selected }"
+                    :value="null"
+                    as="template"
                   >
-                    Wszystkie
-
-                    <span
-                      v-if="selected"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-                <ListboxOption
-                  v-for="type in types"
-                  :key="type.value"
-                  v-slot="{ active }"
-                  :value="type"
-                  as="template"
-                >
-                  <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                      Wszystkie
+
+                      <span
+                        v-if="selected"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                  <ListboxOption
+                    v-for="type in types"
+                    :key="type.value"
+                    v-slot="{ active }"
+                    :value="type"
+                    as="template"
                   >
-                    <VacationType :type="type.value" />
-                    <span
-                      v-if="form.type?.value === type.value"
-                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    <li
+                      :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                     >
-                      <CheckIcon class="w-5 h-5" />
-                    </span>
-                  </li>
-                </ListboxOption>
-              </ListboxOptions>
-            </transition>
-          </div>
-        </Listbox>
-        <YearPicker
-          v-model="form.year"
-          nullable
-          label="Rok"
-          :from="currentDate.year + 1"
-          :to="currentDate.year - 20"
-          class="inline-block ml-2"
-        />
+                      <VacationType :type="type.value" />
+                      <span
+                        v-if="form.type?.value === type.value"
+                        :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                      >
+                        <CheckIcon class="size-5" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+          <YearPicker
+            v-model="form.year"
+            nullable
+            label="Rok"
+            :from="currentDate.year + 1"
+            :to="currentDate.year - 20"
+            class="inline-block ml-2"
+          />
+        </div>
       </div>
-    </div>
-    <div class="overflow-auto xl:overflow-visible">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Numer
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Pracownik
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Rodzaj wniosku
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Od
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Do
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Dni urlopu
-            </th>
-            <th
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              scope="col"
-            >
-              Status
-            </th>
-            <th scope="col" />
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-100">
-          <InertiaLink
-            v-for="request in requests.data"
-            :key="request.id"
-            :href="`/vacation/requests/${request.id}`"
-            as="tr"
-            :class="[request.user.isActive ? '' : 'bg-gray-100', 'relative hover:bg-blumilk-25 hover:cursor-pointer']"
-          >
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/vacation/requests/${request.id}`"
-                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
               >
-                {{ request.name }}
-              </InertiaLink>
-            </td>
-            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
-              <div class="flex">
-                <div class="w-10 h-10 rounded-full">
-                  <img :src="request.user.avatar">
-                </div>
-                <div class="ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    {{ request.user.name }}
-                  </p>
-                  <p class="text-sm text-gray-500">
-                    {{ request.user.email }}
-                  </p>
-                </div>
-              </div>
-            </td>
-            <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
-              <VacationType :type="request.type" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.from }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.to }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              {{ request.days.length }}
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <Status :status="request.state" />
-            </td>
-            <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-              <InertiaLink
-                :href="`/vacation/requests/${request.id}`"
-                class="flex justify-around focus:outline-blumilk-500"
+                Numer
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
               >
-                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
-              </InertiaLink>
-            </td>
-          </InertiaLink>
-          <tr v-if="! requests.data.length">
-            <td
-              class="py-4 text-xl leading-5 text-center text-gray-700"
-              colspan="100%"
+                Pracownik
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Rodzaj wniosku
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Od
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Do
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Dni urlopu
+              </th>
+              <th
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                scope="col"
+              >
+                Status
+              </th>
+              <th scope="col" />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <InertiaLink
+              v-for="request in requests.data"
+              :key="request.id"
+              :href="`/vacation/requests/${request.id}`"
+              as="tr"
+              :class="[request.user.isActive ? '' : 'bg-gray-100', 'relative hover:bg-blumilk-25 hover:cursor-pointer']"
             >
-              <EmptyState>
-                <template #title>
-                  Brak wniosków
-                </template>
-                <template #text>
-                  Spróbuj sformułować zapytanie inaczej
-                </template>
-              </EmptyState>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/vacation/requests/${request.id}`"
+                  class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
+                >
+                  {{ request.name }}
+                </InertiaLink>
+              </td>
+              <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
+                <div class="flex">
+                  <div class="size-10 rounded-full">
+                    <img :src="request.user.avatar">
+                  </div>
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900">
+                      {{ request.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500">
+                      {{ request.user.email }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
+                <VacationType :type="request.type" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.from }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.to }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ request.days.length }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <Status :status="request.state" />
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <InertiaLink
+                  :href="`/vacation/requests/${request.id}`"
+                  class="flex justify-around focus:outline-blumilk-500"
+                >
+                  <ChevronRightIcon class="block size-6 fill-blumilk-500" />
+                </InertiaLink>
+              </td>
+            </InertiaLink>
+            <tr v-if="! requests.data.length">
+              <td
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+                colspan="100%"
+              >
+                <EmptyState>
+                  <template #title>
+                    Brak wniosków
+                  </template>
+                  <template #text>
+                    Spróbuj sformułować zapytanie inaczej
+                  </template>
+                </EmptyState>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Pagination :pagination="requests.meta" />
     </div>
-    <Pagination :pagination="requests.meta" />
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index 0c35939a..54dfc955 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -7,15 +7,19 @@ import VacationBar from '@/Shared/VacationBar.vue'
 import CalendarComponent from '@/Shared/CalendarComponent.vue'
 import { ref, watch } from 'vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
+import AppLayout from '@/Shared/Layout/AppLayout.vue'
 
 const props = defineProps({
   request: Object,
   activities: Object,
   stats: Object,
-  auth: Object,
   handyCalendarData: Object,
 })
 
+const { auth } = useGlobalProps()
+
 const handyCalendarKey = ref(0)
 
 const forceRerender = () => {
@@ -28,290 +32,292 @@ watch(() => props.handyCalendarData, () => {
 </script>
 
 <template>
-  <InertiaHead :title="`Wniosek ${request.name}`" />
-  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
-    <div class="space-y-6 xl:col-span-2 xl:col-start-1">
-      <div class="bg-white shadow-md">
-        <div class="py-5 px-4 sm:px-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Informacje na temat wniosku
-          </h3>
-        </div>
-        <div class="py-5 px-4 border-t border-gray-200 sm:p-0">
-          <dl class="sm:divide-y sm:divide-gray-200">
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Nr wniosku
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ request.name }}
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="flex items-center text-sm font-medium text-gray-500">
-                Pracownik
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <UserProfileLink
-                  :user="request.user"
-                  class="flex"
-                >
-                  <div class="flex">
-                    <img
-                      :src="request.user.avatar"
-                      class="w-10 h-10 rounded-full"
-                    >
-                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900">
-                        {{ request.user.name }}
-                      </p>
-                      <p class="text-sm text-gray-500">
-                        {{ request.user.email }}
-                      </p>
+  <AppLayout>
+    <template #title>`Wniosek ${request.name}`</template>
+    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
+      <div class="space-y-6 xl:col-span-2 xl:col-start-1">
+        <div class="bg-white shadow-md">
+          <div class="py-5 px-4 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Informacje na temat wniosku
+            </h3>
+          </div>
+          <div class="py-5 px-4 border-t border-gray-200 sm:p-0">
+            <dl class="sm:divide-y sm:divide-gray-200">
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Nr wniosku
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  {{ request.name }}
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="flex items-center text-sm font-medium text-gray-500">
+                  Pracownik
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <UserProfileLink
+                    :user="request.user"
+                    class="flex"
+                  >
+                    <div class="flex">
+                      <img
+                        :src="request.user.avatar"
+                        class="size-10 rounded-full"
+                      >
+                      <div class="ml-3">
+                        <p class="text-sm font-medium text-gray-900">
+                          {{ request.user.name }}
+                        </p>
+                        <p class="text-sm text-gray-500">
+                          {{ request.user.email }}
+                        </p>
+                      </div>
                     </div>
-                  </div>
-                </UserProfileLink>
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Rodzaj wniosku
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <VacationType :type="request.type" />
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Obecny status
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <Status :status="request.state" />
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Data
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <template v-if="request.days.length > 1">
-                  {{ request.from }} - {{ request.to }}
-                </template>
-                <template v-else>
-                  {{ request.from }}
-                </template>
-                <span class="font-semibold">
-                  [Liczba dni: {{ request.days.length }}]
-                </span>
-              </dd>
-            </div>
-            <div
-              v-if="request.isVacation && (stats.limit > 0) && (request.can.acceptAsTechnical || request.can.acceptAsAdministrative || request.can.reject)"
-              class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6"
-            >
-              <dt class="flex items-center text-sm font-medium text-gray-500">
-                Wykorzystanie urlopu
-              </dt>
-              <dd>
-                <VacationBar :stats="{ used: stats.used, pending: stats.pending, remaining: stats.remaining }" />
-              </dd>
-            </div>
-            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Komentarz
-              </dt>
-              <dd
-                v-if="request.comment != null"
-                class="mt-1 text-sm text-gray-900 break-all sm:col-span-2 sm:mt-0"
+                  </UserProfileLink>
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Rodzaj wniosku
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <VacationType :type="request.type" />
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Obecny status
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <Status :status="request.state" />
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Data
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <template v-if="request.days.length > 1">
+                    {{ request.from }} - {{ request.to }}
+                  </template>
+                  <template v-else>
+                    {{ request.from }}
+                  </template>
+                  <span class="font-semibold">
+                    [Liczba dni: {{ request.days.length }}]
+                  </span>
+                </dd>
+              </div>
+              <div
+                v-if="request.isVacation && (stats.limit > 0) && (request.can.acceptAsTechnical || request.can.acceptAsAdministrative || request.can.reject)"
+                class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6"
               >
-                {{ request.comment }}
-              </dd>
-              <dd
-                v-else
-                class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
+                <dt class="flex items-center text-sm font-medium text-gray-500">
+                  Wykorzystanie urlopu
+                </dt>
+                <dd>
+                  <VacationBar :stats="{ used: stats.used, pending: stats.pending, remaining: stats.remaining }" />
+                </dd>
+              </div>
+              <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <dt class="text-sm font-medium text-gray-500">
+                  Komentarz
+                </dt>
+                <dd
+                  v-if="request.comment != null"
+                  class="mt-1 text-sm text-gray-900 break-all sm:col-span-2 sm:mt-0"
+                >
+                  {{ request.comment }}
+                </dd>
+                <dd
+                  v-else
+                  class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
+                >
+                  -
+                </dd>
+              </div>
+              <div
+                v-if="request.isVacation"
+                class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
               >
-                -
-              </dd>
+                <dt class="flex items-center text-sm font-medium text-gray-500">
+                  Załączniki
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <ul class="rounded-md border border-gray-200 divide-y divide-gray-200">
+                    <li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
+                      <div class="flex flex-1 items-center w-0">
+                        <PaperClipIcon class="shrink-0 size-5 text-gray-400" />
+                        <span class="flex-1 ml-2 w-0 truncate">wniosek.pdf</span>
+                      </div>
+                      <div class="shrink-0 ml-4">
+                        <a
+                          :href="`/vacation/requests/${request.id}/download`"
+                          class="font-medium text-blumilk-600 hover:text-blumilk-500"
+                          target="_blank"
+                        >
+                          Pobierz
+                        </a>
+                      </div>
+                    </li>
+                  </ul>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div
+          v-if="request.can.acceptAsTechnical"
+          class="bg-white shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Zaakceptuj wniosek jako osoba techniczna
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
+                musiała go zaakceptować.
+              </p>
             </div>
-            <div
-              v-if="request.isVacation"
-              class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="flex items-center text-sm font-medium text-gray-500">
-                Załączniki
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul class="rounded-md border border-gray-200 divide-y divide-gray-200">
-                  <li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
-                    <div class="flex flex-1 items-center w-0">
-                      <PaperClipIcon class="shrink-0 w-5 h-5 text-gray-400" />
-                      <span class="flex-1 ml-2 w-0 truncate">wniosek.pdf</span>
-                    </div>
-                    <div class="shrink-0 ml-4">
-                      <a
-                        :href="`/vacation/requests/${request.id}/download`"
-                        class="font-medium text-blumilk-600 hover:text-blumilk-500"
-                        target="_blank"
-                      >
-                        Pobierz
-                      </a>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/vacation/requests/${request.id}/accept-as-technical`"
+                as="button"
+                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                method="post"
+                preserve-scroll
+              >
+                Zaakceptuj wniosek
+              </InertiaLink>
             </div>
-          </dl>
-        </div>
-      </div>
-      <div
-        v-if="request.can.acceptAsTechnical"
-        class="bg-white shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Zaakceptuj wniosek jako osoba techniczna
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
-              musiała go zaakceptować.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/vacation/requests/${request.id}/accept-as-technical`"
-              as="button"
-              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              method="post"
-              preserve-scroll
-            >
-              Zaakceptuj wniosek
-            </InertiaLink>
           </div>
         </div>
-      </div>
-      <div
-        v-if="request.can.acceptAsAdministrative"
-        class="bg-white shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Zaakceptuj wniosek jako osoba administracyjna
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              Po akceptacji przez osobę administracyjną, wniosek zostanie zatwierdzony.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/vacation/requests/${request.id}/accept-as-administrative`"
-              as="button"
-              class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-              method="post"
-              preserve-scroll
-            >
-              Zaakceptuj wniosek
-            </InertiaLink>
+        <div
+          v-if="request.can.acceptAsAdministrative"
+          class="bg-white shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Zaakceptuj wniosek jako osoba administracyjna
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                Po akceptacji przez osobę administracyjną, wniosek zostanie zatwierdzony.
+              </p>
+            </div>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/vacation/requests/${request.id}/accept-as-administrative`"
+                as="button"
+                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                method="post"
+                preserve-scroll
+              >
+                Zaakceptuj wniosek
+              </InertiaLink>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        v-if="request.can.reject"
-        class="bg-white shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Odrzuć wniosek
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              Odrzuconego wniosku nie można przywracać - należy zrobić nowy.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/vacation/requests/${request.id}/reject`"
-              as="button"
-              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
-              method="post"
-              preserve-scroll
-            >
+        <div
+          v-if="request.can.reject"
+          class="bg-white shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Odrzuć wniosek
-            </InertiaLink>
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                Odrzuconego wniosku nie można przywracać - należy zrobić nowy.
+              </p>
+            </div>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/vacation/requests/${request.id}/reject`"
+                as="button"
+                class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
+                method="post"
+                preserve-scroll
+              >
+                Odrzuć wniosek
+              </InertiaLink>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        v-if="request.can.cancel"
-        class="bg-white border border-red-500 shadow"
-      >
-        <div class="py-5 px-4 sm:p-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Anuluj wniosek
-          </h3>
-          <div class="mt-2 max-w-xl text-sm text-gray-500">
-            <p>
-              Anulowanego wniosku nie można przywrócić - należy utworzyć nowy.
-            </p>
-          </div>
-          <div class="mt-5">
-            <InertiaLink
-              :href="`/vacation/requests/${request.id}/cancel`"
-              as="button"
-              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
-              method="post"
-              preserve-scroll
-            >
+        <div
+          v-if="request.can.cancel"
+          class="bg-white border border-red-500 shadow"
+        >
+          <div class="py-5 px-4 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Anuluj wniosek
-            </InertiaLink>
+            </h3>
+            <div class="mt-2 max-w-xl text-sm text-gray-500">
+              <p>
+                Anulowanego wniosku nie można przywrócić - należy utworzyć nowy.
+              </p>
+            </div>
+            <div class="mt-5">
+              <InertiaLink
+                :href="`/vacation/requests/${request.id}/cancel`"
+                as="button"
+                class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
+                method="post"
+                preserve-scroll
+              >
+                Anuluj wniosek
+              </InertiaLink>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="space-y-6 xl:col-span-1 xl:col-start-3">
-      <div class="bg-white shadow-md">
-        <div class="py-5 px-4 sm:px-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Historia wniosku
-          </h3>
-        </div>
-        <div class="p-4 border-t border-gray-200">
-          <ul>
-            <li
-              v-for="(activity, index) in activities.data"
-              :key="index"
-            >
-              <Activity
-                :activity="activity"
-                :last="index !== activities.data.length - 1"
-              />
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div
-        v-if="(auth.can.manageRequestsAsAdministrativeApprover || auth.can.manageRequestsAsTechnicalApprover) && request.state !== 'cancelled'"
-        class="bg-white shadow-md"
-      >
-        <div class="py-5 px-4 sm:px-6">
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Kalendarz pracownika
-          </h3>
+      <div class="space-y-6 xl:col-span-1 xl:col-start-3">
+        <div class="bg-white shadow-md">
+          <div class="py-5 px-4 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Historia wniosku
+            </h3>
+          </div>
+          <div class="p-4 border-t border-gray-200">
+            <ul>
+              <li
+                v-for="(activity, index) in activities.data"
+                :key="index"
+              >
+                <Activity
+                  :activity="activity"
+                  :last="index !== activities.data.length - 1"
+                />
+              </li>
+            </ul>
+          </div>
         </div>
         <div
-          class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6"
+          v-if="(auth.can.manageRequestsAsAdministrativeApprover || auth.can.manageRequestsAsTechnicalApprover) && request.state !== 'cancelled'"
+          class="bg-white shadow-md"
         >
-          <CalendarComponent
-            :key="handyCalendarKey"
-            :end-month="handyCalendarData.endMonth"
-            :holidays="handyCalendarData.holidays"
-            :pending-vacations="handyCalendarData.pendingVacations"
-            :start-month="handyCalendarData.startMonth"
-            :vacations="handyCalendarData.vacations"
-          />
+          <div class="py-5 px-4 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              Kalendarz pracownika
+            </h3>
+          </div>
+          <div
+            class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6"
+          >
+            <CalendarComponent
+              :key="handyCalendarKey"
+              :end-month="handyCalendarData.endMonth"
+              :holidays="handyCalendarData.holidays"
+              :pending-vacations="handyCalendarData.pendingVacations"
+              :start-month="handyCalendarData.startMonth"
+              :vacations="handyCalendarData.vacations"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/Shared/Activity.vue b/resources/js/Shared/Activity.vue
index 03fae77d..d32ab1b8 100644
--- a/resources/js/Shared/Activity.vue
+++ b/resources/js/Shared/Activity.vue
@@ -20,10 +20,10 @@ const statusInfo = computed(() => findStatus(props.activity.state))
     />
     <div class="flex relative space-x-3">
       <div>
-        <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
+        <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'size-8 rounded-full flex items-center justify-center ring-8 ring-white']">
           <component
             :is="statusInfo.outline.icon"
-            class="w-5 h-5 text-white"
+            class="size-5 text-white"
           />
         </span>
       </div>
diff --git a/resources/js/Shared/CalendarComponent.vue b/resources/js/Shared/CalendarComponent.vue
index 0a7a8889..be71b7ff 100644
--- a/resources/js/Shared/CalendarComponent.vue
+++ b/resources/js/Shared/CalendarComponent.vue
@@ -115,7 +115,7 @@ function getVacationInfo(day) {
               <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500 cursor-default`]">
                 <time
                   :datetime="day.date.toISODate()"
-                  :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                  :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex size-7 p-4 items-center justify-center']"
                 >
                   {{ day.date.day }}
                 </time>
@@ -137,7 +137,7 @@ function getVacationInfo(day) {
             <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 cursor-default">
               <time
                 :datetime="day.date.toISODate()"
-                :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex size-7 p-4 items-center justify-center']"
               >
                 {{ day.date.day }}
               </time>
@@ -150,11 +150,11 @@ function getVacationInfo(day) {
           </Popper>
           <button
             v-else-if="day.isWeekend"
-            class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 hover:bg-transparent cursor-default"
+            class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 cursor-default"
           >
             <time
               :datetime="day.date.toISODate()"
-              class="text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center"
+              class="text-red-700 font-bold mx-auto flex size-7 p-4 items-center justify-center"
             >
               {{ day.date.day }}
             </time>
@@ -166,7 +166,7 @@ function getVacationInfo(day) {
           >
             <time
               :datetime="day.date.toISODate()"
-              :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+              :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex size-7 p-4 items-center justify-center']"
             >
               {{ day.date.day }}
             </time>
@@ -176,7 +176,7 @@ function getVacationInfo(day) {
           v-else
           class="focus:z-10 py-1.5 w-full font-medium text-gray-400 bg-gray-50 border-b-4 border-transparent"
         >
-          <div class="flex justify-center items-center p-4 mx-auto w-7 h-7">
+          <div class="flex justify-center items-center p-4 mx-auto size-7">
             <time :datetime="day.date.toISODate()">
               {{ day.date.day }}
             </time>
diff --git a/resources/js/Shared/Feedbacks/EmptyState.vue b/resources/js/Shared/Feedbacks/EmptyState.vue
index d534e35d..535ff0d3 100644
--- a/resources/js/Shared/Feedbacks/EmptyState.vue
+++ b/resources/js/Shared/Feedbacks/EmptyState.vue
@@ -12,7 +12,7 @@ defineProps({
 <template>
   <div class="text-center my-5 text-gray-500">
     <slot name="head">
-      <MagnifyingGlassIcon class="mx-auto w-12 h-12" />
+      <MagnifyingGlassIcon class="mx-auto size-12" />
     </slot>
     <h3 class="mt-2 text-sm font-medium">
       <slot name="title">
diff --git a/resources/js/Shared/Forms/Combobox.vue b/resources/js/Shared/Forms/Combobox.vue
index 2ec8106b..fe5115f8 100644
--- a/resources/js/Shared/Forms/Combobox.vue
+++ b/resources/js/Shared/Forms/Combobox.vue
@@ -35,12 +35,12 @@ const filteredItems = computed(() =>
         @change="query = $event.target.value"
       />
       <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
-        <ChevronUpDownIcon class="h-5 w-5 text-gray-400" />
+        <ChevronUpDownIcon class="size-5 text-gray-400" />
       </ComboboxButton>
 
       <ComboboxOptions
         v-if="filteredItems.length"
-        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
       >
         <ComboboxOption
           v-for="item in filteredItems"
@@ -58,7 +58,7 @@ const filteredItems = computed(() =>
               v-if="selected"
               :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-blumilk-600']"
             >
-              <CheckIcon class="h-5 w-5" />
+              <CheckIcon class="size-5" />
             </span>
           </li>
         </ComboboxOption>
diff --git a/resources/js/Shared/Forms/DynamicSection.vue b/resources/js/Shared/Forms/DynamicSection.vue
index 5522c189..8c6d2885 100644
--- a/resources/js/Shared/Forms/DynamicSection.vue
+++ b/resources/js/Shared/Forms/DynamicSection.vue
@@ -49,7 +49,7 @@ function removeItem(index) {
             class="py-4 text-red-500 hover:text-gray-600 opacity-100 group-hover:opacity-100 transition-opacity hover:scale-110 lg:opacity-0 handle"
             type="button"
           >
-            <Squares2X2Icon class="w-5 h-5 text-gray-500" />
+            <Squares2X2Icon class="size-5 text-gray-500" />
           </button>
           <Disclosure
             v-slot="{ open }"
@@ -57,7 +57,7 @@ function removeItem(index) {
             class="flex-1 border border-gray-200"
           >
             <div class="flex">
-              <DisclosureButton class="transition transition-colors rounded-md group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500 hover:text-blumilk-500 transition transition-colors rounded-md focus:outline-none">
+              <DisclosureButton class="transition rounded-md group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500 hover:text-blumilk-500 focus:outline-none">
                 <div class="break-all line-clamp-1 text-md">
                   <slot
                     name="itemHeader"
@@ -67,7 +67,7 @@ function removeItem(index) {
                 </div>
                 <div class="ml-2">
                   <svg
-                    :class="[open ? '-rotate-90' : 'rotate-90', 'h-6 w-6 transform transition-transform ease-in-out duration-150']"
+                    :class="[open ? '-rotate-90' : 'rotate-90', 'size-6 transition-transform ease-in-out duration-150']"
                     viewBox="0 0 20 20"
                   >
                     <path
@@ -94,7 +94,7 @@ function removeItem(index) {
             type="button"
             @click="removeItem(index)"
           >
-            <TrashIcon class="w-5 h-5 text-red-500" />
+            <TrashIcon class="size-5 text-red-500" />
           </button>
         </div>
       </template>
diff --git a/resources/js/Shared/Forms/MultipleCombobox.vue b/resources/js/Shared/Forms/MultipleCombobox.vue
index d69c71a7..8ca2b9d9 100644
--- a/resources/js/Shared/Forms/MultipleCombobox.vue
+++ b/resources/js/Shared/Forms/MultipleCombobox.vue
@@ -45,7 +45,7 @@ const filteredItems = computed(() =>
   >
     <div 
       v-if="showChips"
-      class="flex flex-wrap mb-2 gap-2 gap-y-2"
+      class="flex flex-wrap mb-2 gap-2"
     >
       <span
         v-for="(item, index) in selectedItems"
@@ -55,11 +55,11 @@ const filteredItems = computed(() =>
         {{ item }}
         <button
           type="button"
-          class="flex-shrink-0 ml-0.5 h-5 w-5 rounded-full inline-flex items-center justify-center text-white hover:bg-blumilk-600 focus:outline-none"
+          class="shrink-0 ml-0.5 size-5 rounded-full inline-flex items-center justify-center text-white hover:bg-blumilk-600 focus:outline-none"
           @click="selectedItems.splice(index, 1)"
         >
           <svg
-            class="h-2 w-2"
+            class="size-2"
             stroke="currentColor"
             fill="none"
             viewBox="0 0 8 8"
@@ -81,11 +81,11 @@ const filteredItems = computed(() =>
         @change="query = $event.target.value"
       />
       <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
-        <ChevronUpDownIcon class="h-5 w-5 text-gray-400" />
+        <ChevronUpDownIcon class="size-5 text-gray-400" />
       </ComboboxButton>
 
       <ComboboxOptions
-        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
       >
         <ComboboxOption
           v-for="item in filteredItems"
@@ -103,7 +103,7 @@ const filteredItems = computed(() =>
               v-if="selected"
               :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-blumilk-600']"
             >
-              <CheckIcon class="h-5 w-5" />
+              <CheckIcon class="size-5" />
             </span>
           </li>
         </ComboboxOption>
diff --git a/resources/js/Shared/Forms/YearPicker.vue b/resources/js/Shared/Forms/YearPicker.vue
index 892ee766..3ae51602 100644
--- a/resources/js/Shared/Forms/YearPicker.vue
+++ b/resources/js/Shared/Forms/YearPicker.vue
@@ -45,7 +45,7 @@ const value = computed({
             {{ value !== null || !nullable ? value : 'Wszystkie' }}
           </span>
           <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
-            <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
+            <ChevronUpDownIcon class="size-5 text-gray-400" />
           </span>
         </ListboxButton>
 
@@ -55,7 +55,7 @@ const value = computed({
           leave-to-class="opacity-0"
         >
           <ListboxOptions
-            class="overflow-auto absolute z-10 py-1 mt-1 max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+            class="overflow-auto absolute z-10 py-1 mt-1 max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm"
           >
             <ListboxOption
               v-if="nullable"
@@ -72,7 +72,7 @@ const value = computed({
                   v-if="selected"
                   :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                 >
-                  <CheckIcon class="w-5 h-5" />
+                  <CheckIcon class="size-5" />
                 </span>
               </li>
             </ListboxOption>
@@ -92,7 +92,7 @@ const value = computed({
                   v-if="selected"
                   :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                 >
-                  <CheckIcon class="w-5 h-5" />
+                  <CheckIcon class="size-5" />
                 </span>
               </li>
             </ListboxOption>
diff --git a/resources/js/Shared/InertiaLink.js b/resources/js/Shared/InertiaLink.js
deleted file mode 100644
index 360d9c34..00000000
--- a/resources/js/Shared/InertiaLink.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { h, ref } from 'vue'
-import { Inertia, mergeDataIntoQueryString, shouldIntercept } from '@inertiajs/inertia'
-
-export default {
-  name: 'InertiaLink',
-  props: {
-    as: {
-      type: String,
-      default: 'a',
-    },
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    href: {
-      type: String,
-    },
-    method: {
-      type: String,
-      default: 'get',
-    },
-    replace: {
-      type: Boolean,
-      default: false,
-    },
-    preserveScroll: {
-      type: Boolean,
-      default: false,
-    },
-    preserveState: {
-      type: Boolean,
-      default: null,
-    },
-  },
-  setup(props, { slots, attrs }) {
-    const processing = ref(false)
-
-    return props => {
-      const as = props.as.toLowerCase()
-      const method = props.method.toLowerCase()
-      const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, 'brackets')
-
-      return h(props.as, {
-        ...attrs,
-        ...as === 'a' ? { href } : {},
-        onClick: (event) => {
-          if (shouldIntercept(event)) {
-            event.preventDefault()
-
-            Inertia.visit(href, {
-              data: data,
-              method: method,
-              replace: props.replace,
-              preserveScroll: props.preserveScroll,
-              preserveState: props.preserveState ?? (method !== 'get'),
-              onBefore: () => !processing.value,
-              onStart: () => processing.value = true,
-              onFinish: () => processing.value = false,
-            })
-          }
-        },
-      }, slots)
-    }
-  },
-}
diff --git a/resources/js/Shared/InertiaLink.vue b/resources/js/Shared/InertiaLink.vue
new file mode 100644
index 00000000..4200f682
--- /dev/null
+++ b/resources/js/Shared/InertiaLink.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+
+defineProps({
+  href: {
+    type: String,
+    default: null,
+  },
+})
+</script>
+
+<template>
+  <Link :href="href">
+    <slot />
+  </Link>
+</template>
diff --git a/resources/js/Shared/Layout/AppLayout.vue b/resources/js/Shared/Layout/AppLayout.vue
index 32d537e2..b025ea65 100644
--- a/resources/js/Shared/Layout/AppLayout.vue
+++ b/resources/js/Shared/Layout/AppLayout.vue
@@ -5,29 +5,29 @@ import { useToast } from 'vue-toastification'
 import { ref, watch } from 'vue'
 import DeployInfo from '@/Shared/DeployInfo.vue'
 import { updateFavicon } from '@/Shared/updateFavicon'
-
-const props = defineProps({
-  flash: Object,
-  auth: Object,
-  vacationRequestsCount: Number,
-  overtimeRequestsCount: Number,
-  deployInformation: Object,
-  lastUpdate: String,
-})
+import { Head } from '@inertiajs/vue3'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
 
 const toast = useToast()
 
-watch(() => props.flash, flash => {
-  if (flash.success) {
-    toast.success(flash.success)
+const {
+  deployInformation,
+  flash,
+  auth,
+  lastUpdate,
+} = useGlobalProps()
+
+watch(flash, value => {
+  if (value.success) {
+    toast.success(value.success)
   }
 
-  if (flash.info) {
-    toast.info(flash.info)
+  if (value.info) {
+    toast.info(value.info)
   }
 
-  if (flash.error) {
-    toast.error(flash.error)
+  if (value.error) {
+    toast.error(value.error)
   }
 }, { immediate: true })
 
@@ -40,18 +40,18 @@ function vacationPageOpened() {
 </script>
 
 <template>
+  <Head>
+    <slot name="title" />
+  </Head>
   <LastUpdate
-    v-if="props.auth.can.listAllRequests"
+    v-if="auth.can.listAllRequests"
     :is-updated="isUpdated"
     :last-update="lastUpdate"
     @last-update-updated="isUpdated = true"
   />
   <div class="relative min-h-screen">
     <MainMenu
-      :auth="auth"
       :show-refresh-button="isUpdated"
-      :vacation-requests-count="vacationRequestsCount"
-      :overtime-requests-count="overtimeRequestsCount"
       @open="vacationPageOpened"
     />
     <main class="flex flex-col flex-1 py-8 lg:ml-60">
diff --git a/resources/js/Shared/Layout/GuestLayout.vue b/resources/js/Shared/Layout/GuestLayout.vue
index 0444e8c1..977b0602 100644
--- a/resources/js/Shared/Layout/GuestLayout.vue
+++ b/resources/js/Shared/Layout/GuestLayout.vue
@@ -1,12 +1,15 @@
 <script setup>
 import DeployInfo from '@/Shared/DeployInfo.vue'
+import { Head } from '@inertiajs/vue3'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
 
-defineProps({
-  deployInformation: Object,
-})
+const { deployInformation } = useGlobalProps()
 </script>
 
 <template>
+  <Head>
+    <slot name="title" />
+  </Head>
   <div class="relative flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
     <slot />
     <DeployInfo
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index c2ddf4fc..10d540e1 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -34,15 +34,15 @@ import {
   ClockIcon,
 } from '@heroicons/vue/24/outline'
 import { ChevronDownIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps'
 
 const props = defineProps({
-  auth: Object,
-  vacationRequestsCount: Number,
-  overtimeRequestsCount: Number,
   showRefreshButton: Boolean,
-  lastUpdate: String,
 })
 
+const { auth, vacationRequestsCount, overtimeRequestsCount } = useGlobalProps()
+
 const sidebarOpen = ref(false)
 
 const vacationNavigation = computed(() =>
@@ -52,30 +52,30 @@ const vacationNavigation = computed(() =>
       href: '/vacation/requests/me',
       section: 'VacationRequest',
       icon: DocumentTextIcon,
-      can: !props.auth.can.listAllRequests,
+      can: !auth.value.can.listAllRequests,
     },
     {
       name: 'Wnioski',
       href: '/vacation/requests',
       section: 'VacationRequest',
       icon: RectangleStackIcon,
-      can: props.auth.can.listAllRequests,
-      badge: props.vacationRequestsCount,
+      can: auth.value.can.listAllRequests,
+      badge: vacationRequestsCount.value,
     },
     {
       name: 'Nadgodziny',
       href: '/overtime/requests',
       section: 'OvertimeRequest',
       icon: ClockIcon,
-      can: props.auth.can.listAllOvertimeRequests,
-      badge: props.overtimeRequestsCount,
+      can: auth.value.can.listAllOvertimeRequests,
+      badge: overtimeRequestsCount.value,
     },
     {
       name: 'Moje nadgodziny',
       href: '/overtime/requests/me',
       section: 'OvertimeRequest',
       icon: ClockIcon,
-      can: !props.auth.can.listAllOvertimeRequests && props.auth.overtimeEnabled,
+      can: !auth.value.can.listAllOvertimeRequests && auth.value.overtimeEnabled,
     },
     {
       name: 'Kalendarz',
@@ -89,7 +89,7 @@ const vacationNavigation = computed(() =>
       href: '/vacation/monthly-usage',
       section: 'MonthlyUsage',
       icon: AdjustmentsVerticalIcon,
-      can: props.auth.can.listMonthlyUsage,
+      can: auth.value.can.listMonthlyUsage,
     },
     {
       name: 'Dni wolne',
@@ -103,7 +103,7 @@ const vacationNavigation = computed(() =>
       href: '/vacation/limits',
       section: 'VacationLimits',
       icon: SunIcon,
-      can: props.auth.can.manageVacationLimits,
+      can: auth.value.can.manageVacationLimits,
     },
     {
       name: 'Podsumowanie roczne',
@@ -120,7 +120,7 @@ const miscNavigation = computed(() => [
     href: '/users',
     section: 'Users',
     icon: UserGroupIcon,
-    can: props.auth.can.manageUsers,
+    can: auth.value.can.manageUsers,
   },
   {
     name: 'Jubileusze',
@@ -141,14 +141,14 @@ const miscNavigation = computed(() => [
     href: '/technologies',
     section: 'Technologies',
     icon: BeakerIcon,
-    can: props.auth.can.manageResumes,
+    can: auth.value.can.manageResumes,
   },
   {
     name: 'CV',
     href: '/resumes',
     section: 'Resumes',
     icon: RectangleGroupIcon,
-    can: props.auth.can.manageResumes,
+    can: auth.value.can.manageResumes,
   },
   {
     name: 'Benefity',
@@ -162,28 +162,28 @@ const miscNavigation = computed(() => [
     href: '/assigned-benefits',
     section: 'AssignedBenefits',
     icon: BanknotesIcon,
-    can: props.auth.can.manageBenefits,
+    can: auth.value.can.manageBenefits,
   },
   {
     name: 'Raporty benefitowe',
     href: '/benefits-reports',
     section: 'BenefitsReport',
     icon: DocumentDuplicateIcon,
-    can: props.auth.can.manageBenefits,
+    can: auth.value.can.manageBenefits,
   },
   {
     name: 'Sprzęt',
     href: '/equipment-items',
     section: 'Equipment',
     icon: ComputerDesktopIcon,
-    can: props.auth.can.manageEquipment,
+    can: auth.value.can.manageEquipment,
   },
   {
     name: 'Mój sprzęt',
     href: '/equipment-items/me',
     section: 'Equipment',
     icon: ComputerDesktopIcon,
-    can: !props.auth.can.manageEquipment,
+    can: !auth.value.can.manageEquipment,
   },
 ].filter(item => item.can))
 
@@ -216,7 +216,7 @@ const emit = defineEmits(['open'])
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <DialogOverlay class="fixed inset-0 bg-gray-600/75" />
       </TransitionChild>
       <TransitionChild
         as="template"
@@ -239,11 +239,11 @@ const emit = defineEmits(['open'])
           >
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
-                class="flex justify-center items-center ml-1 w-10 h-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                class="flex justify-center items-center ml-1 size-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                 type="button"
                 @click="sidebarOpen = false"
               >
-                <XMarkIcon class="w-6 h-6 text-white" />
+                <XMarkIcon class="size-6 text-white" />
               </button>
             </div>
           </TransitionChild>
@@ -261,11 +261,11 @@ const emit = defineEmits(['open'])
           <nav class="overflow-y-auto shrink-0 py-5 h-full space-y-5">
             <div class="px-2 space-y-1">
               <InertiaLink
-                :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md']"
+                :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-base leading-6 font-medium rounded-md']"
                 href="/"
                 @click="sidebarOpen = false;emit('open')"
               >
-                <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
+                <HomeIcon class="shrink-0 mr-4 size-6 text-blumilk-200" />
                 Strona główna
               </InertiaLink>
             </div>
@@ -276,13 +276,13 @@ const emit = defineEmits(['open'])
               <InertiaLink
                 v-for="item in vacationNavigation"
                 :key="item.name"
-                :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
+                :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-base font-medium rounded-md']"
                 :href="item.href"
                 @click="sidebarOpen = false;item.href === '/vacation/requests' ? emit('open') : null"
               >
                 <component
                   :is="item.icon"
-                  class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
+                  class="shrink-0 mr-4 size-6 text-blumilk-200"
                 />
                 {{ item.name }}
                 <span
@@ -300,13 +300,13 @@ const emit = defineEmits(['open'])
               <InertiaLink
                 v-for="item in miscNavigation"
                 :key="item.name"
-                :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
+                :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-base font-medium rounded-md']"
                 :href="item.href"
                 @click="sidebarOpen = false;refreshableHrefs.includes(item.href) ? emit('open') : null"
               >
                 <component
                   :is="item.icon"
-                  class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
+                  class="shrink-0 mr-4 size-6 text-blumilk-200"
                 />
                 {{ item.name }}
                 <span
@@ -337,11 +337,11 @@ const emit = defineEmits(['open'])
       </div>
       <nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 space-y-4">
         <InertiaLink
-          :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 mt-1 text-sm leading-6 font-medium rounded-md']"
+          :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 mt-1 text-sm leading-6 font-medium rounded-md']"
           href="/"
           @click="emit('open')"
         >
-          <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
+          <HomeIcon class="shrink-0 mr-4 size-6 text-blumilk-200" />
           Strona główna
         </InertiaLink>
         <div
@@ -351,13 +351,13 @@ const emit = defineEmits(['open'])
           <InertiaLink
             v-for="item in vacationNavigation"
             :key="item.name"
-            :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
+            :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-sm leading-6 font-medium rounded-md']"
             :href="item.href"
             @click="refreshableHrefs.includes(item.href) ? emit('open') : null"
           >
             <component
               :is="item.icon"
-              class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
+              class="shrink-0 mr-4 size-6 text-blumilk-200"
             />
             {{ item.name }}
             <span
@@ -375,12 +375,12 @@ const emit = defineEmits(['open'])
           <InertiaLink
             v-for="item in miscNavigation"
             :key="item.name"
-            :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
+            :class="[$page.component.startsWith(item.section) ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center p-2 text-sm leading-6 font-medium rounded-md']"
             :href="item.href"
           >
             <component
               :is="item.icon"
-              class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
+              class="shrink-0 mr-4 size-6 text-blumilk-200"
             />
             {{ item.name }}
             <span
@@ -402,7 +402,7 @@ const emit = defineEmits(['open'])
         type="button"
         @click="sidebarOpen = true"
       >
-        <Bars3CenterLeftIcon class="w-6 h-6" />
+        <Bars3CenterLeftIcon class="size-6" />
       </button>
       <div class="flex flex-1 justify-between items-center px-4 sm:px-6 lg:px-8">
         <div>
@@ -415,7 +415,7 @@ const emit = defineEmits(['open'])
               Odśwież
             </div>
             <div class="sm:hidden">
-              <ArrowPathIcon class="h-4 w-4" />
+              <ArrowPathIcon class="size-4" />
             </div>
           </button>
         </div>
@@ -429,12 +429,12 @@ const emit = defineEmits(['open'])
             >
               <img
                 :src="auth.user.avatar"
-                class="w-8 h-8 rounded-full"
+                class="size-8 rounded-full"
               >
               <span class="hidden ml-3 text-sm font-medium text-gray-700 lg:block">
                 {{ auth.user.name }}
               </span>
-              <ChevronDownIcon class="hidden shrink-0 ml-1 w-5 h-5 text-gray-400 lg:block" />
+              <ChevronDownIcon class="hidden shrink-0 ml-1 size-5 text-gray-400 lg:block" />
             </MenuButton>
             <transition
               enter-active-class="transition ease-out duration-100"
@@ -445,7 +445,7 @@ const emit = defineEmits(['open'])
               leave-to-class="transform opacity-0 scale-95"
             >
               <MenuItems
-                class="absolute right-0 py-1 mt-2 w-48 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                class="absolute right-0 py-1 mt-2 w-48 bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg origin-top-right"
               >
                 <MenuItem v-slot="{ active }">
                   <InertiaLink
diff --git a/resources/js/Shared/Modals/TakeVacationDaysFromPreviousYearModal.vue b/resources/js/Shared/Modals/TakeVacationDaysFromPreviousYearModal.vue
index 65291bfb..316b5c31 100644
--- a/resources/js/Shared/Modals/TakeVacationDaysFromPreviousYearModal.vue
+++ b/resources/js/Shared/Modals/TakeVacationDaysFromPreviousYearModal.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm } from '@inertiajs/vue3'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
@@ -73,7 +73,7 @@ watch(() => props.show, () => {
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <DialogOverlay class="fixed inset-0 bg-gray-500/75 transition-opacity" />
         </TransitionChild>
 
         <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
@@ -87,7 +87,7 @@ watch(() => props.show, () => {
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <form
-            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-md sm:align-middle"
+            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all sm:p-6 sm:my-8 sm:w-full sm:max-w-md sm:align-middle"
             @submit.prevent="submitForm"
           >
             <div>
@@ -104,9 +104,9 @@ watch(() => props.show, () => {
                   </span>
                   <div class="mt-1 sm:col-span-2 sm:mt-0">
                     <div class="flex justify-start items-center">
-                      <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
+                      <span class="inline-flex justify-center items-center size-10 rounded-full">
                         <img
-                          class="w-10 h-10 rounded-full"
+                          class="size-10 rounded-full"
                           :src="limit.user.avatar"
                         >
                       </span>
diff --git a/resources/js/Shared/SettlementType.vue b/resources/js/Shared/SettlementType.vue
index 1d0d3992..fe40f07e 100644
--- a/resources/js/Shared/SettlementType.vue
+++ b/resources/js/Shared/SettlementType.vue
@@ -15,7 +15,7 @@ const settlementTypeInfo = computed(() => findType(props.type))
   <div class="flex items-center">
     <component
       :is="settlementTypeInfo.icon"
-      :class="[settlementTypeInfo.color ,'w-5 h-5 mr-1.5']"
+      :class="[settlementTypeInfo.color ,'size-5 mr-1.5']"
       :size="20"
     />
     <span>{{ settlementTypeInfo.text }}</span>
diff --git a/resources/js/Shared/Status.vue b/resources/js/Shared/Status.vue
index e4862cd5..5d08334c 100644
--- a/resources/js/Shared/Status.vue
+++ b/resources/js/Shared/Status.vue
@@ -15,7 +15,7 @@ const statusInfo = computed(() => findStatus(props.status))
   <div class="flex items-center">
     <component
       :is="statusInfo.solid.icon"
-      :class="[statusInfo.solid.color, 'w-5 h-5 mr-1']"
+      :class="[statusInfo.solid.color, 'size-5 mr-1']"
     />
     <span>{{ statusInfo.text }}</span>
   </div>
diff --git a/resources/js/Shared/UserProfileLink.vue b/resources/js/Shared/UserProfileLink.vue
index 21ab4b94..351161c6 100644
--- a/resources/js/Shared/UserProfileLink.vue
+++ b/resources/js/Shared/UserProfileLink.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { usePage } from '@inertiajs/inertia-vue3'
+import InertiaLink from '@/Shared/InertiaLink.vue'
+import { useGlobalProps } from '@/Composables/useGlobalProps.js'
 
 defineProps({
   user: Object,
 })
 
-const auth =  usePage().props.value.auth
+const { auth } = useGlobalProps()
 </script>
 
 <template>
diff --git a/resources/js/Shared/VacationPopup.vue b/resources/js/Shared/VacationPopup.vue
index 035b8628..0416b73b 100644
--- a/resources/js/Shared/VacationPopup.vue
+++ b/resources/js/Shared/VacationPopup.vue
@@ -1,6 +1,7 @@
 <script setup>
 import VacationType from '@/Shared/VacationType.vue'
 import Status from '@/Shared/Status.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
 
 defineProps({
   vacation: Object,
diff --git a/resources/js/Shared/VacationType.vue b/resources/js/Shared/VacationType.vue
index 25b407d3..53d8cf29 100644
--- a/resources/js/Shared/VacationType.vue
+++ b/resources/js/Shared/VacationType.vue
@@ -15,7 +15,7 @@ const vacationTypeInfo = computed(() => findType(props.type))
   <div class="flex items-center">
     <component
       :is="vacationTypeInfo.icon"
-      :class="[vacationTypeInfo.color ,'w-5 h-5 mr-1.5']"
+      :class="[vacationTypeInfo.color ,'size-5 mr-1.5']"
       :size="20"
     />
     <span>{{ vacationTypeInfo.text }}</span>
diff --git a/resources/js/Shared/Widgets/AbsenceList.vue b/resources/js/Shared/Widgets/AbsenceList.vue
index 47c901ed..17776691 100644
--- a/resources/js/Shared/Widgets/AbsenceList.vue
+++ b/resources/js/Shared/Widgets/AbsenceList.vue
@@ -65,7 +65,7 @@ defineProps({
               >
                 <img
                   :src="day.user.avatar"
-                  class="w-10 h-10 rounded-full"
+                  class="size-10 rounded-full"
                 >
                 <div class="ml-3">
                   <p class="text-sm font-medium text-gray-900">
@@ -86,7 +86,7 @@ defineProps({
             :show-description="false"
           >
             <template #head>
-              <SunIcon class="mx-auto w-12 h-12" />
+              <SunIcon class="mx-auto size-12" />
             </template>
             <template #title>
               Brak nieobecności
@@ -105,7 +105,7 @@ defineProps({
             >
               <img
                 :src="day.user.avatar"
-                class="w-10 h-10 rounded-full"
+                class="size-10 rounded-full"
               >
               <div class="ml-3">
                 <p class="text-sm font-medium text-gray-900">
@@ -125,7 +125,7 @@ defineProps({
             :show-description="false"
           >
             <template #head>
-              <SunIcon class="mx-auto w-12 h-12" />
+              <SunIcon class="mx-auto size-12" />
             </template>
             <template #title>
               Brak nieobecności
diff --git a/resources/js/Shared/Widgets/BenefitList.vue b/resources/js/Shared/Widgets/BenefitList.vue
index 203ad33b..96eee48a 100644
--- a/resources/js/Shared/Widgets/BenefitList.vue
+++ b/resources/js/Shared/Widgets/BenefitList.vue
@@ -43,7 +43,7 @@ defineProps({
         :show-description="false"
       >
         <template #head>
-          <GiftIcon class="mx-auto w-12 h-12" />
+          <GiftIcon class="mx-auto size-12" />
         </template>
         <template #title>
           Brak benetifów
diff --git a/resources/js/Shared/Widgets/BirthdaysList.vue b/resources/js/Shared/Widgets/BirthdaysList.vue
index 5c516ff0..d39c9c92 100644
--- a/resources/js/Shared/Widgets/BirthdaysList.vue
+++ b/resources/js/Shared/Widgets/BirthdaysList.vue
@@ -31,7 +31,7 @@ defineProps({
           >
             <img
               :src="day.user.avatar"
-              class="w-10 h-10 rounded-full"
+              class="size-10 rounded-full"
             >
             <div class="ml-3">
               <p class="text-sm font-medium text-gray-900">
@@ -52,7 +52,7 @@ defineProps({
         :show-description="false"
       >
         <template #head>
-          <CakeIcon class="h-12 w-12 mx-auto" />
+          <CakeIcon class="size-12 mx-auto" />
         </template>
         <template #title>
           Brak nadchodzących urodzin
diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 0143d2ba..7ee911f2 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -3,6 +3,7 @@ import Popper from 'vue3-popper'
 import { ref } from 'vue'
 import VacationPopup from '@/Shared/VacationPopup.vue'
 import VacationIcon from '@/Shared/VacationTypeCalendarIcon.vue'
+import InertiaLink from '@/Shared/InertiaLink.vue'
 
 defineProps({
   day: {
@@ -54,7 +55,7 @@ function onMouseleave() {
     >
       <time
         :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+        :class="[ day.isToday && 'flex size-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
       >
         {{ day.dayNumber }}
       </time>
@@ -76,7 +77,7 @@ function onMouseleave() {
       <div class="flex justify-between">
         <time
           :datetime="day.date"
-          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+          :class="[ day.isToday && 'flex size-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
         >
           {{ day.dayNumber }}
         </time>
@@ -87,9 +88,9 @@ function onMouseleave() {
         </div>
       </div>
       <template #content>
-        <VacationPopup
-          :vacation="day.getVacationInfo"
-          :see-vacation-details="true"
+        <VacationPopup
+          :vacation="day.getVacationInfo"
+          :see-vacation-details="true"
         />
       </template>
     </Popper>
@@ -100,7 +101,7 @@ function onMouseleave() {
       <time
         :datetime="day.date"
         class="cursor-default"
-        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+        :class="{ 'flex size-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
       >
         {{ day.dayNumber }}
       </time>
@@ -114,7 +115,7 @@ function onMouseleave() {
     >
       <time
         :datetime="day.date"
-        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+        :class="{ 'flex size-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
       >
         {{ day.dayNumber }}
       </time>
diff --git a/resources/js/Shared/Widgets/PendingVacationRequests.vue b/resources/js/Shared/Widgets/PendingVacationRequests.vue
index fad31e1d..ad0b2aed 100644
--- a/resources/js/Shared/Widgets/PendingVacationRequests.vue
+++ b/resources/js/Shared/Widgets/PendingVacationRequests.vue
@@ -2,6 +2,7 @@
 import VacationType from '@/Shared/VacationType.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { RectangleStackIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
 
 defineProps({
   requests: Object,
@@ -56,7 +57,7 @@ defineProps({
               <div class="mt-3 text-sm text-gray-600">
                 <div class="flex">
                   <img
-                    class="w-10 h-10 rounded-full"
+                    class="size-10 rounded-full"
                     :src="request.user.avatar"
                   >
                   <div class="ml-3">
@@ -74,7 +75,7 @@ defineProps({
           <li v-if="! requests.length">
             <EmptyState>
               <template #head>
-                <RectangleStackIcon class="mx-auto w-12 h-12" />
+                <RectangleStackIcon class="mx-auto size-12" />
               </template>
               <template #title>
                 Brak wniosków
diff --git a/resources/js/Shared/Widgets/RemoteWorkList.vue b/resources/js/Shared/Widgets/RemoteWorkList.vue
index 5d2b2317..a946eefe 100644
--- a/resources/js/Shared/Widgets/RemoteWorkList.vue
+++ b/resources/js/Shared/Widgets/RemoteWorkList.vue
@@ -65,7 +65,7 @@ defineProps({
               >
                 <img
                   :src="day.user.avatar"
-                  class="w-10 h-10 rounded-full"
+                  class="size-10 rounded-full"
                 >
                 <div class="ml-3">
                   <p class="text-sm font-medium text-gray-900">
@@ -108,7 +108,7 @@ defineProps({
             >
               <img
                 :src="day.user.avatar"
-                class="w-10 h-10 rounded-full"
+                class="size-10 rounded-full"
               >
               <div class="ml-3">
                 <p class="text-sm font-medium text-gray-900">
diff --git a/resources/js/Shared/Widgets/UpcomingHolidays.vue b/resources/js/Shared/Widgets/UpcomingHolidays.vue
index 92784ed5..2de05aba 100644
--- a/resources/js/Shared/Widgets/UpcomingHolidays.vue
+++ b/resources/js/Shared/Widgets/UpcomingHolidays.vue
@@ -1,4 +1,6 @@
 <script setup>
+import InertiaLink from '@/Shared/InertiaLink.vue'
+
 defineProps({
   holidays: Object,
 })
diff --git a/resources/js/Shared/Widgets/UserOvertimeRequests.vue b/resources/js/Shared/Widgets/UserOvertimeRequests.vue
index 6a531ff1..27ba2ccc 100644
--- a/resources/js/Shared/Widgets/UserOvertimeRequests.vue
+++ b/resources/js/Shared/Widgets/UserOvertimeRequests.vue
@@ -2,6 +2,7 @@
 import Status from '@/Shared/Status.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { RectangleStackIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
 
 defineProps({
   requests: Object,
@@ -50,7 +51,7 @@ defineProps({
             <p class="py-2">
               <EmptyState>
                 <template #head>
-                  <RectangleStackIcon class="mx-auto w-12 h-12" />
+                  <RectangleStackIcon class="mx-auto size-12" />
                 </template>
                 <template #title>
                   Brak wniosków
diff --git a/resources/js/Shared/Widgets/UserVacationRequests.vue b/resources/js/Shared/Widgets/UserVacationRequests.vue
index 07280380..edbb74f8 100644
--- a/resources/js/Shared/Widgets/UserVacationRequests.vue
+++ b/resources/js/Shared/Widgets/UserVacationRequests.vue
@@ -3,6 +3,7 @@ import Status from '@/Shared/Status.vue'
 import VacationType from '@/Shared/VacationType.vue'
 import EmptyState from '@/Shared/Feedbacks/EmptyState.vue'
 import { RectangleStackIcon } from '@heroicons/vue/24/solid'
+import InertiaLink from '@/Shared/InertiaLink.vue'
 
 defineProps({
   requests: Object,
@@ -71,7 +72,7 @@ defineProps({
             <p class="py-2">
               <EmptyState>
                 <template #head>
-                  <RectangleStackIcon class="mx-auto w-12 h-12" />
+                  <RectangleStackIcon class="mx-auto size-12" />
                 </template>
                 <template #title>
                   Brak wniosków
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 63e326b4..8a4682cb 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -7,6 +7,7 @@ import useVacationTypeInfo from '@/Composables/vacationTypeInfo.js'
 import { useMonthInfo } from '@/Composables/monthInfo.js'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions.js'
 import DayComponent from '@/Shared/Widgets/Calendar/DayComponent.vue'
+import { useStorage } from '@vueuse/core'
 
 const props = defineProps({
   holidays: Object,
@@ -18,11 +19,9 @@ const currentDate = DateTime.now()
 const months = useMonthInfo().getMonths()
 const { findType } = useVacationTypeInfo()
 
-const viewMode = localStorage.getItem('calendarViewMode') ?? 'week'
-
 const calendar = reactive({
   days: [],
-  viewMode: viewMode,
+  viewMode: useStorage('calendarViewMode', 'week'),
   date: currentDate.startOf('week'),
 })
 
@@ -92,7 +91,6 @@ function next() {
 
 function updateViewMode(type) {
   calendar.viewMode = type
-  localStorage.setItem('calendarViewMode', type)
   loadCalendar()
 }
 
@@ -150,13 +148,13 @@ function getVacationInfo(day) {
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
-              class="h-5 w-5"
+              class="size-5"
               aria-hidden="true"
             />
           </button>
           <button
             type="button"
-            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            class="hidden border-y border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
             @click="today"
           >
             Dzisiaj
@@ -173,7 +171,7 @@ function getVacationInfo(day) {
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronRightIcon
-              class="h-5 w-5"
+              class="size-5"
               aria-hidden="true"
             />
           </button>
@@ -190,7 +188,7 @@ function getVacationInfo(day) {
           <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
           <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
           <ChevronDownIcon
-            class="ml-2 h-5 w-5 text-gray-400"
+            class="ml-2 size-5 text-gray-400"
             aria-hidden="true"
           />
         </MenuButton>
@@ -205,7 +203,7 @@ function getVacationInfo(day) {
           leave-to-class="transform opacity-0 scale-95"
         >
           <MenuItems
-            class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
           >
             <div class="py-1">
               <MenuItem
@@ -220,7 +218,7 @@ function getVacationInfo(day) {
                   {{ option.shortcut }}
                   <CheckIcon
                     v-if="option.is(calendar.viewMode)"
-                    class="ml-2 w-5 h-5 text-blumilk-500"
+                    class="ml-2 size-5 text-blumilk-500"
                   />
                 </button>
               </MenuItem>
diff --git a/resources/js/Shared/Widgets/Welcome.vue b/resources/js/Shared/Widgets/Welcome.vue
index e70ac3e5..95f58aa5 100644
--- a/resources/js/Shared/Widgets/Welcome.vue
+++ b/resources/js/Shared/Widgets/Welcome.vue
@@ -12,7 +12,7 @@ defineProps({
           <div class="sm:flex sm:space-x-5">
             <div class="shrink-0">
               <img
-                class="mx-auto w-20 h-20 rounded-full"
+                class="mx-auto size-20 rounded-full"
                 :src="user.avatar"
               >
             </div>
diff --git a/resources/js/app.js b/resources/js/app.js
index d97f8139..3f607e1b 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,28 +1,19 @@
 import '../css/app.css'
 import { createApp, h } from 'vue'
-import { createInertiaApp, Head } from '@inertiajs/inertia-vue3'
-import { InertiaProgress } from '@inertiajs/progress'
-import AppLayout from '@/Shared/Layout/AppLayout.vue'
 import Flatpickr from 'flatpickr'
 import { Settings } from 'luxon'
-import { Polish } from 'flatpickr/dist/l10n/pl.js'
 import Toast from 'vue-toastification'
-import InertiaLink from '@/Shared/InertiaLink.js'
-import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 import FloatingVue from 'floating-vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+import { Polish } from 'flatpickr/dist/l10n/pl'
 
-createInertiaApp({
-  resolve: (name) => {
-    const page = resolvePageComponent(
-      `./Pages/${name}.vue`,
-      import.meta.glob('./Pages/**/*.vue'),
-    )
-
-    page.then((module) => {
-      module.default.layout = module.default.layout || AppLayout
-    })
+const appName = import.meta.env.VITE_APP_NAME || 'Toby'
 
-    return page
+createInertiaApp({
+  title: (title) => title ? `${title} - ${appName}` : appName,
+  resolve: name => {
+    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
+    return pages[`./Pages/${name}.vue`]
   },
   setup({ el, App, props, plugin }) {
     createApp({ render: () => h(App, props) })
@@ -34,16 +25,12 @@ createInertiaApp({
         pauseOnFocusLoss: false,
       })
       .use(FloatingVue)
-      .component('InertiaLink', InertiaLink)
-      .component('InertiaHead', Head)
       .mount(el)
   },
-  title: title => `${title} - Toby`,
-})
-
-InertiaProgress.init({
-  delay: 0,
-  color: '#527ABA',
+  progress: {
+    delay: 0,
+    color: '#527ABA',
+  },
 })
 
 Flatpickr.localize(Polish)
diff --git a/setup b/setup
deleted file mode 100644
index b644f95a..00000000
--- a/setup
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-if [ ! -f ".env" ]; then
-   cp .env.example .env
-fi
-
-docker compose build --no-cache --pull
-docker compose up -d
-docker compose run --rm -u "$(id -u):$(id -g)" php composer install
-docker compose run --rm -u "$(id -u):$(id -g)" php php artisan key:generate
-docker compose run --rm -u "$(id -u):$(id -g)" php php artisan storage:link
-docker compose run --rm -u "$(id -u):$(id -g)" php php artisan migrate --seed
-docker compose run --rm -u "$(id -u):$(id -g)" node npm install
-docker compose run --rm -u "$(id -u):$(id -g)" node npm run dev
diff --git a/tailwind.config.js b/tailwind.config.js
index f409654e..2cd73722 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
+import forms from '@tailwindcss/forms'
+import typography from '@tailwindcss/typography'
 
-module.exports = {
+export default {
   content: [
     './resources/**/*.vue',
     './resources/**/*.js',
@@ -8,7 +9,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        sans: ['Inter var'],
       },
       colors: {
         'blumilk': {
@@ -28,7 +29,7 @@ module.exports = {
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
+    forms,
+    typography,
   ],
 }
diff --git a/tests/DuskTestCase.php b/tests/DuskTestCase.php
index 33c99bde..1cfcc8bd 100644
--- a/tests/DuskTestCase.php
+++ b/tests/DuskTestCase.php
@@ -20,6 +20,11 @@ public static function prepare(): void
         }
     }
 
+    protected static function runningInDocker(): bool
+    {
+        return isset($_ENV["DUSK_IN_DOCKER"]) && $_ENV["DUSK_IN_DOCKER"] === "true";
+    }
+
     protected function driver(): RemoteWebDriver
     {
         $options = (new ChromeOptions())->addArguments(
@@ -54,9 +59,4 @@ protected function hasHeadlessDisabled(): bool
         return isset($_SERVER["DUSK_HEADLESS_DISABLED"]) ||
             isset($_ENV["DUSK_HEADLESS_DISABLED"]);
     }
-
-    protected static function runningInDocker(): bool
-    {
-        return isset($_ENV["DUSK_IN_DOCKER"]) && $_ENV["DUSK_IN_DOCKER"] === "true";
-    }
 }
diff --git a/tests/Feature/Commands/Users/CreateUserCommandTest.php b/tests/Feature/Commands/Users/CreateUserCommandTest.php
index 45744978..6bf7a87c 100644
--- a/tests/Feature/Commands/Users/CreateUserCommandTest.php
+++ b/tests/Feature/Commands/Users/CreateUserCommandTest.php
@@ -15,6 +15,25 @@ class CreateUserCommandTest extends FeatureTestCase
 {
     use DatabaseMigrations;
 
+    public static function userRolesProvider(): Generator
+    {
+        yield "administrator role" => [
+            "role" => "administrator",
+        ];
+
+        yield "employee role" => [
+            "role" => "employee",
+        ];
+
+        yield "technical_approver role" => [
+            "role" => "technical_approver",
+        ];
+
+        yield "administrative_approver role" => [
+            "role" => "administrative_approver",
+        ];
+    }
+
     public function testUserCanBeCreated(): void
     {
         $this->artisan(CreateUser::class, ["email" => "test@example.com"])
@@ -43,25 +62,6 @@ public function testUserCanBeCreatedWithExpectedRole(string $role): void
         );
     }
 
-    public static function userRolesProvider(): Generator
-    {
-        yield "administrator role" => [
-            "role" => "administrator",
-        ];
-
-        yield "employee role" => [
-            "role" => "employee",
-        ];
-
-        yield "technical_approver role" => [
-            "role" => "technical_approver",
-        ];
-
-        yield "administrative_approver role" => [
-            "role" => "administrative_approver",
-        ];
-    }
-
     public function testUserWithTheSameEmailCannotBeCreated(): void
     {
         User::factory(
diff --git a/vite.config.js b/vite.config.js
index 0be4b033..f3f2e7f7 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,15 +1,18 @@
-import { defineConfig, loadEnv } from 'vite'
-import laravel from 'laravel-vite-plugin'
+import { defineConfig, loadEnv  } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import laravel from 'laravel-vite-plugin'
 import { networkInterfaces } from 'os'
 
 export default ({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
 
   return defineConfig({
+    build: {
+      outDir: './public/build/',
+    },
     server: {
       host: Object.values(networkInterfaces()).flat().find(i => i.family === 'IPv4' && !i.internal).address,
-      port: process.env.EXTERNAL_NODE_PORT,
+      port: process.env.VITE_PORT,
     },
     resolve: {
       alias: {
@@ -18,9 +21,7 @@ export default ({ mode }) => {
     },
     plugins: [
       laravel({
-        input: [
-          'resources/js/app.js',
-        ],
+        input: ['resources/css/app.css', 'resources/js/app.js'],
         refresh: true,
       }),
       vue({